Seni CSS yang sangat praktikal

Seni CSS sentiasa terpesona saya, walaupun saya jarang mencuba sendiri. Walaupun biasa dengan banyak teknik, saya masih terkejut setiap kali saya melihat pencipta membina imej yang lancar dan indah dengan kotak yang mudah. Saya sering menggunakan alat pemaju untuk mengkaji misteri di belakangnya, tetapi saya tidak pernah menyaksikan proses kreatif.

Setiap kali kerja seni CSS mendapat perhatian, selalu ada orang yang mengulas "ini tidak praktikal" atau "hanya gunakan SVG secara langsung", dan pernyataan seperti ini adalah ruam dan membosankan. Walaupun tuntutan ini benar, ia adalah hujah yang buruk -tidak ada yang diminta untuk meneruskan kepraktisan sepanjang masa. Dalam hal ini, betapa membosankan dunia!

Pada bulan Oktober, saya mendapat penghormatan untuk menonton siaran Live Penciptaan div tunggal oleh salah satu artis CSS kegemaran saya Lynn Fisher (Twitter, Codepen). Saya pernah tersilap berfikir bahawa Div tunggal berfungsi bergantung pada bayang -bayang kotak yang sangat kompleks -hampir pendekatan seni piksel. Saya tidak pasti di mana idea ini berasal, mungkin saya melihat seseorang melakukannya beberapa tahun yang lalu. Tetapi proses kreatifnya lebih "normal" dan "praktikal" daripada yang saya harapkan: dia bijak menggunakan beberapa kecerunan latar belakang pelapisan, skala dan kedudukan.

Tunggu, saya tahu bagaimana untuk melakukannya! Bukan teknologi itu sendiri mempunyai sihir, tetapi dia keberanian untuk mengubah beberapa kecerunan ke dalam sekeping keju dengan kek di dalamnya!

Saya telah menggunakan sifat -sifat ini dalam projek pelanggan saya sebelum ini. Saya telah mencipta kecerunan, imej berlapis, saiz semula dan kedudukan untuk pelbagai kesan. Tiada yang baru, tidak rumit atau radikal. Saya tidak belajar apa -apa yang baru mengenai CSS itu sendiri. Tetapi ini sangat mengubah persepsi saya tentang apa yang dapat dicapai oleh alat -alat mudah ini.

Dalam masa beberapa minggu, saya menggunakan teknik ini untuk persekitaran pengeluaran. Sekali lagi, tidak ada yang pelik atau rumit tentang ini - ia seperti buah gantung rendah di hujung jari anda, di mana SVG adat kelihatan sedikit besar. Berikut adalah kesan yang saya buat untuk projek peribadi saya, menggunakan beberapa sifat tersuai untuk memudahkan tweak:

Minggu lalu, kami menggunakan helah yang sama dalam perpustakaan yang sangat praktikal dan rasmi komponen pelanggan. Ini adalah idea Stacy Kvernmo dan ia berfungsi dengan baik.

Terima kasih kepada Lynn, dan semua artis CSS yang berbakat! Terima kasih kerana menunjukkan kepada kita ketinggian yang kita suka dan alat "sangat serius" yang kita gunakan setiap hari dapat dicapai.

Atas ialah kandungan terperinci Seni CSS yang sangat praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!