Pustaka Flash

Showing posts with label css. Show all posts

Html Math symbol entities.

Html ordinat symbol entities.

Html Star symbol entities.

Html ARRow symbol entities.

Html Icon symbol entities.

Tutorial Details

Judul: CSS3 chocolate button
Difficulty: Beginner
Platform: -
Bahasa Scripth: CSS
Software : Notepad++
Estimated Completion Time: 15 minutes
Created:Ricko Nada (Pustaka Flash)

live demo :

Scripth yang digunakan :

CSS3 coding :

/* coklatebtnlate Button */

.coklatebtn {
  outline:none;
  cursor:pointer;
  display:inline-block;
  background-color:#54341A;
  text-shadow:0px 1px 0px rgba(255,255,255,0.1);
  text-decoration:none;
  font:normal 20px 'Monotype Corsiva','Book Antiqua',Georgia,Serif;
  color:#170D05;
  width:120px;
  text-align:center;
  margin:2px;
  padding:0px 0px;
  line-height:40px;
  border-top:9px solid #6A4021;
  border-right:10px solid #39210D;
  border-bottom:10px solid #241505;
  border-left:10px solid #402712;
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
    0px 1px 2px black;
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
    0px 1px 2px black;
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
    0px 1px 2px black;
}

.coklatebtn:hover {
  background-color:#4B2E17;
  border-color:#5F391F #311F0D #170D03 #341F0F;
}

.coklatebtn:active {
  border-color:#170D03 #341F0F #5F391F #311F0D;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;

HTML coding :

<button class="coklatebtn">coklatebtnlate</button>

5 Halaman yang sering dikunjungi:

Tutorial Details

Judul: Jam analog as3
Difficulty: Beginner
Platform: css
Bahasa Scripth: CSS3
Software : Adobe Dreamweaver
Estimated Completion Time: 15 minutes
Created:Ricko Nada (Pustaka Flash)

live demo :

Scripth yang digunakan :

css3 :

.cssloading {text-align:center;}

.cssloading span {
  display:inline-block;
  margin:0px 1px;
  width:20px;
  height:20px;
  background-color:cyan;
}

.cssloading span:nth-child(1) {
  -webkit-animation:cssloading 0.5s infinite alternate 0s;
  -moz-animation:cssloading 0.5s infinite alternate 0s;
  -ms-animation:cssloading 0.5s infinite alternate 0s;
  -o-animation:cssloading 0.5s infinite alternate 0s;
  animation:cssloading 0.5s infinite alternate 0s;
}

.cssloading span:nth-child(2) {
  -webkit-animation:cssloading 0.5s infinite alternate 0.2s;
  -moz-animation:cssloading 0.5s infinite alternate 0.2s;
  -ms-animation:cssloading 0.5s infinite alternate 0.2s;
  -o-animation:cssloading 0.5s infinite alternate 0.2s;
  animation:cssloading 0.5s infinite alternate 0.2s;
}

.cssloading span:nth-child(3) {
  -webkit-animation:cssloading 0.5s infinite alternate 0.4s;
  -moz-animation:cssloading 0.5s infinite alternate 0.4s;
  -ms-animation:cssloading 0.5s infinite alternate 0.4s;
  -o-animation:cssloading 0.5s infinite alternate 0.4s;
  animation:cssloading 0.5s infinite alternate 0.4s;
}

.cssloading span:nth-child(4) {
  -webkit-animation:cssloading 0.5s infinite alternate 0.6s;
  -moz-animation:cssloading 0.5s infinite alternate 0.6s;
  -ms-animation:cssloading 0.5s infinite alternate 0.6s;
  -o-animation:cssloading 0.5s infinite alternate 0.6s;
  animation:cssloading 0.5s infinite alternate 0.6s;
}

@-webkit-keyframes cssloading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-moz-keyframes cssloading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-ms-keyframes cssloading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-o-keyframes cssloading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@keyframes cssloading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

HTML :

<div class='cssloading'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

5 Halaman yang sering dikunjungi:

Pustaka Flash

Tutorial Details

Tutorial Details

Labels