Trik Komputer: Improve Your CSS Skills Gaya Bloglang

Minggu, 19 Februari 2012

Improve Your CSS Skills Gaya Bloglang

Rajin membaca pasti akan lebih tahu jadinya. Apalagi rajin praktek, pasti lebih full stylish b-) Begitu juga halnya dengan bahasa CSS. Sedikitnya sobat harus mengenal dengan bahasa satu itu ;) Semakin maju, atribut baru tercipta, variabel² terangkai dari tangan² master terciptalah karya dahsyat begitu menggoda hati :x Tak terhitung Beben Koben si bloglang anu ganteng kalem tea sudah berbagi pada sobat sekalian mengenai CSS ini. Yang jadi permasalahannya, apakah kalian mengeksplore (menjamah) isi dari resource² yg telah aku berikan :)) Kepengen kayak gini bos, aduh yg seperti itu bagus banget, keren gimana buatnya...bla bla bla sejuta pertanyaan keinginan, dangkal kemauan piss :)>-
Padahal sudah banyak fasilitas di dunia online dari penjuru dunia tinggal kita raup ;))

multiple borders using box-shadow

Eksplore 3 link artikel berikut guna meningkatkan skill CSS kalian useful CSS snippets for your coding, css code snippets 15 wicked tricks & css3 for the real world!
Sebagai bloglang penjelajah dunia blog, Koben akan berbagi kembali satu trick yg dapat memakai CSS doang! Sobat mungkin kenal dengan yg namanya hello bar? Sebuah widget dengan penampilan notification bar. Noty/notification itu yg akan kita ulas sob ;)
Kabar teranyar jQuery plugin dari fitur ini dapat kalian ambil di jquery notification plugin. Terserah posisi mau dimana, full customize Booo :))Woah-oah-oah!

Bergetar-getar!
Here original article pure css notification bar using :target pseudo class :-bd

Koben sudah minimalisir kode yg ada, karena disana banyak menyertakan variabel CSS3 ;) Jadi jika ingin menghias CSS-nya terserah sobat sekalian ya. Letakan kode CSS berikut diatas/sebelum tag ]]></b:skin>

Kode CSS Notification Bar

.topBar {
width: 100%;
height: 23px;
position:relative;
top: 0;
text-align: center;
border-bottom: 1px solid #fff;
box-shadow: 0 3px 5px #ccc;
padding-top: 7px;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
.btnClose a, .btnOpen a {
width: 50px;
position: absolute;
right: 30px;
top: -7px;
font-family: arial;
font-weight: bold;
color: #fff;
text-shadow: 0 0 2px #921d17;
}
.btnClose a {
font-size: 12px;
line-height: 44px;
height:25px;
}
.btnOpen a {
font-size: 0;
border: 1px solid #fff;
box-shadow: 0 1px 5px #ccc;
border-top: none;
border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
}
.topBar:target {
top: -36px;
-webkit-transition: top 0.5s ease-in;
-moz-transition: top 0.5s ease-in;
}
.topBar:target .btnOpen a {
top: 30px;
height: 30px;
font-size: 11px;
line-height: 36px;
-webkit-transition-property: top;
-webkit-transition-duration: .5s;
}
.topBar:target .btnClose {
display: none;
}
.topBar:target .btnOpen a, .topBar {
background: #EB593C;
}

Markup HTML

Letakin tepat dibawah tagging <body>

<div class='topBar' id='notify'>Welcome! Please like my facebook page here: <a href='#'>Facebook</a>
<div class='btnClose'><a href='#notify'>X</a></div>
<div class='btnOpen'><a href=''>notify</a></div>
</div>

Happy coding \m/

Trik Komputer

Minggu, 19 Februari 2012

Improve Your CSS Skills Gaya Bloglang

Kode CSS Notification Bar

Markup HTML

Tidak ada komentar:

Posting Komentar