Дизайн логотипа на CSS3

Ранее мы использовали для графического дизайна программное обеспечение, например, Photoshop для разработки логотипов и иконок. Но теперь мы можем спроектировать почти все, используя возможности CSS3. Разработка логотипов и иконок с использованием CSS увеличит скорость загрузки вашего сайта.

Сегодня обсудим, как создать логотип, используя основные свойства CSS3.

Превъю поста



В этом уроке разберем логотип ниже. Также, заметим что CSS3 свойства поддерживаются не всеми браузерами. В настоящее время все основные браузеры, такие как Chrome, Safari и Firefox поддерживают. Для лучшего результата, проверьте демо в Chrome или Safari (последних версий).

Исходник

Основные CSS3 свойства


Для разработки этого логотипа использовались два основных свойства CSS3.

1. border-radius:
Наверно вы заметили использование закругленных углов для головы, крыльев и некоторых других мест. Для закругления углов использовалось CSS3 свойство border-radius.

border-radius

Это свойство будет принимать два значения. Первое значение будет горизонтальный радиус и второе значение будет вертикальным радиусом.

2. transform:
Это CSS3 свойство будет принимать много значений, таких как наклон, поворот, перевод и т.д., но нам для наклона достаточно воспользоваться одним значением — наклон. Как вы наверно уже заметили, нижний левый и нижний правый крылья поворачиваются. Для этого использовалось свойство transform: rotate(x degrees).

transform

Разработка логотипа


Для разработки этого логотипа всюду использовался DIV контейнер и применяются некоторые CSS свойства. Для удобства разделим полный логотип на отдельные части, как голова, тело, крылья и хвост. Изображение ниже дает представление о структуре логотипа.

Структура

Проектирование головы. Для разработки головы использовались контейнеры. Ниже приводится HTML и CSS для головы. Использовалось свойство border-radius, чтобы придать голове изогнутую форму.

HTML:
<div class="head">
	<div class="ant ant_left"></div>
	<div class="ant ant_right"></div>
	<div class="lefteye"></div>
	<div class="righteye"></div>
</div>


CSS:
#logo .head{
	position: relative;
	height: 40px;
	background: #bdd73c;
	border-radius:60px 60px 0 0 / 50px 50px 0 0;
	border: 2px solid #6fb74d;
}
.head .ant{
	width: 2px;
	height: 25px;
	background: #bdd73c;
	border: 2px solid #6fb74d; 
	position: absolute;
	border-radius: 3px 3px 0 0;
	border-bottom: 2px solid #bdd73c;
}
.head .ant_left{
	top: -22px;
	left: 15px;
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
}
.head .ant_right{
	top: -22px;
	left: 73px;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	transform: rotate(30deg);
}
.lefteye, .righteye{
	position: absolute;
	background: #fff;
	border: 2px solid #6fb74d;
	width: 10px;
	height: 10px;
	top: 15px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.lefteye{
	left: 15px;
}
.righteye{
	left: 65px;
}


ниже, результат

Голова

Проектирование тела. Для проектирования тела использовался следующий HTML и CSS.

HTML:
<div class="body">
	<div class="strip brown"></div>
	<div class="strip"></div>
	<div class="strip brown"></div>
	<div class="strip"></div>
	<div class="strip brown"></div>
	<div class="strip last"></div>
</div>


CSS:
#logo .body{
	overflow: hidden;
	border: 2px solid #6fb74d;
	margin-top: 4px;
	border-radius: 0 0 60px 60px;
}
#logo .body .strip{
	height: 18px;
	background: #bdd73c;
}
#logo .body .brown{
	height: 22px;
	background: #5a4a42;
}


тело выглядеть следующим образом

тело

Проектирование крыльев. Для проектирования крыльев использовалось свойство transform: rotate().

HTML:
<div class="left_wings">
	<div class="wing1"></div>
	<div class="wing2"></div>
</div>
<div class="right_wings">
	<div class="wing1"></div>
	<div class="wing2"></div>
</div>


CSS:
.left_wings .wing1, 
.left_wings .wing2{
	width: 100px;	
	background: #e2e2e3;
	border: 2px solid #d1d0d1;
	border-radius: 16px 0 0 16px;
	position: absolute;
}
.left_wings .wing1{
	height: 35px;
	top: 48px;
	left: 0;
	z-index: -1;
	opacity: .8;
}
.left_wings .wing2{
	top: 80px;
	left: 20px;
	z-index: -1;
	opacity: .6;
	height: 25px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.right_wings .wing1, 
.right_wings .wing2{
	width: 100px;	
	background: #e2e2e3;
	border: 2px solid #d1d0d1;
	border-radius: 0 16px 16px 0;
	position: absolute;
}
.right_wings .wing1{
	height: 35px;
	top: 48px;
	left: 200px;
	z-index: -1;
	opacity: .8;
}
.right_wings .wing2{
	top: 80px;
	left: 175px;
	z-index: -1;
	opacity: .6;
	height: 25px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}


результат

крылья

Проектирование хвоста. Ниже приводится HTML и CSS для хвостовой части.

HTML:
<div class="tail">
	<div class="tail_left"></div>
	<div class="tail_right"></div>
</div>


CSS:
.tail{
	width: 16px;
	height: 40px;
	left: 143px;
	margin-top: -1px;
	position: absolute;
	background: #6fb74d;
}
.tail_left{
	width: 8px;
	height: 40px;
	background: #fff;
	float: left;
	border-top-right-radius:16px 40px;
}
.tail_right{
	width: 8px;
	height: 40px;
	background: #fff;
	float: left;
	border-top-left-radius:16px 40px;
}


наконец, результат

Хвост

Окончательный HTML и CSS



HTML:
<div id="logo_container">
<div id="logo">
	<div class="head">
	    <div class="ant ant_left"></div>
	    <div class="ant ant_right"></div>
	    <div class="lefteye"></div>
	    <div class="righteye"></div>
	</div>
	<div class="body">
	    <div class="strip brown"></div>
	    <div class="strip"></div>
	    <div class="strip brown"></div>
	    <div class="strip"></div>
	    <div class="strip brown"></div>
	    <div class="strip last"></div>
	</div>
	<div class="left_wings">
	    <div class="wing1"></div>
	    <div class="wing2"></div>
	</div>
	<div class="right_wings">
	    <div class="wing1"></div>
	    <div class="wing2"></div>
	</div>
	<div class="tail">
	    <div class="tail_left"></div>
	    <div class="tail_right"></div>
	</div>
</div>
</div>


CSS:
body{
	width: 100%;
	margin: 0;
	padding: 0;
}
#logo_container{
	width: 300px;
	height: 200px;
	margin: 0 auto;
	position: relative;
	margin-top: 100px;
}
#logo{
	width: 100px;
	margin-left: 100px;
}
#logo .head{
	position: relative;	
	height: 40px;
	background: #bdd73c;
	border-radius:60px 60px 0 0 / 50px 50px 0 0;
	border: 2px solid #6fb74d;
}
.head .ant{
	width: 2px;
	height: 25px;
	background: #bdd73c;
	border: 2px solid #6fb74d; 
	position: absolute;
	border-radius: 3px 3px 0 0;
	border-bottom: 2px solid #bdd73c;
}
.head .ant_left{
	top: -22px;
	left: 15px;
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
}
.head .ant_right{
	top: -22px;
	left: 73px;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	transform: rotate(30deg);
	}
	.lefteye, .righteye{
	position: absolute;
	background: #fff;
	border: 2px solid #6fb74d;
	width: 10px;
	height: 10px;
	top: 15px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.lefteye{
	left: 15px;
}
.righteye{
	left: 65px;
}
#logo .body{
	overflow: hidden;
	border: 2px solid #6fb74d;
	margin-top: 4px;
	border-radius: 0 0 60px 60px;
}
#logo .body .strip{
	height: 18px;
	background: #bdd73c;
}
#logo .body .brown{
	height: 22px;
	background: #5a4a42;
}
.left_wings .wing1, 
.left_wings .wing2{
	width: 100px;	
	background: #e2e2e3;
	border: 2px solid #d1d0d1;
	border-radius: 16px 0 0 16px;
	position: absolute;
}
.left_wings .wing1{
	height: 35px;
	top: 48px;
	left: 0;
	z-index: -1;
	opacity: .8;
}
.left_wings .wing2{
	top: 80px;
	left: 20px;
	z-index: -1;
	opacity: .6;
	height: 25px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.right_wings .wing1, 
.right_wings .wing2{
	width: 100px;	
	background: #e2e2e3;
	border: 2px solid #d1d0d1;
	border-radius: 0 16px 16px 0;
	position: absolute;
}
.right_wings .wing1{
	height: 35px;
	top: 48px;
	left: 200px;
	z-index: -1;
	opacity: .8;
}
.right_wings .wing2{
	top: 80px;
	left: 175px;
	z-index: -1;
	opacity: .6;
	height: 25px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.tail{
	width: 16px;
	height: 40px;
	left: 143px;
	margin-top: -1px;
	position: absolute;
	background: #6fb74d;
}
.tail_left{
	width: 8px;
	height: 40px;
	background: #fff;
	float: left;
	border-top-right-radius:16px 40px;
}
.tail_right{
	width: 8px;
	height: 40px;
	background: #fff;
	float: left;
	border-top-left-radius:16px 40px;
}


Оригинал: CSS3 Logo Design by Srinivas Tamada

Демо
Скачать
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 52
  • +20
    Разработка логотипов и иконок с использованием CSS увеличит скорость загрузки вашего сайта. ???
    Эту фразу можно сразу в хабра-юмор) На сколько увеличится загрузка сайта?
    Зачем парится и тратить время на создания логотипа в CSS3?
    • НЛО прилетело и опубликовало эту надпись здесь
      • +11
        Как урок — да, пойдет.
        Как технология разработки логотипов — довольно долго, не все логотипы легко реализуются. Да и в ИЕ8 пчела выглядит как квадратный R2D2 с крылышками
        • +4
          урок/пример

          Ага, пример того, как лучше не делать
        • +16
          image
          М?
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              SVG сейчас вроде все уважающие себя браузеры держат

              Понятно, что поделия от Microsoft сложно к ним отнести, но все-же.
              А поддержка SVG заявляется начиная только с IE9, который ставится только на новые машины с Вистой и 7.
              Так что о поддержке ведущими браузерами говорить пока рановато.

              Просто мои пять копеек.
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  Пока что PNG — самое, для этого, кросcбраузерное решение ;)
                  • 0
                    Ну, если говорить о кроссбраузерности, то для SVG есть либа Raphael. Правда, она сама по себе довольно увесистая штука…
              • +2
                Андроид SVG не держит, к сожалению.
                • 0
                  Это ж каким гиком нужно быть, чтобы делать такое.
              • 0
                Но существенно увеличит нагрузку на процессор…
              • +5
                Как пример интересно, но все таки картинкой мне кажется удобнее и кроссплатформеннее.
                • НЛО прилетело и опубликовало эту надпись здесь
                  • +2
                    Если уж пошла такая пьянка, то тельце можно с помощью градиентов и background-size раскрасить, избавившись от кучи дополнительной разметки :)
                    • 0
                      Пчиилайно-дроид получился
                      • +15
                        >> Для лучшего результата, проверьте демо в Chrome или Safari (последних версий).

                        В ФФ 9 пчела-инвалид :)

                        image
                        • +5
                          В опере вообще Опа квадратная О_о
                          • +4
                            Почему сразу инвалид? Пчела-гимнаст! Или она гопак танцует… как поглядеть
                          • +2
                            В разных браузерах разные лого.
                            • +4
                              В Firefox12 выглядит так:

                              Залез в код (правило .left_wings .wing2) и… удивился.
                                              -o-transform:rotate(45deg);
                                              -moz-transform:rotate(45deg);
                                              -ms-transform:rotate(45deg);
                                              -webkit-transform:rotate(-45deg);
                                              transform:rotate(45deg);

                              В вебките всё, как оказалось, хорошо :) А остальные пускай мучаются.
                              К слову, не надо было пихать дивы с разными классами. Можно было просто пустить и задавать при помощи псевдокласса :nth-of-type(), если вам угоден такой способ.
                              • 0
                                Прошу прощения,
                                <div></div>
                                украл парсер.
                              • 0
                                Бизнес-идея: сделать сайт-сервис «Сделай лого на CSS».
                                В котором элементы конструируются онлайн и собирается картинка.
                                (Конечно, без таких ошибок и с чёткими гарантиями работы. Для самопиара пойдёт.)
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    • +1
                                      Хм, я, возможно, предложу не самое элегантное решение, но в ваш body::after в content добавить "\A V" (перенос строки, пробел, V)
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                    • 0
                                      Одна рука и одна нога, лиса 10
                                      • +2
                                        css3_logo.html — 6 Kb
                                        css3_logo.gif — 2.2 Kb
                                        в чём выигрыш?
                                        • 0
                                          Чистый (очень сильно ужатый и без вендорных префиксов) CSS от SelenIT2 получается 1284 символа. Меньше, чем гифка.
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                          • +1
                                            Хорошая демонстрация CSS3. Но что-то мне подсказывает, что в png эта пчела будет не только быстрее грузиться, но и меньше весить.
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                              • 0
                                                Дело не в количестве эффектов. Мне понравился стиль изложения. В остальном, согласен.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                  • 0
                                                    Сам его за это очень люблю. CSS3 весьма облегчает жизнь, особенно при внесении изменений, удешевляет и ускоряет верстку. Однако, сайты на CSS3 на многих компьютерах и мобильных устройствах пока еще тормозят, особенно при скролле. Потому против применения его к логотипам. Для векторной графики есть в конце концов SVG.
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                            • +1
                                              А давайте не будем ерундой заниматься, а будем для построения векторного гипертекстового фидонета использовать SVG. Ну а CSS будем использовать для того, для чего он был придуман.
                                              • +6
                                                Cute animals made with CSS3:
                                                demos.paranoida.com/css_animals/
                                                • +2
                                                  -o-transform: rotate(-30deg);
                                                  и
                                                  -o-transform: rotate(30deg);
                                                  и для остальных движков где? :)
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                  • 0
                                                    Дизайн в первую очередь означает разработку, и только потом рисование.
                                                  • 0
                                                    Для подобных уроков-экспериментов не лучше было бы взять canvas?
                                                    • +2
                                                      То у вас только -webkit и -moz-префиксы для трансформаций, то все нормальные (-ms и -o). То у вас просто border-radius, то внезапно с -webkit и -moz-префиксами. Я понимаю, что оригинал по ссылке, но своя же голова есть, правильно?
                                                      • 0
                                                        Спасибо, подправил
                                                      • 0
                                                        Во-первых, для этих целей (векторная графика) надо использовать SVG/VML (работает даже в 6-м IE). (Кто-то написал в комментариях, не работает на андроиде — ну че, пишите Брину, никто ради маргинального браузера не будет код править).

                                                        Во-вторых, у меня есть ощущение, что CSS3 реализован в браузерах из рук вон плохо — например, на демо страницах часто Опера тормозит, а прокрутка в ней перестает быть плавной — так что, может по старинке, пээнгэшками лучше будем верстать? Впрочем, в браузерах-конкурентах, прокрутка дерганая вообще на всех страницах, что с них возьмешь.
                                                        • 0
                                                          Подправил листинги CSS приведенные в топике.
                                                          • +1
                                                            > все основные браузеры, такие как Chrome, Safari и Firefox
                                                            Спасибо, посмеялся. Ну и. да, код какой-то кривой, но за меня уже указали на это картинкой в виде пчелы-инвалида. Она теперь будет сниться мне в кошмарах.
                                                            • +1
                                                              Мне кажется, что эта статья больше не для реального использования, а для поднятия собственного рейтинга
                                                              • 0
                                                                Зашёл на статью на сайте — настойчиво перенаправляет… куда-то… Зачем так делать? Вполне можно смотреть сайт и при отключенном js, нет же, закроем сайт от всех пользователей NoScript.
                                                                Кстати, временно включил скрипты — ничего не изменилось кроме добавления кнопки «Вверх». А, ну ещё подсветка кода и кнопки соцсетей.

                                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.