KURANG CSS Tutorial Merancang Bilah Navigasi Menu Slick

Artikel ini adalah bagian dari kami "Seri Tutorial HTML5 / CSS3" - didedikasikan untuk membantu Anda menjadi desainer dan / atau pengembang yang lebih baik. Klik disini untuk melihat lebih banyak artikel dari seri yang sama.

Dunia desain dan pengembangan web benar-benar berkembang pesat. Kita dapat melihat ini dalam sejumlah besar hal baru yang diluncurkan di komunitas (hampir) setiap hari, baik itu Aplikasi atau Kerangka kerja baru yang membantu menjadikan pekerjaan kita sehari-hari sebagai perancang atau pengembang web lebih efektif dan efisien.

Salah satu yang menarik perhatian saya dari evolusi desain web hari ini adalah KURANG, bahasa stylesheet yang dapat diprogram yang memperluas cara kami menulis sintaks CSS dengan menggabungkan beberapa konsep pemrograman seperti Variabel, Mixins, Fungsi dan Operasi.

Ini membuka kemampuan baru dalam menulis sintaks CSS. Misalnya, dengan menerapkan Mixins dalam CSS seperti cara yang kami lakukan dalam suatu program, kami sekarang dapat menyimpan gaya dan nilai default yang dapat diterapkan di seluruh file bila memungkinkan. Dengan ini, kita tidak perlu menulis gaya yang sama berulang-ulang.

Nah, mari kita lakukan beberapa latihan dengan KURANG untuk mendapatkan wawasan yang lebih baik tentang apa yang ditawarkan.

Merancang dengan KURANG

Dalam tutorial ini kami akan mencoba merancang bilah navigasi menu yang apik yang terinspirasi dari yang ada di Apple.com. Karena hanya 'terinspirasi' oleh produk asli, perhatikan bahwa produk tutorial akhir kami tidak akan sama persis dengan yang asli.

Untuk memulai, Anda mungkin ingin membaca sumber daya bermanfaat berikut terlebih dahulu. Mereka menjelaskan beberapa implementasi dasar bahasa KURANG, yang akan membantu Anda sebelum Anda menggali lebih dalam tutorial ini.

• KURANG LEBIH BANYAK: Jadikan Pengodean CSS Anda Lebih Mudah dengan KURANG
• Tulis CSS Lebih Baik dengan Kurang
• Pengantar KURANG, Dan Perbandingan Untuk Sass

Persiapan

Pertama-tama, ada beberapa hal penting yang kita butuhkan untuk proyek kecil ini, yaitu:

1. Editor Teks KURANG

Kami akan memerlukan editor teks untuk memberi kode pada menu navigasi. Namun, sebagian besar editor teks yang tersedia di pasaran saat ini (seperti Dreamweaver, Notepad ++, InType, Sublime Text 2) belum mendukung .kurang ekstensi file secara default, sehingga sintaks mungkin tidak disorot dengan baik.

Jadi, untuk keperluan tutorial ini, kita akan menggunakan editor teks khusus untuk KURANG bernama ChrunchApp. Kita dapat membuka dan mengedit .kurang ekstensi file dan kompilasi menjadi CSS statis menggunakan aplikasi ini. Karena ini adalah aplikasi Adobe Air, itu dapat diinstal di setiap OS desktop utama (Win, OSX dan Linux).

Untuk editor HTML, Anda dapat menggunakan editor apa pun yang sudah nyaman digunakan sekarang. Saya pribadi suka Sublime Text 2.

2. Kurang

Selanjutnya, unduh Perpustakaan JavaScript KURANG dari situs web resmi mereka, versi saat ini adalah 1.2.1. Tempatkan di dalam folder latihan Anda untuk ini.

Kemudian tautkan file ke dokumen HTML.

3. Bebas awalan

Kami juga akan menggunakan beberapa fitur CSS3 untuk mencapai beberapa efek di menu navigasi yang akan mencakup awalan vendor (-moz-, -Hai-, -webkit-) agar dapat merender dengan benar di berbagai browser. Namun, saya pribadi tidak suka menggunakan awalan karena akan mengasapi file CSS.

Untuk alasan ini, saya memutuskan untuk menggunakan awalan-bebas, perpustakaan JavaScript yang dibuat oleh Lea Verou yang akan menangani awalan vendor secara otomatis di latar belakang. Jadi kita hanya perlu menulis sintaks resmi dari W3C.

Unduh file dan tautkan ke file HTML.

Baiklah, kita semua sudah siap; sekarang mari kita mulai menyusun markup HTML.

Markup HTML

Navigasinya cukup sederhana. Ini akan memiliki lima menu yang dibungkus di dalam tag daftar tidak terurut. Buka editor HTML favorit Anda dan letakkan markup berikut:

Styling KURANG

Di bagian ini kita akan mulai menata navigasi dengan bahasa KURANG. Bagi mereka yang baru mengenal bahasa pemrograman, menulis sintaksis CSS dengan KURANG akan terasa sedikit aneh dan canggung. Tapi jangan khawatir, setelah Anda berlatih, pasti akan lebih menyenangkan daripada cara kami menulis CSS murni (menurut pengalaman saya, ini juga sedikit membuat ketagihan).

Mari kita periksa gaya navigasi dari sumber inspirasi kami.

Seperti yang dapat kita lihat pada tangkapan layar di atas, navigasi Apple.com memiliki 6 gaya umum utama berikut:

• bayangan
• berbatasan
• pembagi
• gradien
• efek melayang
• teks

Kami akan menyimpan gaya ini dan menyimpannya di dalam config.less sebagai gaya default Konfigurasi; beberapa desainer mungkin juga menamainya lib.css kepanjangan dari itu Perpustakaan. Tautkan file ini ke dokumen kami.

Pastikan Anda meletakkannya di depan perpustakaan KURANG JavaScript.

Tentukan Basis Warna dengan Variabel

Pada langkah ini kita akan menentukan basis warna navigasi menggunakan Variabel. Variabel dalam KURANG dinyatakan menggunakan @ simbol.

@tema: # 555;

Ini @tema variabel adalah warna standar kami; kami akan menggunakannya dengan segala cara untuk menyempurnakan skema warna dan agar komposisi warna diharapkan menjadi lebih konsisten.

Tetapkan Default Shadow Style dengan Mixins

Salah satu fitur yang saya sukai dari KURANG adalah Mixins. Ini adalah konsep pemrograman yang menyimpan beberapa gaya yang telah ditentukan sebelumnya yang dalam KURANG dapat diwarisi di kelas atau id nanti di stylesheet.

.shadow box-shadow: 0 1px 2px 0 @theme; 

Dalam kode di atas saya tidak menyertakan versi awalan dari bayangan kotak properti, karena pustaka bebas awalan akan menanganinya secara otomatis. Juga, warna bayangan diwariskan dari warna variabel tema.

Tentukan Gaya Perbatasan dengan Campuran Parametrik

Bilah navigasi akan membutuhkan warna tepi yang berbeda dengan sudut yang agak membulat. Kita dapat mengkompilasi gaya perbatasan menggunakan Parametrik Mixins. Ini sebenarnya memiliki fungsi yang sama dengan Mixins, satu-satunya perbedaan adalah ia juga memiliki parameter yang dapat diubah sehingga nilainya lebih disesuaikan.

.border (@radius: 3px) border-radius: @radius; perbatasan: 1px solid @tema - # 050505; 

Dalam kode di atas, kami mengatur batas default @radius untuk 3px dan seperti yang kami sebutkan sebelumnya, nilai ini dapat diubah nanti.

Tentukan Gradient, Divider, dan Hover Style dengan Operation

Operasi hanyalah bahasa pemrograman di mana kita dapat menerapkan rumus matematika seperti Penambahan, Divisi, Pengurangan, dan Penggandaan untuk mendapatkan hasil yang diinginkan. Mari kita lihat kode berikut:

.divider border-style: solid; lebar-batas: 0 1px 0 1px; warna batas: transparan @ tema - # 111 transparan @ tema + # 333; 

Dalam kode di atas kita kurangi @tema variabel oleh # 111, dengan cara ini output warna batas kiri akan sedikit lebih gelap. Sedangkan warna border kanan berasal dari penambahan @tema variabel dengan warna hex # 333, output akan lebih ringan.

Tingkat Skema Warna

Nah, bagi sebagian dari Anda yang mungkin bingung dengan rumus, mari kita periksa diagram skema warna di bawah ini untuk mendapatkan pemahaman yang lebih baik:

Nada gelap maksimum adalah # 000 (hitam), sedangkan nada cahaya maksimum adalah #fff (putih) dan basis warna kami saat ini adalah # 555. Jadi, jika kita ingin basis warna menjadi 3 tingkat yang lebih gelap dari saat ini, kita bisa menguranginya dengan # 333. Cara yang sama juga bisa diterapkan untuk meringankan warna.

Selanjutnya, kita akan mengoperasikan warna gradien.

.gradient background: linear-gradient (atas, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect latar: linear-gradient (atas, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Tentukan Gaya Teks dengan Guard Mixins

Kami berencana untuk memiliki 2 warna pada bilah navigasi, warna gelap dan satu cahaya. Kami menerapkan dua pernyataan bersyarat untuk teks menggunakan Guard Mixins.

Pertama, ketika teks diberi warna yang memiliki kecerahan sama dengan atau lebih besar dari 50%, teks bayangan teks harus berubah menjadi gelap, dalam hal ini warna # 000000.

.textcolor (@txtcolor) when (lightness (@txtcolor)> = 50%) color: @txtcolor; text-shadow: 1px 1px 0px # 000000; 

Kemudian, ketika teks diberi warna yang terang kurang dari 50% itu bayangan teks akan berubah putih.

.textcolor (@txtcolor) when (lightness (@txtcolor) 
Mengimpor KURANG
 
Sekarang mari kita buat yang lain .kurang nama file tanpa style dan impor config.less ke dalamnya:
 
@import "config.less";
 
Tambahkan Keluarga Huruf
 
Agar bilah navigasi terlihat lebih menarik, kami akan menyertakan keluarga font baru yang menggunakan @ font-face aturan. Heran, @ font-face Aturan ini sebenarnya sudah didukung sejak IE6!
 
Kali ini kita akan menggunakan font Asap. Unduh dari koleksi wajah font Squirrel. Kemudian masukkan gaya berikut ke baru-baru ini kami buat tanpa style mengajukan.
 
@ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: format url ('font / Asap-Regular-webfont.eot? #iefix') ('embedded-opentype'), format url ('font / Asap-Regular-webfont.woff') ('woff'), url ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); font-weight: normal; font-style: normal;  
 
Menata Tubuh dengan Fungsi Warna
 
Sekarang, kami akan memberikan warna latar belakang untuk tubuh (yang harus lebih ringan dari basis warna) serta menentukan font family dan ukuran font. Kita dapat mendekati efek menggunakan fungsi Warna:
 
Kode berikut akan meringankan latar belakang sebesar 30%.
 
body background: lighten (@theme, 30%); font-family: AsapRegular, sans-serif; ukuran font: 11pt; 
 
 
 
Styling Navigasi dengan Nested Rule
 
Dalam KURANG kita dapat bersarang gaya langsung di bawah induknya. Mari kita lihat kode di bawah ini.
 
Itu nav tag yang berisi semua elemen yang diperlukan untuk navigasi akan diberi gaya berikut.
 
nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; .berbatasan; .bayangan; 
 
Perhatikan bahwa, alih-alih memberikan banyak aturan CSS lagi, saya hanya menyisipkan .berbatasan untuk memberikan gaya perbatasan dan .bayangan untuk menambahkan bayangan. Dalam kasus nyata, kumpulan kelas ini dapat digunakan kembali di elemen lain juga, di mana pun dibutuhkan.
 
 
 
Selanjutnya, kami memberikan gaya untuk ul di dalam nav tidak memiliki padding dan margin. Belum lama ini kita akan mendekati gaya dengan menulis sesuatu seperti ini:
 
nav ... nav ul ...
 
Tidak ada yang salah dengan pendekatan ini, pada kenyataannya, saya terbiasa melakukannya setiap waktu dan saya cukup nyaman dengan itu. Namun, metode ini, banyak perancang CSS mengatakan, verbosed dan dalam beberapa kasus, tidak mudah dikelola.
 
Sekarang, kita bisa melakukan sesuatu seperti ini:
 
nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; .berbatasan; .bayangan; ul padding: 0; margin: 0; 
 
 
 
Dan kemudian menu akan ditampilkan berturut-turut menggunakan display: inline milik.
 
nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; .berbatasan; .bayangan; ul padding: 0; margin: 0; li display: inline; 
 
 
 
Dalam sintaksis di bawah ini kami menentukan gaya tag jangkar menu dan menambahkan gaya standar kami, yaitu: .warna teks, .pembagi, .gradien.
 
nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; .berbatasan; .bayangan; ul padding: 0; margin: 0; li display: inline; a text-decoration: none; display: inline-block; mengapung: kiri; lebar: 156px; tinggi: 45px; perataan teks: tengah; garis-tinggi: 300%; .textcolor (# f2f2f2); // Anda dapat mengubah baris ini .divider; .gradient; 
 
Dalam kode di atas kami menerapkan warna hex # f2f2f2 di mana cahaya dianggap di atas 50%, jadi kami berharap untuk melihat bayangan menjadi gelap (otomatis). Sisa kode yang saya yakin cukup jelas.
 
 
 
Namun, jika kita melihat hasil saat ini di atas, masing-masing menu memiliki pembagi sehingga mengakibatkan bagian terakhir meluap ke bawah. Jadi kita perlu menghilangkan gaya perbatasan untuk anak pertama dan terakhir dari bilah navigasi.
 
nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; .berbatasan; .bayangan; ul padding: 0; margin: 0; li display: inline; a text-decoration: none; display: inline-block; mengapung: kiri; lebar: 156px; tinggi: 45px; perataan teks: tengah; garis-tinggi: 300%; .textcolor (# f2f2f2); // Anda dapat mengubah baris ini .divider; .gradient;  li: first-child a border-left: none;  li: last-child a border-right: none; 
 
 
 
Hover State
 
Untuk langkah terakhir kita akan menambahkan efek hover. Dalam KURANG kita bisa menambahkan elemen semu seperti : melayang menggunakan & simbol.
 
nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; .berbatasan; .bayangan; ul padding: 0; margin: 0; li display: inline; a text-decoration: none; display: inline-block; mengapung: kiri; lebar: 156px; tinggi: 45px; perataan teks: tengah; garis-tinggi: 300%; .textcolor (# f2f2f2); // Anda dapat mengubah baris ini .divider; .gradient; &: hover .hovereffect;  li: first-child a border-left: none;  li: last-child a border-right: none; 
 
 
 
Ubah tema warna
 
Ini bagian keren dari KURANG. Jika kita ingin mengubah tema warna secara keseluruhan, kita dapat melakukannya dalam perubahan garis yang lebih sedikit daripada yang kita butuhkan dalam CSS murni.
 
Dalam hal ini, saya akan mengubah warna navigasi menjadi sedikit lebih ringan. Cukup ganti dua baris berikut.
 
@tema: #ccc; // Ubah ini
 
.textcolor (# 555); //Dan ini
 
Dan inilah hasilnya.
 
 
 
Kompilasi KURANG ke dalam CSS
 
Ketika kita masih menggunakan JavaScript KURANG, itu akan mengambil .kurang file dan menerjemahkannya ke dalam CSS statis sehingga browser standar dapat menafsirkannya. Ini adalah pekerjaan ganda di sisi klien, belum lagi redundan dan pemborosan bandwidth. Poin utama KURANG adalah dalam alur kerja untuk menyederhanakan praktik kami dalam menyusun CSS statis agar lebih dinamis dan dapat diprogram.
 
Jadi, ketika kita akan meletakkan bilah navigasi langsung di situs web, penting untuk mengkompilasi file KURANG ke dalam CSS statis.
 
Klik tautan Hancurkan! tombol besar.
 
 
 
Simpan file .less di file latihan kami, tautkan ke dokumen HTML dan putuskan tautan .kurang & kurang file dari dokumen.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; lebar-batas: 0 1px 0 1px; warna batas: transparan # 444444 transparan # 888888; . gradien latar belakang: gradien linier (atas, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect latar belakang: linear-gradient (atas, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: format url ('font / Asap-Regular-webfont.eot? #iefix') ('embedded-opentype'), format url ('font / Asap-Regular-webfont.woff') ('woff'), url ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); font-weight: normal; font-style: normal;  body background: # a2a2a2; font-family: AsapRegular, sans-serif; ukuran font: 11pt;  nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; batas-jari-jari: 3px; perbatasan: 1px solid # 505050; bayangan kotak: 0 1px 2px 0 # 555555;  nav ul padding: 0; margin: 0;  nav ul li display: inline;  nav ul li a text-decoration: none; display: inline-block; mengapung: kiri; lebar: 156px; tinggi: 45px; perataan teks: tengah; garis-tinggi: 300%; warna: # f2f2f2; text-shadow: 1px 1px 0px # 000000; gaya perbatasan: solid; lebar-batas: 0 1px 0 1px; warna batas: transparan # 444444 transparan # 888888; latar belakang: gradien linier (atas, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul a: hover background: linear-gradient (atas, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: first-child a border-left: none;  nav ul li: last-child a border-right: none;  
 
Mari kita lihat hasilnya sekali lagi.
 
 
 
Dan kita selesai, jangan ragu untuk bereksperimen dengannya.
 
Kesimpulan
 
Kami telah belajar banyak hal tentang bahasa KURANG hari ini, seperti:
 

• Variabel.
• Mixin
• Campuran Parametrik
• Operasi
• Mixin yang dijaga
• Dan Aturan Bersarang

Meskipun ada banyak hal yang dapat dibahas lebih lanjut dan banyak kemungkinan untuk ditampilkan dan dijelaskan, kami harap Anda menikmati tutorial dasar ini.

• Demo
• Sumber unduhan