More from: CSS3

::first-letter

::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном. <style> p { font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */ font-size: 0.9em; /* Размер шрифта */ } p::first-letter { font-family: “Times New Roman”, […]


::first-line

::first-line псевдоэлемент задающий стиль первой строки.  В правила разрешено использовать только свойства, которые относящиеся к шрифту, цвету текста и фона. <style> p::first-line { color: red; /* Красный цвет текста */ font-style: italic; /* Курсивное начертание */ font-weight: bold; /* Жирное начертание */ } </style>….. ….<p>Текст к которому применили<br> Далее идет обычный текст обзаца</p> В CSS3 псевдоэлементы стали […]


Горизонтальное меню с элементами одинаковой ширины

Ваш браузер не поддерживает плавающие фреймы! Самый простой вариант разметки — задать элементам списка одинаковую ширину, указав ее в процентах относительно ширины элемента-контейнера. Разметка HTML <nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav><nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> Стили CSS nav { display: block; position: […]


LAVALAMP МЕНЮ НА CSS3

Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора ~. HTML Для всех трех примеров html один и тот же, отличаются только классами: ph-line-nav, ph-dot-nav, ph-heart-nav: <div class="nav ph-line-nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> <div class="effect"></div> </div><div class="nav ph-line-nav"> […]


Делаем стильный тег Select Box с помощью CSS

Мне часто приходится использовать Select Box ( select) при создании формы с наличием выпадающего списка. Мне потребовалось время, чтобы выяснить, как легко и просто можно задать стиль Select Box-а с использованием лишь CSS, поскольку некоторые части зависят от браузера, например, выпадание вниз и не редактируются стандартным набором стилей. Так выглядит Select Box по умолчанию: Выбор […]


Интересные -webkit CSS свойства

Если вы знаете о том, что WebKit умеет изменять вид тэга SPAN на кнопку, или на поле ввода, или если вы знаете каким свойством можно диктовать поведение элемента в момент тапа по нему, то вам не сюда. И так, есть несколько очень интересных свойств, которые присущи движкам WebKit. Например, есть свойство -webkit-touch-callout Это свойство позволяет […]


Простой слайдер CSS+HTML

<meta charset="utf-8"> <style><meta charset="utf-8"> <style> /* Слайдер */ .slides { width:900px; height:300px; margin:50px auto; overflow:hidden; position:relative; }/* Слайдер */ .slides { width:900px; height:300px; margin:50px auto; overflow:hidden; position:relative; } Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. visible Отображается все содержание элемента, даже за пределами установленной […]


Эффект тени

Простая тень .boxShadow1 { width: 80%; padding: 1em; border: 1px solid #ccc; box-shadow: 10px -10px 10px 5px rgba(0, 0, 0, .2); }.boxShadow1 { width: 80%; padding: 1em; border: 1px solid #ccc; box-shadow: 10px -10px 10px 5px rgba(0, 0, 0, .2); } Тень вокруг div .boxShadow2 { width: 80%; padding: 1em; box-shadow: 0 0 10px 5px […]


Тень. (box-shadow)

Очень популярное свойство, которое приукрасит ваш сайт – это тень. Рассмотрим ее на примере. Задача: У вас есть блок <div></div><div></div> , вы хотите вокруг него тень. Решение: – присваиваем блоку класс <div class="shadow"></div><div class="shadow"></div> – пишем стиль box-shadow: 0 0 10px rgba(0,0,0,0.5); где box-shadow – собственно и есть тень, 0 0 10px – смещение по […]