Cara menggunakan CSS3 untuk peningkatan gaya

 /* Kode ini mengimplementasikan efek gradien ketika mouse menggeser link*/
A {
	warna: #007c21;
	transisi: warna .4s kemudahan;
}
a: arahkan kursor { warna: #00bf32 }

 <!DOCTYPEhtml>
<htmllang="id">
<kepala>
	<meta charset="utf-8" />
	<title>Sudut Membulat</title>
	<link rel="stylesheet" href="css/rounded-corners.css" />
</kepala>
<tubuh>
<div class="semua sudut"></div>
<div class="satu sudut"></div>
<div class="elliptical-corners"></div>
<div kelas="lingkaran"></div>
</tubuh>
</html>
 

 div {
	latar belakang: #999;
	mengapung: kiri;
	tinggi: 150 piksel;
	margin: 10 piksel;
	lebar: 150 piksel;
}
.semua sudut {
	-radius-perbatasan-webkit: 20 piksel;
	radius batas: 20px;
}
.satu sudut {
	-webkit-perbatasan-kiri-atas-radius: 75px;
	radius-batas-kiri-atas: 75px;
}
.sudut elips {
	-radius-perbatasan webkit: 50 piksel / 20 piksel;
	radius batas: 50px / 20px;
}
.lingkaran {
	-radius-perbatasan-webkit: 50%;
	radius perbatasan: 50%;
}

 div {
	latar belakang: #ff9;
	batas: 5 piksel padat #326795;
	mengapung: kiri;
	tinggi: 150 piksel;
	margin: 10 piksel;
	lebar: 150 piksel;
}
.contoh-1 {
	/* Membuat radius sudut kiri atas dan kanan bawah menjadi 10px dan 
	sudut kanan atas dan kiri bawah 20px */
	radius batas: 10px 20px;
}
.contoh-2 {
	/* Menjadikan radius sudut kiri atas 20px, dan semua sudut lainnya 0 */
	radius batas: 20px 0 0;
}
.contoh-3 {
	/* Menjadikan radius pojok kiri atas 10px, pojok kanan atas 20px, 
	pojok kanan bawah 0, dan pojok kiri bawah 30px */
	radius batas: 10px 20px 0 30px;
}

 <!DOCTYPEhtml>
<htmllang="id">
<kepala>
	<meta charset="utf-8" />
	<title>Bayangan Teks</title>
	<link rel="stylesheet" href="css/text-shadow.css" />
</kepala>
<tubuh>
<p class="basic">Bayangan Dasar</p>
<p class="basic-negative">Bayangan Dasar</p>
<p class="blur">Radius Buram</p>
<p class="blur-inversed">Radius Buram</p>
<p class="multiple">Beberapa Bayangan Teks</p>
</tubuh>
</html>

 tubuh {
	latar belakang: #fff;
	warna: #222;
	jenis huruf: 100%/1,05 helvetica, sans-serif;
	padding-atas: 20 piksel;
}
P {
	warna: #222; /* hampir hitam */
	ukuran font: 4,5em;
	berat font: tebal;
	margin: 0 0 45 piksel;
}
p:anak terakhir {
	margin: 0;
}
.dasar {
	bayangan-teks: 3px 3px #aaa;
}
/* menggunakan offset negatif--Anda juga dapat menggabungkan offset positif dan negatif */
.basic-negatif {
	text-shadow: -4px -2px #ccc; /* abu-abu sedikit lebih terang dari #aaa */
}
.blur {
	bayangan teks: 2px 2px 10px abu-abu;
}
.blur-terbalik {
	warna: putih;
	bayangan teks: 2px 2px 10px #000; /* hitam */
}
/* contoh ini memiliki dua bayangan, namun Anda dapat menyertakannya 
lebih lanjut dengan memisahkan masing-masing dengan koma */
.beberapa {
	bayangan teks:
		2px 2px putih, 
		6px 6px rgba(50,50,50,.25);
}

 <!DOCTYPEhtml>
<htmllang="id">
<kepala>
	<meta charset="utf-8" />
	<title>Bayangan Kotak</title>
	<link rel="stylesheet" href="css/box-shadow.css" />
</kepala>
<tubuh>
<div kelas="bayangan">
	<p>Bayangan dengan Buram</p>
</div>
<div class="bayangan-negatif">
	<p>Bayangan dengan Offset Negatif dan Buram</p>
</div>
<div class="bayangan-spread">
	<p>Bayangan dengan Buram dan Menyebar</p>
</div>
<div class="bayangan-offset-0">
	<p>Bayangan dengan Offset Nol, Blur, dan Spread</p>
</div>
<div class="inset-shadow">
	<p>Sisipkan Bayangan</p>
</div>
<div kelas="banyak">
	<p>Beberapa Bayangan</p>
</div>
<div class="bayangan-negatif-spread">
	<p>Bayangan dengan Buram dan Penyebaran Negatif</p>
</div>
</tubuh>
</html>

 tubuh {
	latar belakang: #000;
	warna: #fff;
}
jam1 {
	keluarga font: sans-serif;
	ukuran font: 2,25em;
	tinggi garis: 1.1;
	perataan teks: tengah;
}
/* CATATAN: URL gambar latar belakang di bawah ini berbeda dengan contoh yang ditunjukkan dalam buku, karena saya telah menempatkan gambar dalam sub-folder (disebut "img"), seperti yang biasa terjadi saat mengatur situs. Saya pikir akan bermanfaat bagi Anda untuk melihat bagaimana membuat URL gambar latar belakang Anda dalam keadaan ini. Perhatikan bahwa URL tersebut relatif terhadap tempat style sheet berada, BUKAN halaman HTML yang menampilkan gambar tersebut.
.langit malam {
	warna latar: biru tua; /* warna cadangan */
	gambar latar belakang: 
 	 	url(../img/ufo.png), 
 	 	url(../img/bintang.png), 
 		url(../img/bintang.png), 
 		url(../img/sky.png);
	posisi latar belakang: 
 	 	50% 102%, 
 	 	100% -150 piksel, 
 	 	0 -150 piksel, 
 	 	50% 100%;
	pengulangan latar belakang: 
 		tidak ada pengulangan, 
 		tidak ada pengulangan, 
 		tidak ada pengulangan, 
 		ulangi-x;
	tinggi: 300 piksel;
	margin: 25px auto 0; /* sedikit berbeda dari buku */
	padding-atas: 36px;
	lebar: 75%;
}

 <!DOCTYPEhtml>
<htmllang="id">
<kepala>
	<meta charset="utf-8" />
	<title>Berbagai Latar Belakang</title>
	<link rel="stylesheet" href="css/multiple-backgrounds.css" />
</kepala>
<tubuh>
<div class="langit malam">
	<h1>Di langit malam...</h1>
</div>
</tubuh>
</html>

 ...
.langit malam {
	warna latar: biru tua; /* warna cadangan */
	gambar latar belakang: 
 	 	url(../img/ufo.png), 
 	 	url(../img/bintang.png), 
 		url(../img/bintang.png), 
 		url(../img/sky.png);
	posisi latar belakang: 
 	 	50% 102%, 
 	 	100% -150 piksel, 
 	 	0 -150 piksel, 
 	 	50% 100%;
	ulangi latar belakang: 
 		tidak ada pengulangan, 
 		tidak ada pengulangan, 
 		tidak ada pengulangan, 
 		ulangi-x;
	tinggi: 300 piksel;
	margin: 25px auto 0; /* sedikit berbeda dari buku */
	padding-atas: 36px;
	lebar: 75%;
}

 .langit malam {
	/* fallback dengan warna dan gambar */
	latar belakang: navy url(../img/ufo.png) bagian tengah bawah tanpa pengulangan;
	/* untuk browser pendukung */
	latar belakang: 		
		url(../img/ufo.png) tidak ada pengulangan 50% 102%,
		url(../img/stars.png) tanpa pengulangan 100% -150px,
		url(../img/stars.png) tanpa pengulangan 0 -150 piksel,
		url(../img/sky.png) ulangi-x 50% 100%;
	tinggi: 300 piksel;
	margin: 25px otomatis 0;
	padding-atas: 36 piksel;
	lebar: 75%;
}

 <!DOCTYPEhtml>
<htmllang="id">
<kepala>
	<meta charset="utf-8" />
	<title>Latar Belakang Gradien</title>
	<link rel="stylesheet" href="css/gradients.css" />
</kepala>
<tubuh>
<div class="vertical-down"><p>default</p></div>
<div class="vertical-up"><p>ke atas</p></div>
<div class="horizontal-rt"><p>ke kanan</p></div>
<div class="horizontal-lt"><p>ke kiri</p></div>
<div class="angle-bot-rt"><p>ke <br />kanan bawah</p></div>
<div class="angle-bot-lt"><p>ke <br />kiri bawah</p></div>
<div class="angle-top-rt"><p>ke kanan atas</p></div>
<div class="angle-top-lt"><p>ke kiri atas</p></div>
<div class="angle-120deg"><p>120deg</p></div>
<div class="angle-290deg"><p>290deg</p></div>
<bagian kelas="radial">
	<div class="radial-center"><p>default</p></div>
	<div class="radial-top"><p>di atas</p></div>
	<div class="radial-size-1"><p>100 piksel, 50 piksel</p></div>
	<div class="radial-size-2"><p>70% 90% di <br />kiri bawah</p></div>
	<div class="radial-various-1"><p>berbagai 1</p></div>
	<div class="radial-various-2"><p>berbagai 2</p></div>
</bagian>
<bagian kelas="warna-berhenti">
	<div class="color-stops-1"><p>kuning 10%, hijau</p></div>
	<div class="color-stops-2"><p>ke kanan atas, kuning, <br>hijau 70%, <br>biru</p></div>
</bagian>
</tubuh>
</html>

 tubuh {
	padding: 1.25em; /* 20px/16px, jadi 20px di setiap sisi */
	ukuran font: 100%;
}
div {
	mengapung: kiri;
	tinggi: 150 piksel;
	margin: 10 piksel;
	lebar: 150 piksel;
}
P {
	warna: #fff;
	font: tebal 1,25em/1 sans-serif; /* 20px/16px */
	bantalan-atas: 1,65em; /* 33px/16px */
	perataan teks: tengah;
}
/* CATATAN: Gradien di bawah ini ada dalam sintaksis CSS3 standar. Browser yang mendukungnya adalah Chrome 26+, Firefox 16+, IE 10+, dan Opera 12.10+. Lihat gradien-dengan-browser-prefixes.css untuk hal yang sama efek gradien, tetapi dengan kode awalan vendor juga disertakan sehingga gradien akan berfungsi pada beberapa browser lama. Latar belakang dengan komentar "fallback" adalah warna yang akan ditampilkan di browser yang tidak mendukung sintaksis gradien. Anda juga dapat menggunakan gambar latar sebagai cadangan (baik sendiri atau dikombinasikan dengan warna). Misalnya, background: red url(gradient-image.jpg) no-repeat; .
/* GRADIEN LINEAR
------------------------------------------ */
/* :::: Vertikal :::: */
.vertikal-bawah {
	latar belakang: perak; /* mundur */
	/* gradien default, jadi Anda tidak perlu menentukan "ke bawah" sebelum warna */
	latar belakang: gradien linier (perak, hitam);
}
.vertikal-up {
	latar belakang:perak;
	latar belakang: gradien linier (ke atas, perak, hitam);
}
/* :::: Horisontal :::: */
.horizontal-rt {
	latar belakang: perak; /* mundur */
	latar belakang: gradien linier (ke kanan, perak, hitam);
}
.horizontal-lt {
	latar belakang: perak; /* mundur */
	latar belakang: gradien linier (ke kiri, perak, hitam);
}
/* :::: Sudut Diagonal :::: */
/* Catatan: Gambar di halaman 377 menunjukkan aqua sebagai warna cadangan, tapi saya sudah menggantinya
menjadi navy di bawah karena teks berwarna putih akan lebih mudah dibaca dengan latar belakang navy */
.angle-bot-rt {
	latar belakang: angkatan laut; /* mundur */
	latar belakang: gradien linier (ke kanan bawah, aqua, navy);
}
.angle-bot-lt {
	latar belakang: angkatan laut; /* mundur */
	latar belakang: gradien linier (ke kiri bawah, aqua, navy);
}
.angle-top-rt {
	latar belakang: angkatan laut; /* mundur */
	latar belakang: gradien linier (ke kanan atas, aqua, navy);
}
.angle-top-lt {
	latar belakang: angkatan laut; /* mundur */
	latar belakang: gradien linier (ke kiri atas, aqua, navy);
}
/* :::: Sudut melalui Derajat :::: */
.angle-120deg {
	latar belakang: angkatan laut; /* mundur */
	latar belakang: gradien linier (120 derajat, aqua, angkatan laut);
}
.angle-290deg {
	latar belakang: angkatan laut; /* mundur */
	latar belakang: gradien linier (290 derajat, aqua, angkatan laut);
}
/* GRADIEN RADIAL
------------------------------------------ */
/* :::: Radial :::: */
.radial p {
	bayangan-teks: 0 0 3px #000;
}
.radial-pusat {
	latar belakang: merah; /* mundur */
	latar belakang: gradien radial(kuning, merah); /* default */
}
.radial-atas {
	latar belakang: merah; /* mundur */
	latar belakang: gradien radial (di atas, kuning, merah);
}
.radial-ukuran-1 {
	latar belakang: merah; /* mundur */
	latar belakang: radial-gradient(100px 50px, kuning, merah);
}
.radial-ukuran-2 {
	latar belakang: merah; /* mundur */
	latar belakang: gradien radial (70% 90% di kiri bawah, kuning, merah);
}
.radial-berbagai-1 {
	latar belakang: merah; /* mundur */
	latar belakang: radial-gradient (sisi terdekat pada 70px 60px, kuning, kapur, merah);
}
.radial-berbagai-2 {
	latar belakang: merah; /* mundur */
	latar belakang: radial-gradient(30px 30px pada 65% 70%, kuning, kapur, merah);
}
/* GRADIEN LINEAR DENGAN WARNA BERHENTI
------------------------------------------ */
.color-stop div {
	margin-bawah: 30 piksel;
}
.warna-berhenti p {
	padding-atas: 25px;
	bayangan-teks: 0 0 3px #000;
}
.color-stop-2 p {
	ukuran font: 18px;
	tinggi garis: 1,05;
}
.color-stop-1 {
	latar belakang: hijau; /* mundur */
	latar belakang: gradien linier (kuning 10%, hijau);
}
.color-stop-2 {
	latar belakang: hijau; /* mundur */
	latar belakang: gradien linier (ke kanan atas, kuning, hijau 70%, biru);
}

 ...
<p>Area ini adalah salah satu ruang paling tenang di Villa. Saat saya berjalan-jalan, menikmati keteduhan yang disediakan oleh pohon sycamore dan pohon laurel serta diiringi gemericik air dari dua air mancur pahatan, mau tak mau saya berpikir &hellip; href="victoria.html" class="more">Baca Selengkapnya</a></p>
...

 /* Konten yang dihasilkan */
.more:setelah {
    isi: " "";
}

 .dokumen li {
	margin-atas: .45em;
}
/* Setiap link dalam HTML memiliki kelas ini */
.ikon {
	tampilan: blok sebaris;
	tinggi garis: 1.1;
	ukuran font: .875em;
	min-height: 16px; /* disetel ke tinggi ikon sehingga tidak terpotong sama sekali */
	padding-kiri: 23px;
	padding-atas: 2px;
	/* memungkinkan penempatan ikon secara relatif terhadap elemen dengan class="icon" di HTML */
	posisi: relatif;
}
.icon:sebelum {
	gambar latar belakang: url(../img/sprite.png);
	isi: " ";
	tampilan: blok;
	tinggi: 16 piksel; /* tinggi ikon */
	kiri: 0; /* default. ubah ini jika ingin ikon muncul di tempat berbeda */
	posisi: mutlak;
	lebar: 16 piksel; /* lebar ikon */
	top: 0; /* default. ubah ini jika ingin ikon muncul di tempat yang berbeda */
}
/* Pergeseran posisi gambar sprite untuk nama file dokumen apa pun yang diakhiri dengan .xls */
a[href$=".xls"]:sebelum {
	posisi latar belakang: -17px 0;
}
/* Pergeseran posisi gambar sprite untuk nama file dokumen apa pun yang diakhiri dengan .docx */
a[href$=".docx"]:sebelum {
	posisi latar belakang: -34px 0;
}