Домашня » Кодування » Як створити RSS-логотип з CSS3

    Як створити RSS-логотип з CSS3

    Ця стаття є частиною нашої "Серія навчальних посібників HTML5 / 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.