Информация!
На сайте ведутся технические работы.

Создание адаптивной эмблемы сайта + html и css

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

1. Процесс создания.
В фотошопе на основе старой эмблемы создаем новую заготовку, размеры которой превышают старую в два раза.

1Go-Zone.ru - Создание адаптивной эмблемы сайта + html и css

Применяем градиентную заливку с нужными цветами, используем эффект шума, добавляем "строчки" и текст. После отключаем розовый фон и сохраняем в png для web устройств. Дополнительно через сервис http://punypng.com оптимизируем и сжимаем заготовку.

2Go-Zone.ru - Создание адаптивной эмблемы сайта + html и css

2. Подключение и верстка
Заливаем заготовку на сервер. Старую верстку со старой заготовкой не трогаем:
<div class="logo right"><a href="/"></a></div>

Где right
.right {float:right}

А logo
.logo {
margin:0 -2px 0 0
}
.logo:hover {
opacity:0.95;
filter:alpha(opacity=95);
-moz-opacity:0.95
}
.logo a {
display:block;
width:203px;
height:60px;
background:url(../images/sp.png) no-repeat;
background-position:-1px 10px;
background-size:275px 450px
}

А вот в адаптацию подключим новую эмблему и дописываем пару строчек
@media (max-width:800px) {...}

Добавляем
.logo {
margin:0
}
.logo a {
width:169px;
background:url(../images/sp2.png) no-repeat;
background-position:-2px -7px;
background-size:210px 75px
}

За счет background-size уменьшаем новую эмблему до размера старой, тем самым повышаем качество на мобильных устройствах.
Оставьте комментарий
Укажите свое имя.
5-2=?
Twitter
Go-Zone.ru - это сетевой, развлекательный проект основанный на блогах.