Разное

Css логотип – Логотипы на CSS

19.01.2020

Как сделать логотип в CSS?

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

Сделать логотип в CSS — одна из распространенных задач в верстке на DIV’ах. Подразумевается вставка логотипа в виде фоновой картинки для того или иного HTML-элемента. Обычно эти HTML-элементом являющийся ссылка, содержащая некий текст (название сайта, его описание и т.п.).

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

Пример: HTML-код, который будет использоваться для того, чтобы сделать логотип

<div>
  <h2>
    <a href="http://wmas.msk.ru">Название сайта</a>
  </h2>
</div>

В приведенном примере я не использовал запрет обтекания HTML-элемента logo, чтобы избежать лишних отступов в некоторых браузерах. Поэтому нам понадобится, как минимум, задать высоту HTML-элемента

header.

#header { height: 60px; }

Так как header может содержать и другие HTML-элементы, позиционируем logo по левому боку родителя. Т.к. в качестве logo мы используем HTML-тег h2, что позволяет придать вес содержащему им тексту в глазах поисковых систем, будет не лишним убрать некоторые его свойства, к примеру – отступы (margin и padding).

#header .logo {
  floar: left;
  margin: 0;
  padding: 0;
}

Т.к. HTML-элемент ссылки a не имеет свойства блока, нам придется его задать (display: block). Нахождение внутри HTML-элемента

logo позволяет не заботиться о позиционировании ссылки, но нам понадобится задать размеры области, которую будет занимать наш логотип. Используя CSS-свойство background, мы прописываем не повторяющуюся (no-repeat) и расположенную в центре (50% 50%) фоновую картинку. Это позволяет сделать область ссылки несколько больше по отношению к размерам самого логотипа и не заботиться о его центрировании. Последним, но не маловажным, штрихом станет сдвиг содержащегося в ссылке текста за пределы окна браузера, для чего мы используем CSS-свойство text-indent задающее отступ текст. Также будет не лишним задать нулевой размер шрифта, что позволит избежать некоторых проблем.

#header .logo a {
  display: block;
  width: 300px;
  height: 60px;
  background: url('logo.png') 50% 50% no-repeat;
  text-indent: -2000px;
  font-size: 0;
}

wmas.msk.ru

Логотип для сайта

Как сделать живой логотип для сайта, с объёмными буквами и без картинки, используя только HTML и CSS.

Эта мысль не давала мне покоя с тех пор, как я увидел, что малюсенькая картинка на 500 байт, грузится гораздо дольше чем портянка с HTML.

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

Это простейший вариант. Буквы естественно могут быть любые и любых размеров.

Есть идеи как сделать им округлые формы, и добавить логотипу что-то наподобие колец сириуса, или какой-то другой прибамбас.

Но это в недалёком будущем, а пока смотрим что получилось и как это сделано.

 

Код:

/* Создаём объёмный блок */
.logotip {
perspective: 1000px;
position: relative;
margin-left: 200px;
width: 70px;
height: 70px;
transform-style: preserve-3d;
}
/* Создаём 5 блоков для каждого элемента буквы */
.basis,
.basis1,
.basis2,
.basis3,
.basis4 {
display: block;

position: absolute;
border-radius: 2px;
list-style: none;
}

.basis {
top: 0px;
left: 0px;
width: 20px;
height: 70px;
}
.basis1 {
top: 20px;
left: 18px;
width: 15px;
height: 20px;
}
.basis2 {
top: 0px;
left: 31px;
width: 20px;
height: 70px;
}
.basis3 {
top: 0px;
left: 49px;
width: 15px;
height: 20px;
}
.basis4 {
top: 0px;
left: 61px;
width: 20px;
height: 70px;
}

/* Создаём элементы букв */
.front,
.front1,
.front2,
.front3,
.front4 {
transform: translateZ(10px);
background: hsl(205, 90%, 40%);
}

.back,
.back1,
.back2,
.back3,

.back4 {
transform: translateZ(-10px) rotateY(-180deg);
background: hsl(205, 90%, 40%);
}

.left,
.left2,
.left4 {
transform: translateX(-10px) rotateY(-90deg);
background: linear-gradient(hsl(205, 90%, 40%), hsl(60, 90%, 50%));
}
.right,
.right2,
.right4 {
transform: translateX(10px) rotateY(90deg);
background: linear-gradient(hsl(205, 90%, 40%), hsl(60, 90%, 50%));
}
/* Подключаем анимацию к объёмному блоку */
.rotate-y {
animation: spinY 10s infinite linear;
}
/* Анимация непрерывного вращения */
@keyframes spinY {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}

HTML


<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Один нюанс: в Firefox логотип отображается не совсем корректно. Никак не могу разобраться в чём причина. Префиксы не помогают.

Буду весьма признателен за помощь в этом вопросе.

В следующем посте будем рисовать значки меню.

Я недавно проверил один из своих сайтов с адаптивным дизайном на скорость загрузки, и был ошарашен тем, что значки меню сделанные картинками и весящие по 400 байт, грузятся по 300 мс.

Какие-то домик конвертик и карандашик, сжирают почти секунду. Попробуем их вывести кодом.

Желаю творческих успехов.

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

starper55plys.ru

Навигация и логотип CSS/HTML на одной строке — html

Во-первых, пусть используется семантический HTML.

<nav>
    <img src="logo.png">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Get in Touch</a></li>
    </ul>
</nav>

На самом деле, вы даже можете уйти с более минималистским:

<nav>
    <img src="logo.png">
    <a href="#">Home</a>
    <a href="#">Projects</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Get in Touch</a>
</nav>

Затем добавьте CSS:

.navigation-bar {
    width: 100%;  /* i'm assuming full width */
    height: 80px; /* change it to desired width */
    background-color: red; /* change to desired color */
}
.logo {
    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 50px;
    margin-right: 20px;
    margin-top: 15px;    /* if you want it vertically middle of the navbar. */
}
.navigation-bar > a {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    height: 80px;        /* if you want it to take the full height of the bar */
    line-height: 80px;    /* if you want it vertically middle of the navbar */
}

Очевидно, что фактические поля, высоты и высоты линий и т.д. Зависят от вашего дизайна.

Другие варианты — использовать таблицы или float для макета, но они, как правило, не одобряются.

И последнее, но не менее важное: надеюсь, вы вылечитесь из div-itis.

light источник поделиться

qaru.site

текст в логотипе HTML-шаблона – Zencoder

Совсем коротенькая заметка, посвященная такому приему, как помещение текста в логотип.

В чем заключается вопрос? В каждом psd-макете имеется логотип для будущего сайта. Как правило, дизайнер старается сделать его запоминающимся, неординарным. Чтобы пользователю он бросался в глаза, оставил в его мозгу память о посещенном сайте. Поэтому подобные логотипы делаются вычурными, с графикой, нестандартными шрифтами.

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

Обычно логотип сайта вырезается из psd-макета одной картинкой и вставляется в код или как фоновое изображение (предпочтительный вариант, так как логотип меняется очень редко), или же, как картинка в самом HTML-документе (такой подход на сегодняшний день не приветствуется из-за правил семантики).

Однако помимо правил семантики HTML, существует еще и такая вещь, как SEO. Без этой технологии не проживет ни один сайт на сегодняшний день, если он хочет быть известным, конечно. А если ему достаточно быть широко известным в узких кругах — тогда можно и забыть о ней.

Поэтому, при верстке HTML-шаблона вырезанную картинку-логотип верстальщик оборачивает в ссылку (ибо логотип всегда должен быть ссылкой), которую в свою очередь оборачивает в заголовок первого уровня . Тег должен быть один на всей странице, и это один из самых главных тегов для SEO — по нему поисковые машины находят сам сайт.

Но для Google, Yandex и других систем наиболее важной составляющей сайта является текст. Поэтому внутрь конструкции 

1

заголовок + ссылка + картинка
нужно вставить сам тест, который дублирует название сайта в логотипе. Например, таким образом:

Но тогда возникает небольшая проблема — текст ссылки появляется в логотипе, когда браузер отрисовывает картинку. Чтобы было понятно, о чем идет речь, привожу картинку ниже:

Некрасиво, конечно. И совсем не то, что требуется. Как же убрать эту ссылку? Выход решается одной строчкой, с помощью свойства text-indent. Тексту задаем это свойство так, чтобы спрятать его из видимой части окна браузера.

Пример кода, решающего такую задачу, показан ниже:

На этом все.

css

gearmobile.github.io

Создание логотипа Gmail с использованием CSS3

Недавно мы показывали, как создать логотип ленты новостей RSS с использованием CSS3. Нам показалось интересным создать что-то более сложное. В этом уроке мы покажем, как создать даже не один, а два варианта логотипа Gmail, используя только CSS3.

 

 

 

Логотип Gmail вариант 1 

Первый вариант логотипа простой, и его довольно легко создать. Начнем без промедления, будем действовать следующим образом. Давайте начнем с запуска редактора кода и вставим следующий HTML код, после чего сохраним файл как logo-gmail.html.

 

<html>
<head>
<title>Gmail CSS Logo</title>
<style type='text/css'>
</style>
</head>
<body>
<span>
<span>&nbsp;</span>
</span><!-- Конец .gmail-logo -->
</body>
</html>

 

Добавим следующие стили CSS между <style></style>, чтобы переназначить значения свойств CSS по умолчанию.

 

.gmail-logo,
.gmail-logo *,
.gmail-logo *:before,
.gmail-logo *:after {
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    outline:0;
    display:block;
    font:normal normal 0/0 serif;
    }

 

Следующий код CSS задаст логотипу Gmail красный фон и скругленные углы.

.gmail-logo {
    margin:110px auto;
    background:rgb(201, 44, 25);
    width:600px;
    height:400px;
    border-top:4px solid rgb(201, 44, 25);
    border-bottom:4px solid rgb(201, 44, 25);
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    }


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

.gmail-logo .gmail-box {
    overflow:hidden;
    float:left;
    width:440px;
    height:400px;
    margin:0 0 0 80px;
    background:white;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    }

Чтобы создать красную букву «M», мы сначала создадим прямоугольник с красной границей.

.gmail-logo .gmail-box:before {
    position:relative;
    content:'';
    z-index:1;
    background:white;
    float:left;
    width:320px;
    height:320px;
    border:100px solid rgb(201, 44, 25);
    margin:-310px 0 0 -40px;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    }

После этого мы продолжим прятать лишние стороны, что даст нам законченную букву «M» красного цвета.

.gmail-logo .gmail-box {
    overflow:hidden;
    }

Теперь давайте добавим две красных тонких линии по границе, чтобы это выглядело, как конверт.

.gmail-logo .gmail-box:after {
    content:'';
    float:left;
    width:360px;
    height:360px;
    border:2px solid rgb(201, 44, 25);
    margin:10px 0 0 40px;
    -o-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    }

Мы почти закончили. Давайте добавим немного градиента красному конверту.

.gmail-logo:after {
    content:'';
    position:relative;
    z-index:2;
    content:'';
    float:left;
    margin-top:-404px;
    width:600px;
    height:408px;
    display:block;
    background:
        -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
        /* rgba(255, 255, 255, 0.3) 30%, */
        rgba(255, 255, 255, 0.1) 100%);
    background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
        /* rgba(255, 255, 255, 0.2) 30%, */
        rgba(255, 255, 255, 0.1) 100%);
    background:-webkit-gradient(
        linear, left top, left bottombottom, color-stop(0%,
        rgba(255, 255, 255, 0.3)),
        /* color-stop(30%, rgba(255, 255, 255, 0.2)), */
        color-stop(100%, rgba(255, 255, 255, 0.1)));
    }

 

Последнее, но не по важности, давайте добавим другой цвет при наведении указателя мыши. Добавьте следующий HTML DOCTYPE перед <html>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Добавьте следующие стили CSS перед </style>

.gmail-logo:hover {
    background:#313131;
    border-color:#313131;
    /* cursor:pointer; */
    }
.gmail-logo:hover .gmail-box:before {
    border-color:#313131;
    }
.gmail-logo:hover .gmail-box:after {
    border-color:#313131;
    border-bottom-color:#fff;
    border-right-color:#fff;
    }

Демонстрация работы – Скачать исходный код

Логотип Gmail вариант 2 

После этого мы создадим логотип Gmail в другом положении с небольшим трехмерным эффектом. Мы начнем с основной разметки HTML.

 

<html>
<head>
<title>Gmail logo 2 </title>
<style type="text/css">
</style>
</head>
<body>
<span>
<span>&nbsp;</span>
<span>&nbsp;</span>
<span>&nbsp;</span>
<span>&nbsp;</span>
<span>&nbsp;</span>
</span>
</body>
</html>

 

Так как у этого логотипа другое положение, мы начнем с небольшого поворота и создания нужных для второго варианта логотипа слоев, которые мы назовем elements. 

#gmail-logo2 {
    margin:0 auto;
    display:block;
    width:380px;
    height:290px;
    -moz-transform:rotate(6deg);
    -webkit-transform:rotate(6deg);
    -o-transform:rotate(6deg);
    transform:rotate(6deg);
    }
#gmail-logo2 .element1 {
    display:block;
    width:380px;
    height:290px;
    }
#gmail-logo2 .element2,
#gmail-logo2 .element3,
#gmail-logo2 .element4,
#gmail-logo2 .element5  {
    float:left;
    display:block;
    width:380px;
    height:290px;
    margin:-290px 0 0 0;
    }

Зададим стили для псевдокласса .element1::before

#gmail-logo2 .element1::before {
    content:'';
    position:relative;
    margin:2px 0 0 14px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:30px;
    height:276px;
    -moz-transform:rotate(3deg);
    -webkit-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
    border-radius:22px 0 0 20px;
    -moz-border-radius:22px 0 0 20px;
    -webkit-border-radius:22px 0 0 20px;
    box-shadow:
        -1px 1px 0 rgb(109, 10, 0),
        -2px 2px 0 rgb(109, 10, 0),
        -3px 3px 0 rgb(109, 10, 0),
        -4px 4px 0 rgb(109, 10, 0),
        -5px 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    -webkit-box-shadow:
        -1px 1px 0 rgb(109, 10, 0),
        -2px 2px 0 rgb(109, 10, 0),
        -3px 3px 0 rgb(109, 10, 0),
        -4px 4px 0 rgb(109, 10, 0),
        -5px 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    -moz-box-shadow:
        -1px 1px 0 rgb(109, 10, 0),
        -2px 2px 0 rgb(109, 10, 0),
        -3px 3px 0 rgb(109, 10, 0),
        -4px 4px 0 rgb(109, 10, 0),
        -5px 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    }

Зададим стили для псевдокласса .element1::after

#gmail-logo2 .element1::after {
    content:'';
    position:relative;
    margin:40px 5px 0 0;
    float:rightright;
    display:block;
    background:rgb(201, 44, 25);
    width:30px;
    height:238px;
    -moz-transform:rotate(3deg);
    -webkit-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
    border-radius:0 18px 26px 0;
    -webkit-border-radius:0 18px 26px 0;
    -moz-border-radius:0 18px 26px 0;
    box-shadow:
        -1px 1px 0 rgb(109, 10, 0),
        -2px 2px 0 rgb(109, 10, 0),
        -3px 3px 0 rgb(109, 10, 0),
        -4px 4px 0 rgb(109, 10, 0),
        -5px 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0),
        -6px 7px 0 rgb(109, 10, 0);
    -moz-box-shadow:
        -1px 1px 0 rgb(109, 10, 0),
        -2px 2px 0 rgb(109, 10, 0),
        -3px 3px 0 rgb(109, 10, 0),
        -4px 4px 0 rgb(109, 10, 0),
        -5px 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0),
        -6px 7px 0 rgb(109, 10, 0);
    -webkit-box-shadow:
        -1px 1px 0 rgb(109, 10, 0),
        -2px 2px 0 rgb(109, 10, 0),
        -3px 3px 0 rgb(109, 10, 0),
        -4px 4px 0 rgb(109, 10, 0),
        -5px 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0),
        -6px 7px 0 rgb(109, 10, 0);
    }

Зададим стили для псевдокласса .element2::before

#gmail-logo2 .element2::before {
    content:'';
    margin:22px 0 0 48px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:315px;
    height:14px;
    -moz-transform:rotate(6.8deg);
    -webkit-transform:rotate(6.8deg);
    -o-transform:rotate(6.8deg);
    transform:rotate(6.8deg);
    box-shadow:
        0 1px 0 rgb(109, 10, 0),
        0 2px 0 rgb(109, 10, 0),
        0 3px 0 rgb(109, 10, 0),
        0 4px 0 rgb(109, 10, 0),
        0 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    -webkit-box-shadow:
        0 1px 0 rgb(109, 10, 0),
        0 2px 0 rgb(109, 10, 0),
        0 3px 0 rgb(109, 10, 0),
        0 4px 0 rgb(109, 10, 0),
        0 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    -moz-box-shadow:
        0 1px 0 rgb(109, 10, 0),
        0 2px 0 rgb(109, 10, 0),
        0 3px 0 rgb(109, 10, 0),
        0 4px 0 rgb(109, 10, 0),
        0 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    }

Зададим стили для псевдокласса .element2::after

#gmail-logo2 .element2::after {
    content:'';
    position:relative;
    margin:230px 0 0 36px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:310px;
    height:12px;
    box-shadow:
        0 1px 0 rgb(109, 10, 0),
        0 2px 0 rgb(109, 10, 0),
        0 3px 0 rgb(109, 10, 0),
        0 4px 0 rgb(109, 10, 0),
        0 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    -webkit-box-shadow:
        0 1px 0 rgb(109, 10, 0),
        0 2px 0 rgb(109, 10, 0),
        0 3px 0 rgb(109, 10, 0),
        0 4px 0 rgb(109, 10, 0),
        0 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    -moz-box-shadow:
        0 1px 0 rgb(109, 10, 0),
        0 2px 0 rgb(109, 10, 0),
        0 3px 0 rgb(109, 10, 0),
        0 4px 0 rgb(109, 10, 0),
        0 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    }

Зададим стили для псевдокласса .element3::before

 

#gmail-logo2 .element3::before {
    content:'';
    position:relative;
    margin:8px 0 0 42px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:42px;
    height:268px;
    -moz-transform:rotate(3deg);
    -webkit-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
    }


Зададим стили для псевдокласса .element3::after

#gmail-logo2 .element3::after {
    content:'';
    position:relative;
    margin:40px 32px 0 0;
    float:rightright;
    display:block;
    background:rgb(201, 44, 25);
    width:22px;
    height:236px;
    -moz-transform:rotate(3.0deg);
    -webkit-transform:rotate(3.0deg);
    -o-transform:rotate(3.0deg);
    transform:rotate(3.0deg);
    box-shadow:
        0 1px 0 rgb(109, 10, 0),
        0 2px 0 rgb(109, 10, 0),
        0 3px 0 rgb(109, 10, 0),
        0 4px 0 rgb(109, 10, 0),
        0 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    -webkit-box-shadow:
        0 1px 0 rgb(109, 10, 0),
        0 2px 0 rgb(109, 10, 0),
        0 3px 0 rgb(109, 10, 0),
        0 4px 0 rgb(109, 10, 0),
        0 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    -moz-box-shadow:
        0 1px 0 rgb(109, 10, 0),
        0 2px 0 rgb(109, 10, 0),
        0 3px 0 rgb(109, 10, 0),
        0 4px 0 rgb(109, 10, 0),
        0 5px 0 rgb(109, 10, 0),
        -6px 6px 0 rgb(109, 10, 0);
    }

Зададим стили для псевдокласса .element4::before

#gmail-logo2 .element4::before {
    content:'';
    position:relative;
    margin:-2px 0 0 130px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:54px;
    height:192px;
    -moz-transform:rotate(-49deg);
    -webkit-transform:rotate(-49deg);
    -o-transform:rotate(-49deg);
    transform:rotate(-49deg);
    box-shadow:
        -1px 0 0 rgb(109, 10, 0),
        -2px 0 0 rgb(109, 10, 0),
        -3px 0 0 rgb(109, 10, 0),
        -4px 0 0 rgb(109, 10, 0),
        -5px 0 0 rgb(109, 10, 0),
        -6px 0 0 rgb(109, 10, 0),
        -7px 0 0 rgb(109, 10, 0),
        -8px 0 0 rgb(109, 10, 0);
    -moz-box-shadow:
        -1px 0 0 rgb(109, 10, 0),
        -2px 0 0 rgb(109, 10, 0),
        -3px 0 0 rgb(109, 10, 0),
        -4px 0 0 rgb(109, 10, 0),
        -5px 0 0 rgb(109, 10, 0),
        -6px 0 0 rgb(109, 10, 0),
        -7px 0 0 rgb(109, 10, 0),
        -8px 0 0 rgb(109, 10, 0);
    -webkit-box-shadow:
        -1px 0 0 rgb(109, 10, 0),
        -2px 0 0 rgb(109, 10, 0),
        -3px 0 0 rgb(109, 10, 0),
        -4px 0 0 rgb(109, 10, 0),
        -5px 0 0 rgb(109, 10, 0),
        -6px 0 0 rgb(109, 10, 0),
        -7px 0 0 rgb(109, 10, 0),
        -8px 0 0 rgb(109, 10, 0);
    }

Зададим стили для псевдокласса .element4::after

#gmail-logo2 .element4::after {
    content:'';
    position:relative;
    margin:12px 88px 0 0;
    float:rightright;
    display:block;
    background:rgb(201, 44, 25);
    width:54px;
    height:186px;
    border-radius:30px 0 0 0;
    -webkit-border-radius:30px 0 0 0;
    -moz-border-radius:30px 0 0 0;
    -moz-transform:rotate(53deg);
    -webkit-transform:rotate(53deg);
    -o-transform:rotate(53deg);
    transform:rotate(53deg);
    }

Зададим стили для псевдокласса .element5::before

#gmail-logo2 .element5::before {
    content:'';
    position:relative;
    margin:115px 0 0 125px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:2px;
    height:150px;
    -moz-transform:rotate(55deg);
    -o-transform:rotate(55deg);
    -webkit-transform:rotate(55deg);
    transform:rotate(55deg);
    }

Зададим стили для псевдокласса .element5::after

#gmail-logo2 .element5::after {
    position:relative;
    content:'';
    margin:115px 0 0 150px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:2px;
    height:150px;
    -moz-transform:rotate(-50deg);
    -webkit-transform:rotate(-50deg);
    -o-transform:rotate(-50deg);
    transform:rotate(-50deg);
    }

Зададим приоритет z-index.

 

#gmail-logo2 .element1::before {z-index:3;}
#gmail-logo2 .element1::after {z-index:1;}
/*#gmail-logo2 .element2::before {}*/
#gmail-logo2 .element2::after {z-index:2;}
#gmail-logo2 .element3::before {z-index:5;}
#gmail-logo2 .element3::after {z-index:1;}
#gmail-logo2 .element4::before {z-index:4;}
#gmail-logo2 .element4::after {z-index:3;}
/*#gmail-logo2 .element5::before {} #gmail-logo2 .element5::after {}*/


Мы закончили! Наш логотип Gmail должен выглядеть примерно так:

Демонстрация работы – Скачать исходный код

Автор урока Irham Kendeni

Перевод — Дежурка

Смотрите также:

www.dejurka.ru

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

Благодаря своей функции логотип ленты новостей RSS — один из наиболее часто используемых логотипов в веб-дизайне. Вы, скорее всего, встречали много уроков по созданию логотипа ленты новостей RSS с помощью графических редакторов, таких как Photoshop, а как насчет нарисовать этот логотип, использую только CSS3?

 

 

В этом уроке мы покажем простой способ создания стандартного логотипа ленты новостей RSS, использую только CSS3, в деталях и с изображениями.

Вот пример того, что вы сможете создать. Вы сможете скачать исходный код в конце урока.

Шаг 1 

Создаем файл HTML, вставляем в него следующий код.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My First CSS3 RSS Feed Logo</title>
    <style type='text/css'>
        - Вставьте код CSS сюда-
    </style>
</head>
<body>
    - Вставьте код HTML сюда -
</body>
</html> 

Шаг 2 

Вставьте код ниже в HTML, чтобы создать квадратный блок фона.

HTML код для квадратного блока фона:

<span>
</span><!-- .feed-box --> 

CSS код для квадратного блока фона:

span.feed-box{
    display:block;
    width:200px;
    height:200px;
    margin:0 auto;
    background:#F9A004;
    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-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: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
span.feed-box *{
    float: rightright;
    display: block;
} 

Вот, что вы получите в результате:

Шаг 3 

Мы нарисуем еще один квадрат, расположенный внутри первого, для этого мы поместим HTML код ниже в первый HTML код для квадратного блока фона. Мы также добавим здесь рамку как границу.

HTML код для маленького внутреннего блока:

<span>
</span><!-- .feed-box-in --> 

CSS код для маленького внутреннего блока:

span.feed-box .feed-box-in{
    border: 4px solid #FFC563;
    width: 184px;
    height: 184px;
    margin: 4px 4px 0 0;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    /* overflow: hidden; */
} 

Вот, что вы получите в результате:

Шаг 4 

В этом шаге мы создадим четверть большого круга. Поместите HTML код четверти большого круга, находящийся ниже, в HTML код для маленького внутреннего блока:

HTML код для четверти большого круга:

<span>
</span><!-- .feed-quarter-circle-big --> 

CSS код для четверти большого круга:

span.feed-box .feed-box-in .feed-quarter-circle-big{
    margin: 16px 16px 0 0;
    width: 260px;
    height: 260px;
    border: 30px solid #FFDEA5;
    -moz-border-radius: 260px;
    -webkit-border-radius: 260px;
    border-radius: 260px;
} 

Вот, что вы получите в результате:

Шаг 5 

Теперь мы создадим четверть малого круга, поместите HTML код, расположенный ниже, в HTML код для большого круга:

HTML код для четверти малого круга:

<span>
</span><!-- .feed-quarter-circle-small --> 

CSS код для четверти малого круга:

span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{
    margin: 16px 16px 0 0;
    width: 176px;
    height: 176px;
    border: 26px solid #FFDEA5;
    -moz-border-radius: 176px;
    -webkit-border-radius: 176px;
    border-radius: 176px
} 

Вот, что вы получите в результате:

Шаг 6 

В шестом шаге самый маленький круг будет создан внутри малого круга, так что поместите следующий HTML код в HTML код для малого круга:

HTML код для самого маленького круга:

<span> </span><!-- .circle --> 

CSS код для самого маленького круга:

span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{
    margin: 24px 24px 0 0;
    background: #FFDEA5;
    width: 70px;
    height: 70px;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px
} 

Вот, что вы получите в результате:

Завершающий штрих 

Поищите в коде строку /* overflow: hidden; */  и замените ее на overflow: hidden; . И все, Вы получили логотип ленты новостей RSS.

Дополнение: добавим эффект при наведении указателя мыши 

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

CSS код для эффекта при наведении указателя мыши:

span.feed-box:hover{
    background:#07C103;
    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;
    -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-quarter-circle-big,
span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{
    border-color: #B9FFB7;
}
span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{
    background: #B9FFB7;
} 

Демонстрации работы и исходный код 

Вот демонстрации работы логотипа ленты новостей на CSS3 в разных размерах и стилях. Если Вы не можете разобраться в определенном шаге, Вы также можете скачать исходный код.

Демонстрация работы большого логотипа RSS на CSS3

Демонстрация работы среднего логотипа RSS на CSS3

Демонстрация работы малого логотипа RSS на CSS3

Демонстрация работы среднего углубленного логотипа RSS на CSS3

Скачать исходный код логотипа RSS на CSS3

Автор урока Irham Kendeni

Смотрите также:

www.dejurka.ru

Создание логотипа IBM Lotusphere с использованием CSS3

Некоторое время назад автор урока посетил страницу конференции IBM Lotusphere. Он сразу обратил внимание на красивый логотип. Хотя дизайн логотипа простой и минималистичный, он очень хорошо выглядит. Сегодня мы создадим этот логотип, используя только HTML и CSS. Основной секрет этого эффекта — использование свойств border-radius и overflow:hidden. Мы создали две версии. Первая версия использует дополнительные элементы HTML, вторая — псевдоэлементы CSS3. 

 

Посмотрите пример, чтобы увидеть, как выглядит логотип в вашем браузере. Не забывайте, при его создании не было использовано ни одного изображения. Не стесняйтесь покопаться в исходном коде, возможно, вы откроете для себя что-то новое.

Демонстрация работы – Скачать исходный код

Давайте рассмотрим подробнее, как Вы можете создать что-то подобное. Это легче, чем кажется на первый взгляд!

Сетка

Первое, что Вам нужно увидеть, — логотип нарисован в сетке. Мы использовали следующее изображение как основу, чтобы увидеть, какие формы присутствуют.

Теперь стало проще. Размер каждой ячейка сетки — 76x76px. Мы просто запишем это с помощью HTML и CSS.

HTML

<div></div>

CSS

.block { width:76px; height:76px; background-color:#fff;
    float:left; overflow:hidden; }

Как мы отметили ранее, один из основных секретов — свойство overflow:hidden. С помощью него мы можем размещать формы внутри ячеек и передвигать их внутри ячеек. Сетка так же дает нам еще одну важную возможность. Мы можем обозначать блоки по их местоположению, используя координаты X и Y. Например, мы использовали идентификатор x10y02, это 10-й столбец, второй ряд.

Формы

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

1. Круг

2. Заполненный круг

3. Точка

4. Двойной заполненный круг

Точка и двойной заполненный круг использованы только по одному разы, другие две формы — чаще. Давайте рассмотрим, как Вы можете создать эти формы!

HTML

<div>
    <div></div>
</div>
<div>
    <div></div>
</div>
<div>
    <div></div>
</div>
<div>
    <div></div>
    <div></div>
</div>

CSS

/* Общие свойства */
.circle { width:112px; height:112px;
    border-radius:50%; border-width:20px; border-style:solid; }
.fullCircle { width:152px; height:152px;
    border-radius:50%; }
.dot { width:15px; height:15px;
    border-radius:50%; }

/* Расположение */
.topRight { margin-left:-76px; }
.bottomRight { margin-left:-76px; margin-top:-76px; }
.bottomLeft { margin-top:-76px; }

/* Особые свойства */
#xy1 .circle { border-color:#8ec642; }

#xy2 .fullCircle { background-color:#ea4295; }

#xy3 .dot { background-color:#82d2f5; margin-left:45px; margin-top:45px; }
#xy4 .fullCircle { background-color:#face12; }
#xy4 .overlay { background-color:#1183ae; position:relative; top:-76px; opacity:0.6; }

Используя классы topRight, bottomRight и bottomLeft, мы можем поворачивать формы. Используя особые свойства, мы можем задать цвет элементов. Как Вы видите, круг использует свойство border, а заполненный круг — background-color. Теперь, когда Вы знаете об этом, Вы можете углубиться в код, чтобы посмотреть, как созданы другие особые ячейки!

Псевдоэлементы

Так как в этом примере использовано уже очень много элементов HTML, мы хотели уменьшить это количество, используя псевдоэлементы CSS3. Что позволит нам создать элементы :before или :after для определенного элемента. Вот оставшийся код HTML и CSS, в нем приставка «p» означает псевдо-.

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

/* Общие свойства */
.pCircle:after { content:''; display:block; width:112px; height:112px;
    border-radius:50%; border-width:20px; border-style:solid; }
.pFullCircle:after { content:''; display:block; width:152px; height:152px;
    border-radius:50%; }
.pDot:after { content:''; display:block; width:15px; height:15px;
    border-radius:50%; }

/* Расположение */
.pTopRight:after { margin-left:-76px; }
.pBottomRight:after { margin-left:-76px; margin-top:-76px; }
.pBottomLeft:after { margin-top:-76px; }

/* Особые свойства */
#pxy1:after { border-color:#8ec642; }

#pxy2:after { background-color:#ea4295; }

#pxy3:after { background-color:#82d2f5; margin-left:45px; margin-top:45px; }
#pxy4:before { content:''; display:block; width:152px; height:152px; border-radius:50%;
    margin-left:-76px; margin-top:-76px; background-color:#face12; }
#pxy4:after { content:''; display:block; width:152px; height:152px; border-radius:50%;
    margin-left:-76px; background-color:#1183ae; position:relative; top:-76px; opacity:0.6; }

Как вы видите, код HTML теперь выглядит опрятнее, а код CSS не так уж сильно изменился. Это еще один пример того, насколько полезными могут быть псевдоэлементы.

Заключение

В общем, мы считаем, что это изящный способ вывести логотип, не используя изображений. Особенно второй пример с псевдоэлементами CSS3 использует особо чистый код HTML. К сожалению, мы не смогли подобрать правильный зеленый цвет для двойного заполненного круга, используя свойство opacity и желтые и голубые цвета. Мы также считаем, что код может быть как-то оптимизирован.

Демонстрация работы – Скачать исходный код

Автор урока Marco Kuiper 

Перевод — Дежурка

Смотрите также:

www.dejurka.ru

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *