В данной статье мы покажем как нарисовать логотип CMS Joomla без использования картинок, использовав только CSS и HTML.
Итак, для начала нам потребуется прописать в HTML, код используя <div>, <span> и <p> элементы.
HTML код логотипа Joomla:
<div class="joomla-logo">
<!-- Рисуем 4 круга -->
<span class="green-bull bull"></span>
<span class="blue-bull bull"></span>
<span class="red-bull bull"></span>
<span class="orange-bull bull"></span>
<!-- Рисуем прямоугольник -->
<span class="green-rec rectangle"></span>
<span class="blue-rec rectangle"></span>
<span class="red-rec rectangle"></span>
<span class="orange-rec rectangle"></span>
<!-- Скрываем середину -->
<div class="middle">
<span class="green-mid"></span>
<span class="blue-mid"></span>
<span class="red-mid"></span>
<span class="orange-mid"></span>
</div>
</div>
<!-- Пишем надпись логотипа -->
<p class="logo">Joomla! <sup>TM</sup>
<br>
<span>press</span>
</p>
С HTML частью нашего логотипа мы закончили, теперь необхомино написать CSS стили для более выраженной формы логотипа и его оформления.
CSS3 код логотипа Joomla:
/******** Задаем цвета ********/
@red: #E52626;
@blue: #0D6DAB;
@orange: #FC8F30;
@green: #5AA426;
@bgLogo: #f8f8f8;
/******** Задаем размеры логотипа и его элементов *********/
@wlogo: 300px;
@hlogo: @wlogo;
@wBull: 80px;
@hBull: @wBull;
@wRec: 110px;
@hRec: 50px;
@borderRec: 30px;
@posMiddle: 95px;
@wMiddle: 110px;
@hMiddle: @wMiddle;
@SmallMiddleWidth: @wMiddle - @borderRec;
@SmallMiddleHeight: @borderRec;
/******* Примешивание классов *******/
.rad(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
.rotate(@rt){
transform:rotate(@rt);
-ms-transform:rotate(@rt);
-webkit-transform:rotate(@rt);
}
.joomla-logo{
position: relative;
width: @wlogo;
height: @hlogo;
// border:1px solid #ddd;
// background-color: @bgLogo;
margin: 50px auto 0;
box-sizing: border-box;
span{
display: inline-block;
position: absolute;
}
}
/******* Круги *******/
.bull{
width: @wBull;
height: @hBull;
.rad(@wBull);
}
.green-bull{
left: 0;
top: 0;
background-color: @green;
}
.blue-bull{
left: 0;
bottom: 0;
background-color: @blue;
}
.red-bull{
right: 0;
bottom: 0;
background-color: @red;
}
.orange-bull{
right: 0;
top: 0;
background-color: @orange;
}
/******* Прямоугольники *******/
.rectangle{
border-width: @borderRec;
border-style: solid;
width: @wRec;
height: @hRec;
.rad(500px);
}
.green-rec{
left: @hRec - 10px;
top: @wBull - 10px;
.rotate(45deg);
border-color: @green;
}
.blue-rec{
left: @hRec - 10px;
bottom: @wBull - 10px;
.rotate(-45deg);
border-color: @blue;
}
.red-rec{
right:(@hRec - 10px);
bottom: (@wBull - 10px);
.rotate(45deg);
border-color: @red;
}
.orange-rec{
right: @hRec - 10px;
top: @wBull - 10px;
.rotate(-45deg);
border-color: @orange;
}
/******* Середина логотипа *******/
.middle{
position: absolute;
background-color: @bgLogo;
.rotate(45deg);
top: @posMiddle;
left: @posMiddle;
width: @wMiddle;
height: @hMiddle;
span{
position: absolute;
}
.green-mid{
background-color: @green;
width: @SmallMiddleWidth;
height: @SmallMiddleHeight;
z-index: 10;
top: 80px;
left: -1px;
}
.blue-mid{
background-color: @blue;
width: @SmallMiddleWidth;
height: @SmallMiddleHeight;
z-index: 15;
.rotate(90deg);
bottom: 24px;
right: -25px;
}
.red-mid{
background-color: @red;
width: @SmallMiddleWidth;
height: @SmallMiddleHeight;
z-index: 20;
top: 0px;
left: 31px;
}
.orange-mid{
background-color: @orange;
width: @SmallMiddleWidth;
height: @SmallMiddleHeight;
z-index: 5;
.rotate(90deg);
top: 24px;
left: -25px;
}}
/******* Надпись логотипа *******/
p.logo{
width: @wlogo + 85;
font-size: 110px;
margin: auto;
color: #141414;
line-height: 1;
padding-bottom: 30px;
position: relative;
sup{
font-size: 12px;
margin-top: 20px;
position: absolute;
top: 0;
right: -30px;
}
span{
color: #95979A;
font-size: 40px;
float: right;
}
}
На этом собственно и все! Ниже вы можете наблюдать результат созданного логотипа с помощью HTML и CSS, без использования картинок. При желании вы легко на примере нашего логотипа можете отрисовать логотип своего сайта (естественно если он не имеет слишком сложных форм).
Логотип созданный с использованием CSS3
В чем приемущества логотипа созданного на чистом CSS коде?
Два основных и самых главных преимуществ, это:
вы используете CSS, без применения картинки что облегчает код сайта и соответственно ускоряет его загрузку.
CSS логотип вы можете растянуть абсолютно до любого размера и при этом не потеряется качество вашего логотипа
Автор идеи создания данного логотипа Hadji Kouceyla
Шрифт который используется в логотипе называется Lato и доступен бесплатно на сервисе Google Fonts - http://www.google.com/fonts/specimen/Lato
Вы когда либо хотели вместо картинки логотипа своего сайта, использовать стили чистого CSS3 кода при этом получить более лучший эффект чем от отображаемой картинки лого? Это вполне реально и легко осуществимо.
