Cara Membuat Logo Umpan RSS dengan CSS3
Logo umpan RSS adalah salah satu logo yang paling umum digunakan dalam desain web, karena fungsinya yang dimaksud. Anda melihat banyak tutorial tentang menggambar logo umpan RSS menggunakan perangkat lunak grafis seperti Photoshop, tetapi bagaimana menggambarnya murni menggunakan CSS3? Ya, Anda mendengar saya :-)
Dalam kesempatan ini saya ingin menunjukkan kepada Anda cara mudah untuk membuat logo umpan RSS standar hanya dengan CSS3, jadi ikuti tutorial dengan langkah-langkah komprehensif dan grafik untuk mendapatkan logo umpan CSS3 pertama Anda!
Ini adalah pratinjau dari apa yang akan Anda buat dalam satu menit. Anda juga dapat mengunduh file sumber di akhir tutorial.
Langkah 1
Buat file HTML, masukkan kode berikut ke dalam file jika benar-benar kosong.
Logo Umpan RSS CSS3 Pertama Saya - Masukkan HTML Anda Di Sini -
Langkah 2
Masukkan kode di bawah ini ke file HTML untuk membuat kotak umpan.
Kotak HTML untuk Umpan
CSS untuk kotak Feed
span.feed-box display: block; lebar: 200px; tinggi: 200px; margin: 0 otomatis; latar belakang: # F9A004; bayangan kotak: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03; 6px 6px 0 # C27C03; -moz-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C0; -webkit-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C3; -moz-border-radius: 20px; -webkit-border-radius: 20px; batas-radius: 20px; span.feed-box * float: right; display: blok;
Ini adalah hasil yang akan Anda capai:
Langkah 3
Kami akan menggambar kotak lain yang terletak di dalam kotak umpan pertama, jadi masukkan kode HTML di bawah ini ke dalam kode HTML kotak umpan pertama. Kami juga akan menambahkan perbatasan sebagai pembatas di sini.
HTML untuk Kotak Umpan Kecil
CSS untuk Kotak Umpan Kecil
span.feed-box .feed-box-in border: 4px solid # FFC563; lebar: 184px; tinggi: 184px; margin: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; batas-radius: 20px; / * overflow: disembunyikan; * /
Ini adalah hasil yang akan Anda capai:
Langkah 4
Pada langkah ini kita akan membuat 1/4 lingkaran besar. Masukkan kode HTML 1/4 lingkaran besar ke dalam kode HTML kotak umpan yang lebih kecil, dan di bawah ini adalah kodenya:
HTML untuk 1/4 Big Circle
CSS untuk 1/4 Big Circle
span.feed-box .feed-box-in .feed-quarter-circle-big margin: 16px 16px 0 0; lebar: 260px; tinggi: 260px; perbatasan: 30px solid # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; batas-radius: 260px;
Ini adalah hasil yang akan Anda capai:
Langkah 5
Kami akan membuat 1/4 lingkaran kecil sekarang, masukkan kode HTML di bawah ke dalam kode HTML lingkaran besar itu.
HTML untuk 1/4 Lingkaran Kecil
CSS untuk 1/4 Lingkaran Kecil
span.feed-box .feed-box-in .feed-quarter-big-feed .feed-quarter-circle-small margin: 16px 16px 0 0; lebar: 176px; tinggi: 176px; perbatasan: 26px solid # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; batas-radius: 176px
Ini adalah hasil yang akan Anda capai:
Langkah 6
Pada langkah 6 lingkaran terkecil akan dibuat di dalam lingkaran kecil, jadi masukkan kode HTML-nya ke dalam kode HTML lingkaran kecil.
HTML untuk Lingkaran Terkecil
CSS untuk lingkaran terkecil
span.feed-box .feed-box-in .feed-quarter-big .feed-quarter-circle-kecil .feed-circle margin: 24px 24px 0 0; latar belakang: # FFDEA5; lebar: 70px; tinggi: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; radius batas: 70px
Ini adalah hasil yang akan Anda capai:
Sentuhan akhir
Cari kodenya, / * overflow: disembunyikan; * / lalu ganti dengan kode ini, overflow: disembunyikan;, lalu ya! Anda baru saja mencapai logo RSS Feed CSS3!
Bonus: Tambahkan Efek Arahkan
Anda tidak ingin logo umpan RSS Anda tanpa efek hover ajaib, bukan? Cukup tambahkan gaya CSS di bawah ini untuk mencapainya!
CSS untuk Efek Melayang
span.feed-box: hover background: # 07C103; box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -moz-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -webkit-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; span.feed-box: hover .feed-box-in border-color: # 58FC55; span.feed-box: hover .feed-box-in .feed-quarter-circle-big, span.feed-box: hover .feed-box-in .feed-quarter-big .feed-quarter-circle -small border-color: # B9FFB7; span.feed-box: hover .feed-box-in .feed-quarter-big .feed-quarter-circle-small .feed-circle background: # B9FFB7;
Pratinjau dan Unduhan
Berikut adalah pratinjau logo umpan CSS3 dalam berbagai ukuran dan gaya yang berbeda. Jika Anda tidak dapat mencapai langkah tertentu, Anda dapat mengunduh file sumber juga.
- Pratinjau logo RSS CSS3 (besar)
- Pratinjau logo RSS CSS3 (medium)
- Pratinjau logo RSS CSS3 (kecil)
- Pratinjau logo RSS CSS3 (sedang, terbalik)
- Unduh file sumber RSS Logo CSS3 (.zip)
Catatan Editor: Posting ini ditulis oleh Irham Kendeni untuk Hongkiat.com. Irham, juga dikenal sebagai Indaam, adalah perancang dan pengembang web dari Indonesia. Dia juga menyukai pengembangan tema CSS dan WordPress.
