Pengkoding Kung-fu 35 Graphics Dibina Semula Dengan CSS3
Lihat grafik di bawah, kerja Photoshop yang hebat berfungsi dengan betul? Nah, mereka dicipta oleh CSS3. Ya, mereka sepenuhnya “ditarik” oleh CSS3! Apabila kami telah melihat animasi CSS3 yang cukup kami fikir mereka semua boleh melakukan CSS3 sebagai pembunuh Flash yang berpotensi, tetapi kami salah. Pemaju mungkin tidak memuaskan hati animasi, jadi sekali lagi, mereka menolak sempadan CSS3 untuk mencabar dunia editor grafik.
Dengan catatan ini terdapat 35 grafik CSS3 yang direka dengan teliti yang termasuk juga sesuatu yang anda tidak akan berkaitan dengan CSS3 seperti Apple iPhone, watak kartun Doraemon, dan lebih banyak kejutan! Heck, sesetengah daripada mereka bahkan datang dengan tutorial terperinci yang mengajar anda bagaimana untuk mencapainya! Jadi jangan ketinggalan peluang besar untuk belajar membuat grafik menggunakan CSS3 dan sedikit HTML, mari kita dapatkan nakal dengan CSS3!
Anda amat disyorkan untuk melihat demo ini menggunakan versi terkini versi Safari atau Pembangun Google Chrome. Kebanyakan demo menyokong versi terkini Firefox dan Google Chrome, walaupun.
Ikon suapan RSS
Icon Feed RSS dibina dengan CSS3, secara eksklusif dari Hongkiat! Bersama-sama dengan pautan itu terdapat tutorial yang sebenarnya anda boleh belajar “lukis” ikon Feed RSS tanpa menggunakan walaupun satu imej. Buat keajaiban CSS3 dengan tangan anda sendiri!
Apple iMac
Ya, mataku juga tidak boleh percaya, tetapi ia adalah iMac “dipasang” semata-mata dengan CSS3.
Papan Kekunci Apple
Ia adalah Apple Keyboard yang dibina dengan CSS3! Heck, butang keyboard juga boleh ditekan.
Apple iPhone
Oh, satu perkara lagi: iPhoneCSS3.
Cherry Blossom
Cita-cita sebenar CSS3 adalah bahawa ia boleh digunakan untuk membina sesuatu termasuk tumbuhan dan haiwan!
Cawan kopi
Hari yang melelahkan? Mari kita mempunyai kopi CSS3, yang paling berkhidmat dengan Safari / Google Chrome.
Doraemon
Doraemon ini terkenal dengan ujian keserasian CSS3. Cuba di Internet Explorer 8 atau di bawah dan mempunyai hari yang baik.
Meowww!
Sekarang anda sedang melihat kucing yang dibina sepenuhnya dengan kod! Terlalu buruk CSS3 tidak dapat menjana kesan bunyi, sekurang-kurangnya sekarang.
Cendawan, Triforce, Bola poket, Kirby
“Menjadi nerd, saya telah membuat beberapa ciptaan nerdy - cendawan Mario, Triforce, Pokéball, dan Kirby. Bagi mereka yang menggunakan pelayar dinosaur, ada screenshot tentang apa yang sepatutnya kelihatan seperti itu.”
Nyan Cat
“Ia mengandungi 81 elemen DOM, 688 baris tulen CSS dan satu fungsi JavaScript untuk gelung audio. CSS saya gagal ujian CSSLint dan saya bangga dengan ini.”
Corak
CSS3 begitu hebat sehingga ia juga boleh digunakan untuk membina aset asas untuk reka bentuk web, seperti pola ini.
BonBon
BonBon adalah butang CSS3 manis yang dicipta dengan matlamat dalam minda: butang seksi, benar-benar fleksibel dengan markup paling minimum mungkin.
Ikon iOS
Hebat? Ya. Ikon ini dibina oleh sudut bulat, bayang-bayang, kecerunan, rgba, unsur-unsur pseudo, dan mengubah, dengan bantuan alat-alat tertentu seperti alat westciv dan Radius Sempadan.
Ikon Media Sosial
Tidak mustahil pemaju web tidak membina ikon media sosial jika mereka boleh membina iPhone dan Doraemon dengan CSS3. Dan mereka membina ikon-ikon ini dengan sangat baik.
Ikon Media Sosial
Satu lagi set ikon media sosial yang menunjukkan kemungkinan CSS3 dalam mewujudkan ikon boleh guna.
Peculiar
“Peculiar adalah pakej ikon percuma yang dibuat hanya dalam CSS. Ia telah dibuat untuk laman web dan aplikasi web yang bergantung pada permintaan HTTP yang lebih sedikit yang mungkin atau tidak perlu menggunakan sebarang imej sama sekali.”
Ikon GUI
84 ikon GUI mudah menggunakan hanya CSS dan HTML semantik. Ini masih dianggap sebagai “bukan pengeluaran sedia” ikon, tetapi mereka kelihatan sangat menjanjikan.
Steve Jobs
Steve Jobs bukan sahaja ikon era digital, tetapi juga pemimpin yang sangat menggalakkan HTML5.
Twitter Fail Whale
Twitter paus gagal tidak akan mengejutkan anda, kecuali di Internet Explorer 8 atau di bawah.
umbrUI
Unsur Antara Muka Pengguna dimungkinkan dengan CSS3, dan kelihatan sangat anggun!
Logo Adobe Photoshop
Penghormatan kepada Photoshop tanpa menggunakan Photoshop.
Logo Android
Android terbuat dari bentuk yang agak mudah, tetapi ia menjelaskan kelebihan CSS3: anda boleh membuat barangan mudah dan mengubahnya dengan cara yang anda mahukan dengan menggunakan hanya kod tetapi tidak Photoshop.
Logo Apple
Logo Retro Apple dibentangkan menggunakan CSS3, masih hebat seperti masa ia dicipta.
Logo Atari
Tahun lalu, siapa yang akan memikirkan logo Atari akan dicipta semula menggunakan CSS3.
Logo BP
Logo mudah boleh dibuat dengan mudah dengan CSS3. Perkara yang terbaik dengan beberapa logo yang dipamerkan di sini ada kod yang disediakan untuk anda cuba!
Logo Dribbble
Laman pameran berkuasa pengguna yang terkenal Logo Dribbble dipamerkan menggunakan CSS3.
Logo Magento
Logo Magento tidak terlalu sukar untuk digambar tetapi hasilnya kelihatan profesional.
Logo McDonald
Saya suka 'CSS3!
Twitter Burung
Perkadaran yang sempurna, tip hat kepada pencipta.
Logo Windows
Logo Windows! Terlihat sangat hebat, dan mudah dibuat!
Logo Internet Explorer
Penciptaan yang benar-benar hebat! Ia berfungsi dalam pelayar utama kecuali Internet Explorer 8 atau di bawah.
Logo Google Chrome
Saya tidak pasti anda suka logo baru Google Chrome atau tidak, tetapi logo Google Chrome CSS3 ini kelihatan hebat!
Logo Opera
Sekarang amalan untuk anda: apakah perbezaan antara sekeping CSS3 ini dan perjanjian sebenar?
Logo HTML5
HTML5 tidak boleh bersinar tanpa CSS3!
Logo Volkswagen
Kecuali skema warna, klon CSS3 ini kelihatan sama dengan yang asal.
Refleksi
Dengan ledakan logo dan grafik yang dibuat dari CSS3 tulen datang perbincangan yang sangat membahaskan mengenai kegunaan grafik yang dihasilkan oleh CSS3 dalam persekitaran pengeluaran dunia sebenar.
Secara umumnya grafik CSS3 adalah baik, tetapi ia mungkin menjengkelkan terutamanya apabila anda perlu mengubah reka bentuk atau mengubah saiz grafik itu, juga kesakitan terbesar di sini ialah teknologi belum sepenuhnya disokong oleh pelayar tertentu seperti Internet Explorer.
Apa pendapat kamu? Adakah anda akan menggunakan grafik yang dibuat dengan CSS3 di laman web anda? Adakah anda mempunyai penyelesaian untuk kelemahan semasa? Marilah kita tahu pemikiran anda, dan kongsi dengan kami jika anda hanya memanggang grafik CSS3!
Lebih banyak
Bersedia untuk melakukan sesuatu dengan CSS3? Anda datang ke tempat yang betul! Di bawah adalah panduan dan tutorial yang ditulis untuk membantu anda dengan banyak jalan anda untuk menguasai CSS3.
- CSS3: Buat Menu Navigasi Breadcrumb
- CSS3: Buat Logo Feed RSS
- CSS3: Buat Kotak Carian
- CSS3: Panduan Permulaan
- CSS3 / HTML5: Buat Halaman Web
- CSS3 / HTML5: Buat Borang Hubungan berasaskan AJAX
