The ITC Prog Blog: CSS Advanced

Introduction

So the last tutorial showed some cool looking modifications to a web page with not too much code behind to achieve it. You're probably asking yourself: Tidwell's annoyance of bards seems to exist (yep!), any other cheese he could potentially code about for an advanced tutorial? Yeppers, let's take the way back machine to the 80's where my first introduction to Dungeons and Dragons was in the animated form via Saturday morning cartoons. Lets see if I can make some cheesy images from the "players" in the series somewhat palatable to view in a webpage.

Let the coding begin!

First lets create a webpage. Nothing too fancy, here's something I "borrowed" from the interwebz (code downloadable in link at the bottom of the tutorial):

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Slideshow | Advanced CSS Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/slideshow.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>
<center>
DnD Animated Series CSS3 Slideshow</center>
</h2>
</header>
        <div class="container" id="container">

<span id="slide1" class="cap"></span>
            <span id="slide2" class="cap"></span>
            <span id="slide3" class="cap"></span>
            <span id="slide4" class="cap"></span>
            <span id="slide5" class="cap"></span>
            <span id="slide6" class="cap"></span>
            <span id="slide7" class="cap"></span>

Now we need some css to make it work. The first code sampling is a small css file we'll call layout.css to handle the general layout of the website:

and also a file we'll call slideshow.css to handle the transition from one jpg file to another:

span.cap {
    display:none;
}
ul.slider {
    margin:0 auto;
    height:455px;
    list-style:none;
    position:relative;
    width:706px;

}
ul.slider li {
    float:left;

-moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides {
    border:1px solid #888;
    height:453px;
    overflow:hidden;
    position:relative;
    width:604px;
    z-index:10;

-moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides img {
    display:block;
    left:35%;
    opacity:0; 
    position:absolute;
    top:0;

-moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);

-moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides img.g1,
ul.slider li.slides img.g2,
ul.slider li.slides img.g3,
ul.slider li.slides img.g4,
ul.slider li.slides img.g5,
ul.slider li.slides img.g6,
ul.slider li.slides img.g7 {
    margin-left:-302px
}
ul.slider li.lArrow,
ul.slider li.rArrow {
    background-color:#bbb;
    border:2px solid #888;
    height:451px;
    position:relative;
    width:48px;
    z-index:5;
}
ul.slider li.lArrow {
    border-radius:100px 0 0 100px;
    border-width:2px 0 2px 2px;
}
ul.slider li.rArrow {
    border-radius:0 100px 100px 0;
    border-width:2px 2px 2px 0;
}
ul.slider li.lArrow a,
ul.slider li.rArrow a {
    display:block;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:50px;
}
ul.slider li.lArrow:hover {
    background-color:#eee;
    left:2px;
}
ul.slider li.rArrow:hover {
    background-color:#eee;
    left:-2px;
}
ul.slider li.track {
    background-color:rgba(255,255,255,0.3);
    clear:left;
    height:25px;
    margin-left:51px;
    margin-top:-25px;
    position:relative;
    text-align:center;
    width:804px;
    z-index:20;
}
ul.slider li.track a {
    background-color:#fff;
    display:inline-block;
    height:15px;
    margin:5px;
    width:10px;

border-radius:5px;
    -moz-box-shadow:2px 1px 1px #000000;
    -ms-box-shadow:2px 1px 1px #000000;
    -webkit-box-shadow:2px 1px 1px #000000);
    -o-box-shadow:2px 1px 1px #000000;
    box-shadow:2px 1px 1px #000000;
}
ul.slider li.track a:hover {
    background-color:#0f0;
}
span#slide1:target ~ ul.slider li.slides .g1,
span#slide2:target ~ ul.slider li.slides .g2,
span#slide3:target ~ ul.slider li.slides .g3,
span#slide4:target ~ ul.slider li.slides .g4,
span#slide5:target ~ ul.slider li.slides .g5,
span#slide6:target ~ ul.slider li.slides .g6,
span#slide7:target ~ ul.slider li.slides .g7{
    opacity:1;

-moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}
ul.slider li.slides .g0 {
    margin-left:-302px;
    opacity:1;

-moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}
span#slide1:target ~ ul.slider li.slides .g0,
span#slide2:target ~ ul.slider li.slides .g0,
span#slide3:target ~ ul.slider li.slides .g0,
span#slide4:target ~ ul.slider li.slides .g0,
span#slide5:target ~ ul.slider li.slides .g0,
span#slide6:target ~ ul.slider li.slides .g0,
span#slide7:target ~ ul.slider li.slides .g0 {
    opacity:0;

-moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}
span#slide1:target ~ ul.slider li.track .tr1, 
span#slide2:target ~ ul.slider li.track .tr2, 
span#slide3:target ~ ul.slider li.track .tr3, 
span#slide4:target ~ ul.slider li.track .tr4, 
span#slide5:target ~ ul.slider li.track .tr5, 
span#slide6:target ~ ul.slider li.track .tr6,
span#slide7:target ~ ul.slider li.track .tr7 {
    background-color:#f00;
}

span#slide1:target ~ ul.slider li.lArrow a,
span#slide1:target ~ ul.slider li.rArrow a {z-index:10}
span#slide1:target ~ ul.slider li.rArrow .a2 {z-index:100}
span#slide1:target ~ ul.slider li.lArrow .a8 {z-index:100}

span#slide2:target ~ ul.slider li.lArrow a,
span#slide2:target ~ ul.slider li.rArrow a {z-index:10}
span#slide2:target ~ ul.slider li.rArrow .a3 {z-index:100}
span#slide2:target ~ ul.slider li.lArrow .a1 {z-index:100}

span#slide3:target ~ ul.slider li.lArrow a,
span#slide3:target ~ ul.slider li.rArrow a {z-index:10}
span#slide3:target ~ ul.slider li.rArrow .a4 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow .a2 {z-index:100}

span#slide4:target ~ ul.slider li.lArrow a,
span#slide4:target ~ ul.slider li.rArrow a {z-index:10}
span#slide4:target ~ ul.slider li.rArrow .a5 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow .a3 {z-index:100}

span#slide5:target ~ ul.slider li.lArrow a,
span#slide5:target ~ ul.slider li.rArrow a {z-index:10}
span#slide5:target ~ ul.slider li.rArrow .a6 {z-index:100}
span#slide5:target ~ ul.slider li.lArrow .a4 {z-index:100}

span#slide6:target ~ ul.slider li.lArrow a,
span#slide6:target ~ ul.slider li.rArrow a {z-index:10}
span#slide6:target ~ ul.slider li.rArrow .a7 {z-index:100}
span#slide6:target ~ ul.slider li.lArrow .a2 {z-index:100}

span#slide7:target ~ ul.slider li.lArrow a,
span#slide7:target ~ ul.slider li.rArrow a {z-index:10}
span#slide7:target ~ ul.slider li.rArrow .a8 {z-index:100}
span#slide7:target ~ ul.slider li.lArrow .a1 {z-index:100}

The result looks like this in a web browser:

Wowsers! Very little HTML, whole lotta love (for DnD the animated series anyways). Even more powerful stuff for very little code behind!

Source:
http://www.script-tutorials.com/how-to-create-a-pure-css3-slideshow/

Image Source:

http://img4.wikia.nocookie.net/__cb20100224154850/dungeonsanddragonscartoon/images/a/ac/Diana.jpg

http://img1.wikia.nocookie.net/__cb20100224155117/dungeonsanddragonscartoon/images/1/10/Sheila.jpg

http://img2.wikia.nocookie.net/__cb20100224155256/dungeonsanddragonscartoon/images/1/10/Ericavalier.jpg

http://img4.wikia.nocookie.net/__cb20100224155632/dungeonsanddragonscartoon/images/0/07/MAGICIAN.jpg

http://img4.wikia.nocookie.net/__cb20100224155712/dungeonsanddragonscartoon/images/a/af/Barbarian1.jpg

http://img1.wikia.nocookie.net/__cb20100224154119/dungeonsanddragonscartoon/images/2/2a/Hank.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iVf9HhZIr-Nv-KjWaPte6MpeT9spJe0c21pFBZJYRszvLgC07Ar3hBCI07AoiydBJe17cRYb4pgR3Z7VcDCQG4EEyehn-vYzyPtk92Jn-aAZcLmo15ROpOskVsYFTHz4y8kwSW7TvqOn/s1600/25th.jpg

The ITC Prog Blog

Wednesday, September 10, 2014

CSS Advanced

Introduction

Let the coding begin!

No comments:

Post a Comment

Contributors