Like
Создание адаптивной эмблемы сайта + html и css
На мобильных устройствах эмблема сайта подвергалась искажению и потери качества... Решением стало использование той-же эмблемы, но размерами в два раза больше.
1. Процесс создания.
В фотошопе на основе старой эмблемы создаем новую заготовку, размеры которой превышают старую в два раза.
Применяем градиентную заливку с нужными цветами, используем эффект шума, добавляем "строчки" и текст. После отключаем розовый фон и сохраняем в png для web устройств. Дополнительно через сервис http://punypng.com оптимизируем и сжимаем заготовку.
2. Подключение и верстка
Заливаем заготовку на сервер. Старую верстку со старой заготовкой не трогаем:
Где right
А logo
А вот в адаптацию подключим новую эмблему и дописываем пару строчек
Добавляем
За счет background-size уменьшаем новую эмблему до размера старой, тем самым повышаем качество на мобильных устройствах.
1. Процесс создания.
В фотошопе на основе старой эмблемы создаем новую заготовку, размеры которой превышают старую в два раза.
1

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

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 уменьшаем новую эмблему до размера старой, тем самым повышаем качество на мобильных устройствах.