Poster merupakan salah satu bentuk seni yang paling umum. Anda mungkin memiliki beberapa poster di dinding saat masih kecil. Poster menggambarkan berbagai macam orang, tempat, dan peristiwa.
Mereka juga menjadi inspirasi bagi para desainer web. Penggunaan warna dan tipografi mereka merupakan bagian dari cara kita melihat dunia. Kita dapat melihat dampaknya di seluruh web.
Terlebih lagi, kita dapat menciptakan kembali dan meningkatkan pengalaman secara daring. Hal-hal menarik seperti efek 3D dan animasi membuat poster tampak hidup. Ada pula unsur interaktivitas. Hal itu dapat sama hebatnya dengan tata letak yang berani.
Kami ingin melihat bagaimana desainer menggunakan kreativitas mereka. Jadi, kami meneliti arsip CodePen untuk membuat poster yang indah. Berikut ini beberapa contoh yang menggunakan CSS, JavaScript, dan teknologi lainnya. Selamat menikmati!
Poster CSS Animasi 3D Furiosa oleh Olivier 3lanc
Bicara tentang poster yang penuh dengan kehidupan! Render 3D ini menempatkan karakter-karakter film dalam potongan gambar. Seluruh presentasi tampak seperti diorama. Semuanya didukung oleh CSS – tidak ada JavaScript yang terlihat.
Lihat Pena Poster Animasi 3D FURIOSA oleh Olivier 3lanc
Mereplikasi & Menganimasikan Poster Zürich Tonhalle oleh Jon Yablonski
Cuplikan ini adalah bagian dari proyek yang menciptakan kembali poster ikonikKeindahannya terletak pada tata letak yang minimalis dan tipografi yang berani. Garis-garis yang dianimasikan menambahkan sentuhan modern pada karya klasik ini.
Lihat Pena Balai Kota Zurich (1955) oleh Jon Yablonski
Latihan Poster Grid CSS oleh Victoria Bergquist
Kombinasi Flexbox dan CSS Grid menjadi dasar contoh ini. Variasi bentuk tampaknya hampir mustahil dilakukan tanpa alat-alat ini. Percikan warna yang disertakan menghasilkan hasil yang menarik.
Lihat Pena Latihan Poster Grid CSS 1 oleh Victoria Bergquist
Koleksi Poster Donkey Kong oleh Daniel Fontes
Berikut ini adalah penghormatan yang menyenangkan untuk masa lalu. Para gamer akan langsung mengenali rangkaian gambar dari Donkey Kong ini. Poster video game klasik ini memiliki fitur pencahayaan yang menyenangkan. Tarik rantai untuk menerangi poster favorit Anda. Poin bonus untuk efek kedipan!
Lihat Pena Donkey Kong – koleksi poster kecil oleh Daniel Fontes
Desain Poster PPL MVR CSS & SVGoleh Kristopher Van Sant
Poster band merupakan tema umum di kalangan desainer. Mungkin karena banyak dari kita yang memajangnya di dinding. Urutan animasi ini terinspirasi dari karya seni cetak. Dan ini adalah contoh lain tentang apa yang dapat dilakukan CSS.
Lihat Pena PPL MVR oleh Kristopher Van Sant
Desain Poster Gradien Duotone Grid oleh Cassie Evans
Kekuatan CSS Grid itu nyata. Posternya indah dan kompleks. Yang paling mengesankan, gayanya terdiri dari kurang dari 200 baris. Sedikit kode dan banyak imajinasi dapat menghasilkan sesuatu yang hebat.
Lihat Pena Poster Jaringan oleh Cassie Evans
Poster Grunge dengan Efek Gerakan Gelombang oleh ilithya
Siapa yang bisa menolak nuansa retro yang terpancar dari poster ini? Poster ini menggambarkan suasana tahun 1990-an – lengkap dengan hujan segitiga. Gerakkan kursor Anda untuk mengubah perspektif foto. Ini adalah pengalaman yang luar biasa, pastinya.
Lihat Pena Poster-poster Grunge oleh ilithya
Poster Digital Kebangkitan Matrix oleh Sparklingman
Seri film Matrix dikenal dengan jenis hujan yang berbeda. Poster digital ini mungkin tampak sederhana. Namun, dengan mengekliknya, pola hijau dan hitam akan berubah. Efeknya halus – tetapi sangat sesuai dengan estetika film.
Lihat Pena Kebangkitan Matrix | Poster digital Sparklingman #026 oleh Sparklingman
Pandangan Baru terhadap Bentuk Seni Klasik
Contoh-contoh di atas menggabungkan kepekaan cetak klasik dengan kemampuan daring. Ini adalah latihan menyenangkan yang melampaui apa yang tergantung di dinding Anda.
Kita mungkin menganggap poster sebagai sesuatu yang sederhana. Namun, poster juga membuka dunia kemungkinan bagi para desainer. Jadi, kita dapat mengambil inspirasi ini dan menjalankannya.
Misalnya, poster dapat membantu kita memikirkan kembali tata letak web tradisional. Elemen seperti teks vertikal dan bentuk wadah yang unik muncul dalam pikiran. Elemen-elemen tersebut dapat berfungsi sebagai landasan peluncuran ide.
Ingin melihat lebih banyak contoh seni poster online? Lihat Koleksi CodePen!
Atas
