Coding Kung-fu 35 Graphics Dibangun Murni Dengan CSS3
Lihat gambar di bawah, Photoshop yang luar biasa berfungsi dengan baik? Nah, mereka dibuat oleh CSS3. Ya mereka sama sekali “ditarik” oleh CSS3! Ketika kami telah melihat cukup animasi CSS3, kami pikir itu semua yang dapat dilakukan CSS3 sebagai pembunuh Flash potensial, tetapi kami salah. Pengembang mungkin tidak puas dengan kesenangan animasi, jadi sekali lagi, mereka mendorong batas-batas CSS3 untuk menantang ranah editor grafis.
Dengan posting ini hadir 35 grafik CSS3 yang dibuat dengan hati-hati yang bahkan menyertakan sesuatu yang tidak akan Anda sukai dengan CSS3 Apple iPhone, karakter kartun Doraemon, dan lebih banyak kejutan! Heck, beberapa dari mereka bahkan datang dengan tutorial rinci yang mengajarkan Anda bagaimana mencapainya! Jadi jangan lewatkan kesempatan besar untuk belajar membuat grafik menggunakan CSS3 dan sedikit HTML, mari kita menjadi nakal dengan CSS3!
Anda sangat disarankan untuk melihat demo ini menggunakan versi Safari atau versi Pengembang Google Chrome terbaru. Namun, sebagian besar demo mendukung Firefox dan Google Chrome versi terbaru.
Ikon Umpan RSS
Ikon Umpan RSS dibuat dengan CSS3, secara eksklusif dari Hongkiat! Bersamaan dengan tautan, muncul tutorial yang sebenarnya bisa Anda pelajari “seri” ikon Umpan RSS tanpa menggunakan satu gambar pun. Buat keajaiban CSS3 dengan tangan Anda sendiri!
Apple iMac
Ya mataku juga tidak percaya itu, tapi itu iMac “dirakit” murni dengan CSS3.
Keyboard Apple
Ini Keyboard Apple yang dibangun dengan CSS3! Heck, tombol-tombol keyboard bahkan bisa ditekan.
Apple iPhone
Oh, satu hal lagi: iPhoneCSS3.
bunga sakura
Kedahsyatan nyata dari CSS3 adalah bahwa ia dapat digunakan untuk membangun apa saja termasuk tanaman dan hewan!
Cangkir kopi
Hari yang melelahkan? Mari kita minum kopi CSS3, terbaik disajikan dengan Safari / Google Chrome.
Doraemon
Doraemon ini terkenal dengan pengujian kompatibilitas CSS3. Cobalah di Internet Explorer 8 atau di bawah dan semoga harimu menyenangkan.
Meowww!
Sekarang Anda sedang melihat kucing yang dibuat sepenuhnya dengan kode! Sayang sekali, CSS3 tidak dapat menghasilkan efek suara, setidaknya untuk saat ini.
Jamur, Triforce, bola Poké, Kirby
“Menjadi kutu buku, saya telah membuat beberapa kreasi kutu buku - jamur Mario, Triforce, Pokéball, dan Kirby. Bagi mereka yang menggunakan peramban dinosaurus, ada tangkapan layar seperti apa tampilannya.”
Nyan Cat
“Ini berisi 81 elemen DOM, 688 baris CSS murni dan satu fungsi JavaScript untuk pengulangan audio. CSS saya gagal tes CSSLint dan saya sangat bangga dengan ini.”
Pola
CSS3 sangat bagus sehingga juga dapat digunakan untuk membangun aset mendasar untuk desain web, seperti pola-pola ini.
BonBon
BonBon adalah tombol CSS3 yang manis yang dibuat dengan tujuan dalam pikiran: tampak seksi, tombol yang sangat fleksibel dengan markup paling minimalis mungkin.
Ikon iOS
Luar biasa? Iya nih. Ikon-ikon ini dibangun oleh sudut bundar, bayangan, gradien, rgba, elemen semu, dan mengubah, dengan bantuan alat-alat tertentu seperti alat westciv dan Border Radius.
Ikon Media Sosial
Itu tidak mungkin bagi pengembang web untuk tidak membangun ikon media sosial jika mereka dapat membangun iPhone dan Doraemon dengan CSS3. Dan mereka membangun ikon-ikon ini dengan sangat baik.
Ikon Media Sosial
Set ikon media sosial lain yang menunjukkan kemungkinan CSS3 dalam menciptakan ikon yang dapat digunakan.
Aneh
“Peculiar adalah paket ikon gratis yang dibuat hanya dalam CSS. Itu dibuat untuk situs dan aplikasi web yang bergantung pada lebih sedikit permintaan HTTP mungkin atau tidak perlu menggunakan gambar sama sekali.”
Ikon GUI
84 ikon GUI sederhana hanya menggunakan CSS dan HTML semantik. Ini masih dianggap sebagai “non-produksi siap” ikon, tetapi mereka terlihat sangat menjanjikan.
Steve Jobs
Steve Jobs tidak hanya ikon era digital, tetapi juga pemimpin yang sangat mempromosikan HTML5.
Paus Gagal Twitter
Paus gagal Twitter tidak akan gagal mengejutkan Anda, kecuali di Internet Explorer 8 atau di bawah.
umbrUI
Elemen Antarmuka Pengguna dimungkinkan dengan CSS3, dan terlihat sangat ramping!
Logo Adobe Photoshop
Penghargaan untuk Photoshop tanpa menggunakan Photoshop.
Logo Android
Android terbuat dari bentuk yang cukup sederhana, tetapi menjelaskan keunggulan CSS3: Anda dapat membuat barang-barang sederhana dan memodifikasinya dengan cara apa pun yang Anda inginkan dengan menggunakan kode yang adil tetapi tidak menggunakan Photoshop.
Logo Apple
Logo Apple Retro disajikan dengan menggunakan CSS3, masih sama mengagumkannya dengan saat itu dibuat.
Atari Logo
Bertahun-tahun sebelumnya, siapa sangka logo Atari akan dibuat ulang menggunakan CSS3.
Logo BP
Logo sederhana dapat dibuat dengan mudah dengan CSS3. Hal terbaik dari beberapa logo ini yang ditampilkan di sini adalah ada kode yang disediakan untuk Anda coba!
Logo Dribbble
Situs showcase terkenal yang diberdayakan oleh pengguna, logo Dribbble dipamerkan menggunakan CSS3.
Logo Magento
Logo Magento tidak terlalu sulit untuk digambar tetapi hasilnya terlihat profesional.
Logo McDonald
Saya mencintai CSS3!
Twitter Bird
Proporsi sempurna, ujung topi untuk pencipta.
Logo Windows
Logo Windows! Terlihat sangat mengagumkan, dan mudah dibuat!
Logo Internet Explorer
Ciptaan benar-benar hebat! Ini bekerja di browser utama kecuali Internet Explorer 8 atau lebih rendah.
Logo Google Chrome
Saya tidak yakin Anda menyukai logo baru Google Chrome atau tidak, tetapi logo Google Chrome CSS3 ini tampak luar biasa!
Logo Opera
Sekarang praktik untuk Anda: apa perbedaan antara bagian CSS3 ini dan real deal?
Logo HTML5
HTML5 tidak dapat bersinar tanpa CSS3!
Logo Volkswagen
Kecuali skema warna, klon CSS3 ini terlihat identik dengan yang asli.
Refleksi
Dengan booming logo dan grafis yang terbuat dari CSS3 murni datang diskusi yang sangat memperdebatkan tentang kegunaan grafis yang dihasilkan CSS3 di lingkungan produksi dunia nyata.
Secara umum grafik CSS3 baik-baik saja, tetapi itu mungkin mengganggu terutama ketika Anda perlu mengubah desain atau hanya mengubah ukuran grafik, juga rasa sakit terbesar di sini adalah teknologi belum sepenuhnya didukung oleh browser tertentu seperti Internet Explorer.
Apa yang kamu pikirkan? Apakah Anda akan menggunakan grafik yang dibuat dengan CSS3 di situs Anda? Apakah Anda punya solusi untuk kelemahan saat ini? Beri tahu kami pendapat Anda, dan bagikan dengan kami jika Anda baru saja membuat grafik CSS3!
Lebih
Bersedia melakukan sesuatu dengan CSS3? Anda telah datang ke tempat yang tepat! Di bawah ini adalah panduan dan tutorial yang ditulis untuk sangat membantu Anda dalam menguasai CSS3.
- CSS3: Buat Menu Navigasi Breadcrumb
- CSS3: Buat Logo Umpan RSS
- CSS3: Buat Kotak Pencarian
- CSS3: Panduan Pemula
- CSS3 / HTML5: Buat Halaman Web
- CSS3 / HTML5: Buat Formulir Kontak berbasis AJAX
