CSS спрайты: применение в вёрстке сайтов с примерами

CSS спрайты – это несколько графических элементов используемых на сайте, которые объединены в одну картинку. При помощи свойств css можно отображать каждый элемент картинки как отдельное изображение.

Применение спрайтов в вёрстке страниц сайтов позволяет повысить производительность (сэкономить время загрузки и ресурсы хостинга) и хранить изображения более компактно. Происходит это благодаря тому, что мы имеем одну картинку и сайт при загрузке единожды запрашивает её с сервера. В случае со многими, пусть и мелкими картинками, увеличивается количество HTTP-запросов и как следствие падает производительность.
Подробнее »

Адаптивная вёрстка сайта на основе media-запросов с примером

С каждым годом увеличивается количество мобильного трафика. Результаты поиска в мобильной выдаче Google более привязаны к местонахождению пользователя, не исключено, что при ранжировании поисковик также будет учитывать и наличие мобильной версии либо адаптивный дизайн сайта.

Как по мне адаптивный дизайн является оптимальным вариантом как с точки зрения SEO оптимизации, так и удобства для пользователя.

Вчера выдался свободный день, так что решил немного разобраться с особенностями формирования адаптивной вёрстки. Чтобы закрепить прочитанную теорию сделал тестовую страничку. На дизайне особо не зацикливался, главной целью было создать страницу, вёрстка которой будет подстраиваться под разные девайсы и расширения экранов. В тоже время, чтоб пример был более наглядным, сделал страницу в виде рейтинга интернет магазинов подарков из партнёрской сети Admitad. Если дизайн немного доработать, на неё вполне можно попробовать лить трафик.
Подробнее »

CSS кнопки для сайта с применением градиента

Сегодня речь пойдёт о градиенте. Это прекрасный инструмент для манипуляций с цветом в CSS. Применение css стилей, вместо использования изображений для создания эффекта градиента на сайте, позволяет ускорить загрузку страниц. Так как в этом случае пользователю не нужно будет расходовать трафик на загрузку изображения.

Существует два вида градиента: линейный и радиальный.

Линейный градиент — это плавный переход от одного цвета к другому, при этом самих цветов и переходов между ними может быть несколько.

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

Подробно расписывать, что они собой представляют, я не буду. Для тех, кто не в курсе, но заинтересовался, на сайте htmlbook.ru всё очень хорошо и подробно расписано.
Подробнее »

Создание геометрических фигур при помощи CSS

При помощи каскадные таблиц стилей (CSS) можно не только выравнивать блоки на странице, изменять цвет, фон, скрывать или отображать элементы на странице, но и “рисовать” геометрические фигуры.

Десять самых распространённых геометрических фигур созданные средствами CSS:

1. Квадрат

#square {
    width: 150px;
    height: 150px;
    background-color: #00B2FF;
}

Подробнее »

Создаём закругленные углы с помощью CSS

Есть множество способов закруглить углы на web-странице. Сегодня приведу пример, на мой взгляд, одного из наиболее простых вариантов создания эффекта закруглённых углов. Никаких Java-скриптов и картинок использовать не буду, только html и css. Единственный недостаток этого метода – использование пустых тегов.

Я использовал четыре пустых тега <span>, для создания эффекта закругления углов верхней границы блока и четыре для нижней границы, а также один блочный элемент <div> — он будет основой блока.
Подробнее »

Вёрстка сайта: Что такое CSS?

На данный момент мои знания в области вёрстки сайтов находятся на среднем уровне. Решил их улучшить до профессионального и закрепить полученные навыки путём изменения дизайна своего блога.

Сегодня поговорим о том, что такое CSS и в чём его отличие от HTML.

CSS (Cascading Style Sheets) – в переводе на русский Каскадные таблицы стилей. Используется для оформления внешнего вида веб-страниц.

Чем отличается CSS от HTML?

Изначально HTML использовался только для разметки содержимого веб-страниц. С помощью него можно было указать, где в тексте таблица, список или картинка. Эта информация интерпретировалась браузером и отображалась в удобной для человека форме.
Подробнее »