web design: Slide Image Full Page

Slide Image Full Page

Dalam posting saya akan berbagi tentang Slider Image dengan mode full page, dengan mode ini kamu dapat menampilkan slider gambar full page. ok langsung saja kita bahas tentang bagaimana cara membuat slider tersebut. Dan perlu diketahui juga bahwa slider ini tidak menggunakan Jquery atau Javascript slider hanya menggunakan CSS3. Baiklah berikut ini tag untuk membuatnya :

Tag HTML nya

Tag CSS nya

* { margin: 0; padding: 0; }

body { overflow: hidden; 
color: #222; 
font-family: helvetica, arial; 
line-height: 1.2; }

a:active { outline: none;}

.nextbutton, .backbutton {
 position: absolute; 
 top: 0; height: 100%; 
 width: 50%; }
 
.nextbutton {
 cursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrYJzySsvJnvGLfOGtFEHhf6Cb68_pN_RRd4am5VsQwP_MmPYTSzLadic53nyTeX0HdIuNW5YAcTya_fJhLbrbURL7_89lk02iKOGiv-CIKWorPpg3pEgypTBAgKnTaMSe7DsclvHJrC6/s1600/right.png'), e-resize; right: 0; }
 
.backbutton { cursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDj-4c4895TllYSxd-ax29DMeguD8-odk7vPMKtOiskH2ZYhJEVn5M32df4aQILwGmxp6htfO3t2CxikzenrR5S2t4yWI9aHOw-2dDwp0-Fv1dEa-0mKezCx4mDJeRZpusF65PJCDYEe22/s1600/left.png'), w-resize; left: 0; }

h1 {
text-align: center;
padding: 0 50px;
margin-top: 150px;
font-size: 50px; }

img {
margin: 0 auto;
display: block;
margin-top: 50px;}

footer { 
z-index: 2; 
position: fixed; 
bottom: 60px; 
left: 50%; 
width: 600px; 
margin-left: -300px; 
text-align: center; }

footer a.link {
color: #111; 
font-size: 15px; 
font-weight: bold; 
text-decoration: none; 
border-bottom: solid 2px; }

footer a.link:hover { color: red; }

/* Top Navigation.  */

table { 
display: table;
width: 100%; 
cellspacing: 0; 
border-collapse: collapse;
position: fixed;
z-index: 5000;
top: -1px;
left: 0;
right: 0;
}

table a {
line-height: 54px;
font-family: helvetica, arial;
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #aaa;
display: block;
text-align: center;
margin: 0;
background-color: #111;
-moz-transition: all 1s; 
-webkit-transition: all 1s; 
-o-transition: all 1s; 
transition: all 1s; 
}

#a1:target #p1,
#a2:target #p2,
#a3:target #p3 { background-color: red; color: #fff; }

table a:hover {
background-color: #444;
-moz-transition: background 0s; 
-webkit-transition: background 0s; 
-o-transition: background 0s; 
transition: background 0s; 
}

.page { 
position: absolute; 
width: 100%; 
height: 100%; 
}

/* The Pages */

#i1 { left: 0%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBABGGfl4JR5SEOJRYDOFION9HIxYnEDtgGawXEAiGBfLdWe4PsqM2DXcohisABNPNGmQCbT-7WoQrkDTTkxVTeVjlBxk8nqTzXacmwGSK1eom3lQFErqlw1lFFI8bg4m3ohDrEUQzcKmG/s1600/a.jpg); 
background-size: 800px 600px;
background-position:300px 60px;
background-repeat: no-repeat;}

#i1 { left: 100%;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBABGGfl4JR5SEOJRYDOFION9HIxYnEDtgGawXEAiGBfLdWe4PsqM2DXcohisABNPNGmQCbT-7WoQrkDTTkxVTeVjlBxk8nqTzXacmwGSK1eom3lQFErqlw1lFFI8bg4m3ohDrEUQzcKmG/s1600/a.jpg); 
background-size: 800px 600px;
background-position:300px 60px;
background-repeat: no-repeat;}

#i2 { left: 200%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwcCJ5UvK3wWmodtdiNZziKaaRV3uEf6e5LKNX_Pl0ZBSc2sFf8kUU0NaRmF4e1jSMXuMnu7h70PSHbfsFi3igVjU_6fD83Lzsymsev5uOwaEI_tn0AtSy3ZnYd_O2uBC6I7I-3JDLJRLK/s1600/b.JPG); 
background-size: 800px 600px;
background-position:300px 60px;
background-repeat: no-repeat; }

#i3 { left: 300%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNyQ0br7_mnaANxFkWXMTXxFwttfSyoj5vugtF7mAYhR0vVAhnKc9KCh0s84Nntr7CQQevYWq7iv2v2_ihtMw8NFaQPVBNP6c5T4oPwxuFuGe3jM0VZNQ8REec-TM5q8yE_FhAVM4uSV0j/s1600/c.jpg); 
background-size: 800px 600px;
background-position:300px 60px;
background-repeat: no-repeat; }

/* The Transition Effect */

.page { 
-webkit-transition: -webkit-transform 0.8s;
-moz-transition: -moz-transform 0.8s;
-o-transition: -o-transform 0.8s;
transition: transform 0.8s;
}

/* The Sliding Action */
/* TranslateX for better Performance. Translate3D for better Performance on Ipad. */

#a1:target .page { 
-webkit-transform: translateX(-100%);
 -moz-transform: translateX(-100%);
 -o-transform: translateX(-100%);
 transform: translateX(-100%);}
 
#a2:target .page {
 -webkit-transform: translateX(-200%);
 -moz-transform: translateX(-200%);
 -o-transform: translateX(-200%); 
 transform: translateX(-200%); }
 
#a3:target .page {
 -webkit-transform: translateX(-300%);
 -moz-transform: translateX(-300%);
 -o-transform: translateX(-300%); 
 transform: translateX(-300%); }

/* The First Page - Initial Positioning without Anchor */

.page { 
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%); 
-o-transform: translateX(-100%); 
transform: translateX(-100%);}

File nya dapat dilihat hasilnya dan dapat diunduh berikut ini :

Pages

Slide Image Full Page

Slide Image Full Page

Tag HTML nya

Tag CSS nya

Demo Unduh

About Me