Design Input search dengan CSS

Salam senikoding 

kali ini kita akan mempelajari cara membuat design pada inputan search

check it out

<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Judul Halaman Saya</title>
 <style type="text/css">
form {
width:500px;
margin:50px auto;
}
.search {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
}
.button {
position:relative;
padding:6px 15px;
left:-8px;
border:2px solid #53bd84;
background-color:#53bd84;
color:#fafafa;
}
.button:hover  {
background-color:#fafafa;
color:#207cca;
}

::-webkit-input-placeholder { /* For WebKit browsers */
color:    #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
:-moz-placeholder { /* For Mozilla Firefox 4 to 18 */
color:    #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
::-moz-placeholder { /* For Mozilla Firefox 19+ */
color:    #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
:-ms-input-placeholder { /* For Internet Explorer 10+ */
color:    #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
</style>
   </head>
<body>
<form>
    <input class="search" type="text" placeholder="Cari..." required>
    <input class="button" type="button" value="Cari">
</form>
</body>
</html>

Membuat Slider dengan CSS3

Salam senikoding

biasanya dalam membuat slider untuk sebuah web kita membutuhkan javascript atau jquery,

namun seiring semakin majunya perkembangan teknologi design web. sekarang hanya dengna CSS kita sudah dapat membuat slider yang berjalan otomatis

cek it out , langsung source code nya yah

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>FADE CSS SLIDER</title>

<style type="text/css">

#slider {

 position:relative;

 height:281px;

 width:450px;

 margin:0 auto;

}

#slider img {

 position:absolute;

 left:0;

 -webkit-transition: opacity 1s ease-in-out;

 -moz-transition: opacity 1s ease-in-out;

 -o-transition: opacity 1s ease-in-out;

 transition: opacity 1s ease-in-out;

}

@keyframes sliderFadeInOut {

 0% {opacity:1;}

 17% {opacity:1;}

 25% {opacity:0;}

 92% {opacity:0;}

 100% {opacity:1;}

}

#slider img:nth-of-type(1) {animation-delay: 6s;}

#slider img:nth-of-type(2) {animation-delay: 4s;}

#slider img:nth-of-type(3) {animation-delay: 2s;}

#slider img:nth-of-type(4) {animation-delay: 0;}

#slider img {

   animation-duration: 8s;

   animation-iteration-count: infinite;

   animation-name: sliderFadeInOut;

   animation-timing-function: ease-in-out;

}

</style>

</head>

<body>

<a href="http://intipsweb.blogspot.com">Tips Membuat Slider Fade CSS</a> | Sumber : 

<a href="http://intipsweb.blogspot.com">Panduan Belajar Website</a>

<div id="slider">

 <img src="slider-fade-intipsweb.jpg" />

 <img src="slider-fade-dengan-css.jpg" />

 <img src="gambar-slider-fade.jpg" />

 <img src="slider-pure-css-intipsweb.jpg" />

</div>

</body>

</html>

nah ingat ada bebera file gambar yang harus kalian download

ini linknya gan , klik disini 

Animasi Fade dengan CSS

kali ini kita mempelajari pembuatan animasi dengna css

Salam senikoding

nah untuk membuat sebuah efek keren tidak harus menggunakan jquery ,cukup dengna penggunaan CSS3

sekarang kita akan membuat animasi FADE IN

langsung aja ni gan source nya

<!DOCTYPE html>      

<html>        
     <head>          
          <style type="text/css">
            @-webkit-keyframes fade
            {
              0%{
            opacity : 1.0;
            }
           
            50%
            {
              opacity : 0.0;
            }
           
            100%
            {
              opacity : 1.0;
            }
           
            }
                             
             @keyframes fade
            {
              0%{
            opacity : 1.0;
            }
           
            50%
            {
              opacity : 0.0;
            }
           
            100%
            {
              opacity : 1.0;
            }
           
            /*------------- background---------------*/
            }
            li
            {
               list-style:none
          }              
           
            .fade-background
            {
              background : #00b5ff;
              width : 100%;
              border : none;
              overflow : hidden;
              border-top : 1px solid #999999;
              border-bottom : 1px solid #999999;
              text-align : center;
            }
           
            /*------------panggil efek fadenya-----------*/
            .fade-button
            {
              color : rgb(255,255,255);
              font-size : 25px;
              padding : 15px 32px;
              text-shadow : 0px 0px 5px rgb(255,00,00);
              -webkit-animation : fade 4s linear 0s infinite alternate;
              animation : fade 4s linear 0s infinite alternate;
            }
           
            ul
            {
              list-style-type : none;
              margin : 0;
              padding : 0;
            }
           
            .a
            {
              display : block;
              width : 150px;
              background : #b5a545;
              padding : 15px 32px;
              color : black;
              overflow : hidden;
              -webkit-transition-duration : 0.9s;
              transition-duration : 0.9s;
            }
           
            .a:link
            {
              background : #ddffb5;
              font-weight : bolder;
              color : black;
              text-decoration : none;
            }
           
            .a:visited
            {
              background : #00ffb5;
              text-decoration : none;
              color : #0000ff;
            }
           
            .a:hover
            {
              background : #00b5ff;
              color : #000000;
              font-weight : bolder;
              -webkit-animation : fade 2s linear 0s 1 alternate;
              animation : fade 2s linear 0s 1 alternate;
            }
           
            .a:active
            {
              background : #009955;
              -webkit-animation : fade 2s linear 0s 1 alternate;
              animation : fade 2s linear 0s 1 alternate;
            }
           
            .demo
            {
              background : #009955;
              border-radius : 2px;
              text-align : center;
            }
          </style>          
     </head>        
     <body>          
          <div class="fade-background">
               <div class="fade-button">Fade efek!             </div>
          </div>
          <div class="demo">Tips untuk mencoba demo:           <br />
               Hover link dibawah ini ( untuk pengguna komputer )| Klik link dibawah ini (untuk pengguna ponsel )
          </div>
          <ul>
               <li><br /><a name="#wow"class="a">KLIK ATAU HOVER MENU DIBAWAH INI<br /></a><br />
               <li><br /><a href="#wow"class="a">Beranda<br /></a><br /></li><br /><br /><br />
               <li><br /><a href="#wow"class="a">Berita<br /></a><br /></li><br /><br /><br />
             
          </ul><div class="demo">link dengan efek fade in dan fade out</div>
     </body>          
</html>

sekian tutorial kita kali