Як створити RSS-логотип з CSS3
Логотип RSS-каналу є одним з найбільш часто використовуваних логотипів у веб-дизайні, завдяки функції, на яку він посилався. Ви бачили багато підручників з малювання логотипу RSS-каналу, використовуючи графічне програмне забезпечення, таке як Photoshop, але як малювати його чисто за допомогою CSS3? Єап, ти мене почув :-)
У цій можливості я хотів би показати вам простий спосіб створити стандартний логотип RSS-каналу лише за допомогою CSS3, тому дотримуйтесь посібника з усіма кроками та графікою, щоб отримати свій перший логотип CSS3!
Ось попередній перегляд того, що ви будете створювати за хвилину. Ви також можете завантажити вихідні файли в кінці навчального посібника.
Крок 1
Створіть файл HTML, вставте наступний код у файл, якщо він повністю порожній.
Мій перший логотип RSS CSS3 - Вставте ваш HTML тут -
Крок 2
Вставте код нижче у файл HTML, щоб створити вікно каналу.
HTML для вікна Feed
CSS для вікна Feed
span.feed-box display: block; ширина: 200px; висота: 200px; маржа: 0 авто; фон: # F9A004; коробка-тінь: 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; -вебкіт-кордон-радіус: 20px; кордон-радіус: 20px; span.feed-box * float: right; дисплей: блок;
Це результат, якого ви досягнете:
Крок 3
Ми будемо малювати іншу коробку, яка знаходиться всередині першого вікна каналу, тому покладіть HTML-код нижче у HTML-код першого вікна каналу. Ми також додамо кордон як бар'єр тут.
HTML для меншого вікна
CSS для меншого каналу подавання
span.feed-box .feed-box-in межа: 4px твердий # FFC563; ширина: 184px; висота: 184px; маржа: 4px 4px 0 0; -moz-border-radius: 20px; -вебкіт-кордон-радіус: 20px; кордон-радіус: 20px; / * overflow: hidden; * /
Це результат, якого ви досягнете:
Крок 4
На цьому етапі ми зробимо 1/4 велике коло. Введіть HTML-код 1/4 великого кола в HTML-код меншого вікна, а нижче - його код:
HTML для 1/4 великого кола
CSS для 1/4 Big Circle
span.feed-box .feed-box-in .feed-quarter-circle-big margin: 16px 16px 0 0; ширина: 260px; висота: 260px; кордон: 30px твердий # FFDEA5; -moz-border-radius: 260px; -вібок-кордон-радіус: 260px; кордон-радіус: 260px;
Це результат, якого ви досягнете:
Крок 5
Тепер ми зробимо 1/4 мале коло, поставимо HTML-код нижче у HTML-коді великого кола.
HTML для 1/4 малого кола
CSS для 1/4 малого кола
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small margin: 16px 16px 0 0; ширина: 176px; висота: 176px; кордон: 26px суцільний # FFDEA5; -moz-border-radius: 176px; -вібкіт-кордон-радіус: 176px; кордон-радіус: 176px
Це результат, якого ви досягнете:
Крок 6
На кроці 6 у маленькому колі буде створено найменше коло, тому введіть його HTML-код у HTML-код малого кола.
HTML для найменшого кола
CSS для найменшого кола
span.feed-box .feed-box-in .feed-quarter-large .feed-circle-small .feed-circle margin: 24px 24px 0 0; фон: # FFDEA5; ширина: 70px; висота: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; кордон-радіус: 70px
Це результат, якого ви досягнете:
Оздоблення Touch
Шукайте код, / * overflow: hidden; * / потім замінити цим кодом, переповнення: приховано;, тоді так! Ви тільки що отримали логотип RSS-каналу CSS3!
Бонус: Додати ефект наведення
Ви не хочете, щоб ваш логотип RSS-каналу не мав ефекту магічного наведення, чи не так? Просто додайте стиль CSS нижче, щоб досягти його!
CSS для ефекту Hover
span.feed-box: hover фон: # 07C103; коробка-тінь: 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: наведення .feed-box-in border-color: # 58FC55; span.feed-box: hover .fed-box-in .feed-quarter-circle-big, span.feed-box: наведення .fed-box-in .feed-quarter-circle-big .feed-quarter-circle -mall border-color: # B9FFB7; span.feed-box: наведення .fed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle фон: # B9FFB7;
Попередній перегляд і завантаження
Ось попередній перегляд логотипу каналу CSS3 у різному розмірі та іншому стилі. Якщо ви не можете досягти певного кроку, ви також можете завантажити вихідні файли.
- Попередній перегляд логотипу CSS3 RSS (великий)
- Попередній перегляд логотипу CSS3 RSS (середній)
- Попередній перегляд логотипу CSS3 RSS (малий)
- Попередній перегляд логотипу CSS3 RSS (середній, інвертований)
- Завантажити вихідні файли CSS3 RSS Logo (.zip)
Примітка редактора: Цей пост написано Ірхем Кендені для Hongkiat.com. Irham, також відомий як Indaam, є веб-дизайнером і розробником з Індонезії. Він також любить розробку теми CSS і WordPress.
