[CSS] Pure CSS Image Slider ✤✤✤✤

Hallo!
Heute hab ich ne Mail gekriegt, in der ich gefragt wurde, wie man denn einen Slider machen könne, mit Link. Davon gibt es ja ganz viele verschiedene Versionen, ich wollt heut aber einen machen, der nicht wie die meisten anderen auf JavaScript basiert, sondern mit reinem CSS gemacht wird. Die Links hab ich leider noch nicht hinbekommen, aber ich könnte mir diesen Slider sehr gut vorstellen, als ImageShowcase in Bilderblogs, oder als Header-Alternative.
An den Links arbeite ich noch und ich hoff, dass ich irgendwann meiner Sommerpause dazu komme, einen Post zum Thema zu schreiben.
Jetzt aber die Ohne-Links-Version. Ich hoffe ihr mögt es. Ich bin der Meinung die drei Stunden des Zusammensetzens haben sich gelohnt. Ich hoffe ihr auch. :D

Hello!
Today I got a mail asking how to create a slider, containing links. There are a lot of different sliders around for that purpose, but I wanted to create one, which wasn't based on javascript like most sliders are, but one that works with css only. And I managed it. Even though the links are still missing (but I'm working on that)
I think this slider would work as a great image showcase on photoblogs and would make a great alternative to a static header as well.
As I said, I'm working on incorporating links and hope that by the end of summer break I will have managed to present you a slider with links.
But now for the lack-link-version. I hope you like it. I think the three hours of putting it together were worth it, I hope you find that too. :D

• Cheesecake

  Cheesecake

• Chiffon Cupcakes

  Chiffon Cupcakes

• Devils Food Cupcakes

  Devil's Food

• Mini Irish Coffee Cupcakes

  Irish Coffee Minis

• Almond Chocolate Cupcakes

  Almond Chocolate

| Cheesecake | Chiffon Cupcakes | Devil's Food Cupcakes| Irish Coffee Minis | Almond Chocolate Cupcakes |

Wie immer habe ich auch ein Demo, mit einem kleinen zusätzlichen Effekt und natürlich dem vollständigen Code.

As allways there's a Demo as well, with a slightly different effect and the complete code.

DEMO

1. Sizing and Images

Als erstes müssen die Bilder aufbereitet werden. Ihr müsst die Grösse eures Sliders bestimmen. Bei mir sind das 900x550 Pixel. Der Code ist so ausgelegt, dass fünf Bilder Platz haben.
Bei mir sind die Bilder folgende (ausserdem hab ich auch noch mein Pattern für's Overlay bereit)
Die werden dann irgendwo hochgeladen:

First you have to decide on the size of your slider, because first we have to prepare our images. For me it's 900x550px. The code is written for 5 images.
Mine are the following (also I have a pattern ready for the overlay to achieve the desired effect)
the images have to be uploaded somewhere:

2. HTML

Okay, der HTML-Code ist nicht sehr schwer. Eigentlich ist es eine Liste in der wir drei Elemente platzieren. Einen Span-Container, der uns als Container für das Bild dienen wird, ein div-Container dessen Inhalt der Titel ist, ein heading 3ter Ordnung. Diese beiden Container werden dann später unterschiedlich animiert.

Okay, the HTML-code is not really complex. It's a list which contains three elements. First a span-container which is gonna be holding our pictures and then a div-container with a h3-tag, which is gonna be our text sliding above the pic. The two containers are gonna be animated differently.

<ul class="slideshow">
<li><span>Pic1</span><div><h3>Text1</h3></div></li>
<li><span>Pic2</span><div><h3>Text2</h3></div></li>
<li><span>Pic3</span><div><h3>Text3</h3></div></li>
<li><span>Pic4</span><div><h3>Text4</h3></div></li>
<li><span>Pic5</span><div><h3>Text5</h3></div></li>
</ul>

Okay, es sind über 300 Zeilen CSS, wenn wir uns das am Ende ansehen, aber das liegt nur daran, dss das Ganze mit ganz vielen Prefixes funktionert. Die Animation vor allem. Aber darum geht's erst später. Was ich damit sagen will, ist, dass es zwar sehr viel CSS gibt, aber das soll nicht der Grund sein, warum ihr zurückschreckt. Es ist wirklich machbar und am Ende eigentlich auch überschaubar.

Okay there's gonna be a lot of CSS, more than 300 lines, but mostly because there's a lot of prefixes in the animation part. Still, what I intend to tell you is, not to be afraid. It's a lot of CSS, yes, but still it is manageable.

3. CSS

Als erstes ganz einfach. Gestaltung des Grundlegenden.

.slideshow,
.slideshow:after{
    position: relative; /* Relative Positionierung innerhalb des Blogs*/
    width: 900px; /* Breite */
    height: 550px; /* Höhe */
 float: center; /* Zentrierung */
 list-style: none; /* Entfernung der Listenpunkte */
 color: transparent; /* Ausblenden des Textes */
 overflow: hidden !important; /* Alles was über den Rand geht, wird abgeschnitten */
 padding: 0; /* Kein Padding */
 margin: 0; /* Kein Rand */
}
 
.slideshow:after {
    content: ''; /* Kein Inhalt */
    background: transparent url(pattern.png) repeat top left; /* Pattern als Overlay*/
 position: absolute; /* Absolut auf dem Bild */
 top: 0; /* Oben festgemacht */
 left: 0; /*In der linken Ecke */
 z-index: 2; /* Zwei Ebenen über dem Bild */
}

Als nächstes werden die Span-Elemente so getaltet, dass sie die ganze Fläche abdecken, ausserdem wird die Animation implementiert (wie gesagt, ich verwende hier keine Prefixes für die einzelnen Browser, aber im ganzen Code im Demo habt ihr die alle)

.slideshow li span{
    width: 900px; /* Breite */
    height: 550px; /* Höhe */
    position: absolute;/* Absolut innerhalb des Containers*/
    top: 0px; /* Oben befestigt */
    left: 0px; /* Und links */
    color: transparent !important; /* Transparenter Text */
   opacity: 0; /* Bild wird keine Deckkraft haben */
    z-index: 0; /* Unterhalb des Patterns */
    animation: imageAnimation 30s linear infinite 0s; /* unendliche Animation, ohne Verzögerung, totale Dauer eines Durchgangs 30s */
}

Als nächstes kommt der Text dran, also der div-Container.

.slideshow li div, .slideshow2 li div {
    z-index: 1000; /* über allem */
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 900px; 
    text-align: right; /* textausrichtung: rechts */
    opacity: 0; /* auch hier unsichtbar */
    animation: titleAnimation 30s linear infinite 0s; /* Gleiche Animation */
}

.slideshow li div h3, .slideshow2 li div h3 {
    font-size: 80px; /* Textgrösse */
    color: rgba(201, 77, 48, .7); /* Farbe */
 font-variant: small-caps; /* Kapitälchen */
 font-weight: bold; /* Fett */
 border: 0; /* Kein Rand */
 list-style: none; /* Kein List-Style */
 width: 900px;
 height: 550px;
 margin-bottom: -10px;
 line-height: 1032px;
}

Kommen wir zum Hauptteil. Den Bildern.
Die Bilder werden in 6-Sekunden-Intervallen gewechselt. Bevor sie angezeigt werden, haben sie ein Animations-Delay, also eine Verzögerung, ehe sie starten.
Gleiches tun wir auch gleich mit den div-Containern. Die URLs werden einfach durch eure Bilder ersetzt.

.slideshow li:nth-child(1) span{
 background-image: url(../Images/1.gif) 
 }

 .slideshow li:nth-child(2) span{
    background-image: url(../Images/2.gif);
    animation-delay: 6s;
}

.slideshow li:nth-child(3) span{
    background-image: url(../Images/3.gif);
    animation-delay: 12s;
}

.slideshow li:nth-child(4) span{
    background-image: url(../Images/4.gif);
    animation-delay: 18s;
}

.slideshow li:nth-child(5) span{
    background-image: url(../Images/5.gif);
    animation-delay: 24s;
}

.slideshow li:nth-child(2) div{
    animation-delay: 6s;
}

.slideshow li:nth-child(3) div{
    animation-delay: 12s;
}

.slideshow li:nth-child(4) div{
    animation-delay: 18s;
}

.slideshow li:nth-child(5) div{
    animation-delay: 24s;
}

First of all just the basic strcuture.

.slideshow,
.slideshow:after{
    position: relative; /* Relative positioning inside of the blog*/
    width: 900px; /* Width (obviously ^^) */
    height: 550px; 
 float: center; /* center alignment */
 list-style: none; /* Removing the list bullets */
 color: transparent; /* Hide all the text */
 overflow: hidden !important; /* Everything bigger than our container will be cut off */
 padding: 0; /* No Padding */
 margin: 0; /* No margin */
}
 
.slideshow:after {
    content: ''; /* no content */
    background: transparent url(pattern.png) repeat top left; /* Pattern as Overlay*/
 position: absolute; /* Absolut positioning on our container (images) */
 top: 0; /* anchored at the top- */
 left: 0; /*-left-hand corner */
 z-index: 2; /* 2 layers above the pics */
}

Next we're styling the span-elements so they are covering the whole space, and we implement our animation (as said, I'm not gonna use prefixes here, but in the demo you'll find the code with them)

.slideshow li span{
    width: 900px;
    height: 550px;
    position: absolute; /* absolute positioning*/
    top: 0px; /*anchores at the top */
    left: 0px; /* and the left */
    color: transparent !important; /* no text is shown */
   opacity: 0; /* image is gonna be transparent*/
    z-index: 0; /* underneath the pattern */
    animation: imageAnimation 30s linear infinite 0s; /* animation is gonna be in a loop, without any pause in between, it'll take 30s for the whole animation befer it restarts*/
}

Next is the text-part, so to speek, the div-container.

.slideshow li div, .slideshow2 li div {
    z-index: 1000; /* above all the other layers */
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 900px;
    text-align: right; 
    opacity: 0; /* text is transparent at the beginning as well */
    animation: titleAnimation 30s linear infinite 0s; /* same animation */
}

.slideshow li div h3, .slideshow2 li div h3 {
    font-size: 80px; 
    color: rgba(201, 77, 48, .7);
 font-variant: small-caps;
 font-weight: bold;
 border: 0;
 list-style: none;
 width: 900px;
 height: 550px;
 margin-bottom: -10px;
 line-height: 1032px;
}

Now for the most important part. The pics.
The pictures are gonna be changing in 6s-intervals. Before they are shown, they need to have add an animation delay. the same is gonna be done with the div-container. Just replace the URLs with your own links.

.slideshow li:nth-child(1) span{
 background-image: url(../Images/1.gif) 
 }

 .slideshow li:nth-child(2) span{
    background-image: url(../Images/2.gif);
    animation-delay: 6s;
}

.slideshow li:nth-child(3) span{
    background-image: url(../Images/3.gif);
    animation-delay: 12s;
}

.slideshow li:nth-child(4) span{
    background-image: url(../Images/4.gif);
    animation-delay: 18s;
}

.slideshow li:nth-child(5) span{
    background-image: url(../Images/5.gif);
    animation-delay: 24s;
}

.slideshow li:nth-child(2) div{
    animation-delay: 6s;
}

.slideshow li:nth-child(3) div{
    animation-delay: 12s;
}

.slideshow li:nth-child(4) div{
    animation-delay: 18s;
}

.slideshow li:nth-child(5) div{
    animation-delay: 24s;
}

4. Animation

Okay, jetzt geht's darum, die Animation zu definieren. Wenn ihr einen Blick nach oben werft, haben wir zwei Arten von Animationen definiert. imageAnimation und titleAnimation
Diese beiden verschiedenen Animationen werden wir nun in sogenannten Keyframes definieren. Bei den Keyframes werden einzelne Stadien der Animation beschrieben, die dann am Ende smooth ablaufen.

Fur die Bildanimation ist dies ein Einblenden, ein Wachsen sowie ein leichtes Drehen
Der Text fliegt rein und erscheint ebenfalls.

@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}

@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}

Und dann war's das schon. Der Slider ist gemacht :D

Einfügen könnt ihr das alles ganz einfach in ein HTML-Gadget oder in den HTML-Teil eures Posts. Die CSS muss einfach in style-Klammern stehen.

Okay, now we have to define our animations, if you have a look at what we already wrote we have to different kinds of animations imageAnimation and titleAnimation
Those two have to be defined now, which we are doing with keyframes. You define different states of your animation and then they run smoothly.

The images are apearing, growing and turned slightly, the text is flying into our pic and saturating itself as well.

@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}

@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}

And that's all. Your Slider is done :D

you can add it easily in a HTML-Widget or into the HTML-part of your post, just remember to put the CSS between style-tags.