RSS-hírcsatorna-logó létrehozása a CSS3-mal
Az RSS-hírcsatorna logó a webes tervezés egyik leggyakrabban használt logója, a hivatkozott funkció miatt. Számos oktatóanyagot látott az RSS-hírcsatorna-logó rajzolásával, például a Photoshop segítségével kizárólag CSS3 használatával rajzoljuk? Yeap, hallottál engem :-)
Ebben a lehetőségben szeretném bemutatni, milyen egyszerű RSS-logót lehet létrehozni a CSS3-mal, ezért kövesse az útmutatót átfogó lépésekkel és grafikákkal, hogy megkapja az első CSS3 feed-logót!
Íme egy előnézet, amit egy perc alatt hoz létre. A forrásfájlokat a bemutató végén is letöltheti.
1. lépés
Hozzon létre egy HTML fájlt, helyezze be a következő kódot a fájlba, ha teljesen üres.
Az első CSS3 RSS hírcsatorna logója - Helyezze be HTML-kódját -
2. lépés
Adja meg az alábbi kódot a HTML-fájlba, hogy egy feed-fiókot készítsen.
HTML for Feed box
CSS for Feed box
span.feed-box display: block; szélesség: 200px; magasság: 200px; margin: 0 auto; háttér: # F9A004; box-shadow: 1db 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-határ-sugár: 20px; -webkit-border-radius: 20px; határ-sugár: 20px; span.feed-box * float: right; kijelző: blokk;
Ez az eredmény, amit elérni fog:
3. lépés
Egy másik dobozt fogunk rajzolni, amely az első feed dobozban található, így az alábbi HTML kódot helyezze az első feed box HTML kódjába. Itt is korlátot fogunk hozzáadni.
HTML a kisebb adagoló dobozhoz
CSS a kisebb adagoló dobozhoz
span.feed-box .feed-box-in border: 4px szilárd # FFC563; szélesség: 184px; magasság: 184px; margó: 4px 4px 0 0; -moz-határ-sugár: 20px; -webkit-border-radius: 20px; határ-sugár: 20px; / * túlcsordulás: rejtett; * /
Ez az eredmény, amit elérni fog:
4. lépés
Ebben a lépésben 1/4 nagy kört készítünk. Helyezze az 1/4 nagy kör HTML-kódját a kisebb feed box HTML-kódjába, és az alábbi kódja:
HTML 1/4 nagy kör számára
CSS 1/4 nagy kör számára
span.feed-box .feed-box-in .feed-negyed-kör-nagy margó: 16px 16px 0 0; szélesség: 260px; magasság: 260px; határ: 30px szilárd # FFDEA5; -moz-border-sugár: 260px; -webkit-border-radius: 260px; határ-sugár: 260px;
Ez az eredmény, amit elérni fog:
5. lépés
Most az 1/4 kis kört készítjük, a HTML kódot a nagy kör HTML kódjába helyezzük.
HTML 1/4 kis kör számára
CSS 1/4 kis kör számára
span.feed-box .feed-box-in .feed-negyed-kör-nagy .adag-negyed-kör-kis margó: 16px 16px 0 0; szélesség: 176x; magasság: 176x; határ: 26px szilárd # FFDEA5; -moz-határ-sugár: 176px; -webkit-border-radius: 176px; határ-sugár: 176px
Ez az eredmény, amit elérni fog:
6. lépés
A 6. lépésben a legkisebb kör kerül kialakításra a kis körben, így helyezze a HTML kódját a kis kör HTML kódjába.
HTML a legkisebb kör számára
CSS a legkisebb kör számára
span.feed-box .feed-box-in .feed-negyed-kör-nagy .adag-negyed-kör-kis .feed-kör margin: 24px 24px 0 0; háttér: # FFDEA5; szélesség: 70px; magasság: 70px; -moz-border-sugar: 70px; -webkit-border-radius: 70px; határ-sugár: 70px
Ez az eredmény, amit elérni fog:
Érintés befejezése
Keresse meg a kódot, / * túlcsordulás: rejtett; * / majd cserélje ki ezt a kódot, túlcsordulás: rejtett;, akkor igen! Csak elérte a CSS3 RSS Feed logót!
Bónusz: Add Hover Effect
Nem akarod, hogy RSS hírcsatornád logikája varázslatos lebegő hatás nélkül legyen? Ehhez csak add hozzá az alábbi CSS stílust!
CSS for Hover Effect
span.feed-box: hover háttér: # 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-negyed-kör-nagy, span.feed-box: hover .feed-box-in .feed-negyed kör-nagy. -small border-color: # B9FFB7; span.feed-box: hover .feed-box-in .feed-negyed kör-nagy .adag-negyed-kör-kis .feed-kör háttér: # B9FFB7;
Előnézet és letöltés
Itt vannak a CSS3 feed logóinak előnézetei különböző méretű és eltérő stílusban. Ha nem érhet el bizonyos lépéseket, letöltheti a forrásfájlokat is.
- Előnézet CSS3 RSS logó (nagy)
- Előnézet CSS3 RSS logó (közepes)
- Előnézet CSS3 RSS logó (kicsi)
- Előnézet CSS3 RSS logó (közepes, fordított)
- CSS3 RSS logó forrásfájlok letöltése (.postai irányítószám)
A szerkesztő megjegyzése: Ezt a bejegyzést írta Irham Kendeni Hongkiat.com részére. Irham, más néven Indaam, webes tervező és fejlesztő Indonéziából. Ő is szereti a CSS és a WordPress téma fejlesztését.
