Как да създадете RSS лого лого с CSS3
Логото на RSS емисия е едно от най-често използваните лого в уеб дизайна, поради функцията, която тя е посочила. Видяхте много уроци за рисуване на логото на RSS емисия, използвайки графичен софтуер като Photoshop, но как да го черпим изцяло с помощта на CSS3? Йеап, чу ме :-)
В тази възможност бих искал да ви покажа лесния начин да създадете стандартно лого на RSS емисия само с CSS3, така че следвайте урока с подробни стъпки и графики, за да получите първото си лого на CSS3 емисия!
Ето ви преглед на това, което ще създадете за минута. Можете също да изтеглите изходните файлове в края на урока.
Етап 1
Създайте HTML файл, вмъкнете следния код във файла, ако той е напълно празен.
Моят първи лого CSS3 RSS емисия - Поставете Вашия HTML тук -
Стъпка 2
Поставете долния код в HTML файла, за да направите поле за подаване.
HTML за поле за подаване
CSS за полето за подаване
span.feed-box дисплей: блок; ширина: 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; -моз-кутия-сянка: 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 .fed-box-in граница: 4px плътна # FFC563; ширина: 184 пиксела; височина: 184 пиксела; марж: 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 голям кръг
span.feed-box .fed-box-in .fed-quarter-circle-big margin: 16px 16px 0 0; ширина: 260px; височина: 260 пиксела; граница: 30px твърдо # FFDEA5; -moz-border-radius: 260px; - радиус на полето: 260 пиксела; граничен радиус: 260 пиксела;
Това е резултатът, който ще постигнете:
Стъпка 5
Сега ще направим 1/4 малък кръг, поставим HTML кода по-долу в HTML кода на големия кръг.
HTML за 1/4 Малък кръг
CSS за 1/4 малък кръг
span.feed-box .fed-box-in .fed-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 .fed-box-in .fed-quarter-circle-big .fed-quarter-circle-small .fed-circle margin: 24px 24px 0 0; фон: # FFDEA5; ширина: 70px; височина: 70px; -moz-border-radius: 70px; - радиус: 70 пиксела; радиус на границата: 70px
Това е резултатът, който ще постигнете:
Довършително докосване
Търсете кода, / * overflow: hidden; * / след това заменете с този код, overflow: hidden;, тогава да! Току-що постигнахте логото на CSS3 RSS Feed!
Бонус: Добавяне на ефект на навъртане
Вие няма да искате логото на вашата 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: hover .fed-box-in граничен цвят: # 58FC55; span.feed-box: hover .fed-box-in .фед-четвърт-кръг-голям, span.feed-box: hover .fed-box-in .fed-quarter-circle-голям .fed-quarter-circle -mall border-color: # B9FFB7; span.feed-box: hover .fed-box-in .fed-quarter-circle-голям .fed-quarter-circle-small .fed-circle фон: # B9FFB7;
Прегледи и файлове за изтегляне
Тук са представени визуализациите на логото на CSS3 за емисии в различни размери и различен стил. Ако не можете да постигнете определена стъпка, можете да изтеглите и изходните файлове.
- Преглед на CSS3 RSS лого (голям)
- Преглед на CSS3 RSS лого (Средно)
- Преглед на CSS3 RSS лого (Малки)
- Преглед на CSS3 RSS лого (средна, обърната)
- Изтегляне на CSS3 RSS Logo източник на файлове (.Zip)
Бележка на редактора: Тази публикация е написана от Ирхам Кендени за Hongkiat.com. Irham, известен още като Indaam, е уеб дизайнер и разработчик от Индонезия. Той също обича CSS и WordPress тема развитие.
