Статьи по css

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

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

Выдвигающаяся из значка форма поиска на сайте

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

Нет картинки

При вёрстке требуется часто выравнять блок div по горизонтали посередине внутри другого div.
 

Нет картинки

В каких-нибудь готовых css фреймворках бывают непонятные неожиданности. Меняешь дизайн, а отступы не убираются, и всё вроде проверил, а всё равно отступ остаётся
 

Нет картинки

placeholder - это атрибут в html5, который выводит текст внутри поля input, и этот текст исчезает, когда пользователь начинает там писать свой текст. Это нужно, например, в форме поиска, чтобы убрать текст подсказки внутри неё при клике по ней.
 

Выравнивание изображения по центру в Bootstrap

Как выровнять картинку посередине в Bootstrap.
 

Замена текста при наведении на него мышью. События onmouseover и onmouseout

Делаем подмену текста при наведении мышью.
 

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

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

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

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

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

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

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

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