Membuat Konsep Design Slider

Senin, 23 Mei 2016

Membuat Konsep Design Slider

Print this page

Slider Concept
Modify by. Amarajen

Slide One

Slide Two

Slide Three

Slide four

Slide five

Kode yang digunakan adalah :

<html>
<head>

<style type="text/css">
body {
height:100%;
overflow:hidden;
background: #ccc}

#start {
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
font-size: 70px;
text-align:center;
background:-webkit-linear-gradient(#00aff9,#0086c3,#d73249);
background:-moz-linear-gradient(#00aff9,#0086c3,#d73249);
background:-ms-linear-gradient(#00aff9,#0086c3,#d73249);
background:-o-linear-gradient(#00aff9,#0086c3,#d73249);
background: linear-gradient(#00aff9,#0086c3,#d73249);
color: #fff;
-webkit-animation: slide 1.5s ease-in-out forwards;
-moz-animation: slide 1.5s ease-in-out forwards;
-ms-animation: slide 1.5s ease-in-out forwards;
-o-animation: slide 1.5s ease-in-out forwards;
animation: slide 1.5s ease-in-out forwards;
text-shadow:2px 3px 3px #101010;}

#start span {font:bold italic 17px/normal Lato;color:#7FFF00;text-shadow:1px 1px 2px #111}
#slide1, #slide2, #slide3, #slide4, #slide5 {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background:#0086c3;
color: #342c2a;
font-size: 80px;}

p {
font-family: Times, serif;
text-align: center;
letter-spacing: 5px;
line-height: 80px;
color: #fff;
margin: 0;
padding: 60px 0px 0px 0px;
text-shadow:2px 3px 3px #101010;}

.wrapper {width: 500px;margin: 0 auto; }
.container {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 200px;
margin: 0;
padding: 0;
background: #282929;
border: 2px solid #d73249;}

.navigation {
position: absolute;
margin:200px 0 0 62px;}

.btn {
float: left;
margin: 5px;
width: 65px;
height: 30px;
text-align: center;
background:-webkit-linear-gradient(#DC143C, #e06666, #DC143C, #d73249);
background:-moz-linear-gradient(#DC143C, #e06666, #DC143C, #d73249));
background:-ms-linear-gradient(#DC143C, #e06666, #DC143C, #d73249));
background:-o-linear-gradient(#DC143C, #e06666, #DC143C, #d73249));
background:linear-gradient(#DC143C, #e06666, #DC143C, #d73249));
border: 1px solid #fff;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-webkit-transition: 0.1s ease-in;
-moz-transition: 0.1s ease-in;
-ms-transition: 0.1s ease-in;
-o-transition: 0.1s ease-in;
transition: 0.1s ease-in;}

.btn a {
display: block;
color: #fff;
line-height: 30px;
letter-spacing: 2px;
font-size: 12px;}

.btn:hover {
-webkit-transition: 0.1s ease-in;
-moz-transition: 0.1s ease-in;
-ms-transition: 0.1s ease-in;
-o-transition: 0.1s ease-in;
transition: 0.1s ease-in;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
background:#DC143C}

#slide1:target, #slide2:target, #slide3:target, #slide4:target, #slide5:target {
-webkit-animation: slide 1.5s ease-in-out forwards;
-moz-animation: slide 1.5s ease-in-out forwards;
-ms-animation: slide 1.5s ease-in-out forwards;
-o-animation: slide 1.5s ease-in-out forwards;
animation: slide 1.5s ease-in-out forwards;}

@-webkit-keyframes slide {
    0% { font-size: 0px; opacity: 1;}
   40% { font-size: 75px; opacity: 1;}
   50% { font-size: 60px; opacity: 1;}
   60% { font-size: 75px; opacity: 1;}
   70% { font-size: 70px; opacity: 1;}
   80% { font-size: 75px; opacity: 1;}
   90% { font-size: 73px; opacity: 1;}
100% { font-size: 75px; opacity: 1;}}

@-moz-keyframes slide {
    0% { font-size: 0px; opacity: 1;}
   40% { font-size: 75px; opacity: 1;}
   50% { font-size: 60px; opacity: 1;}
   60% { font-size: 75px; opacity: 1;}
   70% { font-size: 70px; opacity: 1;}
   80% { font-size: 75px; opacity: 1;}
   90% { font-size: 73px; opacity: 1;}
100% { font-size: 75px; opacity: 1;}}

@-ms-keyframes slide {
    0% { font-size: 0px; opacity: 1;}
   40% { font-size: 75px; opacity: 1;}
   50% { font-size: 60px; opacity: 1;}
   60% { font-size: 75px; opacity: 1;}
   70% { font-size: 70px; opacity: 1;}
   80% { font-size: 75px; opacity: 1;}
   90% { font-size: 73px; opacity: 1;}
100% { font-size: 75px; opacity: 1;}}

@-o-keyframes slide {
    0% { font-size: 0px; opacity: 1;}
   40% { font-size: 75px; opacity: 1;}
   50% { font-size: 60px; opacity: 1;}
   60% { font-size: 75px; opacity: 1;}
   70% { font-size: 70px; opacity: 1;}
   80% { font-size: 75px; opacity: 1;}
   90% { font-size: 73px; opacity: 1;}
100% { font-size: 75px; opacity: 1;}}

@keyframes slide {
    0% { font-size: 0px; opacity: 1;}
   40% { font-size: 75px; opacity: 1;}
   50% { font-size: 60px; opacity: 1;}
   60% { font-size: 75px; opacity: 1;}
   70% { font-size: 70px; opacity: 1;}
   80% { font-size: 75px; opacity: 1;}
   90% { font-size: 73px; opacity: 1;}
100% { font-size: 75px; opacity: 1;}}
</style>

</head>

<body>

<br />
<div class="wrapper"><div class="container"><div id="start">Slider Concept<br />
<span>Modify by. Amarajen</span><br />
</div><div id="slide1"><p>Slide One</p></div><div id="slide2"><p>Slide Two</p></div><div id="slide3"><p>Slide Three</p></div><div id="slide4"><p>Slide four</p></div><div id="slide5"><p>Slide five</p></div><div class="navigation"><div class="btn"><a href="#slide1">Slide 1</a></div><div class="btn"><a href="#slide2">Slide 2</a></div><div class="btn"><a href="#slide3">Slide 3</a></div><div class="btn"><a href="#slide4">Slide 4</a></div><div class="btn"><a href="#slide5">Slide 5</a></div></div></div></div><br />
<br />

</body>

</html>

amarajen

Senin, 23 Mei 2016

Membuat Konsep Design Slider

A M A R A J E N

0 komentar

Posting Komentar

Label 1

Label 2

Entri Populer

Other Menu