Trik Komputer: Prakter Ria CSS3 Gaya Bloglang

Semakin ramai saja para developer membuat kreasi dengan hadirnya feature CSS3 ini :-bd Kali sekarang Koben sang bloglang sejati akan berbagi hasil bertualang dan menemukan trick-trick keren dari para kreator keren punya :D Menurut saya keren belum tentu menurut kalian kan ;)) Oke kita langsung saja mulai trik yang pertama yaitu membuat tombol download keren memakai animasi efek Code an Awesome Animated Download Button With CSS3
Mungkin ada baiknya sobat melihat juga artikel aku dalam membahas variety demo and download button ;)
This is original article come from http://designshack.net/articles/css/downloadbutton/
Untuk melihat hasil ramuan kreasi CSS berikut, sobat bisa gunakan tools HTML Editor. Sekalian belajar cara memakainya toh ;) Sebelumnya silahkan sobat buka ini terlebih dahulu MBT HTML Editor. Kemudian tekan tombol masukan bumbu ini

<style>
.button {
  width: 200px;
  margin: 40px auto;
}
.button a {
  display: block;
  height: 50px;
  width: 200px;
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  background: #00b7ea;
  background: -moz-linear-gradient(top, #00b7ea 0%, #38D4FF 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#38D4FF));
  background: -webkit-linear-gradient(top, #00b7ea 0%,#38D4FF 100%);
  background: -o-linear-gradient(top, #00b7ea 0%,#38D4FF 100%);
  background: -ms-linear-gradient(top, #00b7ea 0%,#38D4FF 100%);
  background: linear-gradient(top, #00b7ea 0%,#38D4FF 100%); 
}
.button a, p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.button p {
  background: #D00;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.button:hover .bottom {
  margin: -10px 0 0 10px;
}
.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}
.button a:active {
background: #00b7ea;
background: -moz-linear-gradient(top,  #38D4FF 36%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#38D4FF), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); 
background: -o-linear-gradient(top,  #38D4FF 36%,#009ec3 100%);
background: -ms-linear-gradient(top,  #38D4FF 36%,#009ec3 100%);
background: linear-gradient(top,  #38D4FF 36%,#009ec3 100%); 
}
.button:active .top {
margin: -70px 0 0 10px;
opacity: 0.8;
background: #0d0;
color:#111;
border: 1px solid #000;
}
.button:active .bottom {
margin: -20px 0 0 10px;
opacity: 0.8;
background: #0d0;
color:#111;
border: 1px solid #000;
}
</style>

<div class="button">
<a href="/">Download</a>
<p class="top">Click to Download</p>
<p class="bottom">10GB .zip</p>
</div>

Dilanjutkan dengan memencet tombol
How about that!!! Yuk lanjut bos

Acara selanjutnya Koben tidak akan menjabarkan apapun sob :D Tapi silahkan kalian tengok web selanjutnya ini Paul Hayes, tidak kurang ada beberapa artikel yg akan membuat kita berlatih menjadi seorang master CSS :))

Beben Koben si bloglang anu ganteng kalem tea setelah dari web master @fofr perhatian tertuju pada cara membuat cube/kotak/kubus secara 3D memakai CSS3 @-)

Tampak Atas

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum

Tampak Kiri

Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio linguistic litteratura o que, pro lingua auxiliar su. Pote basate programma il nos. Non ha responder appellate traduction, es que lista celos. Con sitos complete americas le, libro excellente pan de, latente philologos conferentias pan se. Infra esseva uso ma. Involvite anglo-romanic ma que, debitas internet primarimente il web. Uso

Tampak Kanan

Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem iweral, ma'n iw'rem d'Margréitchen do gin. Ech ké ma'n d'Land, sech fort si gei. Blo an eise dann däischter. Wa wéi durch néierens. Am Bass Duerf heemlech net. Zum ké Noper éiweg, gutt rout d'Musek no rëm, d'Natur d'Liewen Gesträich vu sin. Den ménger Keppchen rëschten wa, dé gei Mier

Keren ya Css³ Cube :x Bisa ngirit lahan template kalau ada yg begituan kita pasangkan di blog :))

Click to get CSS Cube Coded

Sok pelajari segitu dulu ;)) Kebanyakan nanti malah pusing sobatnya :P Kepengen lagi!!! nih lihat http://pornel.net/cube
Happy codding \m/

Trik Komputer

Senin, 30 Januari 2012

Prakter Ria CSS3 Gaya Bloglang

Tampak Atas

Tampak Kiri

Tampak Kanan

Click to get CSS Cube Coded

Tidak ada komentar:

Posting Komentar