Isi
- 01. Kamp Beerc
- 02. Menara Ejaan
- 03. Lab Iri hati
- 04. Barang Baik
- 05. Booth Mammoth
- 06. Dapat Diposting
- 07. Angkat Interaktif
- 08. Mengesankan Seekor Penguin
- 09. Microsoft
- 10. Barang & Omong kosong
- 11. Palu
- 12. Mitra Lab
- 13. Selalu Kreatif
- 14. Chartbeat
- 15. OPower UX
- 16. Konferensi Lingkaran
- 17. Dua Boneka Kertas
- 18. Jukely
- 19. Stasiun Empat
- 20. United Pixelworkers
- Suka ini? Baca ini!
2012 telah menjadi tahun yang mengesankan untuk penggunaan CSS yang unik dan mengejutkan! Memilih daftar penggunaan CSS terbaik untuk tahun ini merupakan tantangan berat karena CSS mencakup segala hal mulai dari kueri media dan jenis web hingga animasi dan 3D. Anda tidak dapat benar-benar membuat banyak situs web tanpa CSS! Saya telah memilih daftar yang menonjol dari tahun lalu di semua cara CSS dapat menunjukkan wajahnya.
Tidak mungkin membandingkan penggunaan jenis web dengan CSS 3D mutakhir satu per satu, jadi saya menyajikan pilihan ini tanpa urutan tertentu. Apakah saya melewatkan beberapa? Tambahkan mereka di komentar di bawah. Tidak ada alasan daftar ini harus berhenti di 20, ini adalah internet besar yang besar di luar sana!
01. Kamp Beerc
Saya belum pernah ke Beercamp, tapi saya tahu mereka selalu memiliki situs yang berkesan berkat orang-orang di nclud. Situs tahun ini menampilkan buku pop-up interaktif yang diberdayakan oleh transformasi 3D CSS. Setiap ilustrasi monster mengembang dan berputar saat Anda membalik halaman.
02. Menara Ejaan
Spelltower bukan hanya game yang sangat membuat ketagihan, ia juga memiliki situs yang penuh dengan kesenangan dan kepribadian. Penggunaan animasi dan transisi yang menyenangkan membuat Anda ingin menggunakan iPhone dan menjalankan game.
03. Lab Iri hati
Salah satu slogan Envy Labs adalah "Kami menciptakan kesenangan". Korsel bergambar berputar yang didukung oleh transformasi dan transisi CSS cukup menyenangkan! Ia bahkan menskalakan dan berfungsi secara responsif yang harus menjadi sedikit tantangan. Selain itu, situs ini juga menampilkan beberapa jenis web yang dipilih dengan baik, transisi CSS saat melayang, dan bentuk yang digerakkan CSS.
04. Barang Baik
Fine Goods, oleh Rogie King, adalah pasar barang butik yang bertujuan untuk memberikan ikon berkualitas, sumber daya, dan lainnya kepada desainer. Situs menyenangkan ini menggunakan kumpulan properti CSS untuk membuat desain khusus ini. Label harga berisi teks HTML, diputar dengan transformasi dan animasi pada panel navigasi penuh dengan kepribadian dan bahkan sedikit mengejutkan Anda.
05. Booth Mammoth
Photo Booth sangat menyenangkan, jadi situs untuk Photo Booth juga harus begitu! Orang-orang di MammothReach memakainya dengan situs untuk Mammoth Booth yang mencerminkan tentang pengalaman booth foto. Animasi halus menambahkan beberapa pukulan pada ilustrasi sementara transformasi dan bayangan kotak digunakan untuk memberikan foto dalam jumlah yang tepat dari nuansa foto asli.
06. Dapat Diposting
Situs Postable, yang dikembangkan oleh Kevin Kneifel, memiliki banyak kepribadian untuk aplikasi web. Ilustrasi yang menyenangkan dan berguna dikombinasikan dengan hover dan transisi yang cerdik membuat situs tetap menarik dan mudah diketahui. Saat kontak Anda mengisi formulir, mereka akan menggunakan kotak pilih CSS murni: “Ini melibatkan penyamaran kotak pilih pada formulir dengan div luar, menambahkan transparansi, dan penggunaan tampilan -webkit. Hasilnya adalah kotak yang terlihat bagus di semua browser dan terdegradasi dengan baik, "kata Kneifel.
07. Angkat Interaktif
Lift Interactive telah melakukan pekerjaan yang sangat baik dengan menyeimbangkan desain yang bagus dengan berbagai efek dan tetap membuatnya tetap berkelas. Situs ini penuh dengan sedikit sentuhan ekstra yang dicapai dengan transisi dan transformasi, tetapi favorit saya adalah transformasi 3D di buku. Efek yang dieksekusi dengan luar biasa yang menambahkan sentuhan kejutan.
08. Mengesankan Seekor Penguin
Penguin Press memutuskan untuk mencoba sesuatu yang berbeda untuk menemukan pengelola komunitas sehingga mereka menciptakan Impress a Penguin untuk membantu pencarian mereka. Lebih dari sekedar tayangan slide, situs ini menggunakan batas dan bayangan untuk benar-benar memberi Anda kesan bahwa mereka menjadi halaman dalam sebuah buku. Ilustrasi Penguin di setiap halaman oleh Isobel Knowles membuat pengalaman mendongeng yang luar biasa.
09. Microsoft
Paravel merancang dan membangun halaman beranda baru untuk Microsoft. Halaman ini telah banyak dibicarakan karena daya tanggapnya, tetapi perhatian terhadap detail tidak berhenti di situ. Cara transisi diatur di berbagai elemen pada halaman benar-benar menyatukan semuanya dengan cara yang dipoles.
10. Barang & Omong kosong
Sulit untuk tidak tersenyum saat Anda melihat karakter bergambar bertukar di berbagai titik melalui kueri media di tajuk yang satu ini. Ilustrasi, oleh Josh Cleland, membawa banyak kepribadian pada desain ulang terbaru untuk Stuff & Nonsense Andy Clarke ini.
11. Palu
Orang-orang dari Riot membuat situs yang dipikirkan dengan sangat baik untuk penawaran perangkat lunak terbaru mereka, Hammer. Penggunaan transisi saat hover untuk area pahlawan adalah alternatif yang menyegarkan untuk korsel. Merancangnya agar terlihat seperti yang terjadi di laptop Anda juga merupakan sentuhan yang bagus.
12. Mitra Lab
Situs untuk studio seni dan desain yang bergaya, Lab Partners, menyampaikan pesan yang kuat melalui pilihan warna dan perhatian terhadap detail. Ini menampilkan carousel atipikal dan tata letak yang dikurasi dengan baik di bagian kerja. Toko mereka menjalankan Big Cartel tetapi Anda tidak akan mengetahuinya, toko itu terintegrasi dengan sangat baik ke dalam situs dengan CSS khusus yang diterapkan di seluruh papan.
13. Selalu Kreatif
Always Creative, agensi yang berbasis di Huston, menyusun situs yang menunjukkan seberapa banyak yang dapat Anda capai dengan jumlah warna dan tipografi yang terbatas. Proxima Nova dan FF Tisa Web Pro adalah dua favorit desainer web yang sangat baik digunakan di sini. Mereka telah menambahkan sedikit hal yang tidak terduga dengan zoom pada kursor di bagian portofolionya dan juga animasi halus di header.
14. Chartbeat
Orang-orang Chartbeat menarik Anda dengan beberapa warna dan jenis yang dipilih dengan sangat baik di situs mereka untuk memulai. Kemudian, sentuhan halus animasi dan transformasi akan membuat Anda tetap tertarik saat Anda menelusuri gambaran umum produk.
15. OPower UX
Transisi poppy di halaman tim OPower UX ini menunjukkan tim dengan kepribadian. Penggunaan FF Dagny yang penuh gaya dengan berbagai bobot dan ikon sederhana melengkapi halaman yang memberi tahu Anda semua tentang tim.
16. Konferensi Lingkaran
Situs konferensi Lingkaran mencocokkan wajah dan bobot jenis web yang berbeda dengan keahlian. Tambahkan palet warna segar dan Anda akan mendapatkan situs dengan tampilan bagus yang mewujudkan semua tentang konferensi tersebut.
17. Dua Boneka Kertas
Two Paperdolls adalah studio mesin cetak dengan situs web yang elegan. Beranda menawarkan dua jalur menonjol yang ditekankan dengan menambahkan warna pada gambar saat mengarahkan kursor. Tapi mereka bukannya tanpa sisi yang menyenangkan, halaman staf menampilkan boneka kertas dengan kepala berbandul animasi. "Ini mengubah halaman staf yang statis dan membosankan menjadi bonanza kepala berbandul yang menyenangkan," kata Philip Meissner, desainer / pengembang di balik situs tersebut . Sulit untuk tidak tersenyum pada animasi yang digunakan seperti itu.
18. Jukely
Situs Jukely hanyalah halaman arahan untuk layanan yang akan datang tetapi dikemas dalam banyak kepribadian. Animasi yang digunakan untuk menyetel setiap elemen dengan lembut ke tempatnya sesuai dengan nuansa latar belakang halaman gradien. Berinteraksi dengan formulir pendaftaran penuh dengan kejutan dan kegembiraan meskipun Anda tidak tahu banyak untuk apa Anda mendaftar. Mungkin itu kejutan berikutnya.
19. Stasiun Empat
Stasiun Empat
's
halaman keahlian
memiliki desain navigasi yang menarik dengan menggunakan citra lingkaran besar sebagai penghubung ilustrasi utama. Navigasi menggunakan lapisan radius batas untuk membuat bentuk dan menambahkan beberapa animasi juga.
20. United Pixelworkers
Orang-orang United Pixelworkers sebenarnya mendesain ulang dua kali tahun ini dan versi situs saat ini pasti mengguncang. Tata letaknya sangat responsif, penggunaan tipe web yang hebat, dan desainnya menampilkan transisi bersemangat pada hover yang membuat tugas memilih kemeja tetap menyenangkan.
Catatan kaki: Beberapa teks dan kutipan yang digunakan dalam artikel ini diambil dari Galeri CSS di Majalah .net, yang ditulis oleh Jenn Lukas. Terima kasih, Jenn!
Val Head adalah seorang desainer dan konsultan yang suka melihat internet tetap sehebat mungkin. Dia menjalankan Web Design Day, menulis untuk CreativeJS dan blog di valhead.com.
Suka ini? Baca ini!
- Cara membuat aplikasi: coba tutorial hebat ini
- Perangkat lunak desain grafis gratis tersedia untuk Anda sekarang!
- Unduh font gratis terbaik
- Pemilihan font grafiti gratis
- Tutorial Illustrator: Ide Luar Biasa untuk Dicoba Hari Ini!
- Temukan apa yang selanjutnya untuk Augmented Reality
- Unduh tekstur gratis: resolusi tinggi dan siap digunakan sekarang
