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

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

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

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

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

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

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

World of Warcraft: Warlords of Draenor Cinematic


14 августа компания Blizzard выпустила новый трейлер, созданный без использования кадров геймплея, посвящённый дополнению Warlords of Draenor для популярнейшей онлайновой ролевой игры World of Warcraft.
667 просмотров
Like
Twitter
Go-Zone.ru - это сетевой, развлекательный проект основанный на блогах.