Mengubah Warna Text dan Background Menggunakan CSS3
Apa yang berbeda dalam mengubah warna text dan background pada CSS3?
Dalam pengaturan warna dalam CSS3 tidak berbeda
dengan aturan CSS versi sebelumnya, hanya saja, dalam penggantian gambar background
memiliki aturan yang baru dan fitur yang lebih baik. Pada generasi sebelumnya,
ukuran gambar background ditentukan oleh ukuran asli gambarnya. Pada CSS3
ukuran gambar background dapat diatur lebih spesifik, ukuran gambar dapat diatur
menggunakan ukuran persen.
Mengubah Warna Text
<!DOCTYPE
html>
<html>
<head>
<style>
body
{color:red;}
h1
{color:#00ff00;}
p.ex
{color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>Bagian
H1 (kode warna hex hijau)</h1>
<p>Bagian
p(warna merah pada body web)</p>
<p
class="ex">Bagian p.ex.(kode warna rgb biru)</p>
</body>
</html>
Hasil :
Pada
contoh di atas warna text diubah dengan tiga cara, yaitu menggunakan nama
warnanya langsung, menggunakan kode hex dan rgb. Setiap warna di simpan pada
tipe text dan letak text.
Mengubah Warna Background
<!DOCTYPE
html>
<html>
<head>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>Warna
Background Keseluruhan</h1>
<p>Diganti
pada body html.</p>
</body>
</html>
Hasil :
<!DOCTYPE
html>
<html>
<head>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>Warna
Background Text H1</h1>
<div>
Warna
background bagian div.
<p>Warna
Background Text p.</p>
Warna
background bagian div.
</div>
</body>
</html>
Hasil :
Dua
contoh di atas merupakan contoh mengganti background menggunakan CSS. Contoh
pertama mengganti keseluruhan warna background. Pada contoh kedua mengganti
warna background text saja. Setiap text dapat memiliki warna backgroundnya
masing-masing.
Mengubah Gambar Background
<!DOCTYPE
html>
<html>
<head>
<style>
div
{
background:url(01.jpg);
background-size:100%
100%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div>
Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text. Gambar
background ini mengikuti ukuran div yang ada sesuai banyaknya text.
</div>
</body>
</html>
Hasil :
<!DOCTYPE
html>
<html>
<head>
<style>
body
{
background:url(01.jpg);
background-size:80px
60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Mengubah
ukuran gambar.
</p>
<p>Original
image: <img src="01.jpg" alt="Flowers"
width="400"
height="180"></p>
</body>
</html>
Hasil :
Kedua
contoh di atas adalah mengganti ukuran gambar yang dapat diterapkan sebagai
cara untuk mengganti background. Pada script diatas terdapat script yang
mengatur ukuran gambar, script itu tidak tersedia pada CSS versi sebelumnya.
CSS3 dapat mengganti ukuran gambar dan dapat menggunakan ukuran persen untuk
mengubah ukuran gambar.
Sumber :
http://www.w3schools.com/css/css_text.asp
http://www.w3schools.com/css3/css3_backgrounds.asp
Tautan Terkait :
Format Text Menggunakan CSS3
Style CSS3
Font Pada CSS3
Jarak Spasi antara Text Menggunakan CSS3
Sumber :
http://www.w3schools.com/css/css_text.asp
http://www.w3schools.com/css3/css3_backgrounds.asp
Tautan Terkait :
Format Text Menggunakan CSS3
Style CSS3
Font Pada CSS3
Jarak Spasi antara Text Menggunakan CSS3
