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

    Standard [HTML5/CSS3] UHacks Elements

    Heyho,

    ich hatte ein bisschen langeweile und wollte mal bisschen was mit HTML5 und CSS3 rumexperimentieren. Da man damit nun einfache Grafiken ersetzen kann, ohne irgendwelche grafischen Fähigkeiten zu besitzen, habe ich mal ein paar grafische Elemente der U-Hacks.net Seite genommen und in HTML5 und CSS3 umgesetzt.

    Fangen wir mit der Navigation oben im Header an.

    Original:
    Klicke auf die Grafik für eine größere Ansicht 

Name:	topnavi_orig.png 
Hits:	379 
Größe:	11,9 KB 
ID:	3841

    HTML5 & CSS3:
    Klicke auf die Grafik für eine größere Ansicht 

Name:	topnavi.png 
Hits:	354 
Größe:	10,3 KB 
ID:	3842


    Diejenigen, die bisher nicht verstanden haben, was ich getan habe, werden sich nun fragen: "hää wo ist denn da der Unterschied?".
    Genau das ist der Sinn der Sache. Der Unterschied soll so gering wie möglich sein.

    Der Bereich im Original wurde mit Grafiken umgesetzt. Die Buttons(=Knöpfe) sowie der Hintergrund - alles mit Grafiken.
    Im Gegensatz zum Original wurde der Bereich aus dem zweiten Bild mit HTML5 und CSS3 realisiert - also nur mit Code/Text.

    Der Code für den grauen Verlauf(der Hintergrund von den Navigations-Buttons):

    header nav#top {
    height: 40px;
    background-image:
    -webkit-gradient(linear, left top, left bottom, from(#323232), to(#222222));
    background-image:
    -webkit-linear-gradient(top, #323232, #222222);
    background-image:
    -moz-linear-gradient(top, #323232, #222222);
    background-image:
    -o-linear-gradient(top, #323232, #222222);
    background-image:
    -ms-linear-gradient(top, #323232, #222222);
    }


    Der Code der Buttons sieht so aus:

    ----------

    HINWEIS: Den Teil mit
    Code:
    <acronym title="U-Hacks">uh</acronym>
    bitte mit "uh" ersetzen. Da liegt wohl ein Fehler vom Forum vor xD
    Den Code ohne diesen Fehler könnt ihr auch vom Anhang runterladen.

    ---------

    Button-CSS-Code:
    /*******************************
    ****** navigation button ******
    *******************************/
    a.uh-btn-navi {
    border: 1px solid #0d0d0d;
    color: #016c90;
    font-size: 12px;
    font-family: "Arial";
    font-weight: bold;
    text-decoration: none;

    padding: 5px 18px 5px 20px;

    box-shadow:
    inset 1px 1px 0px #3a3a3a,
    inset -1px -1px 0px #3a3a3a;

    background-image:
    -webkit-gradient(linear, left top, left bottom, from(#2d2d2d), color-stop(0.53, #262626), color-stop(0.53, #1a1a1a), to(#131313));
    background-image:
    -webkit-linear-gradient(top, #323232, #262626 53%, #1a1a1a 53%, #131313);
    background-image:
    -moz-linear-gradient(top, #323232, #262626 53%, #1a1a1a 53%, #131313);
    background-image:
    -o-gradient(top, #323232, #262626 53%, #1a1a1a 53%, #131313);
    background-image:
    -ms-gradient(top, #323232, #262626 53%, #1a1a1a 53%, #131313);
    }

    a.uh-btn-navi:hover {
    color: #676767;
    box-shadow:
    inset 1px 1px 0px #515151,
    inset -1px -1px 0px #515151;
    }


    Die Implementation im HTML-Dokument sieht dann so aus:
    Code:
    <a class="uh-btn-navi" href="#">TEXT</a>
    Endergebniss:
    Name:  btn_navi_TEXT.png
Hits: 426
Größe:  1,6 KB

    Das Ganze habe ich auch mit anderen Elementen aus der U-Hacks Seite gemacht.

    Alles komplett könnt ihr euch auf folgender Seite angucken:

    Demo
    (Getestet unter Chromium 26+ und Firefox 21+).

    Oder ihr ladet das Archiv im Anhang herunter.

    Ich wollt eigentlich mehr machen. Aber der Aufwand ist größer als ich zuerst dachte. Besonders, diese verschiedene Tags von den Browser(bsp.: -moz-linear-gradient für Mozilla Firefox), finde ich schwachsinnig. Das sollte alles vereinheitlicht werden. Damit nur ein Tag nötig ist.

    So, das wäre meine erste Arbeit mit HTML5 und CSS3
    Auf jeden Fall sehr cool gemacht die neuen Features von HTML und CSS.
    Angehängte Dateien Angehängte Dateien
    Geändert von patlux (29.05.2013 um 19:01 Uhr) Grund: demolink bearbeitet

  2. The Following 10 Users Say Thank You to patlux For This Useful Post:

    Chrissy (18.05.2013), Dbzfreak1337 (19.05.2013), Devon (18.05.2013), DMW007 (19.05.2013), Fif (18.05.2013), Max899 (20.05.2013), milchbubix (19.05.2013), rVs14 (18.05.2013), Snees (18.05.2013), uncopyable (18.05.2013)

  3. #2

    Registriert seit
    17.09.2012
    Beiträge
    1.865
    Thanked 384 Times in 258 Posts

    Standard AW: [HTML5/CSS3] UHacks Elements

    Kurze Frage mich würde interessieren wie da der Unterschied bei den ladezeiten ist.

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

    Standard AW: [HTML5/CSS3] UHacks Elements

    Kommt auf die Anzahl der Bilder sowie an die Gesamtgröße der Bilder an, die man damit ersetzen würde. Bei U-Hacks bspw. würde das überhaupt keinen Unterschied machen - zumindest nicht bei einer DSL-Leitung. Auf einem Smartphone mit Edge-Verbindung sieht das dann vielleicht wieder anders aus. Aber auch nur im Millisekunden-Bereich.

    Man macht das eigentlich auch nicht aus dem Grund. Sondern viel mehr wegen der schnellen Änderungsmöglichkeiten. Man braucht nun keinen Designer mehr um Kleinigkeiten zu erledigen. Da reichen jetzt ein paar Zeilen Code. Hübsche kleine Effekte sind außerdem nun auch ohne Javascript möglich.

    Ich mach übrigens noch an weiteren Elementen aus U-Hacks weiter. Außerdem werde ich die bisherigen und die nächsten mit schönen Effekten ausstatten :p

    Stell ich dann hier auch noch vor.
    Geändert von patlux (18.05.2013 um 22:22 Uhr)

  5. #4

    Registriert seit
    28.10.2011
    Beiträge
    625
    Thanked 279 Times in 168 Posts

    Standard AW: [HTML5/CSS3] UHacks Elements

    Sehe grade, dass du des Gradient als image setzt. Kannte ich noch nicht Kannte es bis dato nur als color, nicht aber als image

    Im übrigen sehe ich grade ein Board-Fail
    a.<acronym title="U-Hacks">uh</acronym>-btn-navi:hover {
    Da wird die source wohl auch replaced. Ist ja mal blöd
    Geändert von Bubble Gum (18.05.2013 um 22:26 Uhr)

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

    Standard AW: [HTML5/CSS3] UHacks Elements

    Jep, den Board-Fail hab ich über den Source schon "gemeldet"
    --
    Ich hatte am Anfang zuerst nur "background" verwendet. Als ich mir dann mehrere Beispiele ansah, fiel mir auf dass die meisten "background-image" verwenden.
    "background-color" in Verbindung mit Verläufen hab ich allerdings noch nie gesehen ^^

    Was ist denn richtig?

  7. #6

    Registriert seit
    28.10.2011
    Beiträge
    625
    Thanked 279 Times in 168 Posts

    Standard AW: [HTML5/CSS3] UHacks Elements

    Ich meine mittlerweile alles
    Ich selber arbeite auch mit CSS3, auch Crossbrowsermäßßig. Dabei verwende ich Gradiens auch nur bei background generell. Ob color oder image - Wenn es funktioniert ist's ja wurscht

    Müsste mir mal die Spezifikationen anschauen, da sollte des ja stehen, was richhtig ist bzw. was möglich wäre.

    Im übrigen nutze ich immer eine eigene Stylesheet für denn Crossbrowser-mist. Warum? Die kann man schön ausblenden lassen, wenn ein Validator drüber geschoben wird

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

    Standard AW: [HTML5/CSS3] UHacks Elements

    Anscheinend gibt es über die Verläufe noch keine genaue Spezifikation. Auf w3school.com findet sich nicht einmal ein Eintrag zu den Verläufen. Ich hoffe es wird sich auf ein einziges "Tag" geeinigt xD
    Copy&Paste stinkt mir damit zum Himmel Total nervig .. :p
    Geändert von patlux (18.05.2013 um 22:53 Uhr)

  9. #8

    Registriert seit
    28.10.2011
    Beiträge
    625
    Thanked 279 Times in 168 Posts

    Standard AW: [HTML5/CSS3] UHacks Elements

    w3school ist auch der falsche Ansprechpartner

    Wie wäre es mit dem W3C?
    CSS Image Values and Replaced Content Module Level 3

    Im übrigen wird dort nur "background" mit Gradient definiert (unter 4. Gradients).
    Die Browserspezifischen Properties (es sind übrigens keine "Tags") wie -o, -moz, -webkit, -ms und was nicht alles sind eher "vorreiter". Zwar blöd, finden nicht nur wir, aber des waren halt die Vorreiter der Funktionen.

    Auch recht simple zu erklären:
    Mozilla Beispielsweise hat eine "neue Idee" - Nennen wir diese mal "Gradiens". Da diese voller Hoffnungen sind und mal wieder spaß an der Arbeit hat, implementieren diese die neue Funktion mit eigenem Namen (-moz-linear-gradient). Warum? Da es bis dato keine Spezifikation im W3 existieren. Das ganze wird dann in die Workflow vom W3 vorgestellt und dann erst übernommen. Bis des aber übernommen wird kann es jahre dauern.

    Da nun auch Webkit und Opera beispielsweise diese Spezifikation super finden, diese aber immer noch nicht im W3 ausgearbeitet wurde um einen Standard zu definieren, so implementieren diese das Feature auch unter einem eigenem Namen.

  10. The Following User Says Thank You to Bubble Gum For This Useful Post:

    patlux (18.05.2013)

  11. #9
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    6.081
    Thanked 9.119 Times in 2.996 Posts
    Blog Entries
    5

    Standard AW: [HTML5/CSS3] UHacks Elements

    Zitat Zitat von patlux Beitrag anzeigen
    Bei U-Hacks bspw. würde das überhaupt keinen Unterschied machen - zumindest nicht bei einer DSL-Leitung. Auf einem Smartphone mit Edge-Verbindung sieht das dann vielleicht wieder anders aus. Aber auch nur im Millisekunden-Bereich.
    Das kann schon deutlich spürbare Geschwindigkeitsvorteile bringen. Natürlich nur wenn man es Flächendeckend einsetzt, ein oder zwei Grafiken die ersetzt werden machen sich natürlich nicht sonderlich bemerkbar. Unsere Designs wurden aus Kostengründen vergleichsweise billig gecodet, d.H. wir hatten eine PSD und daraus wurde halt so ziemlich alles was sich nicht direkt als Farbe in CSS exportieren ließ in Grafiken gesliced. Als Resultat besteht der Aufruf der Startseite aus knapp 60 Anfragen, von denen alleine locker 3/4 nur Grafiken sind. Wenn man jetzt als Beispiel 10 Grafiken durch eine CSS-Datei ersetzt, verringert sich die Ladezeit da eine größere Datei schneller ausgeliefert werden kann als 10 kleine.

    Daher habe ich testweise auch schon auf Sprites gesetzt, zb bei dem Designswitcher:



    Ist aber nicht die beste Lösung. Die Umstellung ist aufwändig und bei Hintergrundgrafiken die sich wiederholen muss man Extras beachten. Sehr unflexibel ist das natürlich auch falls man mal an einzelnen Grafiken Änderungen vornehmen will. Das nginx-Modul hatte ich auch schon im Testeinsatz, erzielt in dem Fall aber auch nicht so richtig den gewünschten Effekt, daher wird beides aktuell nicht produktiv eingesetzt.

    Zitat Zitat von patlux Beitrag anzeigen
    Man macht das eigentlich auch nicht aus dem Grund. Sondern viel mehr wegen der schnellen Änderungsmöglichkeiten.
    Das wäre der nächste Grund, man ist mit CSS viel flexibler. Hatte auch schon vor zumindest einzelne Elemente durch CSS zu ersetzen, bis jetzt aber noch nicht wirklich dazugekommen. Ein Beispiel wo das Sinn macht wäre zb die Anzeige der PostID:



    Da hat der Coder sinnvollerweise eine Grafik mit fester Größe gesetzt. In großen Threads (AB Supportthread, Smalltalkthread usw) ist die Zahl größer wie die Grafik, was so natürlich nicht ohne weiteres sinnvoll angepasst werden kann.
    Auf jeden Fall cool, dass sich jemand damit beschäftigt. Wenn du nix dagegen hast würde ich deine Ergebnisse dann auch einsetzen.


  12. The Following 4 Users Say Thank You to DMW007 For This Useful Post:

    Dbzfreak1337 (19.05.2013), Devon (19.05.2013), Max899 (24.05.2013), patlux (19.05.2013)

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

    Standard AW: [HTML5/CSS3] UHacks Elements

    Du kannst sie für U-Hacks verwenden, dagegen hab ich nichts.

    Da fiel mir grad ein dass es das Design auch in Orange gibt. Das erledig ich auch gleich mal. Die Grafik mit der Post-ID werd ich auch mal versuchen umzusetzen.

    /edit: Könnt etwas dauern, hab noch andere Dinge zu erledigen xD
    Geändert von patlux (20.05.2013 um 22:22 Uhr)

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

    DMW007 (19.05.2013)

Seite 1 von 2 12 Letzte

Ähnliche Themen

  1. [S] Umfangreiches eBook,Video ueber CSS3&HTML5
    Von derk1ng im Forum Webentwicklung
    Antworten: 0
    Letzter Beitrag: 02.09.2013, 00:46
  2. HTML5 + CSS3 - Blog Layout
    Von Snees im Forum HTML
    Antworten: 0
    Letzter Beitrag: 17.08.2012, 12:35
  3. Antworten: 7
    Letzter Beitrag: 04.03.2012, 17:01
  4. U-Hacks-Logo in CSS3
    Von Sky.NET im Forum CSS
    Antworten: 6
    Letzter Beitrag: 04.12.2011, 14:34

Stichworte

Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.