Membuat Gambar Bintang Dengan CSS3
Dengan CSS3 rotasi properti kita bisa menggunakannya untuk membuat gambar Bintang bebas (starbursts), dan yang kita butuhkan adalah serangkaian elemen block-level yang masing-masing diputar dengan jumlah yang sedikit berbeda.
Starburst ini hanya bekerja di browser yang mendukung CSS3 rotasi properti, seperti Safari, Firefox, dan Google Chrome.
DEMO
CSS3
Gambar
Bintang!
Bintang
Dengan
CSS3!
Bermain
Bersama
Bintang
Aku
Suka
Bintang!
Bintang
Selalu
Ada!
Ada
Bintang
Jadi Terang!
Di Langit
Ada Bintang
Karena Bintang
Malam Terang!
HTML
Berikut ini adalah kode HTML. Silahkan perhatikan! dalam satu link terdapat tiga buah tag span:<a href="#" class="bintang">
<span><span><span>
<br />BINTANG<br />Dengan<br />CSS3!
</span></span></span>
</a>CSS
Starbursts dengan CSS3 ini dapat melakukan jauh lebih banyak hal jika dibandingkan dengan Starbursts yang dibuat dengan gambar, di mana kita bisa bereksperimen dengan poin yang berbeda, seperti rounded borders, text-shadows, animations, transitions, transforms dan translations.<style type="text/css">
.bintang {
display:block;
width:6em;
height:6em;
background:#fe0;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
rotation:-45deg;
position:relative;
top:2em;
left:2em;
text-align:center;
text-decoration:none;
color:#000;
font-weight:bold;
font-family:Arial, sans-serif;
}
.bintang span {
display:block;
width:6em;
height:6em;
background:#fe0;
-webkit-transform:rotate(22.5deg);
-moz-transform:rotate(22.5deg);
rotation:22.5deg;
}
</style>Sumber: Art and Design by Matthew James Taylor
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon