Статьи по css

Материалы по css

RSS для CSS
Страницы:

Прилипание блока к верху сайта при его прокручивании

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

Как сделать какую-либо область на сайте кликабельной ссылкой?

Логотип оказался на самом изображении в хедере сайта. Сделать весь верх ссылкой на главную страницу как-то неправильно. Текст тоже особо не впишется. Делаем просто область поверх хедера, которая наслаивается на то место, где представлен логотип на основной большой картинке в шапке. 

Красивое выравнивание характеристик на странице товара с отступами, отмеченными точками

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

Сделать слайдер на Owl Carousel c текстом справа

Как с помощью слайдера Owl Carousel сделать слайдер с отзывами, где кроме картинок есть справа текст отзыва. 

Скролл-эффекты CSS3 и JQuery при прокрутке страницы

Популярная штука для landing page. 

Twitter Bootstrap Carousel Crossfade

Меняем стандартный эффект перехода слайдов с прокруткой в Bootstrap на Crossfade. 

Inline-block vs float

При разработке сайта мы часто используем float'ы для позиционирования некоторых блоков на странице, например сайдабара. Но так ли это необходимо? 

Список li в две колонки (CSS)

Верстка ul/li в несколько колонок 

Отзывчивый или Адаптивный веб-дизайн (Responsive Web Design)

Перевод замечательной статьи Итана Маркотта "Responsive Web Design" на alistapart.com про отзывчивый (адаптивный) к браузерам веб-дизайн, в которой Итан объясняет как используя отзывчивый веб-дизайн, приспособить тянущийся макет дизайна, растягивающиеся картинки и media queries, чтобы создать элегантный вид сайта для всех пользователей и браузеров. 

Нет картинки

Делаем с помощью CSS так, чтобы текст внутри тега <pre> переносился по строкам, а не уезжал за пределы области. 
Страницы: