Kemampuan CSS yang sudah terbukti powerful untuk mempercantik tampilan website, membuat para front-end developers atau web desainer mencoba untuk mempelajari dan memperdalami CSS dari segi penggunaan properti-properti pada CSS maupun membuat website lebih maksimal dalam cross-browser.
Maka dari itu, saya coba berbagi rahasia dan koleksi CSS2 dan CSS3 untuk membantu sobat-sobat web desainer profesional atau yang baru belajar. Karena saya yakin, CSS Snippet berikut dapat membantu sobat dalam menguasai dan mengetahui tips dan trik yang terdapat pada CSS2 maupun CSS3.
Kumpulan CSS Snippets berasal dari berbagai sumber yang saya rasa sangat penting untuk diketahui sebagai pendukung dalam membuat code CSS yang efisien untuk kebutuhan Anda.
1. CSS Resets
Trik kode CSS yang dimodifikasi oleh Jake Rocheleau ini dapat digunakan untuk membersihkan formating properti CSS yang telah diperbaharui dengan supporting responsive images atau gambar yang responsive dan menyesuaikan semua element menggunakan border-box, yang membuat margin dan padding akanberfungsi maksimal.Berikut ini contoh kode nya :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}html { height: 101%; }body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }ol, ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; }img { border: 0; max-width: 100%; }p { font-size: 1.2em; line-height: 1.0em; color: #333; } |
2. Penggunaan Media Query Secara General
Berikut ini adalah contoh kode penggunaan Media Query secara general atau global yang merupakan standar media query untuk lebar masing-masing device (PC, tablet, mobile) untuk membuat style responsive. Kode ini dapat Anda dapatkan di CSS-Tricks untuk mengetahui trik-trik lainnya.Adapun script Media Query standard responsive device ini adalah sebagai berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| /* Smartphones (portrait dan landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */}/* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) { /* Styles */}/* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) { /* Styles */}/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */}/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */}/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */}/* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) { /* Styles */}/* Large screens ----------- */@media only screen and (min-width : 1824px) { /* Styles */}/* iPhone 4 ----------- */@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { /* Styles */} |
3. Font Modern menggunakan CSS
Salah satu bagian tersulit ketika merancang sebuah website adalah menentukan font atau jenis huruf apa yang paling cocok untuk digunakan pada desain yang akan dibuat. Nah, jika Anda membutuhkan template font moderen, Anda dapat menggunakan script berikut sebagai standar font-moderen Anda :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| /* Times New Roman-based serif */font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;/* A modern Georgia-based serif */font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;/*A more traditional Garamond-based serif */font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;/*The Helvetica/Arial-based sans serif */font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;/*The Verdana-based sans serif */font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;/*The Trebuchet-based sans serif */font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;/*The heavier "Impact" sans serif */font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;/*The monospace */font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; |
Jika Anda membutuhkan contoh font lain, silahkan kunjungi CSS Font Stacks.
4. Floating Cleaner (Clearfix)
Apa fungsi Clearfix? jika sobat masih pemula, clearfix ini digunakan untuk membersihkan properti float pada CSS yang jika tidak kita terapkan tag berikutnya akan melakukan penyesuaian terhadap pada elemen yang kita berikan floating.Teknik clearfix sudah sangat banyak digunakan, bahkan CSS Framework rata-rata menggunakan teknik ini. Untuk lebih jelasnya, berikut ini contoh kode pembuatan clearfix pada CSS :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .clearfix:before, .container:after { content: ""; display: table; }.clearfix:after { clear: both; }/* IE 6/7 */.clearfix { zoom: 1; } |
5. Teknik Transparansi yang Support Semua Browser
Jika Anda ingin membuat transparansi pada CSS dan didukung oleh semua browser (cross-browser), Anda dapat menggunakan script berikut ini :
1
2
3
4
5
6
| .transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */} |
6. Modifikasi Text-Selection dengan CSS
Beberapa browser terbaru memperbolehkan kita untuk dapat mendefinisikan Custom highlight color pada halaman website kita dengan menggunakan CSS. Berikut ini adalah script yang dapat anda gunakan untuk memodifikasi Text-Selection pada browser yang berbasis Webkit dan Mozilla (seperti Chrome dan Firefox) :
1
2
3
4
5
6
7
8
9
| ::selection { background: #e2eae2; }::-moz-selection { background: #e2eae2; }::-webkit-selection { background: #e2eae2; } |
7. Template Rounded
Rounded adalah sebuah teknik yang dapat Anda gunakan untuk membuat lekukan yang lembut (smooth) pada setiap sudut. Jika Anda sudah familiar menggunakan Rounded pada CSS3, mungkin Anda tidak akan asing lagi menggunakan kode berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .rounded_corner { -webkit-border-radius: 4px 3px 6px 10px; -moz-border-radius: 4px 3px 6px 10px; -o-border-radius: 4px 3px 6px 10px; border-radius: 4px 3px 6px 10px;}/* Syntax alternatif untuk penerapan per-baris */.rounded_corner { -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 10px;} |
Jika Anda ingin menerapkan Rounded Corners secara spesifik anda dapat menggunakan hashtag (#) atau pembuatan class baru pada CSS.
8. Template Blockquote
Memang pada kenyataannya, tidak semua website / blog membutuhkan Blockquote, tapi jika Anda ingin atau membutuhkan template untuk mempercantik style blockquote tersebut dengan CSS, Anda dapat menggunakan script berikut ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: .5em 10px; quotes: "\201C""\201D""\2018""\2019";}blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: .1em; margin-right: .25em; vertical-align: -.4em;}blockquote p { display: inline;} |
9. Membuat Style Fancy Pull-Quotes dengan CSS3
Pull-Quotes adalah sesuatu yang berbeda dari blockquotes dimana pull-quotes akan ditampilkan di tengah-tengah tulisan blog atau berita pada halaman Anda. Script ini saya ambil dari website Miekd, berikut ini adalah script CSS tersebut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| .has-pullquote:before { /* Reset metrics. */ padding: 0; border: none; /* Content */ content: attr(data-pullquote); /* Pull out to the right, modular scale based margins. */ float: right; width: 320px; margin: 12px -140px 24px 36px; /* Baseline correction */ position: relative; top: 5px; /* Typography (30px line-height equals 25% incremental leading) */ font-size: 23px; line-height: 30px;}.pullquote-adelle:before { font-family: "adelle-1", "adelle-2"; font-weight: 100; top: 10px !important;}.pullquote-helvetica:before { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: bold; top: 7px !important;}.pullquote-facit:before { font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif; font-weight: bold; top: 7px !important;} |
Jika Anda ingin melihat contohnya, silahkan kunjungi Miekd Website.
10. Membuat Template Gradients dengan CSS3
Membuat Gradien pada CSS3 adalah sebuah fitur baru yang menakjubkan, sehingga kita tidak membutuhkan lagi gambar untuk membuat gradien pada halaman website. Berikut ini adalah script untuk membuat gradient pada CSS3 :
1
2
3
4
5
6
7
8
9
| #colorbox { background: #629721; background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721)); background-image: -webkit-linear-gradient(top, #83b842, #629721); background-image: -moz-linear-gradient(top, #83b842, #629721); background-image: -ms-linear-gradient(top, #83b842, #629721); background-image: -o-linear-gradient(top, #83b842, #629721); background-image: linear-gradient(top, #83b842, #629721);} |
11. Template @Font-Face
Berikut ini adalah salah satu teknik yang dapat kita gunakan pada CSS3 yang menggunakan @font-face untuk membuat kostum font sesuai dengan keinginan Anda dengan menggunakan file TTF/OTF/SVG/WOFF.Berikut ini contoh penulisan script nya :
1
2
3
4
5
6
7
8
9
10
11
12
| @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}body { font-family: 'MyWebFont', Arial, sans-serif;} |
12. Style pada Link / Anchor-Text
Jika Anda adalah developer website yang sudah familiar dengan penggunaan CSS pada tag <a>, tentunya Anda sudah terbiasa menggunakan :hover pada style link pada CSS. Tapi kali ini saya tuliskan untuk para web designer atau developer yang masih awam.
1
2
3
4
5
6
7
8
9
10
11
| /*Standard Style Link*/a:link { color: blue; }/*Link jika sudah dikunjungi*/a:visite;d { color: purple; }/*Link ketika pointer mouse diarahkan ke Anchor*/a:hover { color: red; }/*Style ketika link dalam keadaan Aktif*/a:active { color: yellow; } |
13. Override <H1> Untuk Menampilkan Logo
Salah satu trik yang dibutuhkan dalam penulisan kode CSS adalah menggunakan H1 untuk menampilkan logo pada website. Kenapa harus menggunakan H1, karena hal ini adalah salah satu komponen yang dianggap Search Engine memiliki prioritas penting pada serangkaian kode halaman yang kita miliki. Teknik ini akan membuat text yang berada pada tag <h1> tidak terlihat dan menampilkan gambar.Berikut ini contoh kode nya
1
2
3
4
5
6
7
| h1 { text-indent: -9999px; /*Menyembunyikan text*/ margin: 0 auto; width: 320px; height: 85px; background: transparent url("images/logo.png") no-repeat scroll;} |
14. Membuat Border Image-Polaroid
Berikut ini adalah cara membuat border atau garis tepi pada gambar yang kita gunakan pada halaman website menjadi menarik dengan style polaroid. Style ini akan membuat efek old-foto dengan frame yang cukup besar dan juga dilengkapi dengan shadow pada gambar tersebut.
1
2
3
4
5
6
7
8
9
10
| img.polaroid { background:#000; /*Warna Background Gambar (sesuai keinginan)*/ border:solid #fff; border-width:6px 6px 20px 6px; box-shadow:1px 1px 5px #333; /* Standard blur adalah 5px. Tambahkan jika ingin mempertebal */ -webkit-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; height:200px; /*Sesuaikan dengan img atau div*/ width:200px; /*Sesuaikan dengan img atau div*/} |
15. Background Fullscreen dengan CSS3
Perlu Anda perhatikan, trik dan teknik ini tidak berfungsi pada seluruh browser-browser dengan versi lama, jadi Anda dapat menggunakan script berikut secara bijak untuk membuat tampilan website Anda lebih menarik.
1
2
3
4
5
6
7
| html { background: url('images/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} |
16. Membuat Style Content Vertical Center
Salah satu trik yang biasanya sulit untuk dilakukan dalam mendesain website adalah membuat konten tampil di tengah secara vertikal. Berikut ini adalah trik yang dapat Anda gunakan untuk melakukan hal tersebut :
1
2
3
4
5
| .container { min-height: 6.5em; display: table-cell; vertical-align: middle;} |
17. Membuat Scrollbar Vertikal Secara Paksa
1
| html { height: 101% } |
18. Membuat Zebra Stripes
Salah satu teknik yang paling banyak digunakan pada halaman website untuk meningkatkan eye-catching pada list atau daftar yang panjang adalah dengan mengginakan Zebra Stipes atau biasa juga disebut dengan Cross Zebra Background.
1
2
3
4
5
6
7
8
9
| /*Penggunaan pada <tr>*/tbody tr:nth-child(odd) { background-color: #EEE;}/*Penggunaan pada <li>*/ul li:nth-child(odd) { background-color: #EEE;} |
19. Drop-Cap pada Paragraphs Menggunakan CSS
Drop-Cap adalah style pada sebuah paragraf dimana karakter awal pada paragraf tersebut akan ditampilkan lebih besar dan berbeda dari karakter berikutnya. Berikut ini adalah cara untuk membuat Drop-Cap menggunakan CSS :
1
2
3
4
5
6
7
8
| p:first-letter{ display: block; margin: 5px 0 0 5px; float: left; color: #ff3366; font-size: 5.4em; font-family: Georgia, Times New Roman, serif;} |
20. Membuat Style Segitiga pada List <li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| ul { margin: 0.75em 0; padding: 0 1em; list-style: none;}li:before { content: ""; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 0.9em; position: relative;} |
21. Menentukan Tinggi Minimum pada Cross-Browser
1
2
3
4
5
| #container { min-height: 550px; height: auto !important; height: 550px;} |
Itulah beberapa trik dan teknik yang dapat Anda lakukan dengan CSS maupun CSS3 untuk meningkatkan kualitas desain website Anda.
Post a Comment