Thema: U-Hacks-Logo in CSS3
-
01.12.2011, 23:31 #1
U-Hacks-Logo in CSS3
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>
Geändert von Sky.NET (02.12.2011 um 07:50 Uhr)
-
The Following 3 Users Say Thank You to Sky.NET For This Useful Post:
-
02.12.2011, 00:45 #2
AW: U-Hacks-Logo in CSS3
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
-
The Following User Says Thank You to AFU For This Useful Post:
Sky.NET (02.12.2011)
-
02.12.2011, 07:47 #3
AW: U-Hacks-Logo in CSS3
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.
-
02.12.2011, 08:10 #4MardcoreGast
AW: U-Hacks-Logo in CSS3
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.
-
The Following User Says Thank You to Mardcore For This Useful Post:
Sky.NET (03.12.2011)
-
02.12.2011, 17:08 #5
AW: U-Hacks-Logo in CSS3
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.
Sehe hier keinen Flame, aber ich nehm das mal als Kompliment, danke.
-
03.12.2011, 16:09 #6MardcoreGast
AW: U-Hacks-Logo in CSS3
Ä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.
-
The Following User Says Thank You to Mardcore For This Useful Post:
Sky.NET (03.12.2011)
-
04.12.2011, 14:34 #7
AW: U-Hacks-Logo in CSS3
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>
-
The Following User Says Thank You to xTracZ For This Useful Post:
Sky.NET (04.12.2011)
Ähnliche Themen
-
U-hacks.net Logo.
Von x failstar im Forum ShowroomAntworten: 15Letzter Beitrag: 06.05.2012, 16:22 -
C# U-Hacks Logo
Von Saad im Forum .NetAntworten: 6Letzter Beitrag: 01.05.2012, 21:12 -
Logo für U-Hacks
Von Bossover im Forum ShowroomAntworten: 3Letzter Beitrag: 30.04.2012, 14:48 -
[VB.NET] Consolen Anwendung U-Hacks Logo
Von Sploxfreak im Forum .NetAntworten: 9Letzter Beitrag: 20.03.2012, 18:04 -
[U-Hacks] Neues Logo
Von Bossover im Forum ShowroomAntworten: 3Letzter Beitrag: 21.01.2012, 21:05
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.