8 fitur css canggih (dan bagaimana menggunakannya)

CSS terus berkembang dan sejumlah fitur baru yang menarik telah ditambahkan untuk membuat spesifikasi senjata yang bahkan lebih kuat dalam toolset perancang web.

CSS Grid mengambil tata letak ke level baru yang tidak terlihat sebelumnya, properti khusus memperkenalkan konsep variabel sementara fitur permintaan untuk dukungan browser. Pertanyaan media menggerakkan level dengan properti aksesibilitas baru, font variabel menawarkan kreativitas maksimum dengan kode minimum bloat sementara scroll shapping menghilangkan kebutuhan akan JavaScript. Lihat keren kami Animasi css. Contoh untuk melihat apa yang dapat Anda buat. Atau, untuk membangun situs tanpa kode coba ini Pembangun situs web .

Bagi mereka yang ingin menjadi kreatif, ada bentuk CSS untuk tata letak unik dan sejumlah mode campuran dan filter untuk memperkenalkan efek desain gaya photoshop. Baca terus untuk mengetahui bagaimana Anda dapat menggunakan fitur-fitur yang harus dicoba ini di build terbaru Anda. Tapi ingat, situs web yang kompleks berarti Anda membutuhkan hosting web. Layanan yang dapat mendukung kebutuhan Anda.

01. Kustom Properties.

Jika Anda telah menggunakan preprocessor seperti SASS, atau memang bahasa pemrograman seperti JavaScript, Anda pasti akan terbiasa dengan konsep variabel - nilai yang didefinisikan untuk digunakan kembali di seluruh kode Anda. Properti khusus memungkinkan kami untuk melakukan ini di CSS kami, tanpa perlu preprosesor. Variabel dapat diatur pada level: Root (menciptakan variabel global) atau meluangkan dalam pemilih. Mereka kemudian dapat dipanggil menggunakan sintaks var (-> - MyVariBlename). Misalnya, kita dapat mengatur variabel yang disebut --PrimaryColor. seperti ini:

 / * pada elemen root (global
variabel) */
: root {
- -PrimaryColor: # F45942;
}
/ * Scoped ke pemilih * /
.my-komponen {
- -PrimaryColor: # 4171F4;
} 

Sekarang kita dapat menggunakan variabel itu sebagai nilai properti:

 H1 {
Warna: var (- -PrimaryColor);
} 

Properti kustom diwarisi, yang memiliki beberapa implikasi yang sangat berguna. Salah satunya adalah mereka. Ambil contoh di atas: kita dapat mendefinisikan variabel global (# F45942 - merah oranye merah) untuk --PrimaryColor. Pada level root, jadi setiap contoh di mana kami menggunakan variabel ini nilainya akan berwarna merah. Tapi kami juga mendefinisikan kembali variabel yang sama dalam pemilih, dengan nilai yang berbeda (# 4171F4 - biru sedang). Jadi untuk setiap contoh di mana kita menggunakan --PrimaryColor. variabel dalam pemilih itu, nilai yang dihitung akan berwarna biru.

Pengaturan default.

Pelingkupan variabel adalah fitur yang bagus, tetapi yang mungkin menarik Anda keluar pada kesempatan! Jika Anda mencoba menggunakan variabel yang belum didefinisikan, nilai yang dihasilkan akan kembali ke default browser, atau nilai yang diwarisi, daripada variabel yang didefinisikan lebih lanjut dari kaskade. Dalam beberapa kasus, mungkin tepat untuk menetapkan nilai default:

 H1 {
Warna: var (- -PrimaryColor, biru);
} 

Bagaimana sifat kustom berbeda dari variabel preprocessor?

Properti khusus berbeda dari variabel preprocessor dalam beberapa cara utama. Variabel preprocessor dikompilasi sebelum kode Anda dikirim ke browser. Browser tidak pernah melihat bahwa nilai adalah variabel, itu hanya melihat hasil akhirnya. Sifat khusus dihitung di browser. Anda dapat memeriksanya di alat pengembang modern, mengubah variabel dan melihat nilai yang diselesaikan. Mereka adalah variabel dinamis, artinya nilainya dapat diubah dalam CSS, atau pada runtime dengan JavaScript.

Tidak seperti variabel preprocessor, Properti Kustom tidak dapat digunakan dalam nama pemilih, kunci properti atau deklarasi permintaan media - hanya nilai properti CSS. Preprosesor CSS masih memiliki banyak manfaat, jadi kami cenderung melihat mereka menempel selama lebih lama, tetapi mereka kemungkinan akan lebih sering digunakan dalam kombinasi dengan sifat khusus.

02. Fitur Queries.

Queries fitur adalah cara untuk menguji apakah browser mendukung kombinasi nilai properti CSS tertentu dalam file CSS Anda. Mereka secara virtual menghapus kebutuhan akan perpustakaan deteksi fitur seperti Modernizr. Sintaks mirip dengan kueri media: Anda menggunakan aturan @Support. , diikuti oleh pasangan nilai properti Anda, membungkus kode yang akan dieksekusi jika browser memenuhi kondisi yang ditentukan.

Permintaan fitur didukung dengan baik di browser modern, tetapi mereka relatif baru, dan satu "gotcha" adalah bahwa beberapa browser yang mungkin ingin Anda uji untuk dukungan mungkin tidak mendukung permintaan fitur sendiri. Seringkali cara terbaik untuk menangani ini adalah untuk menyediakan gaya fallback pertama (di luar kueri fitur), kemudian membungkus perangkat tambahan Anda untuk mendukung browser di dalamnya @Support. aturan.

Waspadai, pertanyaan fitur hanya perlu digunakan dengan hemat. Salah satu fitur hebat CSS adalah bahwa browser hanya akan mengabaikan properti atau nilai yang tidak mereka mengerti. Ini yang terbaik untuk hanya menggunakan permintaan fitur ketika tidak melakukannya akan menyebabkan bug visual, jika tidak, Anda dapat mengatur diri Anda untuk banyak pekerjaan ekstra.

Cara menggunakan kueri fitur

Untuk menguji dukungan nilai properti tunggal, kami dapat memberikan fitback terlebih dahulu. Dalam contoh ini, kami menyediakan flexbox fallback untuk browser yang tidak mendukung tata letak grid.

 .my-komponen {
Tampilan: grid;
}
@Support (tampilan: grid) {
.my-komponen {
Tampilan: Flex;
}
} 

03. Media Queries.

Kemungkinan besar Anda akan terbiasa menggunakan kueri media untuk mendeteksi lebar dan tinggi viewport, dan jenis media (paling umum layar atau cetak). Spesifikasi Queries Media Level 5 membawa kami beberapa fitur media yang lebih baru untuk (opsional) tes, yang sudah didukung di beberapa browser. Ini menawarkan beberapa manfaat besar untuk aksesibilitas.

Pengguna dengan gangguan vestibular, dan mereka yang menderita sakit gerak, mungkin tidak menghargai halaman web dengan banyak gerakan, seperti animasi dan efek pengguliran paralaks. Menggunakan kueri media gerak-media yang lebih disukai, kami dapat memberikan pengguna yang menyisih dengan alternatif gerak yang dikurangi.

. Elemen -My {
Animasi: Kocok 500ms kemudahan 5;
}
@Media (prefer-pengurangan gerak: kurangi) {
.my-elemen {
Animasi: Tidak ada;
}
} 

Ini menjadi semakin populer untuk situs web untuk memberikan tema gelap alternatif. PREFER-COLORS-Skema memungkinkan kami untuk menanyakan apakah pengguna telah menetapkan preferensi selebar sistem (menggunakan kata kunci gelap, cahaya, atau tidak preferensi), dan menunjukkan skema warna yang sesuai.

 / * Media Queries 02 * /
tubuh {
latar belakang: gradien linier (untuk
bawah, # b5faff, # ffe2b4);
}
@ Media (SPEMA PREFER-COLOR: DARG) {
tubuh {
warna putih;
latar belakang: gradien linier (untuk
bawah, # 0c1338, # 3e3599);
}
} 

04. Font variabel

Secara umum, jika kita ingin memasukkan sejumlah font yang berbeda dari keluarga yang sama di halaman web kita, kita perlu memuat jumlah file font yang sama. Semakin banyak file font yang Anda memuat, semakin banyak bobot yang Anda tambahkan ke halaman Anda, dengan dampak pada kinerja - jadi biasanya bijaksana untuk memuat maksimal tiga atau empat file font (tergantung pada anggaran kinerja Anda).

Font variabel mengubah semua itu. Mereka memungkinkan kami untuk memuat file font tunggal untuk seluruh keluarga font. Meskipun file ini biasanya akan lebih besar dari font tunggal, jika Anda ingin memanfaatkan bobot dan gaya yang berbeda, maka font variabel adalah solusi yang lebih berkinerja. Jika Anda telah membeli seluruh keluarga font, ingatlah untuk menyimpannya dengan aman penyimpanan awan Jadi Anda tidak kehilangan file Anda!

Variasi Axis.

Tidak hanya itu, tetapi dengan font variabel, kami tidak terbatas pada subset kecil bobot font. Ketika bekerja dengan font reguler, bobot font yang tersedia diberikan dalam kelipatan 100. Biasanya, 400 mungkin berat badan reguler, 300 bobot ringan, dan 700 berat tebal - dengan keluarga yang berbeda yang memasok lebih banyak bobot atau lebih sedikit. Font variabel memiliki sumbu variasi, yang memberi kami berbagai nilai untuk properti seperti berat font. Font mungkin memiliki sumbu 1-900, yang akan memberi kita akses ke 900 bobot yang berbeda!

Sumbu variasi tidak hanya dibatasi berat. Font variabel dapat memiliki sumbu berbeda untuk x-tinggi, miring, panjang serif dan kontras (untuk memilih hanya beberapa contoh) - yang berarti bahwa file font tunggal dapat memberi kami akses ke ratusan, atau bahkan ribuan variasi! Kami bahkan dapat menghidupkan properti ini, memungkinkan kami untuk mencapai beberapa efek yang sangat keren. Mandy Michael ( https://codepen.io/mandymichael. ) Memiliki seluruh demo kreatif yang benar-benar menguji batas.

Dukungan browser untuk font variabel cukup bagus, dan banyak pengecoran font secara aktif mengembangkan font variabel baru yang dapat Anda mulai gunakan sekarang - meskipun ini sering datang dengan premium, terutama untuk keluarga font yang lebih berfitur lengkap. Jika Anda hanya ingin mulai bermain-main dengan font variabel untuk melihat apa yang dapat mereka lakukan, ada sejumlah situs Playground Font Variabel:

Perlu diketahui, jika Anda ingin menggunakan font variabel sekarang, Anda perlu memastikan Anda menggunakan sistem operasi terkini - mereka tidak akan bekerja pada OS yang lebih tua.

Pengaturan variasi font

Sementara kita dapat mengubah berat font dengan mudah dengan Font-weight. Properti CSS, Pengaturan variasi font adalah properti baru yang memberi kami akses penuh ke sumbu variasi yang berbeda font. Ini termasuk sumbu terdaftar dan sumbu khusus.

Axes terdaftar

Ada lima sumbu terdaftar yang berbeda, yang sesuai dengan berbagai properti CSS. Masing-masing memiliki apa yang dikenal sebagai "tag Axis". Sumbu yang terdaftar adalah: wght (Font-weight), WDTH. (Font-stretch), Slnt. (gaya font: miring / sudut), ital. (gaya font: italic), opsz. (font-ukuran font). Kita dapat mengakses sumbu ini baik oleh properti CSS, atau dengan Pengaturan variasi font .

Kumbas-kape ini belum tentu semua termasuk dalam setiap font variabel (beberapa mungkin hanya memiliki satu atau dua sumbu), tetapi mereka cenderung menjadi yang paling umum.

Kustom Axes.

Sumbu khusus adalah sumbu dipesan lebih dahulu yang disertakan oleh desainer font, dan bisa apa saja. Mereka dapat memasukkan (misalnya) panjang serif, x-tinggi, bahkan sesuatu yang lebih kreatif (dan kurang khas ketik), seperti rotasi.

Kedua jenis sumbu harus dinyatakan sebagai tag empat karakter. Axe terdaftar harus huruf kecil, sedangkan sumbu kustom bersifat besar. Keduanya dapat digabungkan dalam properti pengaturan variasi font. Pengaturan variasi font adalah animatable, yang dapat memungkinkan untuk beberapa efek UI yang sangat keren! Beberapa eksperimen yang sangat menarik telah diproduksi menggunakan font ikon juga.

05. Efek Grafis.

Jika Anda terbiasa dengan alat desain seperti Photoshop dan Illustrator, Anda mungkin mengetahui mode campuran dan bagaimana mereka dapat digunakan untuk menghasilkan efek yang berbeda pada gambar. Cara Mode Campuran Pekerjaan adalah untuk memadukan dua lapisan atau lebih bersama-sama menggunakan rumus matematika untuk menghitung nilai yang dihasilkan untuk setiap piksel. Lays bisa berupa apa saja - gambar, gradien atau warna datar. Beberapa mode campuran menghasilkan hasil yang gelap (mis. Multiply, yang mengalikan nilai piksel lapisan), beberapa yang lebih ringan (mis. Layar dan overlay). Kami tidak perlu memahami matematika untuk menggunakannya. Bermain dengan berbagai mode campuran dapat memberi kami perasaan yang baik untuk mereka yang menghasilkan hasil yang diinginkan ketika dikombinasikan dengan lapisan yang berbeda.

Dengan properti CSS Mode campuran-blend dan mode latar belakang-blend , Kita dapat mencapai efek gambar seperti photoshop di browser. Kedua properti mengambil nilai yang sama, tetapi bekerja sedikit berbeda.

Mode latar belakang-blend

Mode latar belakang-blend menyatukan lapisan latar belakang elemen yang kita targetkan. Elemen kami dapat memiliki gambar latar belakang, warna dan gradien, dan mereka semua akan dicampur satu sama lain tanpa mempengaruhi konten latar depan. Kami dapat menentukan beberapa nilai untuk mode latar belakang-blend , satu untuk setiap lapisan latar belakang.

. Elemen -My {
Latar Belakang: URL (#myurl),
Linear-Gradient (45deg, RGBA (65, 68,
244, 1), RGBA (203, 66, 244, 0.5)),
RGBA (244, 65, 106, 1);
ukuran latar belakang: penutup;
Blend-Mode Latar Belakang: Layar,
berkembang biak;
} 

Mode campuran-blend

Mode campuran-blend Mempengaruhi bagaimana elemen berpadu dengan induknya dan saudara-saudaranya, termasuk konten latar depan dan latar belakang, dan elemen pseudo. Beberapa efek kreatif yang menarik dapat dicapai dengan memadukan elemen-elemen pseudo yang dilapis (:: sebelum dan :: setelah).

. Elemen -My {
Latar Belakang: RGB (244, 65, 106);
MODE-MODE-MODE: Multiply;
} 

Filter css.

Filter CSS juga dapat digunakan untuk membuat efek visual yang mencolok, menggunakan Saring Nilai fungsi properti dan filter. Tidak seperti mode campuran, mereka menerapkan efek grafis langsung ke elemen yang mereka targetkan, dan elemen dapat memiliki banyak filter yang diterapkan.

Konversikan ke Grayscale.

Kami dapat memanipulasi warna elemen dengan tingkat kontrol yang lebih besar daripada mengandalkan mode campuran. Filter dapat mengonversi gambar ke skala abu-abu, sesuaikan kecerahan, kontras dan saturasi, blur elemen atau tambahkan drop shadow. Mereka juga dapat dianimasikan juga, dan tampak hebat dengan efek hover.

Filter svg.

Filter CSS sebenarnya merupakan versi disederhanakan dari filter SVG. CSS. Saring Properti juga membutuhkan a URL () Fungsi, memungkinkan kita untuk lulus dalam URL ke filter SVG. Filter SVG sangat kuat dan memungkinkan untuk beberapa efek gambar yang luar biasa - tetapi mereka juga jauh lebih rumit daripada fungsi filter CSS! Sara Soueidan memiliki seri artikel yang luar biasa di Codrops jika Anda tertarik untuk menyelam ke dalam pengkodean filter SVG khusus Anda sendiri. Lihat artikel di https://tympanus.net/codrops/2019/01/15/svg-filters-101/

Kliping dan Masker: Melampaui persegi panjang

Kami terbiasa berurusan dengan kotak di web, tetapi tidak semuanya harus persegi panjang! Kliping dan masking adalah dua sisi dari koin yang sama, dan berbagai cara untuk menyembunyikan dan menunjukkan bagian elemen yang berbeda sehingga latar belakang menunjukkan. Ini memberi kita kekuatan untuk memperkenalkan bentuk yang menarik dan kreatif untuk desain kita.

Clip-Path.

Itu clip-path () Properti memungkinkan kita untuk "memotong" elemen dengan mendefinisikan jalan. Dibutuhkan sejumlah fungsi bentuk dasar, Inset (), lingkaran (), elips (), atau poligon () , yang memungkinkan kita untuk membuat bentuk guntingan yang lebih kompleks menggunakan pasangan koordinat XY untuk mendefinisikan jalur. Atau, kami juga dapat melewati jalur SVG menggunakan jalur () fungsi, atau menggunakan URL () untuk menyediakan ID jalur SVG.

Tidak di dalam jalan

Memotong elemen klip segala sesuatu di luar jalur yang Anda definisikan, tetapi elemen itu sendiri masih persegi panjang. Jika Anda memiliki konten yang meluas dari batas Jalur Klip, itu juga akan terpotong - itu tidak akan membungkus dalam bentuk.

Topeng-gambar.

Topeng-gambar. Memungkinkan kami untuk menampilkan dan menyembunyikan bagian gambar dengan menggunakan gambar (SVG atau PNG transparan) atau gradien sebagai topeng. Tidak seperti Clip-Path. , Kami dapat menambahkan tekstur ke gambar kami dengan masking, karena sumber mask tidak perlu menjadi jalur - memungkinkan untuk derajat transparansi.

06. Bentuk CSS.

Spesifikasi bentuk CSS memungkinkan kita untuk membungkus teks di sekitar bentuk geometris melayang, menciptakan beberapa tata letak seperti majalah yang menarik. Ini dimungkinkan menggunakan bentuk-luar Properti. Mirip dengan Clip-Path. , kami dapat memberikan properti ini fungsi bentuk dasar lingkaran (), elips (), inset (), poligon () , atau URL ke jalur SVG, dan sebenarnya keduanya bekerja dengan harmoni dengan sangat baik! bentuk-luar Akan membungkus teks kita secara efektif, tetapi itu tidak akan mempengaruhi elemen melayang. Jika kita ingin teks terlihat seperti itu membungkus gambar atau objek melayang, kita dapat menggunakan nilai yang sama untuk Clip-Path. . Menggunakan Bentuk-margin. Untuk menambah spasi antara jalur bentuk dan konten yang membungkusnya. Melihat Barang & amp; Omong kosong Situs untuk melihat bagaimana bentuk CSS digunakan untuk membungkus teks di sekitar gambar sentral.

Firefox memiliki A. editor bentuk Di dalam panel alat dev, yang sangat berguna untuk bekerja dengan bentuk kompleks. Namun, gunakan dengan hati-hati. Membungkus Tepi terdepan dari paragraf teks sangat bagus untuk efek artistik, tetapi tidak selalu bagus untuk pengalaman pengguna. Bentuk bergerigi yang rumit dapat membuat blok teks lebih keras untuk dibaca. Untuk konten penting, Anda mungkin ingin menghindari.

07. Scroll Snapping.

Banyak situs web memanfaatkan perpustakaan Javascript untuk memberikan pengalaman gulir gulir yang apek dan asli, di mana konten "terkunci" ke titik sebagai pengguna bergulir. Sekarang, dengan spesifikasi Snap Scroll, kita dapat melakukan ini dengan tepat dalam file CSS kami - ada sedikit kebutuhan untuk mengimpor dalam modul JS berat untuk mengupas halaman Anda!

Untuk mengimplementasikan scroll-shapping, kami memerlukan elemen untuk bertindak sebagai wadah gulir kami. Anak-anak langsung dari wadah mendikte poin yang akan ditangkap, dan dapat diselaraskan dengan berbagai cara di dalam area snap.

Scroll Snapping bisa lebih efektif ketika dikombinasikan dengan nilai properti CSS baru lainnya - Posisi: Sticky. . Nilai posisi ini "menempelkan" elemen ke posisi yang ditentukan saat menggulir dalam wadahnya - perilaku lain yang sebelumnya hanya mungkin dengan JavaScript. Lihat snap gulir ini dengan posisi: Contoh lengket dan intersectionserver .

08. Kisi dan Tata Layout CSS

Pengembang front-end telah meretas tata letak dengan alat apa pun yang tersedia untuk digunakan pada saat itu - paling baru FlexBox, yang banyak digunakan sistem grid modern. Tetapi FlexBox tidak pernah dirancang untuk membangun grid yang ketat - tujuannya adalah fleksibilitas!

CSS Grid adalah spesifikasi pertama yang dirancang untuk tata letak dua dimensi, memungkinkan kami mengendalikan sepenuhnya untuk membangun tata letak dan menempatkan item pada baris dan sumbu kolom. Membangun tata letak yang responsif dengan grid tidak memerlukan Calc () atau meretas dengan margin negatif. Senjata Rahasia adalah unit FR - unit baru eksklusif untuk grid. Ukuran unit FR trek grid (baris dan kolom) sebagai proporsi ruang yang tersedia. Itu memperhitungkan trek tetap, selokan, dan konten, kemudian mendistribusikan ruang yang tersisa sesuai. Jen Simmons menciptakan istilah "desain web intrinsik" untuk menggambarkan era baru tata letak web yang dikendarai oleh Grid.

Cara menggunakan grid CSS

Grid membutuhkan elemen dengan nilai properti display yang diatur ke grid, untuk bertindak sebagai wadah grid. Anak-anak langsung dari wadah kisi adalah item yang dapat ditempatkan di grid. Kami menggunakan properti baris-template-template dan kolom grid-template untuk menentukan trek (baris dan kolom) dari grid, dan kolom-gap. dan celah-celah untuk mendefinisikan selokan (celah di antara trek).

 .grid {
Tampilan: grid;
Grid-Template-Columns: Ulangi (4, 1fr);
Grid-Template-Rows: Ulangi (4, 200px);
GAP: 20px;
} 

Kami menggunakan ulang() berfungsi untuk menjaga kode lebih ringkas, sebagai alternatif dari Longhand (mis. grid-template-kolom: 1fr 1fr 1fr 1fr ). Contoh ini juga menggunakan singkatan celah untuk celah-celah dan kolom-gap. .

Kode di atas memberi kami empat trek baris, masing-masing setinggi 100px, dan empat trek kolom yang masing-masing mengisi proporsi yang sama dari ruang yang tersedia, menggunakan unit FR.

Perlu dicatat bahwa ini bukan satu-satunya cara untuk membuat trek grid. Trek implisit juga dapat dibuat dengan menempatkan item grid. Ini berguna untuk membaca sedikit tentang ini jika Anda menggunakan grid, karena membayar untuk mendapatkan pemahaman yang lebih dalam tentang bagaimana grid berperilaku dalam kondisi yang berbeda, dan dapat membuat pengkodean tata letak lebih mudah.

Kami dapat menempatkan item pada grid dengan mereferensikan nomor baris grid, yang merupakan garis numerik yang duduk di antara setiap trek. Di sini, kami menggunakan steno grid-kolom. dan grid-baris. untuk GRID-COLUMN-MULAI , Grid-Column-End , Grid-Row-Start dan Grid-Row-End . Ini memberi tahu browser di mana item kami harus mulai dan berakhir pada setiap sumbu.

 .Item {
grid-kolom: 1/4;
Grid-Row: 2;
} 

Grid memberi kita banyak cara berbeda untuk menempatkan item: sebaliknya kita bisa memberi nama garis grid kita:

 .grid {
Tampilan: grid;
Grid-Template-Columns: [Image-Start] 1fr
 1fr 1fr [gambar-mulai] 1fr;
Jaringan-template-baris: 200px [Image-start]
 200px 200px [Image-end] 200px;
GAP: 20px;
} 

Atau, Area grid-template Properti memungkinkan kami "menggambar" tata letak grid dengan teks.

 .grid {
Tampilan: grid;
Grid-Template-Columns: Ulangi (4, 1fr);
Grid-Template-Rows: Ulangi (4, 200px);
Gap: 20px;
Area Template Grid:
'. . . . '
'Gambar gambar gambar.'
'Gambar gambar gambar.'
'. . . . ';
} 

Menggunakan salah satu dari metode ini, kita dapat mengacu pada area grid yang sesuai saat menempatkan item grid:

 .Image {
Area Grid: Gambar;
} 

Artikel ini awalnya diterbitkan di Majalah Desain Web Kreatif Desainer web . Beli masalah 290 sekarang.

• 10 Kerangka CSS Terbaik pada tahun 2019
• Cara menambahkan animasi ke SVG dengan CSS
• 52 alat desain web untuk membantu Anda bekerja lebih pintar pada tahun 2019