Membuat Tumpukan Kartu Dinamis dengan CSS3
Apakah anda pernah mendengar tentang CSS3 dan fitur-fiturnya, meskipun sudah ada beberapa situs web di luar sana yang mengambil manfaat dari beberapa fitur CSS3. kita hampir tidak pernah melihat potensi penuh yang dapat dicapai dengan CSS3.
Hari ini kita akan mengambil langkah ke arah sana dan menemukan beberapa kemungkinan CSS3 memberi kita sebuah manfaat.
Saya akan membuat beberapa tumpukan indeks kartu yang dinamis hanya dengan menggunakan HTML dan CSS3. Dengan memanfaatka CSS3 fitur sebagai transformasi dan transisi (untuk efek dinamis) dan @font-face, kotak-bayangan dan border-radius (untuk styling).
Mari kita mulai dengan -markup HTML sederhana, yang terdiri dari daftar unordered sederhana, diisi dengan konten secara acak.
<body>
<div id="wrapper">
<ul id="index_cards">
<li id="card-1">
<h3>Card 1</h3>
<img src="images/t9tuqui_trans.png" height="130" width="130" alt="Toucan" />
<p>Name: Toucan<br />
Age: 5<br />
Size: 50 cm<br />
Weight: 600 g<br />
Food: Fruit<br />
Toucan lives in southern and central America and loves to fly around</p>
</li>
<li id="card-2">
<h3>Card 2</h3>
<img src="images/t9foxy_trans.png" height="130" width="130" alt="Fox" />
<p>Name: Fox<br />
Age: 3<br />
Size: 70 cm<br />
Weight: 5.5 kg<br />
Food: Meat<br />
Fox lives in the northern hemisphere and loves to play seek and hide</p>
</li>
<li id="card-3">
<h3>Card 3</h3>
<img src="images/t9dog2_trans.png" height="130" width="130" alt="Dog" />
<p>Name: Dog<br />
Age: 8<br />
Size: 120 cm<br />
Weight: 10 kg<br />
Food: Bones<br />
Dog lives in a dog hut and loves to chew shoes, bark and go for walks</p>
</li>
<li id="card-4">
<h3>Card 4</h3>
<img src="images/t9penguino_trans.png" height="130" width="130" alt="Penguin" />
<p>Name: Penguin<br />
Age: 20<br />
Size: 110 cm<br />
Weight: 35 kg<br />
Food: Fish<br />
Penguin lives where it's cold and icy and loves to swim and dive</p>
</li>
<li id="card-5">
<h3>Card 5</h3>
<img src="images/t9lion_trans.png" height="130" width="130" alt="Lion" />
<p>Name: Lion<br />
Age: 12<br />
Size: 190 cm<br />
Weight: 180 kg<br />
Food: Meat<br />
Lions lives in Africa and loves to sleep most of the day and hunt sometimes</p>
</li>
</ul>
</div>
</body>
Untuk CSS, Saya menggunakan Yahoo User Interface(YUI) 2 CSS Reset untuk mencapai hasil yang sama di semua browser, maka kita harus mendefinisikan font yang ingin kita gunakan dengan @font-face (untuk informasi lebih lanjut tentang @font-face, lihat 30 Font Indah dan Gratis, Dapat Anda Gunakan untuk @font-face ) dengan menambahkan beberapa aturan umum untuk CSS .
Font Ini tersedia dalam @font-face kit (semua yang diperlukan seperti, font-format dan CSS-file yang sudah terformat) dan Squirrel font , adalah yang digunakan dalam desain contoh ini.
/* @font-face definitions */
@font-face {
font-family: 'KulminoituvaRegular';
src: url('../fonts/kulminoituva.eot');
src: local('Kulminoituva Regular'), local('Kulminoituva'), url('../fonts/kulminoituva.woff') format('woff'), url('../fonts/kulminoituva.ttf') format('truetype'), url('../fonts/kulminoituva.svg#Kulminoituva') format('svg');
}
@font-face {
font-family: 'NotethisRegular';
src: url('../fonts/Note_this.eot');
src: local('Note this Regular'), local('Notethis'), url('../fonts/Note_this.woff') format('woff'), url('../fonts/Note_this.ttf') format('truetype'), url('../fonts/Note_this.svg#Notethis') format('svg');
}
/* General styling */
body {
background:#202020;
font-family: NotethisRegular, Verdana, Arial, sans-serif;
font-size:125%;
color:#202020;
}
h1, h2, h3, h4, h5, h6 {
font-family: KulminoituvaRegular, "Arial Black", Gadget, sans-serif;
font-size:1.5em;
}
#wrapper {
width:760px;
margin:0 auto;
text-align:center;
padding-top:50px;
}
Kemudian kita harus menentukan gaya dari indeks kartu.
Pertama kita menambahkan beberapa CSS 2.1 untuk aturan umum seperti, lebar, tinggi bantalan, dan perbatasan (Anda dapat memilih apapun nilai yang Anda inginkan). Gambar latar belakang adalah opsional, Pastikan untuk mengatur posisi: relatif, display: block dan float: left.
Selain itu kita akan menggunakan beberapa CSS3 stylings untuk menampilkan kartu terlihat terangkat.
Dengan bantuan border-radius kita dapat membuat sudut membulat, dengan nilai px yang dapat anda tentukan besar kecilnya untuk nilai tersebut.
Properti kotak-bayangan (box-shadow), memungkinkan kita untuk menambahkan sebuah drop shadow untuk indeks kartu ; nilai pertama menentukan horisontal (x) offset, nilai kedua (y) offset vertikal dan nilai ketiga ukuran blur. Nilai terakhir mendefinisikan warna bayangan. Dengan bantuan properti ini Anda dapat meniru setiap drop shadow yang dapat anda buat seperti pada Photoshop.
Properti transisi memungkinkan kita untuk menentukan bagaimana dan berapa lama berubah menjadi bagian yang berbeda (: hover,: aktif, dll) akan terjadi. Nilai pertama menunjukkan properti penargetan Anda, yang kedua waktu transisi yang akan diambil dan ketiga mendefinisikan render animasi (bagaimana animasi akan mengubah dari waktu ke waktu).
Nilai yang memungkinkan untuk nilai ketiga adalah: linier, ease (default), ease-in, ease-out, ease-in-out and cubic-bezier, yang memungkinkan Anda untuk menentukan karakternya sendiri.
/* Index Card Styling */
ul#index_cards {
margin-top:50px;
text-align:center;
}
ul#index_cards li {
background:url(../images/card_bg.jpg) repeat;
height:450px;
width:130px;
display:block;
float:left;
border:1px solid #666;
padding:25px 10px;
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
Sekarang kita harus menambahkan beberapa styling individual untuk setiap kartu.
Susunan kartu dengan urutan atas, kanan, bawah dan kiri, dengan menggunakan bantuan transform: memutar menambahkan rotasi ke kartu. Pastikan bahwa nilai-nilai dari dua kartu terluar (1 dan 5) dan dua kartu dalam (2 dan 4) yang berlawanan (misalnya-20deg untuk kartu 1 dan 20 deg untuk Kartu 5).
Anda juga harus menentukan nilai yang berbeda untuk z-indeks dari kartu, lihat kode di bawah ini.
Sekarang anda harus menambahkan hover, untuk menentukan tampilan yang berbeda pada setiap kartu.
Pertama dengan memberikan hover umum untuk semua kartu, di mana kita akan menentukan tinggi z-index kartu saat melayang. Dan kartu ini yang selalu terlihat didepan.
Kemudian Anda harus menambahkan nilai-nilai individu transformasi untuk setiap kartu. Kali ini kita perlu menggunakan fungsi transformasi skala properti, selain fungsi rotasi.
Dalam kode di bawah masing-masing kartu pada level 110% (x1.1) dan memutar 2 derajat (Anda harus menyeimbangkan rotasi asli kartu meskipun, misalnya dari 10 derajat sampai 12).
Terahirnya anda harus menambahkan styling pada beberapa isi dari kartu.
Meskipun kita menggunakan CSS-reset, mungkin ada beberapa perbedaan dalam margin dan padding dari @font-face fonts, karena masih ada beberapa masalah tentang kompatibilitas cross-browser.
Dalam contoh spesifik ini, sudut dibulatkan, drop shadow dan latar belakang untuk menampilkan gambar dan juga beberapa penyesuaian kecil pada teks.
/* Content Styling */
ul#index_cards li img {
margin-top:7px;
background:#eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
}
ul#index_cards li p {
margin-top:4px;
text-align:left;
line-height:28px;
}
Saat ini efek CSS3 belum mendukung pada semua browser. Contoh spesifikterlihat baik di versi terbaru Safari dan Chrome, diikuti oleh Firefox. Internet Explorer 8 dan Opera telah fallbacks menjadi sesuai (meskipun hanya mendekati dengan efek aslinya), dan tidak bekerja sama sekali di Internet Explorer 7 dan versi sebelumnya.
Kode CSS
Kode HTML
Jika Anda ingin mengetahui lebih lanjut tentang CSS3 dan menemukan beberapa manfaat lain yang ditawarkan, Anda lihat di css3.info.
Selesai..!!!
Sumber: Design Lovr
Hari ini kita akan mengambil langkah ke arah sana dan menemukan beberapa kemungkinan CSS3 memberi kita sebuah manfaat.
Saya akan membuat beberapa tumpukan indeks kartu yang dinamis hanya dengan menggunakan HTML dan CSS3. Dengan memanfaatka CSS3 fitur sebagai transformasi dan transisi (untuk efek dinamis) dan @font-face, kotak-bayangan dan border-radius (untuk styling).
Demo:
(Letakan cursor pada contoh Kartu..)
Buku Catatan si Ugi
(Letakan cursor pada contoh Kartu..)
Card 1
Name: Toucan
Age: 5
Size: 50 cm
Weight: 600 g
Food: Fruit
Toucan lives in southern and central America and loves to fly around
Card 2
Name: Fox
Age: 3
Size: 70 cm
Weight: 5.5 kg
Food: Meat
Fox lives in the northern hemisphere and loves to play seek and hide
Card 3
Name: Dog
Age: 8
Size: 120 cm
Weight: 10 kg
Food: Bones
Dog lives in a dog hut and loves to chew shoes, bark and go for walks
Card 4
Name: Penguin
Age: 20
Size: 110 cm
Weight: 35 kg
Food: Fish
Penguin lives where it's cold and icy and loves to swim and dive
Card 5
Name: Lion
Age: 12
Size: 190 cm
Weight: 180 kg
Food: Meat
Lions lives in Africa and loves to sleep most of the day and hunt sometimes
Buku Catatan si Ugi
Mari kita mulai dengan -markup HTML sederhana, yang terdiri dari daftar unordered sederhana, diisi dengan konten secara acak.
<body>
<div id="wrapper">
<ul id="index_cards">
<li id="card-1">
<h3>Card 1</h3>
<img src="images/t9tuqui_trans.png" height="130" width="130" alt="Toucan" />
<p>Name: Toucan<br />
Age: 5<br />
Size: 50 cm<br />
Weight: 600 g<br />
Food: Fruit<br />
Toucan lives in southern and central America and loves to fly around</p>
</li>
<li id="card-2">
<h3>Card 2</h3>
<img src="images/t9foxy_trans.png" height="130" width="130" alt="Fox" />
<p>Name: Fox<br />
Age: 3<br />
Size: 70 cm<br />
Weight: 5.5 kg<br />
Food: Meat<br />
Fox lives in the northern hemisphere and loves to play seek and hide</p>
</li>
<li id="card-3">
<h3>Card 3</h3>
<img src="images/t9dog2_trans.png" height="130" width="130" alt="Dog" />
<p>Name: Dog<br />
Age: 8<br />
Size: 120 cm<br />
Weight: 10 kg<br />
Food: Bones<br />
Dog lives in a dog hut and loves to chew shoes, bark and go for walks</p>
</li>
<li id="card-4">
<h3>Card 4</h3>
<img src="images/t9penguino_trans.png" height="130" width="130" alt="Penguin" />
<p>Name: Penguin<br />
Age: 20<br />
Size: 110 cm<br />
Weight: 35 kg<br />
Food: Fish<br />
Penguin lives where it's cold and icy and loves to swim and dive</p>
</li>
<li id="card-5">
<h3>Card 5</h3>
<img src="images/t9lion_trans.png" height="130" width="130" alt="Lion" />
<p>Name: Lion<br />
Age: 12<br />
Size: 190 cm<br />
Weight: 180 kg<br />
Food: Meat<br />
Lions lives in Africa and loves to sleep most of the day and hunt sometimes</p>
</li>
</ul>
</div>
</body>
Untuk CSS, Saya menggunakan Yahoo User Interface(YUI) 2 CSS Reset untuk mencapai hasil yang sama di semua browser, maka kita harus mendefinisikan font yang ingin kita gunakan dengan @font-face (untuk informasi lebih lanjut tentang @font-face, lihat 30 Font Indah dan Gratis, Dapat Anda Gunakan untuk @font-face ) dengan menambahkan beberapa aturan umum untuk CSS .
Font Ini tersedia dalam @font-face kit (semua yang diperlukan seperti, font-format dan CSS-file yang sudah terformat) dan Squirrel font , adalah yang digunakan dalam desain contoh ini.
/* @font-face definitions */
@font-face {
font-family: 'KulminoituvaRegular';
src: url('../fonts/kulminoituva.eot');
src: local('Kulminoituva Regular'), local('Kulminoituva'), url('../fonts/kulminoituva.woff') format('woff'), url('../fonts/kulminoituva.ttf') format('truetype'), url('../fonts/kulminoituva.svg#Kulminoituva') format('svg');
}
@font-face {
font-family: 'NotethisRegular';
src: url('../fonts/Note_this.eot');
src: local('Note this Regular'), local('Notethis'), url('../fonts/Note_this.woff') format('woff'), url('../fonts/Note_this.ttf') format('truetype'), url('../fonts/Note_this.svg#Notethis') format('svg');
}
/* General styling */
body {
background:#202020;
font-family: NotethisRegular, Verdana, Arial, sans-serif;
font-size:125%;
color:#202020;
}
h1, h2, h3, h4, h5, h6 {
font-family: KulminoituvaRegular, "Arial Black", Gadget, sans-serif;
font-size:1.5em;
}
#wrapper {
width:760px;
margin:0 auto;
text-align:center;
padding-top:50px;
}
Kemudian kita harus menentukan gaya dari indeks kartu.
Pertama kita menambahkan beberapa CSS 2.1 untuk aturan umum seperti, lebar, tinggi bantalan, dan perbatasan (Anda dapat memilih apapun nilai yang Anda inginkan). Gambar latar belakang adalah opsional, Pastikan untuk mengatur posisi: relatif, display: block dan float: left.
Selain itu kita akan menggunakan beberapa CSS3 stylings untuk menampilkan kartu terlihat terangkat.
Dengan bantuan border-radius kita dapat membuat sudut membulat, dengan nilai px yang dapat anda tentukan besar kecilnya untuk nilai tersebut.
Properti kotak-bayangan (box-shadow), memungkinkan kita untuk menambahkan sebuah drop shadow untuk indeks kartu ; nilai pertama menentukan horisontal (x) offset, nilai kedua (y) offset vertikal dan nilai ketiga ukuran blur. Nilai terakhir mendefinisikan warna bayangan. Dengan bantuan properti ini Anda dapat meniru setiap drop shadow yang dapat anda buat seperti pada Photoshop.
Properti transisi memungkinkan kita untuk menentukan bagaimana dan berapa lama berubah menjadi bagian yang berbeda (: hover,: aktif, dll) akan terjadi. Nilai pertama menunjukkan properti penargetan Anda, yang kedua waktu transisi yang akan diambil dan ketiga mendefinisikan render animasi (bagaimana animasi akan mengubah dari waktu ke waktu).
Nilai yang memungkinkan untuk nilai ketiga adalah: linier, ease (default), ease-in, ease-out, ease-in-out and cubic-bezier, yang memungkinkan Anda untuk menentukan karakternya sendiri.
/* Index Card Styling */
ul#index_cards {
margin-top:50px;
text-align:center;
}
ul#index_cards li {
background:url(../images/card_bg.jpg) repeat;
height:450px;
width:130px;
display:block;
float:left;
border:1px solid #666;
padding:25px 10px;
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
Sekarang kita harus menambahkan beberapa styling individual untuk setiap kartu.
Susunan kartu dengan urutan atas, kanan, bawah dan kiri, dengan menggunakan bantuan transform: memutar menambahkan rotasi ke kartu. Pastikan bahwa nilai-nilai dari dua kartu terluar (1 dan 5) dan dua kartu dalam (2 dan 4) yang berlawanan (misalnya-20deg untuk kartu 1 dan 20 deg untuk Kartu 5).
Anda juga harus menentukan nilai yang berbeda untuk z-indeks dari kartu, lihat kode di bawah ini.
#card-1 {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
z-index:1;
left:150px;
top:40px;
}
#card-2 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
z-index:2;
left:70px;
top:10px;
}
#card-3 {
background-color:#69732B;
z-index:3;
}
#card-4 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
z-index:2;
right:70px;
top:10px;
}
#card-5 {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
z-index:1;
right:150px;
top:40px;
}
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
z-index:1;
left:150px;
top:40px;
}
#card-2 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
z-index:2;
left:70px;
top:10px;
}
#card-3 {
background-color:#69732B;
z-index:3;
}
#card-4 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
z-index:2;
right:70px;
top:10px;
}
#card-5 {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
z-index:1;
right:150px;
top:40px;
}
Sekarang anda harus menambahkan hover, untuk menentukan tampilan yang berbeda pada setiap kartu.
Pertama dengan memberikan hover umum untuk semua kartu, di mana kita akan menentukan tinggi z-index kartu saat melayang. Dan kartu ini yang selalu terlihat didepan.
Kemudian Anda harus menambahkan nilai-nilai individu transformasi untuk setiap kartu. Kali ini kita perlu menggunakan fungsi transformasi skala properti, selain fungsi rotasi.
Dalam kode di bawah masing-masing kartu pada level 110% (x1.1) dan memutar 2 derajat (Anda harus menyeimbangkan rotasi asli kartu meskipun, misalnya dari 10 derajat sampai 12).
/* Hover States */
ul#index_cards li:hover {
z-index:4;
}
#card-1:hover {
-moz-transform: scale(1.1) rotate(-18deg);
-webkit-transform: scale(1.1) rotate(-18deg);
}
#card-2:hover {
-moz-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale(1.1) rotate(-8deg);
}
#card-3:hover {
-moz-transform: scale(1.1) rotate(2deg);
-webkit-transform: scale(1.1) rotate(2deg);
}
#card-4:hover {
-moz-transform: scale(1.1) rotate(12deg);
-webkit-transform: scale(1.1) rotate(12deg);
}
#card-5:hover {
-moz-transform: scale(1.1) rotate(22deg);
-webkit-transform: scale(1.1) rotate(22deg);
}
ul#index_cards li:hover {
z-index:4;
}
#card-1:hover {
-moz-transform: scale(1.1) rotate(-18deg);
-webkit-transform: scale(1.1) rotate(-18deg);
}
#card-2:hover {
-moz-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale(1.1) rotate(-8deg);
}
#card-3:hover {
-moz-transform: scale(1.1) rotate(2deg);
-webkit-transform: scale(1.1) rotate(2deg);
}
#card-4:hover {
-moz-transform: scale(1.1) rotate(12deg);
-webkit-transform: scale(1.1) rotate(12deg);
}
#card-5:hover {
-moz-transform: scale(1.1) rotate(22deg);
-webkit-transform: scale(1.1) rotate(22deg);
}
Terahirnya anda harus menambahkan styling pada beberapa isi dari kartu.
Meskipun kita menggunakan CSS-reset, mungkin ada beberapa perbedaan dalam margin dan padding dari @font-face fonts, karena masih ada beberapa masalah tentang kompatibilitas cross-browser.
Dalam contoh spesifik ini, sudut dibulatkan, drop shadow dan latar belakang untuk menampilkan gambar dan juga beberapa penyesuaian kecil pada teks.
/* Content Styling */
ul#index_cards li img {
margin-top:7px;
background:#eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
}
ul#index_cards li p {
margin-top:4px;
text-align:left;
line-height:28px;
}
Saat ini efek CSS3 belum mendukung pada semua browser. Contoh spesifikterlihat baik di versi terbaru Safari dan Chrome, diikuti oleh Firefox. Internet Explorer 8 dan Opera telah fallbacks menjadi sesuai (meskipun hanya mendekati dengan efek aslinya), dan tidak bekerja sama sekali di Internet Explorer 7 dan versi sebelumnya.
Berikut ini adalah kode CSS dan HTML lengkap untuk membuat "Tumpukan Kartu Dinamis dengan CSS3".
Kode CSS
<style type="text/css">
@charset "utf-8";
/* CSS Document */
/*CSS Reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var,small {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* @font-face definitions */
@font-face {
font-family: 'KulminoituvaRegular';
src: url('http://h1.ripway.com/caprt3a/IndexCards/kulminoituva.eot ');
src: local('Kulminoituva Regular'), local('Kulminoituva'), url('http://h1.ripway.com/caprt3a/IndexCards/kulminoituva.woff ') format('woff'), url('http://h1.ripway.com/caprt3a/IndexCards/kulminoituva.ttf ') format('truetype'), url('http://h1.ripway.com/caprt3a/IndexCards/kulminoituva.svg #Kulminoituva') format('svg');
}
@font-face {
font-family: 'NotethisRegular';
src: url('http://h1.ripway.com/caprt3a/IndexCards/Note_this.eot ');
src: local('Note this Regular'), local('Notethis'), url('http://h1.ripway.com/caprt3a/IndexCards/Note_this.woff') format('woff'), url('http://h1.ripway.com/caprt3a/IndexCards/Note_this.ttf ') format('truetype'), url('http://h1.ripway.com/caprt3a/IndexCards/Note_this.svg #Notethis') format('svg');
}
/* General styling */
body {
background:grey;
font-family: NotethisRegular, Verdana, Arial, sans-serif;
font-size:125%;
color:#202020;
}
h1, h2, h3, h4, h5, h6 {
font-family: KulminoituvaRegular, "Arial Black", Gadget, sans-serif;
font-size:1.5em;
}
#wrapper {
width:760px;
margin-left:-60px;
text-align:center;
padding-top:50px;
}
/* Index Card Styling */
ul#index_cards {
margin-top:50px;
text-align:center;
}
ul#index_cards li {
background:url(http://2.bp.blogspot.com/-43vvzrhrHh0/TkgabisxBgI/AAAAAAAAA7k/Dz6Rn8ersec/s200/card_bg1.jpg) repeat;
height:450px;
width:130px;
display:block;
float:left;
border:1px solid #666;
padding:25px 10px;
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
#card-1 {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
z-index:1;
left:150px;
top:40px;
}
#card-2 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
z-index:2;
left:70px;
top:10px;
}
#card-3 {
background-color:#69732B;
z-index:3;
}
#card-4 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
z-index:2;
right:70px;
top:10px;
}
#card-5 {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
z-index:1;
right:150px;
top:40px;
}
/* Hover States */
ul#index_cards li:hover {
z-index:4;
}
#card-1:hover {
-moz-transform: scale(1.1) rotate(-18deg);
-webkit-transform: scale(1.1) rotate(-18deg);
}
#card-2:hover {
-moz-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale(1.1) rotate(-8deg);
}
#card-3:hover {
-moz-transform: scale(1.1) rotate(2deg);
-webkit-transform: scale(1.1) rotate(2deg);
}
#card-4:hover {
-moz-transform: scale(1.1) rotate(12deg);
-webkit-transform: scale(1.1) rotate(12deg);
}
#card-5:hover {
-moz-transform: scale(1.1) rotate(22deg);
-webkit-transform: scale(1.1) rotate(22deg);
}
/* Content Styling */
ul#index_cards li img {
margin-top:7px;
background:#eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
}
ul#index_cards li p {
margin-top:4px;
text-align:left;
line-height:28px;
}
</style>
@charset "utf-8";
/* CSS Document */
/*CSS Reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var,small {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* @font-face definitions */
@font-face {
font-family: 'KulminoituvaRegular';
src: url('http://h1.ripway.com/caprt3a/IndexCards/kulminoituva.eot ');
src: local('Kulminoituva Regular'), local('Kulminoituva'), url('http://h1.ripway.com/caprt3a/IndexCards/kulminoituva.woff ') format('woff'), url('http://h1.ripway.com/caprt3a/IndexCards/kulminoituva.ttf ') format('truetype'), url('http://h1.ripway.com/caprt3a/IndexCards/kulminoituva.svg #Kulminoituva') format('svg');
}
@font-face {
font-family: 'NotethisRegular';
src: url('http://h1.ripway.com/caprt3a/IndexCards/Note_this.eot ');
src: local('Note this Regular'), local('Notethis'), url('http://h1.ripway.com/caprt3a/IndexCards/Note_this.woff') format('woff'), url('http://h1.ripway.com/caprt3a/IndexCards/Note_this.ttf ') format('truetype'), url('http://h1.ripway.com/caprt3a/IndexCards/Note_this.svg #Notethis') format('svg');
}
/* General styling */
body {
background:grey;
font-family: NotethisRegular, Verdana, Arial, sans-serif;
font-size:125%;
color:#202020;
}
h1, h2, h3, h4, h5, h6 {
font-family: KulminoituvaRegular, "Arial Black", Gadget, sans-serif;
font-size:1.5em;
}
#wrapper {
width:760px;
margin-left:-60px;
text-align:center;
padding-top:50px;
}
/* Index Card Styling */
ul#index_cards {
margin-top:50px;
text-align:center;
}
ul#index_cards li {
background:url(http://2.bp.blogspot.com/-43vvzrhrHh0/TkgabisxBgI/AAAAAAAAA7k/Dz6Rn8ersec/s200/card_bg1.jpg) repeat;
height:450px;
width:130px;
display:block;
float:left;
border:1px solid #666;
padding:25px 10px;
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
#card-1 {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
z-index:1;
left:150px;
top:40px;
}
#card-2 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
z-index:2;
left:70px;
top:10px;
}
#card-3 {
background-color:#69732B;
z-index:3;
}
#card-4 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
z-index:2;
right:70px;
top:10px;
}
#card-5 {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
z-index:1;
right:150px;
top:40px;
}
/* Hover States */
ul#index_cards li:hover {
z-index:4;
}
#card-1:hover {
-moz-transform: scale(1.1) rotate(-18deg);
-webkit-transform: scale(1.1) rotate(-18deg);
}
#card-2:hover {
-moz-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale(1.1) rotate(-8deg);
}
#card-3:hover {
-moz-transform: scale(1.1) rotate(2deg);
-webkit-transform: scale(1.1) rotate(2deg);
}
#card-4:hover {
-moz-transform: scale(1.1) rotate(12deg);
-webkit-transform: scale(1.1) rotate(12deg);
}
#card-5:hover {
-moz-transform: scale(1.1) rotate(22deg);
-webkit-transform: scale(1.1) rotate(22deg);
}
/* Content Styling */
ul#index_cards li img {
margin-top:7px;
background:#eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
}
ul#index_cards li p {
margin-top:4px;
text-align:left;
line-height:28px;
}
</style>
Kode HTML
<div id="wrapper">
<a href="http://caprt3a.blogspot.com/"><img src="images/demo.png" height="89" width="600" alt="Buku Catatan si Ugi" /></a>
<ul id="index_cards">
<li id="card-1">
<h3>Card 1</h3>
<img src="images/t9tuqui_trans.png" height="130" width="130" alt="Toucan" />
<p>Name: Toucan<br />
Age: 5<br />
Size: 50 cm<br />
Weight: 600 g<br />
Food: Fruit<br />
Toucan lives in southern and central America and loves to fly around</p>
</li>
<li id="card-2">
<h3>Card 2</h3>
<img src="images/t9foxy_trans.png" height="130" width="130" alt="Fox" />
<p>Name: Fox<br />
Age: 3<br />
Size: 70 cm<br />
Weight: 5.5 kg<br />
Food: Meat<br />
Fox lives in the northern hemisphere and loves to play seek and hide</p>
</li>
<li id="card-3">
<h3>Card 3</h3>
<img src="images/t9dog2_trans.png" height="130" width="130" alt="Dog" />
<p>Name: Dog<br />
Age: 8<br />
Size: 120 cm<br />
Weight: 10 kg<br />
Food: Bones<br />
Dog lives in a dog hut and loves to chew shoes, bark and go for walks</p>
</li>
<li id="card-4">
<h3>Card 4</h3>
<img src="images/t9penguino_trans.png" height="130" width="130" alt="Penguin" />
<p>Name: Penguin<br />
Age: 20<br />
Size: 110 cm<br />
Weight: 35 kg<br />
Food: Fish<br />
Penguin lives where it's cold and icy and loves to swim and dive</p>
</li>
<li id="card-5">
<h3>Card 5</h3>
<img src="images/t9lion_trans.png" height="130" width="130" alt="Lion" />
<p>Name: Lion<br />
Age: 12<br />
Size: 190 cm<br />
Weight: 180 kg<br />
Food: Meat<br />
Lions lives in Africa and loves to sleep most of the day and hunt sometimes</p>
</li>
</ul>
<a href="http://caprt3a.blogspot.com/" id="back">Buku Catatan si Ugi</a>
</div>
<a href="http://caprt3a.blogspot.com/"><img src="images/demo.png" height="89" width="600" alt="Buku Catatan si Ugi" /></a>
<ul id="index_cards">
<li id="card-1">
<h3>Card 1</h3>
<img src="images/t9tuqui_trans.png" height="130" width="130" alt="Toucan" />
<p>Name: Toucan<br />
Age: 5<br />
Size: 50 cm<br />
Weight: 600 g<br />
Food: Fruit<br />
Toucan lives in southern and central America and loves to fly around</p>
</li>
<li id="card-2">
<h3>Card 2</h3>
<img src="images/t9foxy_trans.png" height="130" width="130" alt="Fox" />
<p>Name: Fox<br />
Age: 3<br />
Size: 70 cm<br />
Weight: 5.5 kg<br />
Food: Meat<br />
Fox lives in the northern hemisphere and loves to play seek and hide</p>
</li>
<li id="card-3">
<h3>Card 3</h3>
<img src="images/t9dog2_trans.png" height="130" width="130" alt="Dog" />
<p>Name: Dog<br />
Age: 8<br />
Size: 120 cm<br />
Weight: 10 kg<br />
Food: Bones<br />
Dog lives in a dog hut and loves to chew shoes, bark and go for walks</p>
</li>
<li id="card-4">
<h3>Card 4</h3>
<img src="images/t9penguino_trans.png" height="130" width="130" alt="Penguin" />
<p>Name: Penguin<br />
Age: 20<br />
Size: 110 cm<br />
Weight: 35 kg<br />
Food: Fish<br />
Penguin lives where it's cold and icy and loves to swim and dive</p>
</li>
<li id="card-5">
<h3>Card 5</h3>
<img src="images/t9lion_trans.png" height="130" width="130" alt="Lion" />
<p>Name: Lion<br />
Age: 12<br />
Size: 190 cm<br />
Weight: 180 kg<br />
Food: Meat<br />
Lions lives in Africa and loves to sleep most of the day and hunt sometimes</p>
</li>
</ul>
<a href="http://caprt3a.blogspot.com/" id="back">Buku Catatan si Ugi</a>
</div>
Jika Anda ingin mengetahui lebih lanjut tentang CSS3 dan menemukan beberapa manfaat lain yang ditawarkan, Anda lihat di css3.info.
Selesai..!!!
Sumber: Design Lovr
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