Praktische Verwendung von CSS3: Transformationen und Übergänge

Transformationen und Übergänge (eingeführt als Teil der CSS3-Spezifikation) ermöglichen es uns, die Art von Interaktion und Erfahrung zu schaffen, die bisher nur mit JavaScript oder Flash verbunden war. Sie haben wahrscheinlich viele Diskussionen und Tutorials zu diesen Eigenschaften gelesen, aber sie sind in der Regel experimenteller Natur.

In diesem Tutorial werden wir CSS-Transformationen und -Übergänge untersuchen, indem wir etwas Nützlicheres erstellen. Wir werden eine einzelne statische HTML-Seite erstellen, die Transformationen und Übergänge in einem Schieberegler sowie einige interessante Hover-Effekte verwendet.

Bevor wir fortfahren, ist es erwähnenswert, die Browserkompatibilität zu beachten. Dieses Tutorial demonstriert moderne Techniken, Techniken, die später üblich sein werden, aber vorerst mit älteren Browsern nicht kompatibel sind. Werfen Sie einen Blick auf caniuse.com, um genauer zu analysieren, welche Browser die verschiedenen hier besprochenen Methoden unterstützen.

Vorbereitung

Okay, zu diesem Zeitpunkt wissen wir bereits, wohin wir gehen werden, sodass wir entscheiden können, was wir vorbereiten müssen.

Vor allem die Vorbereitung ist der Schlüssel zum Erfolg. ~ Alexander G. Bell

Grundfertigkeiten

Zunächst benötigen wir ein grundlegendes Verständnis von HTML und CSS. Vorausgesetzt, Sie haben das, wir sind bereit zu gehen.

Wenn Sie jedoch wirklich neu auf diesem Gebiet sind, würde ich Ihnen raten, sich etwas Zeit zu nehmen, um sich über das Thema zu informieren; Glücklicherweise bietet Envato einen 30-tägigen Kurs an, der Ihnen alle wichtigen Dinge, die Sie über HTML & CSS wissen müssen, kostenlos beibringt.

Bilder finden

Wir benötigen natürlich einige Bilder, um den Bildschieberegler zu erstellen, sowie die Bildunterschriften für die Website. PhotoDune wird unsere Zwecke sehr gut erfüllen. Im Folgenden sind die Bilder aufgeführt, die wir in diesem Tutorial verwenden werden.

• Pizza
• Gegrilltes Hühnchen
• Salat
• Knödel
• Frühstück
• Pasta
• Steak-Abendessen
• Frau beim Abendessen
• Cappuccino
• Tischset

Wir benötigen auch eine Textur für den Hintergrund. Mein Lieblingsort, um Texturen im Moment zu finden, ist Subtle Patterns und nachdem ich alle Seiten durchgeblättert habe, habe ich mich schließlich für dieses Beispiel entschieden.

Ordner verwalten

Obwohl dies optional ist, verwalte ich persönlich gerne meine Projektmappen im ersten Schritt, damit wir von Anfang an organisiert bleiben. Für diese Website habe ich also zwei Hauptordner psd und html erstellt, wobei der html-Ordner zwei weitere Ordner für fonts und images umfasst.

Das Design

Als Nächstes erstellen wir ein Mockup einer Website in Photoshop, um darauf zu verweisen, während wir sie in HTML erstellen. Ich werde in diesem Schritt nicht tiefer gehen, da das eigentliche Design den Rahmen dieses Tutorials sprengt. Bei Webdesigntuts+ finden Sie bereits zahlreiche Layout-Tutorials, wie dieses.

Nun, das Bild unten ist das, was ich mir ausgedacht habe; Lassen Sie uns die Datei in unserem psd-Ordner behalten.

Der HTML-Code

Vor der Codierung habe ich einige erforderliche Grafiken für die Verwendung im Layout in Scheiben geschnitten. Zuerst der Navigationshintergrund, der mit der schwarzen Farbe oben und das benutzerdefinierte Muster für die Miniaturansichten der Bilder.

Wenn Sie den gesamten 30-tägigen Kurs zu HTML & CSS absolviert haben, hat Jeffrey an Tag 27 erklärt, wie man eine PSD-Datei aufschneidet.

HTML5

Wir werden auch neue Tags aus der HTML5-Spezifikation verwenden, also erwarten Sie <nav>, <header>, <footer> und einige andere neue Tags, die ich (ehrlicherweise) selten verwende, wie <figure> und <figcaption>.

Wir werden hier jedoch nicht zu viel über HTML5 diskutieren, das würde den Rahmen dieses Tutorials sprengen. Stattdessen finden Sie viele HTML5-Tutorials auf Nettuts+.

Kopfzeile & Navigation

In Ordnung, öffnen wir nun einen Texteditor und beginnen mit der Codierung von Markup.

Wie Sie im endgültigen Design sehen können, werden das Menü und der Header-Bereich nicht getrennt, sodass die primäre Navigation selbst in das Header-Tag eingeschlossen wird.

1

2

<header> 

3

	<div> 

4

		<h1 class="home"><a href="/">the resto.</a></h1> 

5

		<nav id="site-nav"> 

6

			<ul class="menu"> 

7

				<li><a href="#">About</a></li> 

8

				<li><a href="#">Contact</a></li> 

9

				<li><a href="#">Restaurant</a></li> 

10

				<li><a href="#">Store</a></li> 

11

			</ul> 

12

		</nav> 

13

	</div> 

14

</header>

Bild-Slider-Bereich

Der Bildschieberegler wird in ein Abschnitts-Tag eingeschlossen. Der section ist ein neues Element, das auch in der neuen HTML5-Spezifikation enthalten ist, um einen Abschnitt oder ein Segment in einem HTML-Dokument zu definieren.

1

2

<section id="image-slider"> 

3

	<div class="hidden"> 

4

	<span class="shine"></span> 

5

	<ul> 

6

		<li id="slide-1" class="slide"> 

7

		<figure> 

8

			<img src="images/slide/grilled-chicken.jpg" /> 

9

			<figcaption> 

10

				<p>Faworki cotton candy apple pie lollipop. Jelly beans apple pie sweet roll pie cheesecake.</p> 

11

			</figcaption> 

12

		</figure> 

13

		</li> 

14

		<li id="slide-2" class="slide"> 

15

		<figure> 

16

			<img src="images/slide/pasta.jpg" /> 

17

			<figcaption> 

18

				<p>Sesame snaps caramels powder muffin applicake chocolate cake.</p> 

19

			</figcaption> 

20

		</figure> 

21

		</li> 

22

		<li id="slide-3" class="slide"> 

23

			<figure> 

24

				<img src="images/slide/steak.jpg" /> 

25

				<figcaption> 

26

					<p>Pie danish applicake sugar plum sweet roll faworki cookie lollipop carrot cake. Chupa chups jujubes cupcake tart. </p> 

27

				</figcaption> 

28

			</figure> 

29

		</li> 

30

		<li id="slide-4" class="slide"> 

31

			<figure> 

32

				<img src="images/slide/cappuccino.jpg" /> 

33

				<figcaption> 

34

					<p>Lollipop dessert toffee apple pie liquorice chocolate marzipan.</p> 

35

				</figcaption> 

36

			</figure> 

37

		</li> 

38

	</ul> 

39

	</div> 

40

41

	<!-- image slider navigation --> 

42

	<nav class="nav-slider"> 

43

		<ul> 

44

			<li><a href="#slide-1">1</a></li> 

45

			<li><a href="#slide-2">2</a></li> 

46

			<li><a href="#slide-3">3</a></li> 

47

			<li><a href="#slide-4">4</a></li> 

48

		</ul> 

49

	</nav> 

50

	</section>

Dies ist der gesamte HTML-Code, den wir benötigen, um unseren Image Slider zu erstellen. Sehen wir uns nun jeden Teil des Markups genauer an.

Ausgehend von <div class="hidden"> verwenden wir diese Klasse, um Folien auszublenden, die aus der angegebenen Dimension überlaufen; in diesem Fall wären es 960 x 380 Pixel.

Die Folien sind mit einer ungeordneten Liste strukturiert. Jede der Folien ist in ein <li>-Tag mit einer eindeutigen ID <li id="slide-3" class="slide"> eingebettet, sodass wir später eine bestimmte Folie über eine Fragment-ID auswählen können.

Beachten Sie, dass wir figure verwenden, um das Folienbild und figcaption für die Folienbeschriftung zu umschließen. Diese Elemente beschreiben die Rollen und die Beziehung, die sie haben, perfekt (semantisch).

1

2

<figure> 

3

	<img src="images/slide/cappuccino.jpg" /> 

4

	<figcaption> 

5

	<p>Lollipop dessert toffee apple pie liquorice chocolate marzipan.</p> 

6

	</figcaption> 

7

</figure>

Die figure ist ein neues Tag in der HTML5-Spezifikation. Dieses Tag soll Grafiken, Fotos, Diagramme etc. hervorheben. Während die figcaption laut w3c eine Bildunterschrift oder Legende für die Abbildung darstellt. Diese Tags sind also effektiv miteinander verbunden.

Abschnitt Bildunterschrift

Die Bildunterschrift wird ebenfalls in ein section-Tag eingeschlossen.

1

2

<section id="image-caption"> 

3

	<ul> 

4

	<li class="thumbnail thumbnail-1"> 

5

		<figure> 

6

		<span class="pattern-overlay"></span> 

7

			<img src="images/thumbnail/women-at-dinnner.jpg"/> 

8

		<figcaption> 

9

		<p>Lemon drops dessert</p> 

10

		</figcaption> 

11

		</figure> 

12

	</li> 

13

	<li class="thumbnail thumbnail-2"> 

14

		<figure>	 

15

		<span class="pattern-overlay"></span> 

16

			<img src="images/thumbnail/cooked-breakfast.jpg"/> 

17

		<figcaption> 

18

		<hr /><h3>Apple pie chupa</h3> 

19

		<p>Apple pie chupa chups pudding cheesecake pie cake topping jelly-o.  

20

		Icing sweet roll toffee.</p> 

21

		<p>Lemon drops toffee pastry cookie marzipan carrot cake tart sweet roll tiramisu.</p> 

22

		</figcaption> 

23

		</figure> 

24

	</li> 

25

	<li class="thumbnail thumbnail-3"> 

26

		<figure> 

27

		<span class="pattern-overlay"></span> 

28

		<img src="images/thumbnail/steamed-dumplings.jpg"/> 

29

		<figcaption> 

30

		<hr /><h3>Jelly beans</h3> 

31

		<p>Jelly beans icing macaroon pudding carrot cake.  

32

		Sweet roll halvah pudding cookie candy canes cake jelly marshmallow.</p>  

33

		<p>Chupa chups halvah tiramisu sugar plum.</p> 

34

		</figcaption> 

35

		</figure>	 

36

	</li> 

37

	<li class="thumbnail thumbnail-4"> 

38

		<figure> 

39

		<span class="pattern-overlay"></span> 

40

			<img src="images/thumbnail/salad.jpg"/> 

41

		<figcaption> 

42

<p>Gummies chocolate bar tootsie roll oat cake gummies. Sesame snaps faworki ice cream tootsie roll pastry.</p> 

43

		</figcaption> 

44

		</figure> 

45

	</li> 

46

<li class="thumbnail thumbnail-5"> 

47

		<figure> 

48

		<span class="pattern-overlay"></span> 

49

			<img src="images/thumbnail/table-in-restaurant.jpg"/> 

50

		<figcaption> 

51

		<p>Wypas cheesecake sweet ice cream faworki macaroon sweet pie.  

52

		Tart sweet muffin pastry cotton candy ice cream chocolate gummi bears.</p> 

53

		</figcaption> 

54

		</figure> 

55

	</li> 

56

	<li class="thumbnail thumbnail-6"> 

57

		<figure> 

58

		<span class="pattern-overlay"></span> 

59

			<img src="images/thumbnail/pizza.jpg"/> 

60

		<figcaption> 

61

		<hr /><h3>Chocolate chocolate</h3> 

62

		<p>Chocolate chocolate cake wafer halvah jelly ice cream fruitcake wypas.  

63

		Sweet topping candy sugar plum bear claw sugar plum bonbon. </p> 

64

<p>Croissant sweet roll apple pie cotton candy bear claw marshmallow cheesecake ice cream chocolate bar</p> 

65

		</figcaption> 

66

		</figure> 

67

	</li> 

68

	</ul> 

69

</section>

Das ist alles, was wir für den Abschnitt Bildunterschrift brauchen, das Markup ist ziemlich selbsterklärend, da es mit dem Markup in Image Slider ähnlich ist.

Fusszeile

Wir fügen einfach Copyright-Text in die Fußzeile ein.

1

2

<footer> 

3

<p>Envato &copy; 2012. All rights reserved</p> 

4

</footer>

Das Styling

In diesem Abschnitt beginnen wir mit allen Stylingarbeiten. Ich gehe davon aus, dass Sie bereits wissen, wie Sie die Stile aus dem HTML-Dokument trennen und mit einer CSS-Datei verknüpfen.

<link href="style.css" rel="stylesheet" type="text/css" />

Präfix-frei

Die Stile werden viele neue CSS3-Spezifikationen verwenden, die leider für jeden Browser ein Herstellerpräfix erfordern, um korrekt zu funktionieren. Zum Beispiel -o- für Opera, -moz- für Mozilla Firefox und -webkit- für Safari und Chrome. Aufgeblähtes CSS auf diese Weise zu schreiben kann sehr ineffizient sein.

Also habe ich beschlossen, Lea Verous Präfix-frei in das Dokument einzufügen; eine JavaScript-Bibliothek, um all diese Herstellerpräfixe automatisch zu verarbeiten, sodass wir nur das offizielle Eigenschaftsformat hinzufügen müssen. Normalerweise müssten wir zum Beispiel die folgende CSS-Regel schreiben, um ein Element zu skalieren:

1

2

div { 

3

	transform: scale(2,4); 

4

	-ms-transform: scale(2,4); /* IE 9 */ 

5

	-webkit-transform: scale(2,4); /* Safari and Chrome */ 

6

	-o-transform: scale(2,4); /* Opera */ 

7

	-moz-transform: scale(2,4); /* Firefox */ 

8

}

Bei Verwendung des präfixfreien Skripts können wir alle Herstellerpräfixe entfernen.

1

2

div { 

3

	transform: scale(2,4); 

4

}

Laden Sie die prefix-free Datei herunter und platzieren Sie sie am Ende des Dokuments vor dem schließenden body-Tag.

<script src="prefixfree.js">

CSS-Reset

Ein weiteres Problem, auf das wir bei den Browsern stoßen werden, ist Inkonsistenz. Praktisch jeder Browser rendert HTML-Elemente in seinem eigenen Standardstil und diese Standardstile unterscheiden sich oft geringfügig.

Um den Standardstil zu überschreiben und sicherzustellen, dass wir in jedem Browser mit dem gleichen Startblock arbeiten, verwenden wir einen CSS-Reset. Es gibt mehrere Optionen; wie dieser von Eric Mayer, YUI von Yahoo und HTML5 Reset von Richard Clark. Aber dieses Mal bin ich daran interessiert, Normalize.css von Nicolas Gallagher auszuprobieren. Laden Sie die Datei herunter und fügen Sie den Link in das Head-Tag ein, bevor auf andere CSS-Dateien verwiesen wird.

1

2

<head> 

3

	<link href="normalize.css" rel="stylesheet" type="text/css" /> 

4

</head>

Alles klar, jetzt sind wir alle eingerichtet. Beginnen wir mit dem Styling. Beginnen Sie mit dem Body-Tag.

Die Website hat einen strukturierten Hintergrund; Wir werden den Hintergrund auf den Textkörper anwenden und die Standardschriftfamilie und -größe angeben.

1

2

body { 

3

	background:url('images/grid-noise.png') repeat; 

4

	font: 12pt Tahoma, Geneva, sans-serif; 

5

}

@Font-Face

Apropos Schriftart, wir planen, einige Nicht-System-Schriftarten für den HTML-Code anzuwenden, also werden wir dies mit der @font-face-Regel angehen. Nun, @font-face ist in CSS nicht wirklich neu, es war tatsächlich in der CSS2-Spezifikation enthalten, aber leider wurde die Methode zu dieser Zeit von Webdesignern nicht weit verbreitet.

Unsere eigene Schriftart mit @font-face einzubinden ist ziemlich einfach. Tatsächlich haben die guten Leute von font squirrel dieses praktische Tool entwickelt, um den benötigten Code zu generieren.

In unserem Design haben wir ChunkFive für das Resto-Logo und das Titillium für die Menüführung verwendet. Lassen Sie uns alle diese Schriftarten herunterladen und die @font-face-Regeln auf das Stylesheet anwenden:

1

2

@font-face { 

3

	font-family: 'ChunkFiveRegular'; 

4

	src: url('fonts/Chunkfive-webfont.eot'); 

5

	src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), 

6

		 url('fonts/Chunkfive-webfont.woff') format('woff'), 

7

		 url('fonts/Chunkfive-webfont.ttf') format('truetype'), 

8

		 url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); 

9

	font-weight: normal; 

10

	font-style: normal; 

11

}

1

2

@font-face { 

3

	font-family: 'TitilliumText22LRegular'; 

4

	src: url('fonts/TitilliumText22L003-webfont.eot'); 

5

	src: url('fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'), 

6

		 url('fonts/TitilliumText22L003-webfont.woff') format('woff'), 

7

		 url('fonts/TitilliumText22L003-webfont.ttf') format('truetype'), 

8

		 url('fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg'); 

9

	font-weight: normal; 

10

	font-style: normal; 

11

}

Kopfzeile und Navigation gestalten

Die Kopfzeile wird den Hintergrund haben, den wir zuvor in diesem Tutorial geschnitten haben, und wir werden auch unsere neue Schriftfamilie auf die home-Klasse und nav li anwenden.

1

2

header { 

3

	background: url('images/nav-bg.png') repeat-x; 

4

	padding: 0; 

5

	height: 70px; 

6

	border-bottom: 2px solid #000; 

7

	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5); 

8

	width: 100%; 

9

} 

10

header > div { 

11

	width: 960px; 

12

	margin: 0 auto; 

13

} 

14

header .home { 

15

	margin: 0; 

16

	font: 36pt/60pt 'ChunkFiveRegular', Arial, sans-serif; 

17

	text-shadow: 0px 2px 0px #000; 

18

	float: left; 

19

} 

20

header a { 

21

	text-decoration: none; 

22

	color: #fff; 

23

	text-shadow: 1px 1px 0 #000; 

24

	transition: all 300ms ease-out; 

25

} 

26

header nav { 

27

	float: right; 

28

} 

29

header nav ul { 

30

	padding: 0; 

31

	margin-right: 6px; 

32

} 

33

header nav li { 

34

	display: inline; 

35

	font: 12pt/35pt 'TitilliumText22LRegular', Arial, sans-serif; 

36

	margin-left: 25px; 

37

	text-transform: uppercase; 

38

}

Beachten Sie, dass wir keine Herstellerpräfixe hinzugefügt haben, um die Box-Shadow-Regel zu deklarieren. Ich muss Lea Verou danken, dass sie das präfixfreie Skript erstellt hat - es erspart viel Herumprobieren.

Den Inhalt gestalten

Der #content-Stil ist Standard. Es hat eine leicht weiße Hintergrundfarbe, eine feste Breite von 960px, zentriert auf dem Bildschirm und einen Schlagschatten.

1

2

#content { 

3

	width: 960px; 

4

	height: auto; 

5

	margin: 25px auto 0; 

6

	background: #f3f3f3; 

7

	border: 1px solid #bbb; 

8

	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3); 

9

}

Nachdem Sie alle oben genannten Stile angewendet haben, sollten Sie Folgendes sehen:

Den Bildschieberegler gestalten

Wenden wir nun einige Stile auf den Bildschieberegler an. Der Slider inklusive der Navigation wird 960 x 425 Pixel groß sein, während der Bild-Slide selbst, wie oben erwähnt, nur 960 x 360 Pixel haben wird.

1

2

#image-slider { 

3

	height: 425px; 

4

	width: 960px; 

5

} 

6

#image-slider ul { 

7

	list-style: none; 

8

	margin: 0; 

9

	padding: 0; 

10

}

Die Bildunterschrift hat einen leicht transparenten Hintergrund. Um diesen Transparenzeffekt zu erzielen, verwenden wir die Deckkraftregel nicht, da sie sich auch auf den Text in der Beschriftung auswirkt. Stattdessen erreichen wir es mit dem Alpha-Kanal aus dem RGBA-Farbmodus.

1

2

#image-slider figcaption { 

3

	background-color: rgba(0,0,0,.7); 

4

	color: #fff; 

5

	padding: 10px 20px; 

6

	position: relative; 

7

	text-shadow: 1px 1px 0px #000; 

8

	width: 920px; 

9

	bottom: 0; 

10

}

Wenn Sie auf das Bild in der Folie achten; Zwischen dem Bild und der Bildunterschrift befindet sich ein Leerraum. Um es zu entfernen, fügen wir display: block; zum Bild.

1

2

#image-slider img { 

3

	display: block; 

4

}

Folienposition

In diesem Abschnitt arbeiten wir um die Folie herum. Die Folien verwenden die absolute Position, damit sie gestapelt werden.

1

2

#image-slider .slide { 

3

	position: absolute; 

4

}

Das Bild auf der Folie sollte zwar unsichtbar sein, aber wir tun dies, indem wir den Deckkraftwert auf Null ändern.

1

2

#image-slider .slide img { 

3

	position: relative; 

4

	opacity: 0; 

5

}

Das Bild auf der ersten Folie sollte jedoch sichtbar sein. Wir werden es also gezielt mit dem :first-child-Selektor auswählen und die Deckkraft auf 1 setzen.

1

2

#image-slider .slide:first-child img { 

3

	opacity: 1; 

4

}

Okay, das Ergebnis ist immer noch nicht das, was wir vom endgültigen Design erwarten. Wie Sie im obigen Bild sehen können, sind die Folienbeschriftungen, die ausgeblendet werden sollen, weiterhin sichtbar. Also müssen wir sie verstecken.

1

2

#image-slider .hidden { 

3

	height: 380px; 

4

	overflow: hidden; 

5

	position: relative; 

6

	width: 960px; 

7

	border-bottom: 1px solid #aaa; 

8

}

Erstellen eines leuchtenden Effekts

Vielen Dank an die neuen CSS3-Spezifikationen, da wir jetzt einen leuchtenden Effekt ohne Einbindung von Bildern erzeugen können. Den Effekt erzielen wir mit dem CSS3-Hintergrundverlauf.

Ich gehe nicht auf die Details zur Anwendung ein, da Sie diesen Tipp hier umfassend lesen können.

Jetzt fügen wir die folgenden Stile hinzu;

1

2

#image-slider .shine { 

3

	height: 300px; 

4

	margin: 0 auto; 

5

	position: absolute; 

6

	right: -60px; 

7

	top: -58px; 

8

	transform: rotate(-20deg); 

9

	background: linear-gradient(45deg, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); 

10

	width: 1500px; 

11

	z-index: 5; 

12

}

Wenn Sie den Tipp gelesen haben, gehe ich davon aus, dass die Gradientenregel für Sie bereits offensichtlich sein sollte. Aber schauen wir uns eine andere Regel an, um herauszufinden, was das CSS tatsächlich tut.

Zuerst hat <span class="shine"> absolute: position mit z-index: 5, um es ganz oben auf andere Elemente in der Folie zu platzieren. Der Leuchteffekt wird nicht korrekt angezeigt, daher muss das Element noch um ca. -20 Grad gedreht werden (transform: rotate(-20deg);).

Slider-Navigation

Der Slider-Stil ist ziemlich einfach. Standardmäßig hat das Menü in der Navigation eine Inline-Position, sodass jedes Menü nebeneinander angezeigt wird.

1

2

.nav-slider { 

3

	text-align: center; 

4

	padding-top: 15px; 

5

	border-top: 1px solid #fff; 

6

} 

7

.nav-slider li { 

8

	display: inline; 

9

	margin: 0 5px; 

10

}

Beachten Sie, dass die Navigation immer noch den numerischen Text anzeigt; wir sollten es entfernen und ihm einige Stile geben.

Zuerst fügen wir inline-block hinzu, damit der Anker mit Breiten- und Höhenwerten hinzugefügt werden kann, dann fügen wir text-indent: -9999px hinzu, um den Text darin visuell zu entfernen.

1

2

.nav-slider li a { 

3

	background: #ddd; 

4

	border: 1px solid #ccc; 

5

	display: inline-block; 

6

	height: 19px; 

7

	text-indent: -9999px; 

8

	width: 19px; 

9

}

Die Bildminiaturen

Jetzt werden wir dem Abschnitt Bildunterschrift Stile hinzufügen.

1

2

#image-caption { 

3

	padding: 32px 32px 40px; 

4

} 

5

#image-caption ul { 

6

	list-style: none; 

7

	padding: 0; 

8

	margin: 0; 

9

} 

10

#image-caption ul li { 

11

	display: inline-block; 

12

	width: 270px; 

13

	vertical-align: top; 

14

	height: 190px; 

15

	background: #fff; 

16

	border: 5px solid #ddd; 

17

	cursor: pointer; 

18

	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2); 

19

	position: relative; 

20

	overflow: hidden; 

21

}

Wir entfernen auch den Leerraum zwischen dem Bild und der Beschriftung.

1

2

#image-caption img { 

3

	display: block;  

4

}

Die Miniaturansicht wird eine Musterüberlagerung haben, die wir zuvor geschnitten haben.

1

2

.pattern-overlay { 

3

	background: url('images/thumbnail-pattern.png') repeat; 

4

	height: 190px; 

5

	width: 270px; 

6

	position: absolute; 

7

	z-index: 1; 

8

}

Wie wir im Bild oben sehen können, sind die Miniaturbilder zusammengekauert. Wir brauchen etwas Spielraum, um eine Lücke dazwischen zu machen. Anstatt diesen Rand für jedes Thumbnail zu definieren, werden wir vorschreiben, dass nur das mittlere Bild einen mit nth-child hat.

nth-child ist eine CSS-Pseudoklasse zum Auswählen bestimmter untergeordneter Elemente mithilfe einer Formel. Um mehr über diese Pseudoklasse zu erfahren, können Sie diese umfassende Erklärung lesen.

In Ordnung, zuerst wählen wir die mittleren Bilder aus, in diesem Fall die Bild-Thumbnail-Nummer 2, 5 und ihre Multiplikation.

1

2

.thumbnail:nth-child(3n+2) { 

3

	margin: 0 23px; 

4

}

Danach wählen wir nur die ersten drei Bilder aus, die den Rand unten haben sollen. Die erste und die zweite Reihe haben also auch eine Lücke dazwischen.

1

2

.thumbnail:nth-child(-n+3) { 

3

	margin-bottom: 33px; 

4

}

Thumbnail-Beschriftungen

In Bezug auf unser Design hat die Bildunterschrift normalerweise eine grüne Farbe mit einer leichten Transparenz und einem abgerundeten Rand.

1

2

.thumbnail figcaption { 

3

	background: rgba(136,184,88,0.9); 

4

	margin: 10px; 

5

	border-radius: 3px; 

6

	padding: 10px; 

7

	width: 230px; 

8

	color: #fff; 

9

	font-size: 10pt; 

10

}

Einige der Bildunterschriften haben die Überschriftsebene 3 (H3) und hier geben wir den h3-Stil an.

1

2

.thumbnail figcaption h3 { 

3

	font-size: 14pt; 

4

	font-weight: normal; 

5

}

Der Text in der Beschriftung wird in das Absatz-Tag (p) umgebrochen. daher geben wir auch die Abstände zwischen Überschrift und Absatz mit einem Rand an.

1

2

.thumbnail figcaption p, .thumbnail figcaption h3 { 

3

	margin: 3px; 

4

	padding: 0; 

5

}

Und für den Fußzeilenstil zentrieren wir einfach den Text.

1

2

footer { 

3

	width: 960px; 

4

	text-align: center; 

5

	margin: 0 auto; 

6

	color: #777; 

7

	text-shadow: 1px 1px 0px #fff; 

8

	font-size: 10pt; 

9

}

Okay, wir haben alle notwendigen Styles fertiggestellt und bis jetzt können Sie erwarten, dass das Ergebnis ungefähr so aussieht:

Die Effekte

In diesem Abschnitt beginnen wir, mithilfe von Transformationen und Übergangseigenschaften einige Effekte auf die Website anzuwenden.

Wie funktionieren diese Eigenschaften?

Ich gehe davon aus, dass Sie auf einige Beiträge gestoßen sind, in denen diese Eigenschaften (Transformationen und Übergänge) bereits behandelt wurden, insbesondere wenn Sie ein regelmäßiger Leser des Tuts+-Blogs-Netzwerks sind. Lassen Sie mich diese Eigenschaften kurz erläutern, um eine kurze Zusammenfassung zu erhalten.

Transform ist eine neue CSS-Eigenschaft, die in der CSS3-Spezifikation enthalten ist. Mit dieser Eigenschaft können wir verschiedene Transformationen wie Verschieben (Bewegung), Drehen, Neigen und Skalieren auf Elemente anwenden.

Transformationen können mit der folgenden CSS-Funktion erreicht werden; transform: transform-method(value). Für die Transformationsmethode können wir translator, scale, rotate und skew verwenden. Zu Demonstrationszwecken wenden wir jede dieser Methoden auf unsere Bildunterschriften an.

Obwohl der Übergang auch Teil der CSS3-Spezifikation ist, ermöglicht uns diese Eigenschaft, einen allmählichen Effekt an der Animation anstelle von sofortigen Änderungen zu erzeugen. Im Kurzhandformat kann der Effekt mit der folgenden Funktion angewendet werden:

transition: <property> <duration> <timing-function> <delay>

Wenden wir sie zum besseren Verständnis auf unsere Bildunterschriften an.

Farbübergang

Im Navigationsbereich demonstrieren wir ein einfaches Beispiel für den Übergangseffekt. Wir ändern die Menüfarbe von Weiß (#FFFFFF) zu Orange (#FFB400) sanft, indem wir die transition-property angeben, wenn wir mit der Maus über das Menü fahren.

Schauen wir uns die folgende CSS-Regel an;

1

2

#site-nav li a { 

3

	transition: color 500ms; 

4

} 

5

#site-nav li a:hover { 

6

	color: #ffb400; 

7

}

Die obige CSS-Regel legt nur die Farbeigenschaft fest, die mit 500 ms als Dauer umgewandelt wird. Und beachten Sie, dass ich keine spezielle timing-funktion hinzugefügt habe. Wenn wir es nicht angeben, verwendet der Browser standardmäßig ease.

Jetzt werden wir zum nächsten, anspruchsvolleren Abschnitt übergehen.

Bildunterschrifteneffekte

In diesem Abschnitt werden wir verschiedene Transformationen und Übergangseffekte auf die Bildunterschriften anwenden. Zunächst legen wir eine allgemeine Regel für den Übergang der Miniaturansichten von Bildern fest.

1

2

.thumbnail img { 

3

	transition: all 350ms; 

4

}

Wir haben der Regel keine bestimmte Eigenschaft hinzugefügt, sondern "all" dafür verwendet. Dies bedeutet, dass der Übergangseffekt auf alle Eigenschaften um das Bild herum angewendet wird.

In diesem Fall ist das Bild 30 % transparent, wenn wir mit der Maus darüber fahren.

1

2

.thumbnail:hover img { 

3

	opacity: 0.3; 

4

}

Im nächsten Schritt werden wir jedes der Untertitel-Übergangsverhalten definieren.

Bildunterschrift 1: Aufwärts bewegen

Die erste Bildunterschrift hat eine lineare timing-function, sodass die Bewegung vom Anfang bis zum Ende gleichmäßig ist.

1

2

.thumbnail-1 figcaption { 

3

	transition: all 350ms linear; 

4

	margin: 0 10px 0 10px; 

5

}

Wenn wir dann mit der Maus über die Miniaturansicht fahren, wird die Beschriftung nach oben verschoben. Wir können die Bewegung mit der translate-Methode erreichen. Die translate-Methode bewirkt, dass sich das Element von einem Punkt zu einem anderen im translate-Wert angegebenen Punkt bewegt.

1

2

.thumbnail-1:hover figcaption { 

3

	transform: translateY(-100%); 

4

	margin-top: -10px; 

5

}

Wir haben einen Prozentsatz für die Übersetzung verwendet, anstatt einen bestimmten Wert in Pixeleinheiten anzugeben. Auf diese Weise wird die Bildunterschrift relativ zur Bildhöhe verschoben, unabhängig vom tatsächlichen Wert der Höhe. Beachten Sie auch, dass wir margin-top hinzugefügt haben.

Bildunterschrift 2: Abwärtsbewegung und Übergangsverzögerung

Die zweite Bildunterschrift hat die volle Höhe und Breite, sodass sie die Miniaturansicht des Bildes verdeckt. Wir werden für die Beschriftung die easy-in-Funktion verwenden, also erwarten Sie, dass die Beschriftung langsam beginnt. Wir fügen auch eine transition-delay von etwa 350 ms hinzu, was bedeutet, dass der Effekt direkt nach Abschluss des Bildübergangs beginnt.

1

2

.thumbnail-2 figcaption { 

3

	transition: all 350ms ease-in 350ms; 

4

	height: 150px; 

5

	position: absolute; 

6

	top: -190px; 

7

}

Wenn wir dann mit der Maus über das Thumbnail fahren, wird die Bildunterschrift schließlich nach unten verschoben.

1

2

.thumbnail-2:hover figcaption { 

3

	transform: translateY(190px); 

4

}

Bildunterschrift 3: Zoom-in-Effekt

Für die dritte Bildunterschrift verwenden wir easy-out. Wenn Sie dies verwenden, endet der Untertitelübergang langsam. Wir planen das Einzoomen der Untertitel, wenn wir mit der Maus über das jeweilige Thumbnail fahren, also geben wir den Untertitelmaßstab als Nullpunkt für den Startpunkt an.

1

2

.thumbnail-3 figcaption { 

3

	transition: all 350ms ease-out; 

4

	transform: scale(0); 

5

	height: 150px; 

6

	opacity: 0; 

7

	position: absolute; 

8

	top: 0; 

9

}

Und unten ist das CSS-Regelwerk für den Hover-Zustand. Wenn wir den Mauszeiger über das dritte Thumbnail bewegen, wird die Bildunterschrift auf ihre ursprüngliche Größe zurückskaliert.

1

2

.thumbnail-3:hover figcaption { 

3

	transform: scale(1); 

4

	opacity: 1; 

5

}

Bildunterschrift 4: Mehrere Transformationen

Die vierte Beschriftung hat eine rotierende Transformation und damit der Text nicht umgekehrt wird, drehen wir die Beschriftung zuerst um -180 Grad.

Sowohl die Bildunterschrift als auch der Text darin haben eine Übergangseigenschaft, und dieses Mal verwenden wir easy-in-out. Dem Funktionsnamen nach zu urteilen, wird der Übergangseffekt, wie Sie sich vorstellen können, langsam beginnen und enden.

1

2

.thumbnail-4 figcaption { 

3

	transition: all 500ms ease-in-out; 

4

	transform: rotate(-180deg); 

5

	overflow: hidden; 

6

	max-height: 150px; 

7

	position: relative; 

8

}

Da wir planen, einen Verkleinerungseffekt für den Text zu erstellen, transformieren wir den Text zuerst, um ihn um 300% zu skalieren, und blenden ihn visuell aus, indem wir die Deckkraft verringern.

1

2

.thumbnail-4 figcaption p { 

3

	transition: all 350ms ease-in-out 500ms; 

4

	transform: scale(3); 

5

	opacity: 0; 

6

}

Wenn wir dann den Mauszeiger über die Miniaturansicht bewegen, wird die Bildunterschrift schließlich von ihrer ursprünglichen Position nach oben verschoben und gleichzeitig gedreht. Dies ist ein einfaches, praktisches Beispiel dafür, wie wir mehrere Transformationen in einem Element anwenden können.

1

2

.thumbnail-4:hover figcaption { 

3

	transform: rotate(0deg) translateY(-100%); 

4

	margin-top: -10px; 

5

}

Für die Texttransformation wird wie bereits erwähnt herausgezoomt.

1

2

.thumbnail-4:hover figcaption p { 

3

	transform: scale(1); 

4

	opacity: 1; 

5

}

Bildunterschrift 5: Mit Cubic-bezier spielen

Apropos Übergangs-Timing-Funktion, wir haben bereits ease, linear, ease-in, ease-out sowie ease-in-out verwendet. Diese Schlüsselwörter sind eigentlich Darstellungen bestimmter Werte aus Bezierkurven. Sowie:

• linear ist gleich cubic-bezier(0,0,1,1)
• Leichtigkeit ist gleich cubic-bezier(0.25,0.1,0.25,1)
• easy-in ist gleich cubic-bezier(0.42,0,1,1)
• ease-out ist gleich cubic-bezier(0,0,0.58,1)
• Ease-In-Out ist gleich cubic-bezier(0.42,0,0.58,1)

Dieses Mal versuchen wir für diese Bildunterschrift, einen kubischen Bézier mit einem benutzerdefinierten Wert zu verwenden. Es ist tatsächlich sehr schwierig, vorherzusagen, wie die Veränderungen funktionieren, wenn wir die tatsächliche Handlung nicht sehen. Glücklicherweise gibt es ein praktisches und sehr hilfreiches Werkzeug, um mit kubischem Bezier zu spielen, damit wir das sofortige Ergebnis der Änderungen sehen können.

Besuchen Sie cubic-bezier.com, wo Sie mit Bezier-Kurven herumspielen können, die von Lea Verou erstellt wurden, der gleichen Person hinter dem Präfix-Frei.

Im folgenden CSS habe ich die Cubic-Bézier-Werte so eingestellt, dass der Übergang am Anfang recht schnell und am Ende deutlich langsamer ausgeführt wird.

1

2

.thumbnail-5 figcaption, .thumbnail-5 img { 

3

	transition: all 350ms cubic-bezier(.1,.72,.68,.68); 

4

}

Wenn dann der Mauszeiger über die Miniaturansicht bewegt wird, möchten wir, dass sich das Bild und die Bildunterschrift entsprechend nach oben bewegen.

1

2

.thumbnail-5:hover figcaption, .thumbnail-5:hover img { 

3

	transform: translateY(-90px); 

4

}

Bildunterschrift 6: Ursprung transformieren.

Wir haben die Skalierungs- und Rotationsmethode für die vorherigen Untertitel angewendet. Sie haben vielleicht bemerkt, dass die Drehung und die Skalierung vom Mittelpunkt des Elements aus begannen. Dies lag daran, dass der Transformations-Ursprung standardmäßig 50% 50% beträgt.

transform-origin ist eine Eigenschaft, die es uns ermöglicht, den Transformationsstartpunkt im Element anzugeben. Dies kann mit der folgenden Syntax transform-origin: x y erreicht werden.

In der sechsten Bildunterschrift ändern wir den Ursprung auf 0 0(x y).

1

2

.thumbnail-6 figcaption { 

3

	top:0; 

4

	position: absolute; 

5

	height: 150px; 

6

	transform: scale(0); 

7

	transform-origin: 0 0; 

8

	opacity: 0; 

9

}

Sowohl die Bildunterschrift als auch das Bild haben einen Übergangseffekt.

1

2

.thumbnail-6 figcaption, .thumbnail-6 img { 

3

	transition: all 500ms; 

4

}

Wenn wir dann mit der Maus über das Thumbnail fahren, werden das Bild und die Bildunterschrift gleichzeitig transformiert.

1

2

.thumbnail-6:hover img { 

3

	transform: scale(0);	 

4

	transform-origin: 0 0; 

5

	opacity: 0; 

6

} 

7

.thumbnail-6:hover figcaption { 

8

	transform: scale(1); 

9

	transform-origin: 0 0; 

10

	opacity: 1; 

11

}

Bild-Slider-Effekte

Wir haben ziemlich viel mit Transformationen und Übergangseigenschaften herumgespielt. In diesem Schritt werden wir sie in unserem Image Slider anwenden.

Zuerst richten wir das Bild und die Beschriftung ein. Hier stellen wir das Bild so ein, dass es einen Einblendungs-Übergangseffekt hat.

1

2

#image-slider li img { 

3

	transition: all 1s linear; 

4

} 

5

6

#image-slider li figcaption { 

7

	transition: all 500ms ease-in-out 300ms; 

8

}

Ebenso wie die Angabe des Schieberegler-Navigationsübergangs.

1

2

.nav-slider li a { 

3

	transition: all 1s ease-out; 

4

}

Kurze Einführung in :target pseudo-class

Der Image Slider wird durch einen Klick angesteuert. Wenn wir auf das Slider-Menü klicken, wird schließlich das jeweilige Slide/Bild angezeigt, normalerweise mit Slide-In- oder Fade-In-Effekten. Diese Art von Navigationen und Slider-Effekten basieren im Allgemeinen auf JavaScript- oder Flash-Technologie.

In diesem Tutorial werden wir jedoch versuchen, dies ausschließlich mit CSS zu erreichen, d. h. mit der Pseudoklasse :target.

Das :target ist eine der Besonderheiten in CSS3, die es uns ermöglicht, ein Element in einem HTML-Dokument mit einer bestimmten ID auszuwählen, die mit der Fragmentkennung im URI übereinstimmt.

Zum Beispiel ein URI; http://www.somedomain.com/page/#section-1 wählt ein Element mit id="section-1" auf der Seite aus. Auf ähnliche Weise werden beim :hover alle Stile um das :target herum angewendet.

In Ordnung, werfen wir einen Blick auf die folgenden CSS-Regeln:

Die folgende CSS-Regel ändert die Bildopazität auf 1, wenn das entsprechende li als :target fungiert. Denken Sie daran, dass wir die Folie/das Bild mit ungeordneten Listen-Tags markiert haben.

1

2

#image-slider li:target img { 

3

	opacity: 1; 

4

}

Die Beschriftung darin sollte um 100% der Breite nach oben gleiten; Bitte lassen Sie die !important Erklärung nicht aus. Das ist wichtig.

1

2

#image-slider li:target figcaption { 

3

	transform: translateY(-100%) !important; 

4

}

Okay, probieren Sie das Ergebnis in Ihrem Browser aus.

Slider-Navigationseffekte

Die Transition-Eigenschaft kann speziell in Selektoren wie :hover und :active angewendet werden.

Wir haben den Übergang für .nav-slider li a oben definiert, werden aber unter bestimmten Bedingungen im Benutzerverhalten auch eine andere Timing-Funktion angeben.

Wenn wir den Mauszeiger über die Schiebereglernavigation bewegen, ändert sich die Farbe des Menüs um 300 ms in grün.

1

2

.nav-slider li a:hover { 

3

	background: #89c53f; 

4

	border: 1px solid #467536; 

5

	transition: all 300ms ease-in; 

6

}

Wenn wir darauf klicken, ändert sich das Menü sehr schnell um ca. 50ms in dunkelgrün.

1

2

.nav-slider li a:active { 

3

	background: #467536; 

4

	border: 1px solid #20411d; 

5

	transition: all 50ms; 

6

}

Und wenn das Menü keine Benutzeraktivität hat, kehrt es sehr langsam in seinen ursprünglichen Zustand zurück, um etwa 1s, wie wir oben im .nav-slider li angegeben haben.

Das Limit

Wie bei jeder anderen Technologie ist CSS nicht anders. Es hat noch einige Einschränkungen.

Wenn Sie Ihren Browser aktualisieren (ich gehe davon aus, dass Sie sich noch auf der Übungsseite dieses Tutorials befinden), werden Sie feststellen, dass die Beschriftung auf der ersten Folie beim ersten Laden der Seite nicht angezeigt wurde. Das liegt daran, dass wir im CSS nur angegeben haben, dass die Bildunterschrift angezeigt wird, sobald ein li anvisiert wird. Hier müssen wir also der Bildunterschrift eine bestimmte Übersetzung hinzufügen.

Wir wählen die erste Folie mit dem :first-child-Selektor aus und übersetzen die Bildunterschrift, um 100 % ihrer Höhe nach oben zu verschieben.

1

2

#image-slider li:first-child figcaption { 

3

	transform: translateY(-100%); 

4

}

Aktualisieren Sie Ihren Browser, jetzt sollte die erste Bildunterschrift beim ersten Laden angezeigt werden. Denken Sie daran, dass wir im vorherigen Schritt einen Verzögerungsübergang von 300 ms hinzugefügt haben, sodass die Beschriftung nach dieser bestimmten Zeit angezeigt wird.

Es gibt jedoch ein Problem, die obige CSS-Anweisung sorgt dafür, dass die Bildunterschrift an Ort und Stelle bleibt, obwohl wir zur anderen Folie navigiert sind. Also müssen wir eine Gegenaktionsregel dafür erstellen.

Wir fügen eine .hide-Klasse für die Beschriftung (in der ersten Folie) hinzu und definieren sie so, dass sie zu ihrer ursprünglichen Position zurückkehrt.

1

2

#image-slider li:first-child figcaption.hide { 

3

	transform: translateY(0); 

4

}

Warten Sie, haben wir nicht eine Versteckklasse in die Bildunterschrift eingefügt?

Nein haben wir nicht.

Wir werden es stattdessen (leider) bedingt aus jQuery hinzufügen. Die Hide-Klasse würde angewendet, wenn die Benutzer zu anderen Folien navigieren.

Fügen Sie den folgenden jQuery-Link aus der Google-Bibliothek am Ende der Seite vor dem Tag "body close" ein. Die aktuelle jQuery-Version ist 1.7.1.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Zunächst erstellen wir Variablen für die ausgewählten Elemente.

1

2

var firstcaption = $('.slide:first-child figcaption'), 

3

	otherslides	= $('.nav-slider li:nth-child(n+2)');

Und dann erstellen Sie eine Funktion, um die hide-Klasse hinzuzufügen, wenn die Benutzer auf das Menü klicken, um zu den anderen Folien zu navigieren.

1

2

otherslides.click(function(){ 

3

		firstcaption.addClass("hide"); 

4

	});

Vergessen Sie nicht, den gesamten obigen Code in das <script>-Tag einzuschließen.

1

2

<script> 

3

$(function() { 

4

  	var 	firstcaption = $('.slide:first-child figcaption'), 

5

		otherslides	= $('.nav-slider li:nth-child(n+2)'); 

6

7

		otherslides.click(function(){ 

8

		firstcaption.addClass("hide"); 

9

	}); 

10

 }); 

11

</script>

Einpacken

In Ordnung, wir haben in diesem Tutorial ziemlich viel Code geschrieben, also lassen Sie uns noch einmal zusammenfassen.

HTML-Markup

1

2

<!doctype html> 

3

<html lang="en"> 

4

<head> 

5

	<meta charset="utf-8"> 

6

	<title>Practical Use of CSS3: Transforms and Transitions - Webdesigntuts+</title> 

7

	<link href="normalize.css" rel="stylesheet" type="text/css" /> 

8

	<link href="style.css" rel="stylesheet" type="text/css" /> 

9

	<link href="effects.css" rel="stylesheet" type="text/css" /> 

10

</head> 

11

<body> 

12

	<!-- site navigation --> 

13

	<header> 

14

		<div> 

15

		<h1 class="home"><a href="/">the resto.</a></h1> 

16

		<nav id="site-nav"> 

17

			<ul class="menu"> 

18

				<li><a href="#">About</a></li> 

19

				<li><a href="#">Contact</a></li> 

20

				<li><a href="#">Restaurant</a></li> 

21

				<li><a href="#">Store</a></li> 

22

			</ul> 

23

		</nav> 

24

		</div> 

25

	</header> 

26

	<!-- content section --> 

27

	<div id="content"> 

28

	<!-- image slider --> 

29

	<section id="image-slider"> 

30

		<div class="hidden"> 

31

		<span class="shine"></span> 

32

		<ul> 

33

			<li id="slide-1" class="slide"> 

34

				<figure> 

35

					<img src="images/slide/grilled-chicken.jpg" /> 

36

					<figcaption> 

37

						<p>Faworki cotton candy apple pie lollipop. Jelly beans apple pie sweet roll pie cheesecake.</p> 

38

					</figcaption> 

39

				</figure> 

40

			</li> 

41

			<li id="slide-2" class="slide"> 

42

				<figure> 

43

					<img src="images/slide/pasta.jpg" /> 

44

					<figcaption> 

45

						<p>Sesame snaps caramels powder muffin applicake chocolate cake.</p> 

46

					</figcaption> 

47

				</figure> 

48

			</li> 

49

			<li id="slide-3" class="slide"> 

50

				<figure> 

51

					<img src="images/slide/steak.jpg" /> 

52

					<figcaption> 

53

						<p>Pie danish applicake sugar plum sweet roll faworki cookie lollipop carrot cake.  

54

						Chupa chups jujubes cupcake tart. </p> 

55

					</figcaption> 

56

				</figure> 

57

			</li> 

58

			<li id="slide-4" class="slide"> 

59

				<figure> 

60

					<img src="images/slide/cappuccino.jpg" /> 

61

					<figcaption> 

62

						<p>Lollipop dessert toffee apple pie liquorice chocolate marzipan.</p> 

63

					</figcaption> 

64

				</figure> 

65

			</li> 

66

		</ul> 

67

		</div> 

68

		<!-- image slider navigation --> 

69

		<nav class="nav-slider"> 

70

			<ul> 

71

				<li><a href="#slide-1">1</a></li> 

72

				<li><a href="#slide-2">2</a></li> 

73

				<li><a href="#slide-3">3</a></li> 

74

				<li><a href="#slide-4">4</a></li> 

75

			</ul> 

76

		</nav> 

77

	</section> 

78

79

	<!--  image caption --> 

80

	<section id="image-caption"> 

81

		<ul> 

82

			<li class="thumbnail thumbnail-1"> 

83

			<figure> 

84

				<span class="pattern-overlay"></span> 

85

				<img src="images/thumbnail/women-at-dinnner.jpg"/> 

86

				<figcaption> 

87

					<p>Lemon drops dessert</p> 

88

				</figcaption> 

89

			</figure> 

90

			</li> 

91

			<li class="thumbnail thumbnail-2"> 

92

			<figure>	 

93

				<span class="pattern-overlay"></span> 

94

				<img src="images/thumbnail/cooked-breakfast.jpg"/> 

95

				<figcaption> 

96

					<hr /><h3>Apple pie chupa</h3> 

97

					<p>Apple pie chupa chups pudding cheesecake pie cake topping jelly-o.  

98

					Icing sweet roll toffee.</p> 

99

					<p>Lemon drops toffee pastry cookie marzipan carrot cake tart sweet roll tiramisu.</p> 

100

				</figcaption> 

101

			</figure> 

102

			</li> 

103

			<li class="thumbnail thumbnail-3"> 

104

			<figure> 

105

				<span class="pattern-overlay"></span> 

106

				<img src="images/thumbnail/steamed-dumplings.jpg"/> 

107

				<figcaption> 

108

					<hr /><h3>Jelly beans</h3> 

109

					<p>Jelly beans icing macaroon pudding carrot cake.  

110

					Sweet roll halvah pudding cookie candy canes cake jelly marshmallow.</p>  

111

					<p>Chupa chups halvah tiramisu sugar plum.</p> 

112

				</figcaption> 

113

			</figure>	 

114

			</li> 

115

			<li class="thumbnail thumbnail-4"> 

116

			<figure> 

117

				<span class="pattern-overlay"></span> 

118

				<img src="images/thumbnail/salad.jpg"/> 

119

				<figcaption> 

120

					<p>Gummies chocolate bar tootsie roll oat cake gummies. Sesame snaps faworki ice cream tootsie roll pastry.</p> 

121

				</figcaption> 

122

			</figure> 

123

			</li> 

124

			<li class="thumbnail thumbnail-5"> 

125

			<figure> 

126

				<span class="pattern-overlay"></span> 

127

				<img src="images/thumbnail/table-in-restaurant.jpg"/> 

128

				<figcaption> 

129

					<p>Wypas cheesecake sweet ice cream faworki macaroon sweet pie.  

130

					Tart sweet muffin pastry cotton candy ice cream chocolate gummi bears.</p> 

131

				</figcaption> 

132

			</figure> 

133

			</li> 

134

			<li class="thumbnail thumbnail-6"> 

135

			<figure> 

136

				<span class="pattern-overlay"></span> 

137

				<img src="images/thumbnail/pizza.jpg"/> 

138

				<figcaption> 

139

					<hr /><h3>Chocolate chocolate</h3> 

140

					<p>Chocolate chocolate cake wafer halvah jelly ice cream fruitcake wypas.  

141

					Sweet topping candy sugar plum bear claw sugar plum bonbon. </p> 

142

					<p>Croissant sweet roll apple pie cotton candy bear claw marshmallow cheesecake ice cream chocolate bar</p> 

143

				</figcaption> 

144

			</figure> 

145

			</li> 

146

		</ul> 

147

		</section> 

148

	</div> 

149

	<!-- site footer --> 

150

	<footer> 

151

	<p>Envato &copy; 2012. All rights reserved</p> 

152

	</footer> 

153

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

154

<script src="prefixfree.js"></script> 

155

<script> 

156

$(function() { 

157

  	//Define variables 

158

	var firstcaption = $('.slide:first-child figcaption'), 

159

		otherslides = $('.nav-slider li:nth-child(n+2)'); 

160

    //Add class "hide" when the other slides are clicked 

161

		otherslides.click(function(){ 

162

		firstcaption.addClass("hide"); 

163

	}); 

164

 }); 

165

</script> 

166

</body> 

167

</html>

Das CSS

Wir trennen die Stile in zwei Dateien. Zuerst speichert die Datei style.css alle CSS-Regeln, die das Aussehen der Website beeinflussen.

1

2

/* Apply a background in the body tag */ 

3

body { 

4

	background:url('images/grid-noise.png') repeat; 

5

	font: 12pt Tahoma, Geneva, sans-serif; 

6

} 

7

/* @font-face */ 

8

@font-face { 

9

	font-family: 'ChunkFiveRegular'; 

10

	src: url('fonts/Chunkfive-webfont.eot'); 

11

	src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), 

12

		 url('fonts/Chunkfive-webfont.woff') format('woff'), 

13

		 url('fonts/Chunkfive-webfont.ttf') format('truetype'), 

14

		 url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); 

15

	font-weight: normal; 

16

	font-style: normal; 

17

} 

18

@font-face { 

19

	font-family: 'TitilliumText22LRegular'; 

20

	src: url('fonts/TitilliumText22L003-webfont.eot'); 

21

	src: url('fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'), 

22

		 url('fonts/TitilliumText22L003-webfont.woff') format('woff'), 

23

		 url('fonts/TitilliumText22L003-webfont.ttf') format('truetype'), 

24

		 url('fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg'); 

25

	font-weight: normal; 

26

	font-style: normal; 

27

} 

28

/* Header */ 

29

header { 

30

	background: url('images/nav-bg.png') repeat-x; 

31

	padding: 0; 

32

	height: 70px; 

33

	border-bottom: 2px solid #000; 

34

	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5); 

35

	width: 100%; 

36

} 

37

header > div { 

38

	width: 960px; 

39

	margin: 0 auto; 

40

} 

41

header .home { 

42

	margin: 0; 

43

	font: 36pt/60pt 'ChunkFiveRegular', Arial, sans-serif; 

44

	text-shadow: 0px 2px 0px #000; 

45

	float: left; 

46

} 

47

header a { 

48

	text-decoration: none; 

49

	color: #fff; 

50

	text-shadow: 1px 1px 0 #000; 

51

	transition: all 300ms ease-out; 

52

} 

53

header nav { 

54

	float: right; 

55

} 

56

header nav ul { 

57

	padding: 0; 

58

	margin-right: 6px; 

59

} 

60

header nav li { 

61

	display: inline; 

62

	font: 12pt/35pt 'TitilliumText22LRegular', Arial, sans-serif; 

63

	margin-left: 25px; 

64

	text-transform: uppercase; 

65

} 

66

/* Content */ 

67

#content { 

68

	width: 960px; 

69

	height: auto; 

70

	margin: 25px auto 0; 

71

	background: #f3f3f3; 

72

	border: 1px solid #bbb; 

73

	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3); 

74

} 

75

/* Image Slider Section */ 

76

#image-slider { 

77

	height: 425px; 

78

	width: 960px; 

79

} 

80

#image-slider ul { 

81

	list-style: none; 

82

	margin: 0; 

83

	padding: 0; 

84

} 

85

#image-slider img { 

86

	display: block; /** For removing white space **/ 

87

} 

88

#image-slider figcaption { 

89

	background-color: rgba(0,0,0,.7); 

90

	color: #fff; 

91

	padding: 10px 20px; 

92

	position: relative; 

93

	text-shadow: 1px 1px 0px #000; 

94

	width: 920px; 

95

	bottom: 0; 

96

} 

97

#image-slider .slide { 

98

	position: absolute; 

99

} 

100

#image-slider .slide img { 

101

	position: relative; 

102

	opacity: 0; 

103

} 

104

#image-slider .slide:first-child img { 

105

	opacity: 1; 

106

} 

107

#image-slider .hidden { 

108

	height: 380px; 

109

	overflow: hidden; 

110

	position: relative; 

111

	width: 960px; 

112

	border-bottom: 1px solid #aaa; 

113

} 

114

#image-slider .shine { 

115

	height: 300px; 

116

	margin: 0 auto; 

117

	position: absolute; 

118

	right: -60px; 

119

	top: -58px; 

120

	transform: rotate(-20deg); 

121

	background: linear-gradient(45deg, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); 

122

	width: 1500px; 

123

	z-index: 5; 

124

} 

125

/* Slide Navigation Section */ 

126

.nav-slider { 

127

	text-align: center; 

128

	padding-top: 15px; 

129

	border-top: 1px solid #fff; 

130

} 

131

.nav-slider li { 

132

	display: inline; 

133

	margin: 0 5px; 

134

} 

135

.nav-slider li a { 

136

	background: #ddd; 

137

	border: 1px solid #ccc; 

138

	display: inline-block; 

139

	height: 19px; 

140

	text-indent: -9999px; 

141

	width: 19px; 

142

} 

143

/* Image Caption Section */ 

144

#image-caption { 

145

	padding: 32px 32px 40px; 

146

} 

147

#image-caption ul { 

148

	list-style: none; 

149

	padding: 0; 

150

	margin: 0; 

151

} 

152

#image-caption ul li { 

153

	display: inline-block; 

154

	width: 270px; 

155

	vertical-align: top; 

156

	height: 190px; 

157

	background: #fff; 

158

	border: 5px solid #ddd; 

159

	cursor: pointer; 

160

	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2); 

161

	position: relative; 

162

	overflow: hidden; 

163

} 

164

#image-caption img { 

165

	display: block; /** Remove white space **/ 

166

} 

167

.pattern-overlay { 

168

	background: url('images/thumbnail-pattern.png') repeat; 

169

	height: 190px; 

170

	width: 270px; 

171

	position: absolute; 

172

	z-index: 1; 

173

} 

174

.thumbnail:nth-child(3n+2) /** Select only the the middle images (2,5,...etc)**/ { 

175

	margin: 0 23px; 

176

} 

177

.thumbnail:nth-child(-n+3) /** Select only the first 3 images **/ {