agung wisudhatama July 01, 2023 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

SNIPPET seperti kita tahu menulis dalam bahasa pemrograman tentu berbeda dengan bahasa manusia. Ada banyak code dan potongan tag yang harus ditulis satu per satu. Proses ini tentu bisa memperlambat pekerjaan kita. Lalu, kita harus bagaimana? Code Snippet adalah solusinya. Ia merupakan kumpulan teks yang bisa kalian selipkan di programmu. Kode pendek itu merupakan “wakil” dari sekumpulan fungsi programming. Mengutip Tech Terms, dengan kode ini, kalian tidak perlu lagi menuliskan fungsi itu secara penuh.

Dan seperti yang kita ketahui bersama bahwa CSS (Cascading Style Sheet) 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 mempercantik desain website. Kemampuan CSS yang sudah terbukti powerful untuk memperindah tampilan website, membuat para front-end developers / web desainer mencoba untuk mempelajari dan memperdalam CSS dari segi penggunaan properti-properti pada CSS guna membuat website lebih maksimal dalam cross-browser artinya dalam beberapa browser misal Chrome, Mozilla Firefox, Safari, Edge serta Opera.

10 Koleksi CSS Snippet untuk Desain Web Terbaik

1. CSS Reset

Kode CSS yang dimodifikasi oleh Jake Rocheleau ini dapat digunakan untuk membersihkan format properti CSS yang telah diperbarui dengan mendukung responsivitas gambar yang menjadi fleksibel serta menyesuaikan semua element menggunakan border-box, yang membuat margin dan padding berfungsi maksimal.
Contoh :

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;
}
--prebreak--
html { 
    height: 101%; 
}
--prebreak--
body { 
    font-size: 62.5%; 
    line-height: 1; 
    font-family: Arial, Tahoma, sans-serif; 
}
--prebreak--
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block; 
}
--prebreak--
ol, ul { 
    list-style: none; 
}
--prebreak--
blockquote, q { 
    quotes: none; 
}
--prebreak--
blockquote:before, blockquote:after, q:before, q:after { 
    content: ''; 
    content: none; 
}
--prebreak--
strong { 
    font-weight: bold; 
} 
--prebreak--
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}
--prebreak--
img { 
    border: 0; 
    max-width: 100%; 
}
--prebreak--
p { 
    font-size: 1.2em; 
    line-height: 1.0em; 
    color: #333; 
}
--prebreak--

2. Font Modern CSS

Salah satu hal penting dari membangun sebuah website adalah penggunaan Font. Karena dengan font yang tepat, maka artikel yang ada di website dapat terbaca dengan sempurna. Nah ini dia keunggulan CSS dengan beragam font modern dan elegan dan siap menghiasi gaya font yang ada di website / blog kalian.
Ini font CSS-nya :

/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
--prebreak--
--prebreak--
/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
--prebreak--
--prebreak--
/*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;
--prebreak--
--prebreak--
/*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;
--prebreak--
--prebreak--
/*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;
--prebreak--
--prebreak--
/*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;
--prebreak--
--prebreak--
/*The heavier "Impact" sans serif */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
--prebreak--
--prebreak--
/*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;

Untuk font lainnya, kalian bisa mengunjungi si pemilik Blog-nya -- Google, red -- Google Font

3. Teknik Transparansi Cross-Browser

Teknik ini multiguna pada perangkat browser manapun. Sehingga mempermudah dalam penulisan tag-nya. Seperti ini contohnya :

.transparent {
    filter: alpha(opacity=50); 
    -ms-opacity: 0,5;          /* transparansi pada browser Edge */
    -webkit-opacity: 0,5;      /* transparansi pada browser Chrome */
    -khtml-opacity: 0.5;       /* transparansi pada browser Safari   */
    -moz-opacity: 0.5;         /* transparansi pada browser Mozilla    */
    -o-opacity: 0.5;           /* transparansi pada browser Opera        */
    opacity: 0.5;           
}

4. Modifikasi Text Selection

Penggunaan teks seleksi pada web memudahkan kita memberikan warna berbeda dari background ketika kita akan menyeleksi teks, misal copy paste. Dalam pengaturan teks seleksi kita menggunakan selection : background. Dan pilihan warna tergantung pada kalian mau memilih warna apa. Semisal ini :

::selection { 
    background: #ff0000; /* teks seleksi warna merah */
}
::-moz-selection { 
    background: #ffff00; /* teks seleksi warna kuning */
}
::-webkit-selection { 
    background: #00ff00; /* teks seleksi warna hijau */
}

Lihat kode warna selengkapnya disini Kode Warna HTML

5. Template Rounded

Rounded dalam bahasa Indonesia adalah lengkungan. Jadi istilah Rounded dalam dunia pemrograman CSS adalah membuat lengkungan secara halus / smooth pada tiap-tiap sudut sehingga tidak memunculkan sudut lancip pada umumnya. Bagi yang sering utak-atik template dengan CSS pasti sudah familiar dengan kode-kode berikut ini :

.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;
}
--prebreak--
/* 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;
}

6. Template Blockquote

Pada dasarnya penggunaan Blockquote dalam sebuah website tidaklah sebuah keharusan. Tapi bila ingin mempercantik quote atau tulisan penting pada sebuah artikel, tidak ada salahnya memasang fitur ini dalam artikelnya. Ini dia kodenya :

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;
}

7. Template Gradient

Gradient atau pemudaran warna merupakan tampilan warna diluar warna solid. Dengan fitur gradient, warna pada template atau background blog kita menjadi semakin menarik karena menjadi unik. Kita bisa menyisipkan kode pemrograman seperti berikut ini :

#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);
}

8. Style CSS pada Anchor Text

Penggunaan anchor text pada struktur artikel di blog menggunakan sebuah tag semisal :hover sekarang saatnya kita berikan kode standarnya. Seperti dibawah ini :

/*Standard Style Link*/
a:link { color: blue; }
--prebreak--
/*Link jika sudah dikunjungi*/
a:visite;d { color: purple; }
--prebreak--
/*Link ketika pointer mouse diarahkan ke Anchor*/
a:hover { color: red; }
--prebreak--
/*Style ketika link dalam keadaan Aktif*/
a:active { color: yellow; }

9. Style Dropcap Awal Paragraph

Pengertian umum Dropcap adalah huruf awal dari sebuah paragraph berbeda dari gaya font yang ada dalam sebuah paragraph tersebut. Bentuk dropcap dapat bermacam-macam gaya sesuai keahlian sang pembuat CSS Dropcap. Kita tentukan gaya dropcap seperti ini :

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;
}

10. Background Fullscreen dengan CSS3

Dengan fitur ini, halaman website dapat menyesuaikan dengan cross browser. Sehingga tampilan akan menjadi maksimal sehalaman penuh atau fullscreen. Dengan CSS berikut ini, maka hal itu tidaklah mustahil. Mari kita perlihatkan :

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;
}

Itulah beberapa trik Snippet untuk mempercantik tampilan website maupun blog kalian. Bila kalian ingin mempraktekkannya silakan Back Up dulu template-nya. Terima kasih teman-teman sudah berkunjung dan membaca artikel disini. Semoga bermanfaat dan berguna. Terima kasih. Salam Blogger.

Bagikan ke teman-teman kamu