Advertisement
  1. Web Design
  2. Complete Websites

Bangun Portofolio Halaman Tunggal dengan Sass dan Compass yang Responsif

by
Read Time:24 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Ada banyak hal yang masuk ke dalam pembuatan situs web akhir-akhir ini. Kami sekarang membangun situs web menggunakan HTML5, preprocessors CSS, API, tipografi khusus dan lainnya. Tantangan desain kita meliputi arsitektur responsif, independensi resolusi dan dukungan interaksi beberapa perangkat. Pada artikel ini, kami akan membangun portofolio satu halaman yang mencakup aspek dari semua teknik ini.


Overview

Ikhtisar

Mari kita lihat dulu apa yang akan kita ciptakan:

  1. Responsive design
  2. Markup HTML5
  3. CSS menggunakan SASS dan preprocessor Compass
  4. Typography menggunakan Google's web fonts service
  5. jQuery mengambil data dari Dribbble's API
  6. Cross-browser, responsif, horisontal-scrolling carousel yang mendukung interaksi sentuhan (tanpa menggunakan javascript)
  7. Icon font menggunakan iconmoon.io font-generator yang didapatkan secara gratis

Tahap 1: Menciptakan Project Root

Pertama, kita akan mulai dengan membuat folder dan default project's root kita index.html file.



Tahap 2: Pengantar Markup

Mari kita membuat HTML dasar dan jalankan. Gunakan yang berikut ini:

Jika Anda tidak yakin, inilah yang sedang kita lakukan:

  • Viewport meta tag untuk desain yang responsif
  • html5 shiv dari Google's CDN; memungkinkan browsers lama (IE) untuk mendukung element baru HTML5

Tahap 3: Pengaturan CSS dengan Compass

Untuk membangun CSS kita, kita akan menggunakan Compass. Jika Anda tidak mengenal Compass, Anda mungkin menemukan  Webdesigntuts+' artikel pada Compass  yang bermanfaat dan informatif. Dalam tutorial ini, saya akan menggunakan beberapa perintah terminal sederhana untuk mendapatkan Compass dan berjalan. Jika itu membuat Anda tidak nyaman, Anda bisa melihat ke dalam menggunakan GUI  compass.app untuk memulai proyek SCSS Anda.

Pemasangan Compass

Untuk mulai menggunakan compass, Anda bisa mengikuti  petunjuk yang ada pada website Compass. Atau, saya akan menunjukkan langkah sederhana sekarang juga.

Compass mengharuskan Anda  memasang Ruby  (jika Anda menggunakan Mac, sudah terpasang di Lion). Setelah memasang Ruby, jalankan perintah ini dari terminal:

Pengaturan Compass dengan Projek Baru Anda

Sekarang kita ingin mengatur compass untuk proyek baru kita. Untuk melakukan ini, kita akan menjalankan perintah sederhana dari terminal. Arahkan ke direktori halaman web Anda (direktori saya disebut 'mySite' dan ada di folder 'Sites' saya, jadi saya mengetik  cd ~/Sites/mySite/ ). Sekarang jalankan perintah ini:


Compass baru saja membuat proyek baru. ni mungkin menghasilkan banyak info di terminal. Jangan khawatir tentang hal itu sekarang.

Catatan: Anda dapat mengkonfigurasi Compass dan struktur direktorinya dengan mengirimkan argumen tambahan seperti:  compass create --sass-dir "css" atau mengedit fail confib.rb . Kita akan menggunakan struktur direktori default Compass' untuk menyederhanakan.

SASS Baru Anda dan Direktori CSS

Sekarang Anda punya beberapa fail / folder baru di direktori project's root Anda yang dibuat oleh Compass.  Ini termasuk:

  • folder "sass" dengan fail .scss
  • folder "stylesheets" dengan fail .css reguler
  • fail "config.rb" yang menahan informasi pengaturan Compass

Compass bekerja dengan mengambil fail  .scss  yang diformat SASS di direktori "sass", memprosesnya, dan mengeluarkannya seperti fail  .css  normal yang dapat dibaca oleh browser. Dapat dibaca di direktori "stylesheet".

Kita tidak akan menggunakan fail default yang dibuat oleh compass, jadi lanjutkan dan hapus semua fail di direktori "sass" dan "stylesheet".


Tahap 4: Menciptakan SASS Pertama Kita dan Fail CSS

Sekarang untuk mendapatkan Compass dan menjalankannya, mari kita membuat fail .scss pertama kita.

Di direktori "sass", buat fail bernama  style.scss. Pastikan terdapat ekstensi ".scss", jika tidak compass tidak akan tahu untuk mengkompilasinya. Sekarang ketikkan yang berikut di fail itu:

Inilah yang sedang kita lakukan terhadap fail SASS ini:

  • @import "compass/reset"  adalah mengimpor modul Compass yang akan mencakup beberapa CSS untuk mengatur ulang default browser (ini seperti menyertakan reset CSS untuk margin default, ukuran heading, padding, dll.)
  • @import "compass/css3" is importing a Compass module that will include mixins (which we'll cover later) for writing cross-browser CSS3 rules with vendor prefixes
  • body adalah rule CSS khusus kitayang pertama.

Kompilasi Fail SASS Anda

Untuk mengkompilasi kode SASS Anda, masuk ke terminal dan arahkan ke tempat manapun situs Anda berada (sekali lagi, milik saya ada di folder "Sites / mySite" saya, jadi saya menjalankan  cd ~/Sites/mySite/). Kemudian jalankan perintah ini:

Ini akan mengkompilasi fail SCSS Anda dengan nama  style.scss ke format CSS normal yang mudah dibaca browser, beri nama  style.css, dan salin ke direktori "stylesheet". Anda bisa melihat di folder "stylesheet" dan buka fail "style.css" yang baru dikompilasi. file Anda akan melihat sekumpulan setingan CSS dan di akhir fail Anda akan melihat  body {color: #333} yang kita tulis. Pekerjaan yang baik! Anda punya Compass dan berjalan sekarang!

Catatan: Kompilasi Otomatis

compass compile hanya mengkompilasi fail .scss Anda satu kali Dengan harus mengetik  compass compile di terminal setiap kali Anda menyimpan fail akan merepotkan. Jadi, jika Anda akan banyak bekerja, mungkin ide bagus untuk menjalankan (dari proyek direktori Anda)  compass watch. Ini akan melihat direktori SASS Anda dan jika ada perubahan, maka secara otomatis akan mengkompilasi ulang CSS Anda. Sekarang, setiap kali Anda menyimpan "style.scss" anda "style.css" File akan secara otomatis mengkompilasi ulang!

Sertakan Stylesheet Anda di HTML Anda

Sekarang Anda hanya perlu menghubungkan stylesheet kita ke dokumen HTML kita. Tambahkan bagian kode ini di antara tag  <head> Anda:


Tahap 5: Pengaturan Typography Menggunakan Google Web Fonts

Kami akan menggunakan  Google Web Fonts untuk menggunakan font potensial yang tidak asli di situs kita.


Implementasinya agak sederhana. Pertama, kita perlu memilih font. Saya memilih "Bitter" untuk digunakan di judul saya.


Klik " add to collection " di bawah font's actions:


Font akan ditambahkan ke koleksi Anda.


Sekarang klik " use " sehingga kita bisa belajar bagaimana menggunakan font yang telah kita pilih di halaman web kita:


Saya berencana menggunakan huruf miring dan versi normal dari font. Jadi mari kita pilih kotak centang untuk versi italic dari font. Jadi mari kita pilih kotak centang untuk versi italic dari font.


Google memberi Anda berbagai pilihan untuk menggunakan font di halaman web Anda. Kita akan menggunakan metode 'standard'. Ini adalah metode termudah dan menggunakan layanan hosting Google untuk menyediakan font.


Ambil cuplikan ini dan tambahkan di <head> dokumen.

Sempurna! Sekarang yang harus kita lakukan untuk menggunakan font tersebut adalah mendeklarasikan nama font dalam kumpulan font CSS kita, seperti:


Langkah 6: Membuat Header

Jadi kita telah melakukan banyak setup disini untuk proyek kami. Kami punya struktur halaman HTML dasar kami, kami punya setup CSS dengan menggunakan kompas, dan kami punya tipografi kami ditetapkan untuk load dari font Web Google. Sekarang mari kita mulai menciptakan markup untuk elemen halaman kami.

Header: Markup

Kita akan membuat header halaman kami yang akan memiliki dua komponen: avatar dan pengenalan.

Untuk membuat avatar, saya membuat gambar yang 200 x 200 piksel dan ukurannya di markup untuk 100 x 100. Ini akan membuat gambar segar untuk perangkat retina. Gambar itu sendiri hanya harus persegi. Kami akan membuatnya bulat dan menambahkan fitur dekoratif menggunakan CSS. Sekarang Anda harus memiliki sesuatu yang sederhana seperti ini:


Gaya dasar

Sebelum khusus styling header kita akan men-setup beberapa gaya halaman dasar:

Di sini kita hanya menetapkan beberapa gaya halaman umum, seperti berpusat teks selaras, ukuran font, responsif gambar dan link yang tidak digarisbawahi. Anda juga mungkin memperhatikan kami menggunakan komentar / /. Di normal CSS Anda harus melakukan single-line komentar seperti ini: / * ini adalah satu baris komentar * /. Namun di SASS, Anda dapat menggunakan / /. Halaman Anda akan terlihat seperti ini:


Catatan: Jika halaman Anda tidak terlihat seperti itu, itu adalah mungkin karena Anda tidak mengkompilasi ulang stylesheet Anda! Anda dapat membaca kembali langkah 4 yang berbicara tentang kompilasi stylesheet Anda dengan Kompas.

H1 Tag

Mari kita gaya kami<h1>Tag, karena kita akan menggunakannya di setiap bagian dari dokumen HTML kami.

Perhatikan bahwa kita menggunakan Bitter font family kita dari Google Fonts. Ini akan membuat semua judul utama kita sama. Sekarang kita punya judul utama dalam hierarki kita, yah, pokoknya!


Header Elements

Sekarang mari kita tambahkan beberapa spasi untuk header kita, divider, dan buat H1 kita di header italic:

Perhatikan bagaimana kita menambahkan aturan CSS? Ini adalah roti dan mentega preprocessors CSS. Nested selectors diawali dengan parents saat CSS diproses.

Ingat bagaimana saya bilang kita akan style avatar kita dengan CSS? Mari kita lakukan itu sekarang:

Anda mungkin bertanya-tanya apa kode  @include itu? Ini adalah  compass CSS3 mixin. Pada dasarnya, dibutuhkan aturan CSS yang Anda berikan dan menampilkannya dengan semua prefixes browser CSS3 yang Anda butuhkan. Jadi alih-alih mengetik beberapa jenis aturan untuk browser yang berbeda, Anda hanya perlu menulisnya sekali dan Compass akan mengurus sisanya! Tidak ada lagi - -webkit-box-shadow-moz-box-shadow, dll. Ini contohnya:

Tip Cepat: Dengan SASS, Anda dapat mengatur kadar warna CSS menggunakan variabel. Katakanlah Anda menggunakan  #000 di sepuluh tempat berbeda di CSS Anda. Jika Anda ingin mengubahnya menjadi  #333, Anda harus menemukan dan mengubahnya di mana pun Anda menggunakannya. Dengan variabel, Anda hanya perlu mengubahnya di satu tempat! Simak  Dokumen SASS   untuk mempelajari lebih lanjut.

Sekarang Anda harus memiliki sesuatu seperti ini:


Karena penggunaan aturan CSS3 kita, ini tidak akan terlihat sama di browser lawas. Namun, Anda tetap dapat melihat avatar persegi yang umum. Namun, Anda tetap dapat melihat avatar persegi yang umum. Jadi, kita melakukan pekerjaan yang baik untuk peningkatan yang progresif.


Tahap 7: Membuat Carousel Konten Dribbble

Sekarang mari kita buat konten utama kita. Apa yang akan kita ciptakan di sini adalah carousel bergulir horizontal yang murni hanya menggunakan HTML dan CSS untuk memungkinkan interaksi berbasis sentuhan pada perangkat yang mendukung.

Markup

Kami akan mengisi carousel kita dengan konten dari Dribbble. Jadi, untuk mencapainya, mari kita mulai dengan markup untuk konten ini.

Mari kita lihat apa yang sedang kita lakukan di sini:

  • Buat bagian untuk konten utama kita dan berikan header.
  • Buat <dive> untuk carousel kita. Ini akan menyimpan wadah untuk Dribbble shots dan juga gradient masks yang akan kita terapkan di setiap sisi carousel. Mask ini akan memberi efek bahwa konten menghilang di sisi area pandang saat pengguna bergulir.
  • Letakkan gambar "loading" default dalam daftar Dribble shots. Ini akan diganti begitu kita memuat semua gambar dengan javascript
  • Tambahkan petunjuk arah "scroll to view" untuk memperjelas kepada pengguna bahwa mereka dapat menggesek / menggulir konten dalam wadah.

Kita akan memiliki sesuatu yang mendasar yang sebagian ditata seperti ini:



Tahap 8: Mengambil Konten dari Dribbble menggunakan Javascript

Javascript untuk memuat gambar pengguna dari Dribbble sebenarnya cukup sederhana berkat API jQuery dan Dribbble.

Buat fail javascript dan memuat jQuery

Karena kita menggunakan jQuery, kita akan memuatnya dari CDN Google. Kami juga akan membuat file javascript baru di mana kami akan menempatkan javascript kita sendiri kita akan menulis. Sehingga menambahkan script ini sebelum penutupan<body>Tag:

Pengaturan variabel

Sekarang, dalam berkas "dribbble.js" file, mari kita mulai menulis script kami. Mari kita mulai dengan beberapa perintah sederhana dan nyatakan dua variabel yang akan kita gunakan:

Perhatikan kedua variabel kita:

  • dribbbleUsername adalah nama pengguna Dribblble dari konten orang yang ingin kita ambil (dalam kasus ini, kita hanya menggunakan saya)
  • html adalah di mana kita akan menyimpan markup yang akan kita hasilkan dan masukkan di DOM

Dapatkan JSON dari Dribbble's API

Sekarang kita akan meminta info yang kita butuhkan dari API Dribbble menggunakan getJSON

Di sini kami membuat permintaan untuk API Dribbble. Perhatikan bahwa kita memasukkan variabel  dribbbleUsername  dalam URL permintaan. Ini memberitahu Dribbble bahwa kita menginginkan sekumpulan gambar dari pengguna tertentu API Dribbble akan memproses permintaan dan mengembalikan sekumpulan JSON yang kita simpan di fungsi callback data .

Jika Anda benar-benar mengunjungi tautan itu di browser, Anda akan melihat Apa yang API Dribbble kembalikan.


Teks kompleks ini memiliki semua info yang kita butuhkan untuk membuat daftar Dribbbles terbaru pengguna! Sekarang kita hanya perlu menguraikannya.

Loop over  hasil dan menghasilkan HTML

Sekarang setelah semua JSON ini memberi tahu kita apa gambar terbaru pengguna, kita akan loop over dan mendapatkan hal-hal yang kita butuhkan. JSON berisi banyak informasi tapi kita hanya membutuhkan nilai untuk kunci berikut:

  • The shot image url: url
  •  image_url
  • URL shot: title

Jika Anda menjalankan JSON yang Dribbble kembali melalui formatter (seperti JSONLint), Anda akan mendapatkan sesuatu yang jauh lebih mudah dibaca. Ini akan memungkinkan Anda untuk dengan mudah melihat setiap kunci / pasangan nilai Dribbble kembali. Di situlah kita memilih nilai yang kita inginkan.


Dribbble mengembalikan semua informasi itu untuk setiap shot!  Sekarang kita hanya loop over setiap shot, dapatkan nilai yang kita inginkan, dan buatlah daftar HTML Lihatlah contoh markup ini Inilah yang ingin kita hasilkan untuk setiap shot, di mana tanda bintang menunjukkan nilai kunci yang kita dapatkan dari JSON kita:

Jadi mari kita jalankan loop kita. Kita akan mendapatkan sepuluh shots terbaru yang Dribbble kembalikan:

Apakah kamu melihat apa yang kita lakukan di sana? Inilah yang sedang kita lakukan:

  1. Buat variabel numberOfShots yang menentukan berapa banyak shots dribbble yang akan kita tampilkan di halaman kita (berapa kali loop akan berjalan)
  2. Jalankan sebuah loop ambil variabel html dan satukan semua HTML yang kita butuhkan untuk daftar shots dari Dribbble
  3. Masukkan markup daftar yang dihasilkan ke DOM tempat kita memiliki placeholder "loading" kita

Anda harus memiliki sesuatu seperti ini sekarang yang mencantumkan semua shots pada satu halaman:



Tahap 9: Memberikan Gaya pada Carousel dari Dribbble Shots

Setelah kita memiliki semua Dribbble shots di markup kita, kita ingin membuat CSS untuk carousel kita.

Overflowing Content Secara Horizontal

Seperti yang telah kita sebutkan sebelumnya, kita akan membuat wadah yang dapat digulir secara horisontal yang akan merespons interaksi berbasis sentuhan pada perangkat seluler. Jadi, mari kita mulai dengan CSS berikut

Di sini kita memberi posisi relatif pada .carousel karena kita benar-benar akan memposisikan masks kita di dalam wadah itu. shots-container, jika Anda ingat, adalah wadah untuk daftar Dribbble shots kami. Ini akan menjadi wadah yang merespons interaksi berbasis sentuhan di browser webkit. Peraturan -webkit-overflow-scrolling: touch , jika didukung, akan memberikan scrolling asli pada perangkat sentuh. Ini akan jauh lebih mulus dari apapun yang bisa disediakan javascript. Dengan mengatur adanya kelebihan kita pada sumbu x (secara horisontal) untuk menggulir, kita dapat membuat konten yang dapat digulir yang mengalir melalui wadahnya.

Melapisi Shots secara Horisontal

Sekarang kita memiliki wadah untuk konten horizontal, kita perlu membariskan semua Dribbble shots kita secara horisontal. Ini adalah blok kode yang besar, tapi jangan khawatir, kita akan membahasnya:

Inilah yang kita lakukan dengan CSS kita. Pertama, kita memberi .shots lebar tetap. Lebar tetap ini akan melampaui area pandang browser. Namun, karena kita menetapkan agar parentnya dapat digulirkan, pengguna akan dapat menggulir konten yang berlebih di layar.


Anda akan melihat bahwa lebar .shots dihitung berdasarkan lebar anaknya

  •  elemen. Dalam kasus di atas, setiap shot memiliki ukuran yang ditetapkan untuk:
    • lebar (400px)
    • margin (10px di setiap sisi untuk total 20px)
    • padding (10px di setiap sisi untuk total 20px)
    • border (1px di setiap sisi untuk total 2px)

    Ini berarti setiap elemen <li> akan memiliki lebar total 442 piksel dan karena ada sepuluh di antaranya, parent harus memiliki lebar 4420 piksel.  Anda akan melihat bahwa kita mengurangi ukuran setiap shot pada ukuran ponsel (karena dribbble shot 400px tidak sesuai dengan perangkat mobile dengan lebar 320 piksel). Jadi kita menyesuaikan wadah .shots kita dan itu adalah elemen child  <li>sesuai dengan menggunakan breakpoints.

    Beberapa hal lain yang perlu dicatat: kita memberikan latar belakang gambar loading .shots li , sehingga pengguna tahu bahwa kita mencoba mengambil data jika pemuatan halaman memakan waktu lama. Juga, padding kiri dan kanan pada .shots adalah tempat masks kita akan pergi. Inilah yang seharusnya Anda dapatkan sejauh ini: Berikut adalah apa yang harus Anda miliki sejauh ini:


    Anda akan melihat dribbble shots Anda menghilang dari layar namun dapat diakses dengan menggulir. Jika Anda memuatnya ke perangkat seperti iPhone, Anda dapat menggunakan interaksi asli untuk menelusuri menggunakan carousel!


    Menciptakan Masks

    Seperti yang tercantum dalam markup, kita memiliki dua <span>elemen  yang akan bertindak sebagai masks di tepi kiri dan kanan layar. Ini akan membantu membantu secara visual mengisyaratkan bahwa ada lebih banyak konten di luar layar dan pengguna harus mencoba bergulir. Inilah CSS kita:

    Perhatikan bahwa kita menggunakan css3 gradient mixins dari Compass untuk menciptakan gradien kita. Lalu kita hanya memposisikan mereka di dalam parent .carousel mereka. Lihat bagaimana mereka menyembunyikan konten dengan lembut saat menghilang dari layar?



    Tahap 10: Membuat Footer

    Sekarang mari kita mulai membuat footer kita. Pertama kita akan mulai dengan markup

    Anda akan memiliki beberapa markup dasar tanpa gaya apapun, seperti ini:


    Membuat Gaya untuk Footer

    Mari kita memberikan footer kita beberapa gaya dasar.


    Tahap 11: Refining CSS

    Mari kita memperbaiki gaya kita hanya sedikit dengan menambahkan sedikit lebih banyak CSS:

    Bagus, sekarang Anda harus memiliki sesuatu seperti ini:



    Tahap 12: Menambah Icon Fonts

    Sekarang kita ingin menambahkan ikon ke masing-masing hipertaut di footer kita. Karena kita ingin ikon kita menjadi resolusi independen tapi juga bekerja di browser lama, kita akan menggunakan teknik icon font.

    Agar mudah, kita akan menggunakan layanan generator icon font  icomoon

    Memilih Ikon Anda

    Kunjungi  icomoon app. Anda akan melihat sekumpulan ikon yang disediakan secara gratis yang dapat Anda pilih untuk disertakan dalam font Anda.


    Sekarang kita hanya perlu menemukan ikon untuk setiap layanan sosial yang kita gunakan. Karena ini adalah layanan umum, ada ikon gratis yang tersedia untuk digunakan. Perlu dicatat bahwa jika Anda perlu menggunakan ikon Anda sendiri sebagai bagian dari font, icomoon memungkinkan Anda untuk mengunggah ikon vektor Anda dan memasukkannya ke dalam font Anda (meskipun kita tidak akan membahasnya di tutorial ini).  Berikut daftar ikon yang akan kami gunakan:

    • Facebook
    • Twitter
    • Instagram
    • Google Plus
    • YouTube
    • Dribbble

    Temukan masing-masing dan pilihlah. Setelah menemukan semuanya, klik "generate" di bagian bawah aplikasi


    Menghasilkan dan Mengunduh Ikon Anda

    Setelah mengklik " generate ", Anda akan dibawa ke halaman di mana Anda dapat meninjau semua ikon yang telah Anda pilih Sepertinya ini:


    Pada titik ini Anda memiliki gambaran umum tentang ikon yang akan dihasilkan di font Anda. icomoon juga memberi Anda berbagai opsi penyesuaian; namun kita tidak akan menggunakan salah satu dari mereka pada saat ini. Lanjutkan saja dan unduh font Anda.

    Ikhtisar Fail

    Jika Anda unzip file yang telah Anda download, Anda akan menemukan berbagai file.


    Berikut adalah ikhtisar dari apa yang kita miliki:

    • index.html - Ini adalah semacam halaman demo yang memberi Anda gambaran tentang ikon yang Anda unduh, informasi tentang masing-masing, dan demo kerja penggunaannya.
    • lte-ie7 - Ini adalah fail javascript yang dapat Anda sertakan dalam HTML Anda jika Anda ingin IE6 dan IE7 mendukung ikon font Anda (kita tidak akan melakukannya)
    • /fonts - folder ini berisi ikon kita yang dikemas sebagai font. Ada berbagai format fail font karena browser yang berbeda membutuhkan format yang berbeda
    • style.css - fail ini memiliki kode CSS yang diperlukan untuk mulai menggunakan font ikon.  Kami akan menyalin kode dari sini

    Anda harus mengambil folder /fonts dan memindahkannya ke direktori root situs web Anda, karena font ini adalah aset yang akan kita gunakan untuk browser.

    Memasukkan Font ke Halaman Web

    Kami akan menggunakan pendekatan pseudo-class CSS untuk membawa ikon ke halaman web kita. adi, jika kita melihat fail  style.css yang disertakan dengan ikon kita, ada beragam kelas CSS untuk setiap ikon. Kita perlu menambahkannya ke elemen <li> kita, seperti ini:

    Setelah kita mendapatkan markup, kita akan mengimpor font custom menggunakan CSS. Kita akan meminjam gaya ini dari style.css yang disertakan dengan font ikon kita.

    Catatan: Karena kami menyalin / menempelkan dari fail yang telah kita unduh, kita harus mengubah referensi  url() yang menunjuk ke font kita dengan menambahkan ../

    Sekarang kita akan menyalin dan menempelkan CSS untuk masing-masing ikon

    icomoon menghasilkan semua kode ini untuk kita, tapi inilah gambaran singkat tentang apa yang terjadi:

    • Blok kode pertama menyatakan gaya bersama untuk masing-masing ikon
    • Setiap ikon memerlukan kelas yang sesuai yang menggunakan aturan  content untuk menyatakan karakter font yang akan digunakan browser. Intinya, karakter \e000 sesuai dengan ikon facebook di fail font.  \e001 ke ikon twitter, dll. \e001 ke ikon twitter, dll.

    Ikon Anda harus muncul sekarang tanpa gaya khusus:



    Tahap 13: Styling Ikon

    Sekarang kita akan menata ikon kita sesuai warna merek masing-masing layanan. Mari kita mulai dengan memberi ikon kita beberapa jarak yang bagus. Berikut adalah ikhtisar tentang apa yang kita lakukan di sini:

    Berikut adalah ikhtisar tentang apa yang kita lakukan di sini:

    • <li> - kita menggunakan compass mixin  inline-block() yang akan menampilkan beberapa CSS yang bagus untuk dukungan lintas browser untuk penentuan posisi inline-blok. Kita juga menetapkan aturan transisi CSS (menggunakan Compass mixin) untuk beberapa efek hover yang bagus yang akan kita tambahkan sedikit.
    • &:hover - kita menggunakan compass mixin scale(1.25)  yang akan diterjemahkan ke transform: scale(1.25); dengan awalan browser yang tepat. Aturan ini akan sedikit memperbesar ikon dan hipertaut pada hover untuk interaksi UI yang bagus.
    • &:before - kita memposisikan ikon (yang jika Anda ingat, ditampilkan dengan menggunakan: a :before pseudo element) di atas teks hipertaut
    • <a> - kita menyiapkan setiap hipertaut sebagai set-width block. Kita juga menambahkan dukungan untuk pemotongan teks jika layanan yang kita hipertautkan memiliki nama yang sangat panjang

    Sekarang Anda harus memiliki sesuatu seperti ini:


    Menambahkan Warna Merek

    Sekarang kita hanya ingin menambahkan beberapa warna untuk layanan kita. Kita ingin menambahkan warna merek ke setiap ikon dan teksnya. Jangan lupa, kita akan menambahkan interaksi hover. Saat pengguna hovers di atas sebuah layanan, kami akan sedikit memperbesar teks dan ikon (menggunakan scale(1.25)  CSS yang baru saja kita masukkan) sekaligus membalik warna. Jadi latar belakang menjadi warna merek sedangkan teks dan ikon menjadi putih. Jadi, kita perlu mengatur warna untuk setiap merek:

    Seperti disebutkan sebelumnya, Anda bahkan mungkin ingin mengatur variabel untuk warna ini, untuk sepenuhnya memanfaatkan kemampuan Sass.

    Itu dia! Sekarang Anda harus memiliki sesuatu seperti ini:



    Kesimpulan


    Sekarang Anda tahu beberapa teknik untuk membangun halaman web modern seperti:

    • Menerapkan ikon sebagai font yang dapat dirubah
    • Mengambil JSON dari API
    • Menggunakan font khusus dari layanan font web Google
    • Membangun CSS dengan preprocessor seperti Compass
    • Melaksanakan carousel bergulir untuk perangkat sentuh hanya menggunakan CSS

    Saya harap Anda telah mempelajari beberapa hal di sepanjang tutorial ini. Jangan ragu untuk menyesuaikan halaman ini lebih jauh dan membuatnya menjadi milik Anda sendiri!

  • Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.