7 fitur CSS3 yang keren sekali

0
7 fitur CSS3 yang keren sekali

Kali ini saya akan beri contoh dari 7 fitur CSS3 yang keren sekali. Kamu mungkin nggak sabar untuk menggunakannya pada website kamu. Sebagian besar fitur ini tidak akan bekerja dalam versi Internet Explorer 9 dan di bawahnya. Tapi jangan khawatir, fitur-fitur ini bekerja dengan baik di sebagian browser modern.

1. Gradient

Gradient memberikan kemampuan desainer web untuk menciptakan transisi halus antar warna. Gradient CSS juga tampak bagus pada layar retina. Juga bisa diatur linear atau radial, dan dapat diatur untuk repeat.

Demo

Daftar dukungan browser: http://caniuse.com/#feat=css-gradients

2. Animasi dan Transisi CSS

Animasi CSS tersedia di semua browser modern, bahkan di IE (sejak versi 10). Ada dua cara untuk membuat animasi CSS. Yang pertama adalah sangat mudah, hal itu dilakukan dengan menganimasikan perubahan property CSS dengan mendeklarasikan transition. Dengan transisi, kamu dapat membuat efek kursor atau mouse atau kamu dapat memicu terjadinya animasi dengan mengubah gaya element dengan JavaScript. Kamu dapat melihat transisi di bawah dengan menggerakkan kursor di atas planet – ini akan membuat roket mendekati planet.

Cara kedua untuk mendefinisikan animasi adalah agak rumit – karena melibatkan gambaran tentang momen tertentu dari animasi dengan mengatur @keyframe. Hal ini memungkinkan kamu untuk memiliki animasi yang tidak bergantung pada tindakan pengguna atau JavaScript.

Demo

Vector Planet & Roket didapat dari Freepik

Daftar dukungan browser: http://caniuse.com/#feat=css-animation

3. Generated Content dan Counter

Generated content disediakan oleh element Pseudo ::before dan ::after. Fitur ini memungkinkan kamu meminimalisasi penggunaan kode HTML untuk mencapai layout yang sama. Hal ini terutama bermanfaat dalam kasus-kasus di mana kamu perlu box-shadow tambahan atau element visual lain yang akan membutuhkan span atau div tambahan.

CSS3 juga memberikan akses element Pseudo ke counter, yang dapat bertambah dengan mengatur CSS. Itu juga dapat mengakses atribut dari element induk yang menampungnya.

Demo

Daftar dukungan browser: http://caniuse.com/#feat=css-gencontent

4. Border-image

Property border-image memungkinkan kamu untuk menampilkan border yang dirancang khusus di seluruh element. Border dimuat dalam satu gambar (sprite), dengan masing-masing area sehingga gambar sesuai dengan bagian yang berbeda dari border.

Demo

Daftar dukungan browser: http://caniuse.com/#feat=border-image

5. Webfont

Mengingat bahwa saat ini kita memiliki layanan seperti Google Fonts dan Typekit, yang memungkinkan kamu menyematkan font yang indah dengan hanya memasukkan stylesheet di halaman kamu. Bahkan ada icon font seperti FontAwesome, yang berisi vector icon yang cantik-indah-ganteng. Ini semua karena adanya @font-face, yang memungkinkan kamu menentukan nama, karakteristik dan file sumber untuk font, yang nanti dapat merujuk pada deklarasi font/font-family kamu.

Webfont bahkan compatible dengan browser setua IE 6. Dua layanan hosting font yang saya sebutkan di atas akan mempermudah kamu, sehingga kamu tidak perlu menambahkan font sendiri. Kita bisa membuat tipografi dengan CSS seperti ini: “Nandur becik tukule rasan-rasan” Ho’o po ra?

Demo

6. Transformasi CSS3 3D

Tidak ada yang lebih menarik dari CSS 3D. CSS 3D menawarkan beberapa fitur canggih untuk para desainer dan pengembang web yang dapat menarik hati pengguna jika dilakukan dengan takaran yang baik.

Demo

Foto Google Pixel didapat dari Cult Of Mac

Daftar dukungan browser: http://caniuse.com/#feat=transforms3d

7. Multiple Background

Dengan multiple background, desainer web dapat mendapatkan efek yang sangat menarik. Mereka bisa menumpukkan gambar yang berbeda sebagai background dari element yang sama. Setiap gambar (atau layer) dapat bergerak dan menjadi animasi secara independen, seperti yang kamu lihat dalam demo di bawah ini (cobalah gerakkan cursor di atas gambar dengan mouse kamu).

Demo

Foto Nebula didapat dari Pexels

Vector Roket didapat dari Freepik

Daftar dukungan browser: http://caniuse.com/#feat=multibackgrounds

BAGIKAN
Subscribe
Beritahu
guest
0 Comments
Inline Feedbacks
View all comments