10 Properti CSS3 yang Anda Perlu Akrab Dengannya

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Kita telah membahas tiga puluh penyeleksi CSS yang harus dihafalkan; tapi bagaimana dengan properti CSS3 yang baru? Meskipun kebanyakan dari mereka masih memerlukan prefiks khusus vendor, Anda tetap dapat menggunakannya dalam proyek Anda hari ini. Sebenarnya, ini dianjurkan!

Kuncinya adalah untuk pertama menentukan apakah Anda baik-baik saja dengan presentasi yang sedikit berbeda dari browser ke browser. Apakah Anda baik-baik saja dengan, katakanlah, IE menampilkan sudut 90 derajat, bukan yang membulat licin? Terserah Anda untuk memutuskan. Bagaimanapun juga, selalu ingat bahwa situs web tidak perlu terlihat identik di setiap browser. Pada akhir artikel ini, kita akan mengerjakan proyek akhir yang menyenangkan.

1. border-radius

Dengan mudah properti CSS3 yang paling populer dalam kelompok tersebut, border-radius adalah semacam properti CSS3 unggulan. Sementara banyak desainer masih takut dengan gagasan bahwa tata letak dapat disajikan secara berbeda dari browser ke browser, langkah kecil, seperti sudut membulat, merupakan cara mudah untuk memancing mereka masuk!

Ironisnya, kita semua baik-baik saja dengan gagasan untuk menyediakan pengalaman melihat alternatif untuk browser mobile. Anehnya, beberapa orang tidak merasakan hal yang sama saat berhubungan dengan penjelajahan desktop.

1	-webkit-border-radius: 4px;
2	-moz-border-radius: 4px;
3	border-radius: 4px;

Harap dicatat bahwa baik Safari 5 dan IE9 menerapkan sintaks `border-radius` resmi.

Lingkaran

Beberapa pembaca mungkin tidak sadar bahwa kita juga bisa menciptakan lingkaran dengan properti ini.

1	-moz-border-radius: 50px;
2	-webkit-border-radius: 50px;
3	border-radius: 50px;

...Dan, jika kita ingin bersenang-senang, kita juga dapat memanfaatkan Flexible Box Model (terperinci di #8) baik secara vertikal dan horizontal menengahkan teks ke dalam lingkaran. Ini membutuhkan sedikit kode, tapi hanya karena kebutuhan untuk mengimbangi berbagai vendor.

display: -moz-box;
display: -webkit-box;
display: box;

-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;

-moz-box-pack: center;
-moz-box-align: center;

-webkit-box-pack: center;
-webkit-box-align: center;

box-pack: center;
box-align: center;

2. box-shadow

Selanjutnya, kita memiliki box-shadow di mana-mana, yang memungkinkan Anda untuk segera menerapkan kedalaman dari elemen Anda. Hanya jangan terlalu menjengkelkan dengan nilai yang Anda tetapkan!

1	-webkit-box-shadow: 1px 1px 3px #292929;
2	-moz-box-shadow: 1px 1px 3px #292929;
3	box-shadow: 1px 1px 3px #292929;

box-shadow menerima empat parameter:

x-offset
y-offset
blur
warna bayangan

Nah, yang banyak tidak disadari adalah Anda bisa mengaplikasikan banyak box-shadow sekaligus. Hal ini dapat menyebabkan beberapa efek yang sangat menarik. Pada screenshot berikut, saya menggunakan bayangan biru dan hijau untuk memperbesar setiap bayangan.

1	-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
2	-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
3	box-shadow: 1px 1px 3px green, -1px -1px blue;

Bayangan Pintar

Dengan menerapkan bayangan ke pseudo-class ::before dan ::after, kita bisa menciptakan beberapa perspektif yang sangat menarik. Inilah salah satu untuk Anda memulai:

HTML

1	<div class="box">
2	<img src="tuts.jpg" alt="Tuts" />
3	</div>

CSS

.box:after {
   content: '';
   position: absolute;

   z-index: -1; /* hide shadow behind image */

   /* The Shadow */
   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                

   width: 70%; 
   left: 15%; /* one half of the remaining 30% (see width above) */

   height: 100px;
   bottom:  0;
}

Ingin efek yang lebih keren? Lihat tutorial ini di Nettuts+.

3. text-shadow

text-shadow adalah salah satu dari beberapa properti CSS yang dapat kita abaikan penggunaan dari prefiks vendor. Cukup mirip dengan box-shadow, itu harus diterapkan pada teks, dan menerima empat parameter yang sama:

x-offset
y-offset
blur
warna bayangan

1	h1 {
2	text-shadow: 0 1px 0 white;
3	color: #292929;
4	}

Text-Outline

Sekali lagi, seperti saudaranya, box-shadow, kita bisa menerapkan banyak bayangan, dengan menggunakan koma sebagai pemisah. Sebagai contoh, katakanlah kita ingin membuat efek outline untuk teks. Sementara webkit memang menawarkan efek stroke, kita bisa menjangkau lebih banyak browser dengan menggunakan metode berikut (meski tidak cukup cantik):

body { background: white; }

h1 {
   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
   color: white;
}

4. Text-Stroke

Berhati-hatilah dengan metode ini. Hanya webkit, untuk beberapa tahun terakhir, yang mendukungnya (Safari, Chrome, iPhone). Sebenarnya, meskipun saya bisa saja salah, `text-stroke` belum menjadi bagian dari spesifikasi CSS3. Dalam kasus ini, dengan teks putih, Firefox akan menampilkan halaman yang tampaknya kosong. Anda bisa menggunakan fitur deteksi JavaScript untuk menyiasati hal ini, atau pastikan warna dasar teks Anda tidak sama dengan latar belakang body.

1	h1 {
2	-webkit-text-stroke: 3px black;
3	color: white;
4	}

Pendeteksian Fitur

Bagaimana kita bisa menyediakan satu set penataan untuk, katakanlah, Firefox, dan set lain untuk Safari atau Chrome? Salah satu solusinya adalah dengan menggunakan pendeteksian fitur.

Dengan pendeteksian fitur, kita bisa menggunakan JavaScript untuk menguji apakah ada properti tertentu tersedia. Jika tidak, kita mempersiapkan sebuah fallback.

Mari kita simak kembali masalah text-stroke. Mari kita tetapkan warna fallback hitam untuk browser yang tidak mendukung properti ini (semua selain webkit saat ini).

var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
   var heading = document.getElementsByTagName('h1')[0];
   heading.style.color = 'black';
}

Pertama, kita buat elemen dummy h1. Kemudian, kami melakukan penggeledahan penuh untuk menentukan apakah properti -webkit-text-stroke tersedia untuk elemen tersebut, melalui atribut style. Jika tidak, kita akan meraih judul Hello Readers, dan mengatur warnanya dari putih menjadi hitam.

Harap dicatat bahwa kita sedang generik di sini. Jika Anda perlu mengganti beberapa tag h1 pada halaman, Anda harus menggunakan pernyataan while untuk memfilter melalui setiap judul, dan memperbarui nama styling atau kelas, yang sesuai.

Kita juga hanya menguji untuk webkit, bila mungkin browser lain pada akhirnya akan mendukung properti text-stroke juga. Ingat itu.

Jika Anda menginginkan solusi pendeteksian fitur yang lebih komprehensif, lihat Modernizr.

5. Banyak Latar Belakang

Properti background telah dirombak untuk memungkinkan banyak latar belakang di CSS3.

Mari buat contoh konyol, cukup sebagai bukti konsep. Karena tidak ada gambar yang sesuai di sekitar, saya akan menggunakan dua gambar tutorial sebagai latar belakang kita. Tentu saja, dalam aplikasi dunia nyata, Anda mungkin menggunakan tekstur dan, mungkin, sebuah gradien untuk latar belakang Anda.

1	.box {
2	background: url(image/path.jpg) 0 0 no-repeat,
3	url(image2/path.jpg) 100% 0 no-repeat;
4	}

Di atas, dengan menggunakan koma sebagai pemisah, kita merujuk dua gambar latar belakang yang terpisah. Perhatikan bagaimana, dalam kasus pertama, ditempatkan di posisi kiri atas (0 0), dan, di posisi kedua, posisi kanan atas (100% 0).

Pastikan Anda memberikan fallback untuk browser yang tidak memberikan dukungan untuk banyak latar belakang. Mereka akan melewatkan properti sepenuhnya, membiarkan latar belakang Anda kosong.

Kompensasi untuk Browser Lawas

Untuk menambahkan satu gambar latar belakang untuk browser lawas, seperti IE7, nyatakan properti background dua kali: pertama untuk browser lawas, dan yang kedua sebagai penggantinya. Sebagai alternatif, Anda bisa, sekali lagi, gunakan Modernizr.

.box {
/* fallback */
background: url(image/path.jpg) no-repeat;

/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

6. background-size

Sampai saat ini, kita terpaksa menggunakan teknik licik untuk memungkinkan gambar latar belakang dapat diubah ukurannya.

1	background: url(path/to/image.jpg) no-repeat;
2	background-size: 100% 100%;

Kode di atas akan mengarahkan gambar latar belakang untuk mengambil semua ruang yang tersedia. Sebagai contoh, bagaimana jika kita menginginkan gambar tertentu mengambil keseluruhan elemen body, terlepas dari lebar jendela browser?

body, html { height: 100%; }

body {
 background: url(path/to/image.jpg) no-repeat;
 background-size: 100% 100%;
}

Itu semua ada untuk itu. Properti background-size akan menerima dua parameter: lebar x dan y masing-masing.

Sementara versi terakhir dari Chrome dan Safari mendukung background-size secara native, kita masih perlu menggunakan prefiks vendor untuk browser lawas.

body {
 background: url(path/to/image.jpg) no-repeat;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
}

Lihat Demo

7. text-overflow

Awalnya dikembangkan oleh Internet Explorer, properti text-overflow dapat menerima dua nilai:

clip
ellipsis

Properti ini bisa digunakan untuk memotong teks yang melebihi kontainernya, sambil tetap memberikan sedikit umpan balik untuk pengguna, seperti elipsis.

Tahukah Anda? Internet Explorer telah memberikan dukungan untuk properti ini sejak IE6? Mereka menciptakannya!

.box {
   -o-text-overflow: ellipsis;
   text-overflow:ellipsis;

   overflow:hidden;
   white-space:nowrap;

   border: 1px solid black;
   width: 400px;
   padding: 20px;

   cursor: pointer;
}

Pada titik ini, Anda mungkin mempertimbangkan untuk menampilkan keseluruhan teks saat pengguna hover di atas kotak.

#box:hover {
  white-space: normal;
  color: rgba(0,0,0,1);
  background: #e3e3e3;
  border: 1px solid #666;
}

Agak aneh (kecuali jika saya salah), sepertinya tidak ada cara untuk mereset properti text-overflow, atau "mematikan." Untuk meniru fungsi "off" ini, pada :hover, kita bisa mengatur properti white-space kembali ke normal. Ini bekerja, karena text-overflow bergantung pada fungsi ini dengan benar.

Tahukah Anda? Anda juga bisa menentukan string Anda sendiri, yang seharusnya digunakan menggantikan elipsis. Melakukan hal ini akan membuat string mewakili teks yang terpotong.

8. Flexible Box Model

Flexible Box Model, akhirnya akan memungkinkan kita melepaskan diri dari float. Meskipun dibutuhkan sedikit kerja untuk menyimpulkan di sekitar properti baru, begitu Anda melakukannya, semuanya harus masuk akal.

Mari membangun demo singkat, dan membuat tata letak dua kolom sederhana.

<div id="container">

 <div id="main"> Main content here </div>
 <aside> Aside content here </aside>

</div>

Sekarang untuk CSS: pertama kita perlu menginstruksikan container untuk diperlakukan sebagai box. Saya juga akan menerapkan lebar dan tinggi generik, karena kita tidak memiliki konten aktual dalam permainan.

 #container {
    width: 960px;
    height: 500px; /* just for demo */

    background: #e3e3e3;
    margin: auto;

    display: -moz-box;
    display: -webkit-box;
    display: box;

Selanjutnya, mari kita terapkan, untuk demo, warna latar belakang yang unik ke div #main, dan aside.

#main { 
   background: yellow;
}   

aside {
   background: red;
}

Pada titik ini, tidak banyak yang bisa dilihat.

Flexible Box ModelSatu hal yang perlu dicatat adalah, ketika diatur ke mode display: box, elemen anak akan mengambil semua ruang vertikal; ini adalah nilai default box-align: stretch.

Perhatikan apa yang terjadi bila kita secara eksplisit menyatakan lebar pada area konten #main.

1	#main {
2	background: yellow;
3	width: 800px;
4	}

Contoh Flexbox 2Nah itu sedikit lebih baik, tapi kita masih memiliki masalah ini dimana aside tidak mengambil semua ruang yang tersisa. Kita bisa memperbaikinya dengan menggunakan properti box-flex baru.

box-flex menginstruksikan elemen untuk mengambil semua ruang yang tersedia.

 aside { 
    display: block; /* cause is HTML5 element */
    background: red;

   /* take up all available space */
    -moz-box-flex: 1; 
    -webkit-box-flex: 1;
    box-flex: 1; 
 }

Dengan properti ini di tempatnya, terlepas dari lebar area konten #main, aside akan mengkonsumsi setiap spek dari ruang yang tersedia. Bahkan lebih baik lagi, Anda tidak perlu khawatir dengan masalah float sial itu, seperti elemen yang jatuh di bawah area konten utama.

Kita hanya menggores permukaannya di sini. Lihat artikel Paul Irish yang sangat bagus untuk informasi lebih lanjut. Juga, berhati-hatilah saat menggunakan metode ini, karena tidak sepenuhnya didukung, tentu saja, di browser lawas. Dalam kasus tersebut, Anda dapat menggunakan pendeteksian fitur atau Modernizr untuk mendeteksi dukungan, dan memberikan fallback yang diperlukan.

9. Resize

Hanya tersedia, seperti Firefox 4 dan Safari 3, properti resize -- bagian dari modul UI CSS3 -- yang memungkinkan Anda untuk menentukan bagaimana textarea diubah ukurannya.

1	<textarea name="elem" id="elem" rows="5" cols="50"></textarea>

Perhatikan bahwa, secara default, browser webkit dan Firefox 4 memungkinkan textarea yang diubah ukurannya, baik secara vertikal maupun horizontal.

textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}

Kemungkinan Nilai

both: Mengubah ukuran secara vertikal dan horizontal
horizontal: Membatasi perubahan ukuran secara horizontal
vertical: Membatasi perubahan ukuran secara vertikal
none: Menonaktifkan perubahan ukuran

10. Transition

Mungkin tambahan yang paling menarik dari CSS3 adalah kemampuan untuk menerapkan animasi ke elemen, tanpa menggunakan JavaScript.

Meskipun terlihat seperti itu, IE9 masih tidak akan mendukung transisi CSS, yang tentunya tidak berarti Anda tidak boleh menggunakannya. Kuncinya adalah untuk meningkatkan.

Mari kita meniru efek yang umum, dimana, begitu Anda hover tautan di sidebar, teks akan meluncur ke kanan sedikit.

HTML

1	<ul>
2	<li>
3	<a href="#"> Hover Over Me </a>
4	</li>
5	<li>
6	<a href="#"> Hover Over Me </a>
7	</li>
8	<li>
9	<a href="#"> Hover Over Me </a>
10	</li>
11	<li>
12	<a href="#"> Hover Over Me </a>
13	</li>
14	</ul>

CSS

 ul a {
    -webkit-transition: padding .4s; 
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
 }

 a:hover { 
    padding-left: 6px;  
 }

transition akan menerima tiga parameter:

Properti untuk transisi. (Tetapkan nilai ini ke all jika diperlukan)
Durasi
Jenis easing

Alasan mengapa kita tidak secara langsung menerapkan transition ke status hover tag anchor adalah karena, jika memang demikian, animasinya hanya akan berlaku selama mouseover. Pada mouseout, elemen tersebut akan segera kembali ke keadaan semula.

Lihat Demo

Karena kita hanya meningkatkan pengaruhnya, kita sama sekali tidak membahayakan browser lawas.

Proyek Akhir

Mari menggabungkan sebagian besar teknik yang telah kita pelajari di artikel ini, dan menciptakan efek yang apik. Tinjau efek terakhirnya terlebih dulu (paling baik dilihat di browser Webkit).

Langkah 1. Markup

Kita akan tetap sederhana; dalam kontainer .box kita, kita akan menambahkan dua div: satu untuk ukuran depan, dan yang lainnya untuk bagian belakang.

<body>

   <div class="box">
      <div>Hello</div>
      <div> World </div>
   </div>

</body>

Langkah 2. Ditengahkan Secara Horizontal dan Vertikal

Selanjutnya, saya ingin kartu kita di tengah sempurna di layar. Untuk melakukannya, kita akan memanfaatkan Flexible Box Model. Pastikan, kemudian, menggunakan Modernizr untuk memberikan fallback untuk IE.

Karena halaman kita hanya berisi kartu ini, kita dapat secara efektif menggunakan elemen body sebagai pembungkus kita.

body, html { height: 100%; width: 100%; } 

body {
  display: -moz-box;
	display: -webkit-box;
	display: box;
	
	-moz-box-orient: horizontal; 
	-webkit-box-orient: horizontal;
	box-orient: horizontal;
	
	-moz-box-pack: center;
	-moz-box-align: center;
	
	-webkit-box-pack: center;
	-webkit-box-align: center;
	
	box-pack: center;
	box-align: center;
}

Langkah 3. Penataan Kotaknya

Sekarang kita akan menata "kartu" kita.

 .box {
    background: #e3e3e3;
    border: 1px dashed #666;
    margin: auto;
    width: 400px;
    height: 200px;
    cursor: pointer;
    position: relative;

    -webkit-transition: all 1s;	
    -moz-transition: all 1s;
    transition: all 1s;	
 }

Perhatikan bahwa kita juga telah menginstruksikan elemen ini untuk listen setiap perubahan pada keadaan elemen. Ketika terjadi, kita akan mentransisikan perubahannya (jika mungkin) selama satu detik (transition: all 1s).

Langkah 4. Sebuah Bayangan yang Efektif

Selanjutnya, seperti yang telah kita pelajari sebelumnya di artikel ini, kita akan menerapkan bayangan keren dengan menggunakan pseudo class ::after.

 .box::after {
    content: '';
    position: absolute;

    width: 70%;
    height: 10px;
    bottom: 0;
    left: 15%;

    z-index: -1;

    -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    box-shadow: 0 9px 20px rgba(0,0,0,.4);
}

Langkah 5. Penataan Div Turunan

Saat ini, div turunan masih berada tepat di atas satu sama lain. Mari kita memposisikan mereka secara absolut, dan menginstruksikan mereka untuk mengambil semua ruang yang tersedia.

 .box > div {
    background: #e3e3e3;
     
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    

    font: 45px/200px bold helvetica, arial, sans-serif;
    text-align: center;
    
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
 }

Langkah 6. Memperbaiki "Front"

Lihat gambar di atas; perhatikan bagaimana sisi belakang kartu kita ditampilkan secara default? Hal ini disebabkan, karena fakta bahwa elemen terjadi lebih rendah pada markup, maka hasilnya akan mendapatkan z-index yang lebih tinggi. Mari kita memperbaikinya.

 /* Make sure we see the front side first */
 .box > div:first-child {
    position: relative;
    z-index: 2;
 }

Langkah 7. Memutar Kartu

Sekarang untuk bagian yang menyenangkan; ketika kita mengarahkan kursor ke atas kartu, ia harus membalik, dan menampilkan "sisi-belakang" kartu (setidaknya ilusi "sisi-belakang"). Untuk mencapai efek ini, kita menggunakan transformasi dan fungsi rotateY.

 .box:hover {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);   	   	
 }

Langkah 8. Teks yang Dicerminkan

Bukankah itu terlihat mengagumkan? Tapi, sekarang, teks itu tampaknya dicerminkan. Ini, tentu saja, karena kita mengubah kontainernya. Mari kita offset ini dengan memutar div turunannya 180 derajat juga.

/* Hide the front-side when hovered */
 .box:hover > div:first-child {
    opacity: 0;
 }

 .box:hover div:last-child {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
 }

Dan dengan kode terakhir itu, kita telah mencapai efek apik kita!

Kesimpulan

Terima kasih banyak telah membaca, dan saya harap Anda belajar sedikit!