Sintaks-sintaks yang berlaku pada CSS3

Sebelum beranjak pada Sintaks-sintaks yang berlaku pada CSS3 akan lebih baik anda membaca Sejarah Serta Pengertian HTML5 dan CSS3 dan Fitur Baru di HTML5 & CSS3.

Introduction

Sintaks-sintaks CSS3 terbagi menjadi “modul-modul”. Beberapa dari modul yang paling penting dalam CSS3 adalah

Selectors
Box Model
Borders CSS3
Backgrounds CSS3
Text Effects
2D/3D Transformations
Animations
Multiple column Layout
User Interface

Kenyataannya, saat ini spesifikasi CSS3 sendiri masih dalam pengembangan oleh W3C (World Wide Web Consortium).Namun banyak dari property baru CSS3 telah diimplementasikan ke dalam browser-browser terbaru saat ini.

CSS3 Borders

Dengan CSS3, kamu dapat membuat border dengan bentuk yang tak selalu kotak, menambahkan efek shadow dalam objek, dan menggunakan gambar sebagai border tanpa menggunakan program desain seperti Photoshop.

Di bagian ini akan mempelajari tentang border properties seperti ini:

border-radius

border-shadow

border-image

Internet Explorer 9 hanya support dua dari properties border terbaru

Firefox membutuhkan prefix –moz- untuk menampilkan border-image

Chrome dan Safari membutuhkan prefix –webkit- untuk menampilkan border-image

Opera membutuhkan prefix –o- untuk menampilkan border-image

Property dari fasilitas borders

Property dari fasilitas borders
Property	Description	Values
border-image	Sebuah wadah untuk mensetting seluruh property dari border-image	-source: none\|image; -slice: number\| % \| fill; -width: number \| % \| auto; -outset: length \| number; -repeat: stretch \| repeat \| round;
border-radius	Sebuah wadah untuk mensetting seluruh dari 4 ujung-ujung border (radius)	length %
box-shadow	Menempelkan satu atau lebih efek bayangan pada border	h-shadow v-shadow blur spread color inset

Contoh-contoh implementasi border dalam CSS3

CSS3 Rounded Corners

<!DOCTYPE HTML >

<html>

<head>

div

{

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:300px;

border-radius:25px;

-moz-border-radius:25px; /* Firefox 3.6 and earlier */

}

</style>

</head>

<body>

<div>Dengan CSS3, kita bisa membuat border yang tidak selalu berbentuk kotak dengan mudah.</div>

</body>

</html>

Inilah hasil dari CSS3 Rounded Corners

CSS3 Box Shadow

CSS3 Box Shadow

<!DOCTYPE HTML >

<html>

<head>

div

{

width:300px;

height:100px;

background-color:yellow;

-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */

box-shadow: 10px 10px 5px #888888;

}

</style>

</head>

<body>

</body>

</html>

Inilah hasil dari CSS3 Box Shadow

CSS3 border-image

<!DOCTYPE HTML >

<html>

<head>

div

{

border-width:15px;

width:250px;

padding:10px 20px;

}

#round

{

-moz-border-image:url(images/border.png) 30 30 round; /* Firefox */

-webkit-border-image:url(images/border.png) 30 30 round; /* Safari and Chrome */

-o-border-image:url(images/border.png) 30 30 round; /* Opera */

border-image:url(images/border.png) 30 30 round;

}

#stretch

{

-moz-border-image:url(images/border.png) 30 30 stretch; /* Firefox */

-webkit-border-image:url(images/border.png) 30 30 stretch; /* Safari and Chrome */

-o-border-image:url(images/border.png) 30 30 stretch; /* Opera */

border-image:url(images/border.png) 30 30 stretch;

}

</style>

</head>

<body>

<div id="round">Border ini hasil dari pengulangan bagian dari gambar yang tersedia.</div>

<br />

<div id="stretch">Kalau disini, bordernya ditarik hingga memenuhi tempat yang tersedia.</div>

<p>Dari gambar inilah border terbuat:</p>

</body>

</html>

Inilah hasil dari CSS3 border-image

Itu adalah Sintaks-sintaks yang berlaku pada CSS3

Baca artikel lain nya tentang HTML5 dan CSS3 disini

Sintaks-sintaks yang berlaku pada CSS3