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"> […]


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

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