Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Inspiration

Bagus Golly, Gradien di Semua Web

by
Length:ShortLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Online Annual Reviews From 2015
Big Smiles and Happy Faces in Web Design

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Gradien kembali dengan cerdas.Untuk beberapa saat mereka termasuk dalam dunia Miami Vice dan Tequila Sunrise, lalu mereka menambahkan kedalaman majalah tahun 1980an, lalu ada Geocities–ok, mari kita tidak berkutat pada masa lalu.

Gradien saat ini sedang digunakan di web dengan cara yang berani; mencampur warna yang sangat jenuh untuk efek yang sangat kaya (meskipun bukan untuk selera semua orang).

Mari kita lihat beberapa contoh yang baru saja saya temukan dan lihat apakah kita bisa menarik inspirasi dari mereka.

Anda tidak akan terkejut melihat Spotify dalam daftar ini.Grafis mereka selama enam bulan terakhir telah diisi dengan gambar duotone dan kaya gradien, diakhiri dengan fitur Year in Music mereka.

Dikombinasikan dengan tipe yang kuat, merek visual Spotify tidak hanya menyentuh bahu Anda saat ini, namun juga menahan kepala Anda melawan amp dan menaikkan volumenya.

Atomic menggunakan pendekatan serupa dengan retrospektif terbaru mereka pada artikel desain tahun 2015.

Di sini, ungu dan fuchsia (miring pada 45 derajat) memberikan kedalaman isometrik yang indah dan membuat tontonan nyata dari halaman.

realfuturefair.com menggunakan rentang warna yang sama spektakulernya, lagi pada sudut diagonal, dengan grafik gelombang yang dihasilkan <canvas>:

Rekan sejawat saya Jeffrey Way telah horisontal, menggunakan ungu halus ke nila pada laracasts.com:

Comment menggunakan estetika yang kurang retro, bukannya memilih untuk menempatkan gambar gradien semi-buram di atas latar belakang halaman utama:

Ini bisa dilakukan dengan lebih banyak lagi–gambar ekstra menambahkan permintaan http dan 75 kb ke halaman lainnya–tapi ini adalah efek yang bergaya.

Gradien dan Border

Konferensi web Web Afternoon menggunakan gradien biru-ke-ungu berulang di halaman mereka, yang sangat efektif sebagai border dari tombol:

Arahkan kursor ke atas tautan dan keseluruhan latar belakang mengadopsi gradiennya.Jadi bagaimana ini dilakukan? Setelah beberapa gaya dasar, border dari tombol diberi gradien linier dengan properti border-image. Ini secara efektif memungkinkan kita untuk membuang gambar di border, alih-alih mengandalkan stroke normal, meskipun Anda dapat menyatakan properti border standar terlebih dahulu agar tidak jatuh jika border-image tidak didukung.

Anda kemudian akan melihat bahwa properti border-image diikuti oleh border-image-slice: 1 ;.Ini menentukan di mana gambar latar belakang diiris, agar bisa berskala dengan elemen. Nilai 1 mengambil piksel pertama di sepanjang kiri, atas, kanan, dan bagian bawah "gambar" gradien kita, dan memetakan irisan tersebut ke delapan wilayah border. Baca lebih lanjut tentang mengiris di MDN.

Kemudian, untuk status hover, gradien yang sama diaplikasikan pada mengisi latar belakang. Ini dia beraksi:

Mengkasarkan

Sejauh ini kita telah membahas gradien halus; dua warna atau lebih mengalir satu sama lain sepanjang transisi yang sempurna. CSS membuat proses ini relatif sederhana dan mudah dipelihara saat ini. Tapi gradien juga bisa diberi karakter dalam bentuk tekstur:

Pada worldseasiestdecision.org tekstur gambar kasar ini digunakan untuk memberi gradien lebih banyak kepribadian. Pekerjaan yang bagus.

www.viens-la.com juga menggunakan gambar (berlawanan dengan CSS) untuk memungkinkan gradien mereka sedikit kepribadian:

Gradien serupa dapat dilihat berulang-ulang dalam rincian di seluruh situs mereka:

Mengetik

Gradien tidak hanya terbatas pada latar belakang dan border, mereka juga dapat menambahkan unsur yang menarik untuk tipografi:

Di sini Pierre Georges menggunakan gradien di latar belakang dari blok paragraf "Bonjour", lalu menggunakan properti background-clip untuk membatasi area yang dicat pada teks. -webkit-text-fill-color: transparent; lalu membuat teks yang sebenarnya transparan, sehingga gradien terlihat dari bawah.

Beginilah sintaks (webkit) terlihat:

Envato Market

Butuh inspirasi lagi? Periksa file-file ini tersedia di Envato Market:

gradiente - tumblr theme
Gradiente - Tumblr theme
RedRice - WordPress One-Page Multipurpose Theme
RedRice - WordPress One-Page Multipurpose Theme
QuickEvents Responsive Unbounce Landing Page
QuickEvents - Responsive Unbounce Landing Page
Colormuse - One Page Portfolio Muse Template
Colormuse - One Page Portfolio Muse Template
Advertisement
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.