Cara Buat Logo Feed RSS dengan CSS3
Logo suapan RSS adalah salah satu logo yang paling biasa digunakan dalam reka bentuk web, kerana fungsi yang dirujuknya. Anda melihat banyak tutorial untuk melukis logo suapan RSS menggunakan perisian grafik seperti Photoshop, tetapi bagaimana pula lukisan itu semata-mata menggunakan CSS3? Yeap, awak nak dengar saya :-)
Dalam kesempatan ini saya ingin menunjukkan kepada anda cara mudah untuk membuat logo suapan RSS standard dengan hanya CSS3, jadi ikut tutorial dengan langkah dan grafik yang komprehensif untuk mendapatkan logo feed CSS3 pertama anda!
Berikut adalah pratonton apa yang akan anda buat dalam satu minit. Anda juga boleh memuat turun fail sumber pada akhir tutorial.
Langkah 1
Buat fail HTML, masukkan kod berikut ke dalam fail jika kosong.
Logo Feed RSS CSS Pertama Saya - Masukkan HTML Anda Di Sini -
Langkah 2
Masukkan kod di bawah ke dalam fail HTML untuk membuat kotak suapan.
HTML untuk kotak Suapan
CSS untuk kotak Suapan
span.feed-box display: block; lebar: 200px; ketinggian: 200px; margin: 0 auto; latar belakang: # F9A004; 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 # 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 # C27C03; -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 # C27C03; -moz-border-radius: 20px; -webkit-border-radius: 20px; jejari jejari: 20px; span.feed-box * float: right; paparan: blok;
Inilah hasil yang anda akan capai:
Langkah 3
Kami akan melukis kotak lain yang terletak di dalam kotak suapan pertama, jadi letakkan kod HTML di bawah ke dalam kod HTML kotak suapan pertama. Kami juga akan menambah sempadan sebagai penghalang di sini.
HTML untuk Peti Feed yang lebih kecil
CSS untuk Kotak Suapan yang lebih kecil
span.feed-box .feed-box-in border: 4px solid # FFC563; lebar: 184px; ketinggian: 184px; margin: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; jejari jejari: 20px; / * melimpah: tersembunyi; * /
Inilah hasil yang anda akan capai:
Langkah 4
Dalam langkah ini kita akan membuat bulatan 1/4 besar. Letakkan kod HTML 1/4 bulatan besar ke dalam kod HTML kotak suapan yang lebih kecil, dan di bawah adalah kodanya:
HTML untuk 1/4 Bulatan Besar
CSS untuk 1/4 Bulatan Besar
span.feed-box .feed-box-in .feed-quarter-circle-big margin: 16px 16px 0 0; lebar: 260px; ketinggian: 260px; sempadan: pepejal 30px # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; jejari jejari: 260px;
Inilah hasil yang anda akan capai:
Langkah 5
Kami akan membuat bulatan 1/4 kecil sekarang, letakkan kod HTML di bawah kod HTML bulatan besar.
HTML untuk 1/4 Lingkaran Kecil
CSS untuk 1/4 Lingkaran Kecil
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small margin: 16px 16px 0 0; lebar: 176px; ketinggian: 176px; sempadan: 26px pepejal # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; jejari sempadan: 176px
Inilah hasil yang anda akan capai:
Langkah 6
Dalam langkah 6, lingkaran terkecil akan dibuat di dalam lingkaran kecil, jadi letakkan kod HTMLnya ke dalam kod HTML bulatan kecil.
HTML untuk Bulatan Terkecil
CSS untuk bulatan yang paling kecil
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle margin: 24px 24px 0 0; latar belakang: # FFDEA5; lebar: 70px; ketinggian: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; jejari sempadan: 70px
Inilah hasil yang anda akan capai:
Menamatkan sentuhan
Cari kod, / * melimpah: tersembunyi; * / kemudian gantikan dengan kod ini, limpahan: tersembunyi;, maka ya! Anda baru mencapai logo Feed RSS CSS3!
Bonus: Tambah Kesan Hover
Anda tidak akan mahu logo suapan RSS anda tanpa kesan hover ajaib, adakah anda? Hanya tambah gaya CSS di bawah untuk mencapainya!
CSS untuk Kesan Hover
span.feed-box: hover background: # 07C103; kotak-bayang: 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-circle-big .feed-quarter-circle -small border-color: # B9FFB7; span.feed-box: hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle background: # B9FFB7;
Pratonton dan Muat Turun
Berikut adalah pratonton logo feed CSS3 dalam pelbagai saiz dan gaya yang berbeza. Jika anda tidak dapat mencapai langkah tertentu, anda boleh memuat turun fail sumber juga.
- Preview CSS3 RSS logo (besar)
- Preview CSS3 RSS logo (sederhana)
- Preview CSS3 RSS logo (kecil)
- Preview CSS3 RSS logo (sederhana, terbalik)
- Muat turun fail sumber Logo CSS3 RSS (.zip)
Nota editor: Jawatan ini ditulis oleh Irham Kendeni untuk Hongkiat.com. Irham, juga dikenali sebagai Indaam, adalah seorang pereka web dan pemaju dari Indonesia. Dia juga suka pembangunan tema CSS dan WordPress.
