CSS 3

CSS3

Kabarnya adalagi varian css3 yang sedang di rilis dan ada beberapa yang sudah di pakai bareng templates blogspot loh! Setelah versi css2.1 terciptalah css3 yang lebih baik. Dengan CSS3 ini kita bisa lebih mempercantik blog kita seperti membuat bayangan gambar, membuat bayangan teks, membuat efek blur, Membuat background dan tabel gradient dll. Ini dia sedikit element baru dari versi css3.

Borders
border-color
border-image
border-radius
box-shadow

Backgrounds
background-origin and background-clip
background-size
multiple backgrounds

Color
HSL colors
HSLA colors
opacity
RGBA colors

Text effects
text-shadow
text-overflow
word-wrap

User-interface
box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left

Selectors
attribute selectors

Basic box model
overflow-x, overflow-y

Generated Content
content

Other modules
media queries
multi-column layout

Web fonts
speech

Walau mayoritas web designer di seluruh dunia sangat antusias dengan CSS3 ini, penting juga untuk diketahui, sekarang hanya beberapa browser saja yang sudah mensupport CSS3 yaitu browser dengan engine webkit (safari, chrome) dan mozilla (firefox, flock).

Sedikit tutorial membuat gambar border bershadow dengan css3.

Copy pastekan code dhtml di bawah ini di notepad.











ingat pada atribut src="gantigambaranda.jpeg" simpan dengan ekstensi nama.html dan pada type files ganti all files. Ada juga border yang jadi image seperti element

border-width: 27px;
-moz-border-image: url(images/border.png) 27 repeat;
-webkit-border-image: url(images/border.png) 27 repeat;
border-image: url(images/border.png) 27 repeat;

shadows pada bayangan samping kanan dan bawah saja.

background:#FFF;
border:1px solid #000;
width:500px;
text-align:center;
height: 100px;
-webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-moz-border-radius:15px 0px 15px 0px;
-webkit-border-radius:15px;
padding: 5px 5px 5px 5px;

Source :

Posted in: Internet