S
eperti yang kita ketahui bersama, CSS (Cascading Style Script) merupakan bahasa yang mendukung bahasa HTML. Ada begitu banyak elemen di dalamnya sehingga kita harus berusaha keras untuk menemukan sesuatu yang kreatif dan inovatif di dalamnya, terutama untuk masalah desain website.
Kemampuan CSS yang telah terbukti untuk mempercantik tampilan situs web telah mengarahkan pengembang front-end atau perancang web untuk mencoba mempelajari dan memperdalam CSS dalam menggunakan properti CSS dan membuat situs web lebih maksimal di seluruh browser.Jadi saya mencoba berbagi rahasia dan favorit CSS2 dan CSS3 untuk membantu desainer web profesional atau orang yang baru belajar. Karena saya yakin CSS Snippet di bawah ini bisa membantu sobat menguasai dan memahami tips dan trik yang terdapat di CSS2 dan CSS3.Kumpulan Cuplikan CSS berasal dari berbagai sumber, dan menurut saya penting sebagai pendukung untuk mengetahui sumber-sumber ini saat membuat kode CSS yang efisien untuk kebutuhan Anda.
1. Setel ulang CSS
Teknik/trik kode CSS ini, dimodifikasi oleh Jake Rocheleau, dapat digunakan untuk membersihkan pemformatan properti CSS yang diperbarui, mendukung gambar responsif atau gambar responsif, dan menyesuaikan semua elemen dengan kotak batas untuk mengoptimalkan margin dan padding.
Berikut contoh kodenya:
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. Penggunaan kueri media secara umum
Berikut adalah contoh kode untuk penggunaan kueri media secara umum atau global, yang merupakan kueri media standar untuk lebar setiap perangkat (PC, tablet, seluler), untuk membuat gaya responsif. Anda bisa mendapatkan kode ini di CSS-Tricks untuk trik lainnya.
Skrip kueri media standar untuk perangkat responsif ini adalah sebagai berikut:
/* Smartphones (portrait dan landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
--prebreak--
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
--prebreak--
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
--prebreak--
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
--prebreak--
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
--prebreak--
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
--prebreak--
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
--prebreak--
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
--prebreak--
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
}
Baca Juga Responsive Website Sangat Penting dan Pilihan Terbaik untuk Strategi SEO
3. Font Modern Menggunakan CSS
Salah satu bagian tersulit dalam mendesain situs web adalah memutuskan jenis huruf atau font mana yang terbaik untuk digunakan dalam desain yang akan Anda buat. Nah, jika Anda membutuhkan template font modern, Anda dapat menggunakan skrip berikut sebagai standar font modern Anda:
/* 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;
Jika Anda membutuhkan lebih banyak contoh font, kunjungi Tumpukan Font CSS.
4. Floating Cleaner (Clearfix)
Apa fungsi dari Clearfix? Jika sobat pemula, clearfix ini digunakan untuk membersihkan properti float di CSS, jika kita tidak menerapkan tag selanjutnya, maka menyesuaikan elemen yang kita berikan float.
Teknik clearfix banyak digunakan, bahkan framework CSS umum pun menggunakan teknik ini. Untuk lebih jelasnya, berikut adalah contoh kode untuk membuat clearfix di CSS:
.clearfix:before,
.container:after {
content: "";
display: table;
}
--prebreak--
.clearfix:after {
clear: both;
}
--prebreak--
--prebreak--
/* IE 6/7 */
.clearfix {
zoom: 1;
}
5. Teknologi transparan yang mendukung semua browser
Jika Anda ingin membuat CSS transparan dan didukung oleh semua browser (cross-browser), Anda dapat menggunakan skrip berikut:
.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. Ubah pemilihan teks dengan CSS
Beberapa browser terbaru memungkinkan kami untuk menentukan warna sorotan khusus pada halaman web kami menggunakan CSS. Berikut ini adalah script yang dapat digunakan untuk memodifikasi Text-Selection pada Webkit dan browser berbasis Mozilla seperti Chrome dan Firefox:
::selection {
background: #e2eae2;
}
::-moz-selection {
background: #e2eae2;
}
::-webkit-selection {
background: #e2eae2;
}
7. Template Melingkar
Pembulatan sudut adalah teknik yang dapat digunakan untuk membuat lekukan halus di sudut mana pun. Jika Anda terbiasa menggunakan Rounded di CSS3, Anda mungkin terbiasa menggunakan kode berikut:
.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;
}
Jika Anda ingin menerapkan sudut membulat secara khusus, Anda dapat menggunakan tanda pound (#) atau membuat kelas baru di CSS.
8. Blok Template Kutipan
Sebenarnya tidak semua website/blog membutuhkan Blockquote, namun jika anda menginginkan atau membutuhkan template untuk mempercantik style blockquote dengan CSS, anda bisa menggunakan script berikut:
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. Rancang kutipan yang indah dengan CSS3
Pull-Quotes berbeda dengan blockquotes, di mana pull-quote akan muncul di tengah posting blog atau berita di halaman Anda. Saya mendapatkan skrip ini dari situs web Miekd, berikut adalah skrip CSS:
.has-pullquote:before {
/* Reset metrics. */
padding: 0;
border: none;
--prebreak--
/* Content */
content: attr(data-pullquote);
--prebreak--
/* Pull out to the right, modular scale based margins. */
float: right;
width: 320px;
margin: 12px -140px 24px 36px;
--prebreak--
/* Baseline correction */
position: relative;
top: 5px;
--prebreak--
/* Typography (30px line-height equals 25% incremental leading) */
font-size: 23px;
line-height: 30px;
}
--prebreak--
.pullquote-adelle:before {
font-family: "adelle-1", "adelle-2";
font-weight: 100;
top: 10px !important;
}
--prebreak--
.pullquote-helvetica:before {
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}
--prebreak--
.pullquote-facit:before {
font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}
Jika Anda ingin melihat contohnya, kunjungi situs web Miekd.
10. Buat Template Gradien dengan CSS3
Membuat gradien di CSS3 adalah fitur baru yang mengagumkan, jadi kita tidak lagi membutuhkan gambar untuk membuat gradien di halaman web. Berikut script untuk membuat gradien di CSS3:
#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. @Font-Face Template
Berikut adalah teknik yang dapat kita gunakan di CSS3 untuk membuat font kustom favorit Anda dari file TTF/OTF/SVG/WOFF menggunakan @font-face.
Berikut adalah contoh penulisan skrip:
@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 */
}
--prebreak--
body {
font-family: 'MyWebFont', Arial, sans-serif;
}
12. Gaya Teks Tautan / Jangkar
Jika Anda seorang pengembang web yang terbiasa menggunakan CSS di 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.
/*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; }
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:
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.
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.
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 :
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
17. Membuat Scrollbar Vertikal Secara Paksa
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.
/*Penggunaan pada <tr>*/
tbody tr:nth-child(odd) {
background-color: #EEE;
}
--prebreak--
/*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 :
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>
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
#container {
min-height: 550px;
height: auto !important;
height: 550px;
}
Itulah beberapa teknik dari kode CSS atau CSS yang bisa anda laukan untuk menungkatkan kualitas desain website atau blog anda.Bila anda tertarik dengan kode yang saya berikan di website saya, silahkan pencet tombol subscribe atau follow situs ini. Salam
Akhir Kata
Sekian pembahasan tentang 20+ Kode Snippet CSS Untuk Desain Blog dan Website Yang Berkualitas. Semoga bermanfaat. Selamat berjumpa kembali di artikel berikutnya. Terimakasih telah berkunjung.
Keyword
Website, Blog, SEO, CSS, Snippet, Kode, CSS3
.png)
No comments:
Tulis comments