Posts Tagged 'css3'

HomeTag: css3

Membuat Menu Navigasi Breadcrumb Menggunakan CSS3

Posted by:

Membuat Menu Navigasi Breadcrumb Menggunakan CSS3

Pada tutorial kali ini, kita akan sebuah menu navigasi breadcrumb menggunakan CSS3. Hasil akhir dari menu navigasi tersebut adalah seperti gambar di bawah ini:

Lihat video cara pembuatannya berikut ini:

Source Code

<html>
<head>
    <title>Pure CSS3 Breadcrumb Navigation Menu</title>    
    <style>
        /* Import custom font from google font*/
        @import url(http://fonts.googleapis.com/css?family=Noto+Serif); 

        body {
            font-family: 'Noto Serif', Verdana, Arial;	
            font-size:13px;	
            padding-top: 100px;
            text-align:center;
        }

        .breadcrumb {
            display:inline-block;
            box-shadow: 0 0 15px 1px rgba(0,0,0,0.6);
            border-radius: 5px;
            
            overflow:hidden;
            counter-reset:flag;
        }

        .breadcrumb a {
            display:block;
            float:left;
            
            text-decoration:none;
            padding: 0 10px 0 60px;
            
            line-height:36px;
            
            background: linear-gradient(#5DA6E1,#185282);
            color:white;
            
            position:relative;
        }

        .breadcrumb a.active, .breadcrumb a:hover {
            background: linear-gradient(#64D86A, #1D7521);
        }
                
        .breadcrumb a.active:after, .breadcrumb a:hover:after {
            background: linear-gradient(135deg,#64D86A, #1D7521);
        }

        .breadcrumb a:after {
            content:'';
            width: 36px;
            height:36px;
                            
            background:linear-gradient(135deg,#5DA6E1,#185282);
            
            position:absolute;
            top:0px;
            
            z-index:1;
            right:-18px;
            
            -webkit-transform: scale(0.707) rotate(45deg);
            -moz-transform: scale(0.707) rotate(45deg);
            -o-transform: scale(0.707) rotate(45deg);
            transform: scale(0.707) rotate(45deg);
            
            border-radius: 0 0 0 30px;
            
            box-shadow: 2px -2px 1px 1px rgba(0,0,0,0.5),
                3px -2px 1px 1px rgba(255,255,255,0.6);					
        }

        .breadcrumb a:last-child:after {
            content:none;
        }

        .breadcrumb a:last-child {
            padding-right:20px;
            border-radius: 0 5px 5px 0;
        }

        .breadcrumb a:before {
            content:counter(flag);
            counter-increment:flag;
            
            width: 20px;
            height:20px;
            
            background:#0E2F4A;
            font-weight:bold;
            
            position:absolute;
            top:0px;
            left:30px;
            
            line-height:20px;
            margin:8px 0;
            
            border-radius: 100%;
        }
    </style>
</head>
<body>
<div class="breadcrumb">
	<a href="#" class="active">Choose Product</a>
	<a href="#">Choose Color</a>
	<a href="#">Billing Address</a>
	<a href="#">Checkout</a>
</div>
</body>
</html>
0

CSS

, , ,

Building Simple Image Slider Using Pure CSS3

Posted by:

Building Simple Image Slider Using Pure CSS3

CSS is an acronym for Cascading Style Sheets, it is used to format web page look. The latest version of CSS is CSS3. This new version of CSS gives web developers more flexibility when styling the webpage. It comes with a set of new rules that make CSS3 better than the old version. CSS3 provides way to create an animation. In this tutorial, we’ll build simple image slider using pure CSS3.

CSS Overview

Before we start into deep explanation to create the slider, I’ll give some overview of CSS feature that is used to create the slider.

    1. Transform Property
      The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
    2. :target Selector

URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.

    1. :before and :after Selector
      The :before selector inserts content before the selected element(s). The :after selector inserts content after the selected element(s).
    2. ~ (Tilde Selector)

Tilde selector also called general sibling combination. The general sibling combinator selector is very similar to the adjacent sibling combinator selector. The difference is that that the element being selected doesn’t need immediately succeed the first element, but can appear anywhere after it.

  1. Vendor Specific Property
    In order to make our slider runs cross browser, we must add vendor specific property by adding the following prefix into several CSS properties:

    • -moz-: Mozila Firefox
    • -webkit-: Safari, Chrome (and other WebKit-based browsers)
    • -ms-: Microsoft
    • -o-: Opera

Prepare the Stage

The stage of the slider is a div HTML tag where the slider takes place. We’ll create the stage which have 640px x 320px dimensions. The following HTML tags define the slider stage. We give id [cci]slider[/cci] to the stage.

<html>
<head>
    <title>CSS3 Image Slider</title>
</head>
<body>
    <div id="slider"></div>
</body>
</html>

 

Give Style to the Stage

After the stage has been created, now it’s time to give a style to the stage. At this step, we give dimension, margin, background and shadow to the stage.

#slider {
    width: 640px;
    height: 320px;
    margin: 50px auto 0;
    position: relative;
    background: #fff;

    /* give shadow to the stage*/
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

Now, our stage looks like below image.

Stage Preview

Stage Preview

Add Drop Shadow Effect at the Bottom of Stage

We’ll add a drop shadow effect to the stage at the bottom left and bottom right. The drop shadow that we used is simply a blank div element with the following style.

#slider:before, #slider:after {
    content: '';
    position: absolute;
    width: 60%;
    height: 20px;
    
    /* Adding shadow to this content*/
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);        
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    
    /* Transform the content*/
    -webkit-transform: rotate(-4deg) skew(-10deg);
    -moz-transform: rotate(-4deg) skew(-10deg);
    -o-transform: rotate(-4deg) skew(-10deg);
    -ms-transform: rotate(-4deg) skew(-10deg);
    transform: rotate(-4deg) skew(-10deg);
    
    left: 10px;
    bottom: 13px;
    z-index: -1;
}

Move the second drop shadow to the right.

#slider:after {
    left: auto;
    right: 10px;
    
    -webkit-transform: rotate(4deg) skew(10deg);
    -moz-transform: rotate(4deg) skew(10deg);
    -o-transform: rotate(4deg) skew(10deg);
    -ms-transform: rotate(4deg) skew(10deg);
    transform: rotate(4deg) skew(10deg);
}

Now, the stage looks like below image:

Drop Shadow on Stage

Drop Shadow on Stage

Add Control Button

Control buttons is a set of buttons to control the slider. The button is used as a transition trigger for the slider. If user click a button, the slider will change the image on the stage.

<html>
<head>
    <title>CSS3 Image Slider</title>
</head>
<body>
    <div id="slider"></div>
    
    <!-- Control buttons! -->
	<ul>
		<li>
			<a href="#one"></a>
		</li>
		<li>
			<a href="#two"></a>
		</li>
		<li>
			<a href="#three"></a>
		</li>
		<li>
			<a href="#four"></a>
		</li>
		<li>
			<a href="#five"></a>
		</li>
	</ul>
</body>
</html>

Add style to control buttons.

#slider ul {
    width: 140px;
    height: 40px;
    padding: 0 0 0 0;
    position: absolute;
    z-index: 10;
    list-style: none;
    left: 50%;
    margin-left: -70px;
    bottom: -60px;
}

#slider ul li:first-child {
    margin-left: 16px;
}

#slider ul li {
    float: left;
    margin-right: 12px;
    margin-top: 14px;
}

#slider ul li:last-child {
    margin-right: 0;
}

#slider ul li a {
    width: 12px;
    height: 12px;
    display: block;
    outline: none;
    border: none;
    position: relative;
    z-index: 2;
    background: #aaa;
    
    box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
    -moz-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
    -webkit-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#slider ul li a:hover {
    background: #888;
}

Now, our slider will look like image bellow.

Style Control Button

Style Control Button

Add images

Images is the heart of our slider. You can download the images we used in this tutorial by downloading source code. The donwload button is located on the top.

<html>
<head>
    <title>CSS3 Image Slider</title>
</head>
<body>
    <!-- Images -->
    <img id="one" src="1.jpg" />
	<img id="two" src="2.jpg" />
	<img id="three" src="3.jpg" />
	<img id="four" src="4.jpg" />
	<img id="five" src="5.jpg" />
    
    <div id="slider"></div>
    
    <!-- Control buttons! -->
	<ul>
		<li>
			<a href="#one"></a>
		</li>
		<li>
			<a href="#two"></a>
		</li>
		<li>
			<a href="#three"></a>
		</li>
		<li>
			<a href="#four"></a>
		</li>
		<li>
			<a href="#five"></a>
		</li>
	</ul>
</body>
</html>

Now, we give style to the images.

#slider img {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    
    /* scale images*/
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    
    /* set transition*/
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

 

Make The Image Slidding When Control Button Clicked

We’ll make the slider to change active image by using :target property

#slider img:target {
    opacity: 1;        
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
#slider img:not(:target){
    opacity: 0;
    
    -webkit-transform: scale(1.2);        
    -moz-transform: scale(1.2);        
    -ms-transform: scale(1.2);        
    -o-transform: scale(1.2);        
    transform: scale(1.2);        
}

 

Make The Control Buttons Selected When The Button Clicked

#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {
    background: #777;
}

#two:target ~ ul li a[href="#one"],
#three:target ~ ul li a[href="#one"],
#four:target ~ ul li a[href="#one"],
#one:target ~ ul li a[href="#one"] {
    background: #aaa;
}

 

Make First Image Appear When Page Loaded

#slider img#one {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

#slider ul li a[href="#one"] {
    background: #777;
}
Final Image Slider

Final Image Slider

 

Final Source Codes

Below the final source codes. Save it as HTML file and open it on your favorite browser.

<html>
<head>
    <title>CSS3 Image Slider</title>    
    <style>
    body {
        padding: 0;
        margin: 0;
        background: #ccc;
    }
    
    #slider {
        width: 640px;
        height: 320px;
        margin: 50px auto 0;
        position: relative;
        background: #fff;

        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    }

    #slider:before, #slider:after {
        content: '';
        position: absolute;
        width: 60%;
        height: 20px;
        
        -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
        -ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
        -o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);        
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
        
        -webkit-transform: rotate(-4deg) skew(-10deg);
        -moz-transform: rotate(-4deg) skew(-10deg);
        -o-transform: rotate(-4deg) skew(-10deg);
        -ms-transform: rotate(-4deg) skew(-10deg);
        transform: rotate(-4deg) skew(-10deg);
        
        left: 10px;
        bottom: 13px;
        z-index: -1;
    }

    #slider:after {
        left: auto;
        right: 10px;
        
        -webkit-transform: rotate(4deg) skew(10deg);
        -moz-transform: rotate(4deg) skew(10deg);
        -o-transform: rotate(4deg) skew(10deg);
        -ms-transform: rotate(4deg) skew(10deg);
        transform: rotate(4deg) skew(10deg);
    }

    #slider ul {
        width: 140px;
        height: 40px;
        padding: 0 0 0 0;
        position: absolute;
        z-index: 10;
        list-style: none;
        left: 50%;
        margin-left: -70px;
        bottom: -60px;
    }

    #slider ul li:first-child {
        margin-left: 16px;
    }

    #slider ul li {
        float: left;
        margin-right: 12px;
        margin-top: 14px;
    }

    #slider ul li:last-child {
        margin-right: 0;
    }

    #slider ul li a {
        width: 12px;
        height: 12px;
        display: block;
        outline: none;
        border: none;
        position: relative;
        z-index: 2;
        background: #aaa;
        
        box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
        -moz-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
        -webkit-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
        
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

    #slider ul li a:hover {
        background: #888;
    }

    #slider img {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
        
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
    }

    #slider img:target {
        opacity: 1;        
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    
    #slider img#one {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    
    #slider img:not(:target){
        opacity: 0;
        
        -webkit-transform: scale(1.2);        
        -moz-transform: scale(1.2);        
        -ms-transform: scale(1.2);        
        -o-transform: scale(1.2);        
        transform: scale(1.2);        
    }

    #slider ul li a[href="#one"] {
        background: #777;
    }

    #one:target ~ ul li a[href="#one"],
    #two:target ~ ul li a[href="#two"],
    #three:target ~ ul li a[href="#three"],
    #four:target ~ ul li a[href="#four"],
    #five:target ~ ul li a[href="#five"] {
        background: #777;
    }

    #two:target ~ ul li a[href="#one"],
    #three:target ~ ul li a[href="#one"],
    #four:target ~ ul li a[href="#one"],
    #five:target ~ ul li a[href="#one"] {
        background: #aaa;
    }
    </style>
</head>
<body>
    <div id="slider">
	
	<!-- Images -->
	<img id="one" src="1.jpg" />
	<img id="two" src="2.jpg" />
	<img id="three" src="3.jpg" />
	<img id="four" src="4.jpg" />
	<img id="five" src="5.jpg" />
	
	<!-- Control buttons! -->
	<ul>
		<li>
			<a href="#one"></a>
		</li>
		<li>
			<a href="#two"></a>
		</li>
		<li>
			<a href="#three"></a>
		</li>
		<li>
			<a href="#four"></a>
		</li>
		<li>
			<a href="#five"></a>
		</li>
	</ul>
</div>
</body>
</html>
0

Android, CSS

, , , ,