Как создать RSS-канал с логотипом CSS3
Логотип RSS-канала является одним из наиболее часто используемых логотипов в веб-дизайне благодаря функции, на которую он ссылается. Вы видели много уроков по рисованию логотипа канала RSS с использованием графического программного обеспечения, такого как Photoshop, но как насчет рисуя это чисто используя CSS3? Ага, вы меня слышали :-)
В этой возможности я хотел бы показать вам простой способ создания стандартного логотипа RSS-канала только с помощью CSS3, поэтому следуйте руководству с подробными инструкциями и графикой, чтобы получить свой первый логотип для CSS3-канала.!
Вот предварительный просмотр того, что вы будете создавать через минуту. Вы также можете скачать исходные файлы в конце урока.
Шаг 1
Создайте файл HTML, вставьте следующий код в файл, если он полностью пуст.
Мой первый CSS3 RSS Feed Logo - Вставьте свой HTML здесь -
Шаг 2
Вставьте приведенный ниже код в HTML-файл, чтобы сделать окно подачи.
HTML для фида
CSS для фида
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: 20 пикселей; -webkit-border-radius: 20 пикселей; радиус границы: 20 пикселей; span.feed-box * float: right; дисплей: блок;
Это результат, которого вы достигнете:
Шаг 3
Мы будем рисовать еще один блок, который находится внутри первого блока канала, поэтому поместите приведенный ниже HTML-код в код HTML первого блока канала. Мы также добавим границу в качестве барьера здесь.
HTML для меньшего блока подачи
CSS для меньшего окна подачи
span.feed-box .feed-box-in border: 4px solid # FFC563; ширина: 184 пикселей; высота: 184 пикселей; поле: 4px 4px 0 0; -moz-border-radius: 20 пикселей; -webkit-border-radius: 20 пикселей; радиус границы: 20 пикселей; / * переполнение: скрыто; * /
Это результат, которого вы достигнете:
Шаг 4
На этом шаге мы сделаем 1/4 большого круга. Поместите HTML-код большого круга 1/4 в HTML-код меньшего блока подачи, и ниже приведен его код:
HTML для 1/4 Большого круга
CSS для 1/4 Big Circle
span.feed-box .feed-box-in .feed-четверть-круг-большой margin: 16px 16px 0 0; ширина: 260 пикселей; высота: 260 пикселей; рамка: 30px solid # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; радиус границы: 260 пикселей;
Это результат, которого вы достигнете:
Шаг 5
Теперь мы сделаем 1/4 маленького круга, поместите приведенный ниже HTML-код в HTML-код большого круга..
HTML для 1/4 малого круга
CSS для 1/4 малого круга
span.feed-box .feed-box-in .feed-четверть-круг-большой .feed-четверть-круг-маленький margin: 16px 16px 0 0; ширина: 176 пикселей; высота: 176 пикселей; граница: 26px solid # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; border-radius: 176px
Это результат, которого вы достигнете:
Шаг 6
На шаге 6 наименьший круг будет создан внутри маленького круга, поэтому поместите его HTML-код в HTML-код малого круга.
HTML для самого маленького круга
CSS для наименьшего круга
span.feed-box .feed-box-in .feed-четверть-круг-большой .feed-четверть-круг-маленький .feed-circle margin: 24px 24px 0 0; фон: # FFDEA5; ширина: 70 пикселей; высота: 70 пикселей; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px
Это результат, которого вы достигнете:
Завершающий штрих
Поиск по коду, / * переполнение: скрыто; * / затем заменить на этот код, переполнение: скрытое;, тогда да! Вы только что получили логотип RSS-ленты CSS3!
Бонус: добавить эффект наведения
Вы не хотите, чтобы ваш RSS-канал без эффекта волшебного наведения, не так ли? Просто добавьте стиль CSS ниже, чтобы добиться этого!
CSS для эффекта наведения
span.feed-box: hover background: # 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: hover .feed-box-in border-color: # 58FC55; span.feed-box: hover .feed-box-in .feed-четверть-круг-большой, span.feed-box: hover .feed-box-in .feed-четверть-круг-большой .feed-четверть-круг -small border-color: # B9FFB7; span.feed-box: hover .feed-box-in .feed-четверть-круг-большой .feed-четверть-круг-маленький .feed-circle background: # B9FFB7;
Предварительные просмотры и загрузки
Вот предварительные просмотры логотипа подачи CSS3 в различных размерах и другом стиле. Если вы не можете выполнить определенный шаг, вы также можете скачать исходные файлы.
- Предварительный просмотр CSS3 RSS логотип (Большой)
- Предварительный просмотр CSS3 RSS логотип (Средняя)
- Предварительный просмотр CSS3 RSS логотип (маленький)
- Предварительный просмотр CSS3 RSS логотип (средний, перевернутый)
- Скачать исходные файлы CSS3 RSS Logo (ZIP)
Примечание редактора: Этот пост написан Ирхам Кендени для Hongkiat.com. Irham, также известный как Indaam, является веб-дизайнером и разработчиком из Индонезии. Он также любит разработку тем CSS и WordPress..
