CSS 3 Percobaan Membuat Loading Animasi

CSS 3 Percobaan Membuat Loading Animasi

<div class="loading-wrap">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
</div>

.loading-wrap {
  width: 60px; height: 60px;
  position: absolute;
  top: 50%; left: 50%;
  margin: -30px 0 0 -30px;
  background: #777;    
  animation: rotation ease-in-out 2s infinite;  border-radius: 30px;    
}
.triangle1, .triangle2, .triangle3 {
  border-width: 0 20px 30px 20px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #67cbf0;
  height: 0; width: 0;
  position: absolute;
  left: 10px; top: -10px;
  animation: fadecolor 2s 1s infinite;}
.triangle2, .triangle3 {
  content: ;
  top: 20px; left: 30px;
  animation-delay: 1.1s;}
.triangle3 {
  left: -10px;
  animation-delay: 1.2s;}
@keyframes rotation {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}
@keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}

Go to link Download

CSS 3 Membuat Label Daftar Harga Terbaru

CSS 3 Membuat Label Daftar Harga Terbaru

<div class="pricing_table">
<ul>
<li>Standard</li>
<li>Rp 50.000</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Premium</li>
<li>Rp 60.000</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Professional</li>
<li>Rp 70.000</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Plus</li>
<li>Rp 80.000</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Maximum</li>
<li>Rp 80.000</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
</div>

.container{
width:900px;
margin:30px auto;
padding:25px;
min-height:400px;
height:auto; }
.container h2 { margin-top:30px;}
.pricing_table {
border:1px solid #c4cbcc;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
outline:7px solid #f2f3f3;
float:left;
}
.pricing_table ul {
list-style:none;
float:left;
width:147px;
margin:0;
border:1px solid #f2f3f3;
padding:5px;
text-align:center;
background-color:#FFF;
}
.pricing_table ul:hover {
-webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
  box-shadow:3px 5px 7px rgba(0,0,0,.7);
cursor:pointer;
}
.pricing_table ul li {
border-bottom:1px dashed #cfd2d2;
padding:10px 0;
}
.pricing_table ul li:first-child {
font-size:18px;
font-weight:bold;
}
.pricing_table ul li:nth-child(2) {
background:#fbfbfb;
}
.pricing_table ul li:nth-child(3) {
font-size:12px;
font-weight:bold;
}
.pricing_table ul li:nth-child(n+4) {
font-size:14px;
}
.pricing_table ul li:last-child a {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:1px solid #c4cbcc;
padding:10px;
margin:5px 0;
background: #e5e696; /* Old browsers */
background: -moz-linear-gradient(top, #e5e696 0%, #d1d360 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e696), color-stop(100%,#d1d360)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#e5e696, endColorstr=#d1d360,GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e5e696 0%,#d1d360 100%); /* W3C */
color:#000;
font-style:italic;
display:block;
}

Go to link Download

CSS Tricks How to created Folded Corner Effect in CSS

Folded Corner Effect in CSS

Hi! Im back after long time..:).I will be posting some cool CSS tricks in this series..stay tuned and enjoy !!

This piece of code is cool and simple for a web design. CSS enhances the beauty of a webpage. You can use it anywhere in your page or site you think this effect suits best.

What we need in order to create a folded corner is set the border-with, border-style and border-color property. Its totally up to you how you will design this box or what color you will be using. You can also add some box-shadows to make it even more beautiful.

Download the Code by clicking the Download Button.

DOWNLOAD

 Its very simple code and doesnt require any explanation.Hope you learn from this.

REGARDS

Shankha Jana

Go to link Download