SIEBEN – WordPress-Theme | Olli's Theme-Testblog

  • Mein Facebook-Profil
  • Mein Twitter-Profil
  • Mein Google+-Profil
  • Mein Xing-Profil
  • Mein Last.fm-Profil
  • Mein Youtube-Profil
  • Hol dir den RSS-Feed
Navigation anzeigen ↓
  • Herzlich willkommen
  • Shortcodes
  • Über mich
  • Artikelübersicht
  • Gaming
    • LittleBigPlanet: Die Geschichte von Sackboy
  • Gästebuch
  • Impressum
  • ↑ Menü schließen

    Meistkommentierte Artikel

    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 1
      53
    • 14. Mai 2010
      [WordPress] Ein Gästebuch ohne Plugins
      27
    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 2
      15
    • 29. Juli 2011
      Hannspree Hannspad SN10T1 und die Custom Roms
      12

    [CSS3] WordPress-Banner mit Pseudoelementen

    6. April 2012 0 Webdesign css | demo | html | internet | tutorial | wordpress

    Ich habe vor kurzem auf einer Webseite ein hängendes Werbebanner mit verschieden angeordneten Buchstaben gesehen, welches als Bilddatei eingebunden wurde. Sah klasse aus und da habe ich mir gedacht, dass das auch per CSS3 – gänzlich ohne Grafikdateien – umgesetzt werden könnte. Also habe ich mich mal hingesetzt und dabei kam dann das hier raus:

    Habt ihr Lust das Banner nachzubauen?

    Grundlegendes

    Wir legen zunächst einen Div-Container an, in den wir alle weiteren Elemente einbauen.

    Der Container bekommt eine feste Breite (900 Pixel) und Höhe (200 Pixel). Als Hintergrund definieren wir einen schicken radialen Hintergrundfarbverlauf in Blautönen. Dazu kommt noch ein dezenter Schlagschatten.

    .banner {
    	position: relative;
    	width: 900px;
    	height: 200px;
    	margin: 50px auto;
    	background: #f0f9ff;
    	background: -moz-radial-gradient(center, ellipse cover,  #f0f9ff 0%, #2789b6 100%);
    	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f0f9ff), color-stop(100%,#2789b6));
    	background: -webkit-radial-gradient(center, ellipse cover,  #f0f9ff 0%,#2789b6 100%);
    	background: -o-radial-gradient(center, ellipse cover,  #f0f9ff 0%,#2789b6 100%);
    	background: -ms-radial-gradient(center, ellipse cover,  #f0f9ff 0%,#2789b6 100%);
    	background: radial-gradient(center, ellipse cover,  #f0f9ff 0%,#2789b6 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#2789b6',GradientType=1 );
    	box-shadow: 0 0 15px #333;
    	overflow: hidden;
    }

    Die einzelnen Buchstaben

    Wir definieren einen weiteren Container, in den wir die einzelnen Buchstaben anordnen werden. Auch dieser bekommt eine feste Breite (780 Pixel), um ihn mittels margin innerhalb des übergeordneten Containers zentrieren zu können.

    .banner .inhalt {
    	width: 780px;
    	margin: 0 auto;
    }

    Widmen wir uns nun den einzelnen Buchstaben des Banners. Wir fügen diese jeweils als Absatz (p) ein. Damit die Buchstaben auch horizontal angeordnet werden, floaten wir sie nach links. Der Optik wegen kommt noch einen Rahmen oben und unten hinzu.

    .banner .inhalt p {
    	position: relative;
    	float: left;
    	font-weight: bold;
    	font-size: 64px;
    	padding: 25px 15px 15px 15px;
    	border-top: 5px solid #2789B6;
    	border-bottom: 5px solid #2789B6;
    	background: #fff;
    	margin: 40px 15px 0 0;
    }

    Wo wir gerade bei der Optik sind, definieren wir einen Box-Schatten nach außen sowie einen Schatten nach innen, der den Buchstaben-Elementen einen „Used“-Look gibt. Auch der Text soll einen Schatten erhalten. Und wo wir gerade beim Thema Text sind, bauen wir mittels @import einen netten Google Web Font ein; ich habe mich für „Bree Serif“ entschieden.

    @import url(http://fonts.googleapis.com/css?family=Bree+Serif);
    
    .banner .inhalt p {
    	font-family: 'Bree Serif', serif;
    	text-transform: uppercase;
    	text-shadow: 2px 2px 3px #333;
    	box-shadow: 5px 5px 10px #333, inset 0 0 50px #ddd;
    }

    Damit wären wir nun hier:

    Versetzte Buchstaben

    Um die Buchstaben versetzt anzuordnen, nutzen wir die Pseudo-Klasse (nth-child). Wir wollen jeden zweiten Buchstaben um 2 Grad und jeden dritten Buchstaben um minus 3 Grad drehen. Dafür definieren wir:

    .banner .inhalt p:nth-child(2n) {
    	-webkit-transform: rotate(2deg);
    	-moz-transform: rotate(2deg);
    	-ms-transform: rotate(2deg);
    	-o-transform: rotate(2deg);
    	transform: rotate(2deg);
    }
    
    .banner .inhalt p:nth-child(3n) {
    	-webkit-transform: rotate(-3deg);
    	-moz-transform: rotate(-3deg);
    	-o-transform: rotate(-3deg);
    	-ms-transform: rotate(-3deg);
    	transform: rotate(-3deg);
    }

    Zusätzlich sollen die Buchstaben nach oben fahren, wenn diese mit der Maus gehovert werden:

    .banner .inhalt p:hover {
    	top: -10px;
    }

    Damit das nicht so abgehackt aussieht, animieren wir den Übergang mittels transition:

    .banner .inhalt p {
    	-webkit-transition: all 0.4s ease-in-out;
    	-moz-transition: all 0.4s ease-in-out;
    	-o-transition: all 0.4s ease-in-out;
    	-ms-transition: all 0.4s ease-in-out;
    	transition: all 0.4s ease-in-out;
    }

    Aufhängen

    Das Banner soll hängen und dazu benötigen die Buchstaben-Elemente ein Loch an der oberen Seite. Dazu nutzen wir das Pseudo-Element :before. Das Loch bekommt eine Größe von 10 x 10 Pixeln. Mittels border-radius machen wir daraus einen Kreis und definieren mit box-shadow einen innenliegenden Schatten. Das Loch zum Aufhängen zentrieren wir und positionieren es absolut.

    .banner .inhalt p:before {
    	position: absolute;
    	content: "";
    	left: 50%;
    	top: 10px;
    	margin-left: -5px;
    	width: 10px;
    	height: 10px;
    	border-radius: 10px;
    	box-shadow: inset 1px 1px 3px #666;
    	background: #eee;
    }

    Das Pseudo-Element :after nutzen wir zum Aufhängen, also für den Faden. Dieser erhält eine Länge von 60 und eine Breite von 2 Pixeln. Der Faden wird, wie schon das Loch, absolut und zentriert positioniert und erhält noch einen dezenten Schlagschatten.

    .banner .inhalt p:after {
    	position: absolute;
    	content: "";
    	width: 2px;
    	height: 60px;
    	top: -46px;
    	left: 50%;
    	margin-left: -1px;
    	background: #aaa;
    	box-shadow: 1px 0 3px #555;
    }

    Zwischenergebnis:

    Logo einbauen

    OK. Eine Bilddatei nutze ich dann doch, nämlich das WordPress-Logo, welches wir als Hintergrund des Banners einbauen. Bei :hover des Banners soll das Logo animiert vergrößert und ausgeblendet werden. Ein netter Effekt, oder?

    Das Logo bauen wir als zusätzliche Div-Klasse ein. Wir positionieren das Logo absolut und zentrieren es horizontal sowie vertikal. Die Bilddatei hat eine Größe von 256 x 256 Pixeln. Bei einer Höhe von 200 Pixeln müssen wir das Logo also um minus 28 Pixeln nach oben versetzt anordnen (200 – 256 / 2). Horizontal zentrieren wir das Logo bei einer Breite von 900 Pixeln mit einem Abstand von 322 Pixeln vom linken Rand (900 – 256 /2).

    Wir wollen, dass das Logo dezent im Hintergrund erscheint. Daher nehmen wir der Bilddatei die Sichtbarkeit und setzen diese auf 50%. Für die animierte Ausblendung des Logos definieren wir gleich die transition-Anweisung mit einer Laufzeit von einer halben Sekunde.

    .banner .logo {
    	position: absolute;
    	top: -28px;
    	left: 322px;
    	opacity: .5;
    	-webkit-transition: all .5s ease-in-out;
    	-moz-transition: all .5s ease-in-out;
    	-o-transition: all .5s ease-in-out;
    	-ms-transition: all .5s ease-in-out;
    	transition: all .5s ease-in-out;
    }

    Das Logo wird also innerhalb einer halben Sekunde vergrößert und ausgeblendet. Das definieren wir mittels transform wie folgt:

    .banner:hover .logo {
    	opacity: 0;
    	-webkit-transform: scale(5);
    	-moz-transform: scale(5);
    	-o-transform: scale(5);
    	-ms-transform: scale(5);
    	transform: scale(5);
    }

    Und damit ist der Stylesheet-Teil abgeschlossen. Nun müssen wir das Banner nur noch in die Webseite einbauen.

    HTML-Code

    Für den Einbau verwendet ihr diesen Code:

    <div class="banner">
    	<div class="logo">
    	<img src="../images/wp_logo_256.png" alt="WordPress-Logo">
    	</div>
    		<div class="inhalt">
    			<p>w</p>
    			<p>o</p>
    			<p>r</p>
    			<p>d</p>
    			<p>p</p>
    			<p>r</p>
    			<p>e</p>
    			<p>s</p>
    			<p>s</p>
    		</div>
    </div>
    

    Fertig.

    Browserkompatibiliät

    Was gibt es noch zum Thema Browser zu sagen? Da wir jede Menge CSS3-Schnickschnack nutzen, ist die Browser-Kompatibilität doch etwas eingeschränkt. Die neuen Versionen von Chrome, Firefox, Opera und Safari stellen das Banner korrekt dar. Lediglich der Internet Explorer 9 kann einige CSS3-Befehle (transition und text-shadow) nicht verarbeiten, das eigentliche Banner wird aber korrekt angezeigt.

    Wie immer gibt es eine Live-Demo

    Demo ansehen

    und den Download

    Download starten

    für diejenigen, die keine Lust auf nachbauen haben.

    Viel Spass damit.

    Diese Artikel könnten dich ebenfalls interessieren
    • 1
      22. Mai 2012
      [WordPress] Theme „DREI“ steht bereit
    • 0
      19. Mai 2012
      [WordPress] Mehrere Sidebars nutzen
    • 1
      9. Mai 2012
      [WordPress] Mein neues Theme ‚ZWEI‘
    • 1
      23. April 2012
      [WordPress] ‚EINS‘ – Mein erstes WordPress-Theme

    Dein Kommentar zu diesem Artikel

    Abbrechen

    Du musst angemeldet sein, um einen Kommentar abzugeben.

    ← vorheriger Artikel
    nächster Artikel →
    • Archive

      • Juni 2012
      • Mai 2012
      • April 2012
      • März 2012
      • Februar 2012
      • Januar 2012
      • Dezember 2011
      • November 2011
      • Oktober 2011
      • September 2011
      • August 2011
      • Juli 2011
      • Juni 2011
      • Mai 2011
      • April 2011
      • März 2011
      • Februar 2011
      • Januar 2011
      • Dezember 2010
      • November 2010
      • Oktober 2010
      • September 2010
      • August 2010
      • Juli 2010
      • Juni 2010
      • Mai 2010
      • April 2010
      • Februar 2010
      • Januar 2010
      • Dezember 2009
      • November 2009
      • Oktober 2009
    • Meta

      • Anmelden
      • Beitrags-Feed (RSS)
      • Kommentare als RSS
      • WordPress.org
    • Neueste Beiträge

      • Willkommen zur Testfahrt
      • Letzte Chance nach einem Festplattencrash
      • Kleinstrechner MK802 mit Ice Cream Sandwich; gar nicht mal so teuer
      • [WordPress] Theme „DREI“ steht bereit
      • [WordPress] Mehrere Sidebars nutzen
    • Neueste Kommentare

      • Oliver bei Willkommen zur Testfahrt
      • Olli bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Lars bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Martin bei Kreiert euren eigenen Button und teilt diesen mit anderen
      • rainer bei [CSS3] Vom Lupeneffekt und drehenden Icons mit „transform“
    • Kategorien

      • Gaming
      • Grafik
      • Sicherheit
      • Sonstiges
      • Technik
      • Web
      • Webdesign
    • Schlagwörter

      active directory android apple css demo dsl dvb games gimp guides hardware html id3-tag internet ipad iphone itunes littlebigplanet medienfreigabe modnation racers mp3 nas office phishing php playstation 3 plugins psn spam sql tablet tutorial tv twonky media server update upnp videos windows 7 windows media player windows server windows vista wlan wordpress xbmc xbox 360

    Seitenanfang ↑

    239 Artikel | 293 Kommentare

    Artikel RSS-Feed | Kommentar RSS-Feed

    © SIEBEN – WordPress-Theme angetrieben von WordPress

    Theme 'SIEBEN' von Oliver Gast