1. #1
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    198
    Thanked 57 Times in 36 Posts

    Standard [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

    greets
    Geä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...

  2. #2
    Avatar von patlux
    Registriert seit
    26.10.2011
    Beiträge
    1.195
    Thanked 1.596 Times in 725 Posts
    Blog Entries
    2

    Standard AW: [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)

  3. #3
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    198
    Thanked 57 Times in 36 Posts

    Standard AW: [CSS] Pure CSS Logo

    Zitat Zitat von patlux Beitrag anzeigen
    /edit: Wie hast du beim 2. und 3. Button den Rand oben gemacht? Bin ich blind? Ich seh dazu keine Eigenschaft? xD
    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-imagelinear-gradient(to right#47669E, #47669E 33%, #547ABF 33%, #547ABF 80%, #628FE3 66%); 
    Ist Optisch gesehen natürlich um einiges schöner da gleich 3 Div's wegfallen.
    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...

  4. #4
    Avatar von patlux
    Registriert seit
    26.10.2011
    Beiträge
    1.195
    Thanked 1.596 Times in 725 Posts
    Blog Entries
    2

    Standard AW: [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);
    Eigentlich recht einfach: (#startfarbe startposition%, #endfarbe endposition%, #startfarbe startposition%, #endfarbe endposition%, ...)

    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)

  5. The Following User Says Thank You to patlux For This Useful Post:

    exception (11.09.2013)

Ähnliche Themen

  1. Kaspersky Pure 2.0
    Von Deluxe im Forum Software
    Antworten: 1
    Letzter Beitrag: 02.06.2013, 16:05
  2. Logo.
    Von h00r4y im Forum Showroom
    Antworten: 2
    Letzter Beitrag: 23.04.2012, 19:42
  3. Logo
    Von Ridiculum im Forum Showroom
    Antworten: 3
    Letzter Beitrag: 24.03.2012, 07:07
  4. [S] Logo
    Von Boone im Forum Angebot & Nachfrage
    Antworten: 0
    Letzter Beitrag: 22.12.2011, 21:07
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.