Тематика: По цвету: Красный Желтый Зеленый Синий Оранжевый Розовый Серый Белый Черный Мульти

Ваш сайт на CMS Joomla? Добавьте его в галерею Joomfans!

Вы можете совершенно бесплатно добавить ваш веб-сайт в нашу галерею сайтов. Подробнее...

Галерея Добавить

Главная Статьи Блог Рисуем логотип CMS Joomla с помощью CSS3 стилей
Рисуем логотип CMS Joomla с помощью CSS3 стилей

Логотип CMS Joomla с помощью CSS3 стилейВы когда либо хотели вместо картинки логотипа своего сайта, использовать стили чистого CSS3 кода при этом получить более лучший эффект чем от отображаемой картинки лого? Это вполне реально и легко осуществимо.

 

В данной статье мы покажем как нарисовать логотип 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

Логотип созданный с использованием CSS3

 

В чем приемущества логотипа созданного на чистом CSS коде?

Два основных и самых главных преимуществ, это:

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

 

Автор идеи создания данного логотипа Hadji Kouceyla

Шрифт который используется в логотипе называется Lato и доступен бесплатно на сервисе Google Fonts - http://www.google.com/fonts/specimen/Lato

 

Партнеры

 

Добавить комментарий


Защитный код


Литература

8 видеоуроков по…

На днях популярная и известная студия по разработке шаблонов и…

Joomla!…

Если вы часто создаете сайты на CMS Joomla! 1.6, 1.7 или 2.5 то вы…

10 легких шагов к…

Прочитав книгу Хагена Графа «10 легких шагов к освоению Joomla! 3.0»…

Joomla! 2.5 -…

Книга «Joomla! 2.5 - Руководство для начинающего пользователя»…

Инструменты

Akeeba SiteDiff

При создании сайта, всегда есть вероятность того что он будет взломан…

Morph Framework

Последняя обновленная и уже совершенно бесплатная версия фреймворка…

CodeLobster PHP…

Очень мощный и многофункциональный редактор РНР, HTML, CSS,…

JB Zen Grid Framework…

Последняя обновленная версия фреймворка Zen Grid от студии…