exception (11.09.2013)
Thema: [CSS] Pure CSS Logo
-
11.09.2013, 13:07 #1
[CSS] Pure CSS Logo
Hallo,
habe vorher meine alten Webdesign-Projekte durchstöbert und habe aufeinmal Lust bekommen mich wieder mal
mit HTML/CSS3 zu beschäftigen. Rausgekommen ist ein Logo(oder auch ein Button) ohne einer einzigen Grafik.
Das hat natürlich seine Vorteile:
1.) Bessere Performance da keine Bilder geladen werden müssen
2.) Alles schnell und einfach per Code anpassbar(Text, Größe, Schriftformatierung, etc)
Und was ich Anfangs eigentlich garnicht glauben konnte ist, das im Internet Explorer 10 alles
ohne Probleme funktioniert!
URL: Pure CSS Logo
Falls euer Browser die Font nicht erkennt hier ein Screen:
http://nethox.bplaced.net/pureCssLogo/logoscreen.png
Oder die Font direkt saugen:
http://nethox.bplaced.net/pureCssLogo/crixel.ttf
Feedback erwünscht
greetsGeändert von exception (11.09.2013 um 13:08 Uhr)
Ich will Geld haben und zwar so viel, das ich auch mal sagen kann das es Wichtigeres gibt...
-
11.09.2013, 13:15 #2
- Registriert seit
- 26.10.2011
- Beiträge
- 1.196
- Blog Entries
- 2
Thanked 1.596 Times in 725 PostsAW: [CSS] Pure CSS Logo
Sieht gut aus.
Für die untere Leiste brauchst du dank CSS3 aber keine 3 verschiedene Container mehr. Da reicht auch einer.
background-image:
linear-gradient(to right,
#47669E, #47669E 33%,
#547ABF 33%, #547ABF 66%,
#628FE3 66%, #628FE3 100%);
Nur so als Tipp. Als Beispiel kannst du dir das hier ansehen.
/edit: Wie hast du beim 2. und 3. Button den Rand oben gemacht? Bin ich blind? Ich seh dazu keine Eigenschaft? xD
/edit²: Ah Danke.Hab mich zu sehr auf die CSS-Eigenschaften konzentriert
Geändert von patlux (11.09.2013 um 13:35 Uhr)
-
11.09.2013, 13:32 #3
AW: [CSS] Pure CSS Logo
Danke erstmal für deinen Tipp! Werd ich mir gleich anschauen
Nur der erste Button hat die Eigenschaften vom Stylesheet. Bei den restlichen 3 hab ich's einfach
mittels style="" direkt ins HTML-File(bzw. in den DIV-Tag) geklatscht. Frag mich gerade wie du das
nicht sehen kannst
//edit
Nach ein bisschen herumprobiererei hab ich's endlich geschafft das es mit der Eigenschaft "linear-gradient" funktioniert. Wie ich's geschafft habe weiß ich aber irgendwie selber nicht weil mich die Werte und die Anzahl der Parameter irgendwie verwirren..^^
PHP-Code:background-image: linear-gradient(to right, #47669E, #47669E 33%, #547ABF 33%, #547ABF 80%, #628FE3 66%);
Geändert von exception (11.09.2013 um 14:31 Uhr)
Ich will Geld haben und zwar so viel, das ich auch mal sagen kann das es Wichtigeres gibt...
-
11.09.2013, 15:02 #4
- Registriert seit
- 26.10.2011
- Beiträge
- 1.196
- Blog Entries
- 2
Thanked 1.596 Times in 725 PostsAW: [CSS] Pure CSS Logo
De fehlt noch ein Parameter damit wirklich syntaktisch korrekt ist:
// ..
background-image: linear-gradient(to right, #47669E, #47669E 33%, #547ABF 33%, #547ABF 80%, #628FE3 80%, #628FE3);
Die erste Farbe fängt immer bei 0% an, deswegen kann man da die Prozent -Angabe auch weglassen. Genauso bei der allerletzten Farbe.
Hachja, CSS3 macht echt SpaßGeändert von patlux (11.09.2013 um 15:03 Uhr)
-
The Following User Says Thank You to patlux For This Useful Post:
Ähnliche Themen
-
Kaspersky Pure 2.0
Von Deluxe im Forum SoftwareAntworten: 1Letzter Beitrag: 02.06.2013, 16:05 -
Logo.
Von h00r4y im Forum ShowroomAntworten: 2Letzter Beitrag: 23.04.2012, 19:42 -
Logo
Von Ridiculum im Forum ShowroomAntworten: 3Letzter Beitrag: 24.03.2012, 07:07 -
[S] Logo
Von Boone im Forum Angebot & NachfrageAntworten: 0Letzter Beitrag: 22.12.2011, 21:07
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.