Belajar CSS3 ~ Catatan Kartika Chumairoh

CSS ato bisa dibilang Cascading Style Sheets. CSS adalah sekumpulan code-code yang dipakai untuk mempercantik tatanan web anda. Jika memakai CSS anda tak perlu mendesain form setiap halamannya, tapi cukup membuat satu halaman dan sudah bisa dipakai untuk banyak halaman.

CSS3 adalah generasi penerus CSS yang ada saat ini. Pada CSS3 ada beberapa fungsi yang ditambahkan. Dan hari ini saya juga belajar CSS3 tidak terlalu sulit jika sudah paham tentang CSS. Apalagi jika kita tidak membuat dari awal. kita akan mudah sekali mengerti CSS. Cukup dengan merubah CSS yg sudah anda punya / yang ada di internet.

Dibawah ini adalah contoh hasil dari CSS3 yg sudah saya buat, mungkin tidak terlalu buruklah, hehe..


Gambar di atas hasil dari CSS3

Untuk melihat bagai mana cara membuat CSS di atas bisa lihat dibawah ini, bisa anda edit sesuka hati anda, silahkan mencoba, semoga membantu :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br />
<html><br />
<head><br />
<style type="text/css"> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:5px solid green;
}

div#div2
{
width:100px;
height:75px;
background-color:#FF8899;
border:5px solid #006677;

border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */

transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
div#div3
{
width:110px;
height:80px;
background-color:#FF3322;
border:5px solid blue;
transform:rotate(70deg);
-ms-transform:rotate(70deg); /* IE 9 */
-moz-transform:rotate(70deg); /* Firefox */
-webkit-transform:rotate(70deg); /* Safari and Chrome */
-o-transform:rotate(70deg); /* Opera */
}
div#div4
{
width:120px;
height:75px;
background-color:tomato;
border:5px solid grey;
text-shadow: 5px 5px 5px yellow;
border:2px solid;
border-radius:25px;
-moz-border-radius:25px;
transform:rotate(-30deg);
-ms-transform:rotate(-30deg); /* IE 9 */
-moz-transform:rotate(-30deg); /* Firefox */
-webkit-transform:rotate(-30deg); /* Safari and Chrome */
-o-transform:rotate(-30deg); /* Opera */
}
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
font-weight:bold;
}
</style><br />
</head><br />
<body><br />
<br />
<div>Hello. This is a DIV element.</div><br />
<div id="div2">Hello. This is a DIV2 element.</div><div id="div3">Hello. This is a DIV3 element.</div><div id="div4">Hello. This is a DIV4 element.</div><br />
</body><br />
</html><br />
<br />

Catatan Kartika Chumairoh

Kamis, 19 April 2012

Belajar CSS3

1 komentar:

Mengenai Saya

Pengikut

Calendar

Entri Populer

Label

Blog Archive

Pages