CSS3 ile RSS Feed Logo Nasıl Oluşturulur?
RSS feed logosu, yönlendirdiği işlev nedeniyle web tasarımında en yaygın kullanılan logolardan biridir. Photoshop gibi bir grafik yazılımı kullanarak RSS beslemesi logosunu çizme konusunda birçok ders gördünüz, peki ya tamamen CSS3 kullanarak çizim? Yeap, beni duydun :-)
Bu fırsatta, sadece CSS3 ile standart bir RSS feed logosu oluşturmanın kolay yolunu göstermek istiyorum, bu nedenle ilk CSS3 feed logonuzu almak için kapsamlı adımlar ve grafikler içeren öğreticiyi izleyin!
İşte bir dakika içinde ne yaratacağınızın bir önizlemesi. Kaynak dosyaları eğitimin sonunda da indirebilirsiniz..
Aşama 1
Bir HTML dosyası oluşturun, tamamen boşsa, aşağıdaki kodu dosyaya ekleyin..
İlk CSS3 RSS Yayını Logom - HTML'nizi buraya ekleyin -
Adım 2
Bir besleme kutusu oluşturmak için aşağıdaki kodu HTML dosyasına ekleyin.
Feed kutusu için HTML
Feed kutusu için CSS
span.feed-box ekran: blok; en: 200px; yüksekliği: 200px; marj: 0 otomatik; background: # F9A004; kutu-gölge: 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-sınır yarıçapı: 20px; -webkit-border-radius: 20 piksel; sınır yarıçapı: 20 piksel; span.feed-box * float: right; Ekran bloğu;
Elde edeceğiniz sonuç bu:
Aşama 3
İlk feed kutusunun içinde bulunan başka bir kutu çizeceğiz, bu nedenle aşağıdaki HTML kodunu ilk feed kutusunun HTML koduna yerleştirin. Ayrıca buraya bariyer olarak sınır ekleyeceğiz..
Küçük Besleme Kutusu için HTML
Küçük Besleme Kutusu için CSS
span.feed-box .feed-box-in kenarlık: 4 piksel katı # FFC563; genişlik: 184 piksel; yükseklik: 184px; marj: 4 piksel 4 piksel 0 0; -moz-sınır yarıçapı: 20px; -webkit-border-radius: 20 piksel; sınır yarıçapı: 20 piksel; / * taşma: gizli; * /
Elde edeceğiniz sonuç bu:
4. adım
Bu adımda 1/4 büyük daire yapacağız. 1/4 büyük dairenin HTML kodunu daha küçük besleme kutusunun HTML koduna yerleştirin ve kodu aşağıdadır:
1/4 Büyük Daire için HTML
1/4 Büyük Daire için CSS
span.feed-box .feed-box-içinde .feed-quarter-circle-big marj: 16px 16px 0 0; genişlik: 260px; yükseklik: 260px; sınır: 30px katı # FFDEA5; -moz-sınır yarıçapı: 260px; -webkit-border-radius: 260 piksel; sınır yarıçapı: 260 piksel;
Elde edeceğiniz sonuç bu:
Adım 5
Şimdi 1/4 küçük çevreyi yapacağız, aşağıdaki HTML kodunu büyük dairenin HTML koduna koyacağız.
1/4 Küçük Daire için HTML
1/4 Küçük Daire için CSS
span.feed-box .feed-box-in. besleme-çeyrek-daire-büyük. besleme-çeyrek-daire-küçük marj: 16px 16px 0 0; genişlik: 176px; yükseklik: 176px; sınır: 26 piksel katı # FFDEA5; -moz-sınır yarıçapı: 176px; -webkit-border-radius: 176px; sınır yarıçapı: 176px
Elde edeceğiniz sonuç bu:
6. adım
6. adımda, en küçük daire küçük dairenin içinde oluşturulacağından HTML kodunu küçük dairenin HTML koduna yerleştirin.
En Küçük Çember İçin HTML
En Küçük Çevre İçin CSS
span.feed-box .feed-box-içinde. besleme-çeyrek-daire-büyük. besleme-çeyrek-daire-küçük. besleme-daire marj: 24px 24px 0 0; arkaplan: # FFDEA5; genişlik: 70 piksel; yükseklik: 70px; -moz-sınır yarıçapı: 70 piksel; -webkit-border-radius: 70 piksel; sınır yarıçapı: 70 piksel
Elde edeceğiniz sonuç bu:
Bitirici dokunuş
Kodu ara, / * taşma: gizli; * / sonra bu kodla değiştirin, taşma: gizli;, o zaman evet! Bir CSS3 RSS Yayını logosu elde ettiniz!
Bonus: Vurgulu Etkisi Ekleme
RSS feed logonuzu sihirli vurgulu etkisi olmadan istemezsiniz, değil mi? Ulaşmak için aşağıya CSS stilini eklemeniz yeterli!
Vurgulu Etkisi için CSS
span.feed-box: hover background: # 07C103; kutu-gölge: 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-kutu-gölge: 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: gezinip .feed-box-in border-color: # 58FC55; span.feed-box: vurgulu .feed-box-içinde .feed-quarter-circle-big, span.feed-box: vurgulu .feed-box-içinde -feed-çeyrek-daire-büyük. -küçük border-color: # B9FFB7; span.feed-box: vurgulu .feed-box-içinde .feed-çeyrek-daire-büyük .feed-çeyrek-daire-küçük .feed-daire background: # B9FFB7;
Önizlemeler ve Yüklemeler
İşte CSS3 feed logosunun farklı boyutlarda ve farklı stillerde önizlemeleri. Belirli bir adımı başaramazsanız, kaynak dosyaları da indirebilirsiniz..
- Önizleme CSS3 RSS logosu (büyük)
- Önizleme CSS3 RSS logosu (orta)
- Önizleme CSS3 RSS logosu (küçük)
- Önizleme CSS3 RSS logosu (orta, ters)
- CSS3 RSS Logo kaynak dosyalarını indirin (Zip)
Editörün Notu: Bu gönderi tarafından yazılmıştır Irham Kendeni Hongkiat.com için. Indaam olarak da bilinen Irham, Endonezya'dan bir web tasarımcısı ve geliştiricisidir. Ayrıca CSS ve WordPress tema geliştirmeyi çok seviyor.
