U-Hacks-Logo in CSS3

**Sky.NET** · 01.12.2011, 23:31

HHatte die Fonts nicht da und hab irgendwelche passenden rausgesucht um weiterarbeiten zu können, wenn UH will, können die das ja tauschen, mach Anpassungen leichter, zusätzliche Effekte können mal eben mit 2 Zeilen Code eingebaut werden etc., find ich ne edlere Lösung als ein Bild...

Btw. ich weiß das da bei dem 'U-Hacks' ein Vertical Radial fehlt, der wird aber noch nicht unterstützt in Firefox, nur in irgendnem anderen Browser, also wayne... werde das später dann evtl. anpassen

Vorschau (nur für Mozilla, kb mehr gehabt die anderen Tags da einzufügen):
http://k-scene.net/uhlogo/

Quelltext:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
	#bg{
		background: -moz-radial-gradient(171px 30px, cover, #53626D, #374148);	
		width:400px;
		height:122px;
		box-shadow:inset -5px -5px 1px #17191A, inset -10px -10px 1px #31393E,  inset -12px -12px 1px #333536;
	}
	#uhBox{
		padding:0px;
		margin:0px;
		background: -moz-radial-gradient(50% 50%, cover, #FFF, #888888);	
		width:50px;
		height:50px;
		top:50px;
		left:20px;
		position:absolute;
		box-shadow:inset -1px -1px 5px #FFF,  1px 1px 6px #000;	
		font-family: Letters, sans-serif;
		font-size:2.2em;
	}

	#uhBox #uLetter{
		top:-3px;
		left:3px;
		position:absolute;
		color:#2E2E2E;
		text-shadow:  -1px -1px 1px #000,1px -1px 1px #6F6F6F;
	}
	#uhBox #hLetter{
		left:27px;
		top:15px;
		position:absolute;
		color:#D28DE9;
		text-shadow:  -1px -1px 1px #825990,1px -1px 1px #FFF;
	}

	#u{
		font-family: UHLogo, sans-serif;
		font-size:2.8em;
		font-weight:bold;
		left:85px;
		top:35px;
		position:absolute;
		text-shadow:  3px 3px 1px #000, -3px -3px 1px #000, -3px 3px 1px #000, 3px -3px 1px #000, 3px 3px 5px #000;
		color:#999999;
	}

	#hacks{
		font-family: UHLogo, sans-serif;
		font-size:2.8em;
		font-weight:bold;
		position:absolute;
		top:35px;
		left:140px;
		color:#CE8AE5;
		text-shadow:  3px 3px 1px #000, -3px -3px 1px #000, -3px 3px 1px #000, 3px -3px 1px #000, 3px 3px 5px #000;

	}

	#net{
		font-family: net, sans-serif;
		position:absolute;
		top:68px;
		left:285px;
		color:#A4A4A4;
		text-shadow: 3px 3px 3px #000;
	}

	#v2{
		font-family: UHLogo, sans-serif;
		left:285px;
		top:39px;
		font-weight:bold;
		position:absolute;
		color:#C89FD7;
		text-shadow: 3px 3px 2px #000;
	}

	#gradientline{
		background: -moz-radial-gradient(50% 50%, farthest-side, rgba(247,209,255,255), rgba(0,0,0,0));
		width:250px;
		height:7px;
		top:111px;
		left:75px;
		position:absolute;
	}

	#motto{
		position:absolute;
		font-family: motto, sans-serif;
		font-size:0.8em;
		color:white;
		font-weight:lighter;
		left:85px;
		top:96px;
		text-shadow: 3px 3px 1px #000;
	}

	@font-face{
		font-family: Letters;
		src: url('http://k-scene.net/uhlogo/imagine_font.ttf');
	}
	@font-face{
		font-family: UHLogo;
		src: url('http://k-scene.net/uhlogo/uhacks-DustHomeMedium.ttf');
	}
	@font-face{
		font-family: net;
		src: url('http://k-scene.net/uhlogo/dotnet-Cyrivendell.ttf');
	}
	@font-face{
		font-family: v2;
		src: url('http://k-scene.net/uhlogo/dotnet-Cyrivendell.ttf');
	}
	@font-face{
		font-family: motto;
		src: url('http://k-scene.net/uhlogo/motto-visitor1.ttf');
	}

	</style>
	</head>
	<body>
		<div id="bg">
			<div id="uhBox">
				<div id="uLetter">U</div>
				<div id="hLetter">H</div>
			</div>
			<div id="u">
				U-
			</div>
			<div id="hacks">		
				HACKS
			</div>	
			<div id="net">
				.net
			</div>
			<div id="v2">
				V2
			</div>
			<div id="motto">No #1 HACKING SOURCE | UNITED TO HACK</div>
			<div id="gradientline"></div>	
		</div>
	</body>
</html>

**AFU** · 02.12.2011, 00:45

Ich will ja nicht kleinlich sein, hab von Grafiken keine Ahnung, aber maße mir mal an, das etwas zu kritisieren:

Das "U" steht links aus dem Quadrat raus=>schaut komisch aus=>AbsichT?
Beim "H" links ist auf der rechten Seite ein weißer Streifen der da wohl nicht hingehört
Das ".net" sollte von der Höhe her mit dem Schriftzug "UHACKS" gleich sein
Gleiches gilt für "V2"
Der weiße Streifen unter dem Schriftzug darf ruhig etwas länger sein.

Ansonsten tolle Arbeit

**Sky.NET** · 02.12.2011, 07:47

Das hab ich schnell hingeklatscht, und das ist keine Grafik, das ist CODE (google ma CSS3).
Wenn irgendwas also 1 Pixel zu weit von etwas Anderem weg ist, trägt man halt 1 Pixel mehr ein usw.

Mardcore · 02.12.2011, 08:10

Zu dem was AFU schrieb kommt noch hinzu: Das - ist zu Hoch und zu Breit. :> xD
Aber da ich keine Ahnung von Designen habe, geschweige denn CSS3 finde ich es trotzdem toll.

**Sky.NET** · 02.12.2011, 17:08

Zitat von Mardcore

Zu dem was AFU schrieb kommt noch hinzu: Das - ist zu Hoch und zu Breit. :> xD
Aber da ich keine Ahnung von Designen habe, geschweige denn CSS3 finde ich es trotzdem toll.

Du findest es nur toll weil du keine Ahnung davon hast? Witzig...
Btw. ich hatte oben geschrieben, dass ich die Fonts nicht habe, die hier verwendet wurden, daher is klar, dass die Schrift nicht 1:1 stimmt.

Zitat von string

um sowas zu schaffen braucht man schon ein Gehirn, wenn noobs flamen sollen sie es mal zuerst versuchen.

Sehe hier keinen Flame, aber ich nehm das mal als Kompliment, danke.

Mardcore · 03.12.2011, 16:09

Ähm, du hast meinen obigen Beitrag falsch verstanden (und ich mich auch undeutlich ausgedrückt). Ich finde es trotz der Abweichungen toll, weil du ja alles nach 'Gefühl' geschrieben hast.

**xTracZ** · 04.12.2011, 14:34

Hab die Positionen mal geändert! (nicht viel Arbeit, sieht aber besser aus)

http://mecq.de/net.php

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <style type="text/css">

    #bg{

        background: -moz-radial-gradient(171px 30px, cover, #53626D, #374148);    

        width:400px;

        height:122px;

        box-shadow:inset -5px -5px 1px #17191A, inset -10px -10px 1px #31393E,  inset -12px -12px 1px #333536;

    }

    #uhBox{

        padding:0px;

        margin:0px;

        background: -moz-radial-gradient(50% 50%, cover, #FFF, #888888);    

        width:50px;

        height:50px;

        top:50px;

        left:20px;

        position:absolute;

        box-shadow:inset -1px -1px 5px #FFF,  1px 1px 6px #000;    

        font-family: Letters, sans-serif;

        font-size:2.2em;

    }



    #uhBox #uLetter{

        top:-3px;

        left:3px;

        position:absolute;

        color:#2E2E2E;

        text-shadow:  -1px -1px 1px #000,1px -1px 1px #6F6F6F;

    }

    #uhBox #hLetter{

        left:23px;

        top:15px;

        position:absolute;

        color:#D28DE9;

        text-shadow:  -1px -1px 1px #825990,1px -1px 1px #FFF;

    }



    #u{

        font-family: UHLogo, sans-serif;

        font-size:2.8em;

        font-weight:bold;

        left:85px;

        top:35px;

        position:absolute;

        text-shadow:  3px 3px 1px #000, -3px -3px 1px #000, -3px 3px 1px #000, 3px -3px 1px #000, 3px 3px 5px #000;

        color:#999999;

    }



    #hacks{

        font-family: UHLogo, sans-serif;

        font-size:2.8em;

        font-weight:bold;

        position:absolute;

        top:35px;

        left:140px;

        color:#CE8AE5;

        text-shadow:  3px 3px 1px #000, -3px -3px 1px #000, -3px 3px 1px #000, 3px -3px 1px #000, 3px 3px 5px #000;



    }



    #net{

        font-family: net, sans-serif;

        position:absolute;

        top:63px;

        left:295px;

        color:#A4A4A4;

        text-shadow: 3px 3px 3px #000;

    }



    #v2{

        font-family: UHLogo, sans-serif;

        left:295px;

        top:39px;

        font-weight:bold;

        position:absolute;

        color:#C89FD7;

        text-shadow: 3px 3px 2px #000;

    }



    #gradientline{

        background: -moz-radial-gradient(50% 50%, farthest-side, rgba(247,209,255,255), rgba(0,0,0,0));

        width:250px;

        height:7px;

        top:111px;

        left:75px;

        position:absolute;

    }



    #motto{

        position:absolute;

        font-family: motto, sans-serif;

        font-size:0.8em;

        color:white;

        font-weight:lighter;

        left:85px;

        top:96px;

        text-shadow: 3px 3px 1px #000;

    }



    @font-face{

        font-family: Letters;

        src: url('http://k-scene.net/uhlogo/imagine_font.ttf');

    }

    @font-face{

        font-family: UHLogo;

        src: url('http://k-scene.net/uhlogo/uhacks-DustHomeMedium.ttf');

    }

    @font-face{

        font-family: net;

        src: url('http://k-scene.net/uhlogo/dotnet-Cyrivendell.ttf');

    }

    @font-face{

        font-family: v2;

        src: url('http://k-scene.net/uhlogo/dotnet-Cyrivendell.ttf');

    }

    @font-face{

        font-family: motto;

        src: url('http://k-scene.net/uhlogo/motto-visitor1.ttf');

    }



    </style>

    </head>

    <body>

        <div id="bg">

            <div id="uhBox">

                <div id="uLetter">U</div>

                <div id="hLetter">H</div>

            </div>

            <div id="u">

                U-

            </div>

            <div id="hacks">        

                HACKS

            </div>    

            <div id="net">

                .net

            </div>

            <div id="v2">

                V2

            </div>

            <div id="motto">No #1 HACKING SOURCE | UNITED TO HACK</div>

            <div id="gradientline"></div>    

        </div>

    </body>

</html>

U-Labs

Account-Boerse

U-IMG

Thema: U-Hacks-Logo in CSS3

U-Hacks-Logo in CSS3

The Following 3 Users Say Thank You to Sky.NET For This Useful Post:

AW: U-Hacks-Logo in CSS3

The Following User Says Thank You to AFU For This Useful Post:

AW: U-Hacks-Logo in CSS3

AW: U-Hacks-Logo in CSS3

The Following User Says Thank You to Mardcore For This Useful Post:

AW: U-Hacks-Logo in CSS3

AW: U-Hacks-Logo in CSS3

The Following User Says Thank You to Mardcore For This Useful Post:

AW: U-Hacks-Logo in CSS3

The Following User Says Thank You to xTracZ For This Useful Post:

Ähnliche Themen

U-hacks.net Logo.

C# U-Hacks Logo

Logo für U-Hacks

[VB.NET] Consolen Anwendung U-Hacks Logo

[U-Hacks] Neues Logo