Seperti yang kita ketahui bersama bahwa CSS (
Cascading Style Script)
adalah sebuah bahasa untuk mendukung bahasa HTML. Banyaknya unsur yang
terkandung didalamnya membuat kita harus rajin menemukan sesuatu yang
kreatif dan inovatif didalamnya, apalagi untuk permasalahan desain
website.
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
|
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}
@media only screen and (min-width : 321px) {
}
@media only screen and (max-width : 320px) {
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
@media only screen and (min-width : 1224px) {
}
@media only screen and (min-width : 1824px) {
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
}
|
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
|
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, 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;
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;
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
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;
}
.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);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
|
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;
}
.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 {
padding: 0;
border: none;
content: attr(data-pullquote);
float: right;
width: 320px;
margin: 12px -140px 24px 36px;
position: relative;
top: 5px;
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');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#svgFontName') format('svg');
}
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
|
a:link { color: blue; }
a:visite;d { color: purple; }
a:hover { color: red; }
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;
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;
border:solid #fff;
border-width:6px 6px 20px 6px;
box-shadow:1px 1px 5px #333;
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
height:200px;
width:200px;
}
|
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
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
|
tbody tr:nth-child(odd) {
background-color: #EEE;
}
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.
