12 Pemandangan Lanskap Dibangun Sepenuhnya Dengan CSS & SVG

Diterbitkan: 2021-01-26

Anda dapat melakukan beberapa hal yang cukup gila dengan SVG. Pengembang dapat mengkodekan grafik ke halaman tanpa file gambar apa pun hanya dengan menggunakan fitur SVG & kanvas.

Ini mengarah ke proyek yang sangat keren seperti lanskap SVG murni yang saya kumpulkan di sini.

Semua proyek ini benar-benar gratis untuk diedit dan digunakan. Mereka bekerja pada kode SVG bersama dengan beberapa CSS & JS dasar untuk membuat animasi, distorsi, dan efek paralaks.

Teluk Hawke

Contoh lanskap teluk yang indah ini dikembangkan oleh Louis Coyle. Ini mengikuti tampilan bergaya poli yang meniru tampilan poligon yang biasanya ditemukan dalam rendering 3D.

Ini adalah efek populer dengan SVG dan JavaScript, tetapi tentu saja tidak mudah untuk dilakukan.

Louis menggunakan perpustakaan TweenMax untuk membuat animasi yang elegan baik dalam gaya maupun kode.

Jika Anda pernah ingin menggali kode SVG mentah, cuplikan ini memiliki banyak hal untuk dipelajari.

Lanskap Poli Rendah

Inilah lanskap lain yang dimodelkan setelah tampilan poli rendah.

Yang ini berasal dari pengembang Luke Reid dan menempatkan fokus yang lebih kuat pada efek 3D. Seluruh tata letaknya terasa sangat nyata, dan gradasi langit yang bertabur bintang memberikan kehidupan ke dalam desain ini.

Jika Anda melihat kode JavaScript, Anda akan melihat posisi bintang dihasilkan secara acak. Ini adalah efek keren jika Anda pernah mendesain latar belakang SVG atau gaya header pahlawan.

Animasi Pemandangan SVG

Evan Winston mengembangkan animasi khusus ini yang perlahan-lahan menurunkan semua elemen yang terlihat ke tampilan.

Ini adalah efek yang cukup keren, dan itu adalah sesuatu yang bisa dibuat oleh siapa saja. Memang ini mungkin tidak begitu berguna sebagai ilustrasi latar belakang yang besar, terutama karena waktu yang dibutuhkan untuk menyelesaikan animasi.

Tetapi Anda dapat melakukan hal serupa dengan ikon SVG khusus di situs web. Ada banyak tutorial di luar sana untuk membantu Anda mendesain SVG dasar dan kemudian menganimasikannya menggunakan kode dari cuplikan di atas (juga berjalan di TweenMax).

Lanskap Laut

Untuk tampilan dasar danau, saya benar-benar menggali cuplikan SVG ini. Ini olahraga beberapa animasi halaman dasar seperti ombak di air dan awan di latar belakang.

Semua hal ini cukup mudah dilakukan dengan sedikit JavaScript. Tetapi Anda akan melihat cuplikan ini dibuat dengan css murni sehingga membuatnya lebih mengesankan!

Animasi CSS3 modern paling berguna di situs web dengan animasi UI/UX tetapi Anda juga dapat menggunakannya untuk lanskap atau ilustrasi. Itulah setengah kesenangan menjadi seorang pengembang.

Pemandangan Musim Dingin

Pemandangan musim dingin ini adalah pengingat salju putih bersih yang kita lihat setiap tahun.

Andrey Sorokin membuat animasi dasar ini hanya dengan kode SVG dan beberapa JavaScript. Animasinya bisa lambat sehingga Anda mungkin harus memberikannya waktu sebentar untuk melihat efek penuhnya.

Saya sangat terkesan dengan kualitas efek easing dan seberapa baik ini bekerja di browser.

Berdasarkan berapa banyak elemen yang dianimasikan ke tampilan, saya akan menganggap sedikit kelesuan, namun memuat sangat cepat mengingat berapa banyak yang terjadi.

Belum lagi animasi matahari yang keluar dari pohon sangat menyenangkan.

Pemandangan SVG

Kami telah melihat pertumbuhan besar dalam tren desain datar dan desain semi datar yang semuanya menggunakan warna dasar tanpa gradien.

Cuplikan ini mengikuti gaya yang sama dengan tepi keras untuk bayangan dan sudut.

Ini adalah cuplikan yang indah dan tentu saja salah satu lanskap khusus SVG yang paling mudah untuk digunakan. Bahkan jika Anda belum pernah menggunakan kode SVG sebelum cuplikan ini menawarkan banyak hal untuk dilihat dan banyak atribut SVG/XML yang dapat Anda cari di Google untuk mempelajari lebih lanjut.

Pemandangan Alam

Pengembang Amr Zakaria membuat desain datar serupa dengan lanskap ini menggunakan perahu dan pesawat animasi untuk menarik perhatian Anda.

Semuanya berjalan pada CSS murni dan bekerja dengan beberapa animasi keyframe CSS yang cukup jelas.

Semua ini dapat direplikasi untuk latar belakang halaman web jika Anda memiliki kesabaran untuk membuatnya berfungsi. Bagian terberatnya adalah menjadikan ini sepenuhnya responsif untuk layar seluler.

Lampu Paralaks

Dari semua efek paralaks di web, yang satu ini sangat mendasar. Namun itu juga cukup mengesankan karena semuanya bekerja hanya pada CSS , tidak diperlukan skrip.

Semua elemen termasuk lampu jalan dirancang dengan bentuk SVG dan efek CSS.

Jika Anda melihat sangat dekat Anda akan melihat lampu benar-benar menggunakan efek bayangan CSS untuk menciptakan cahaya yang realistis.

Animasi Dasar

Dalam lanskap SVG yang diperbarui ini, Anda akan menemukan banyak elemen khusus yang ditampilkan.

Pencipta Stef van Dijk memberikan perhatian yang cermat pada setiap animasi dengan menambahkan efek memantul dan seperti gravitasi pada setiap bagian. Misalnya, saat pegunungan terlihat, Anda akan melihat efek pantulan dari tanah.

Inilah yang Anda dapatkan ketika Anda memperhatikan detail dengan cermat dan itulah mengapa saya sangat menyukai animasi web modern.

SVG & CSS

Lihat pena ini untuk animasi latar belakang berukuran besar. Semua ini berfungsi pada SVG dan CSS murni tanpa JavaScript apa pun.

Lapisan lanskap perlahan mulai terlihat, dan semuanya memiliki animasi keyframe sendiri. Tapi begitu mereka terlihat, Anda akan melihat beberapa elemen terus bergerak (seperti matahari dan awan).

Merancang sesuatu seperti ini membutuhkan banyak waktu. Tapi itu juga akan membuat Anda benar-benar akrab dengan sintaks SVG bersama dengan dasar-dasar animasi CSS.

Rumput

Meskipun lanskap ini sangat sederhana, saya juga menganggapnya sebagai guru yang hebat untuk pembuat kode frontend baru.

Felix De Montis membangun proyek ini dari awal dengan sedikit kode SVG untuk rumput, bukit, dan pepohonan. Cukup mudah untuk mereplikasi itu dan mengubah posisi menggunakan CSS juga.

Secara keseluruhan jika Anda menyukai desain SVG sederhana, ini adalah tempat yang bagus untuk memulai. Felix juga menggunakan praprosesor KURANG jika Anda mencari sesuatu di luar CSS dasar.

Halaman Paralaks

Chris Gruber mengembangkan lanskap paralaks tak bernoda ini yang bergerak berdasarkan gerakan mouse Anda.

Namun bersamaan dengan itu ia juga menganimasikan elemen halaman tertentu seperti perahu layar dan awan latar belakang.

Ini semua membutuhkan sedikit JavaScript karena beroperasi pada kurang dari 20 baris jQuery. Semua lebih mengesankan mengingat betapa detailnya ini.