More from: CSS3

Выезжающая панель на чистом CSS

<div id="slideout"> <img src="feedback.png" alt="Отправить отзыв" /> <div id="slideout_inner"> [Код формы вставляется здесь] </div> </div><div id="slideout"> <img src="feedback.png" alt="Отправить отзыв" /> <div id="slideout_inner"> [Код формы вставляется здесь] </div> </div> Слева: #slideout { position: fixed; top: 40px; left: 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #slideout_inner { position: fixed; top: 40px; left: -250px; […]


Анимированная кнопка обратного звонка

Вся анимация выполнена с помощью CSS, без подключения дополнительных скриптов и плагинов. Сначала нужно добавить HTML разметку. У нас это будет обычная ссылка. В нужном месте у себя на сайте, в шапке или подвале вставляем такую строку. <a href="#" id="popup__toggle" onclick="return false;"> <div class="circlephone" style="transform-origin: center;"></div> <div class="circle-fill" style="transform-origin: center;"> </div><div class="img-circle" style="transform-origin: center;"> <div […]


CSS обрезка картинок

Использование отрицательных полей (Negative Margins) По этой технике картинку необходимо поместить в родительский элемент, в нашем случае, это параграф (тэг <p>). Родительский абзац должен быть плавающим(floating) элементом (или с заданной шириной). Эта техника не будет работать на элементах с атрибутом «в полную ширину» (full width). Затем мы задаем отрицательные поля для всех четырех сторон: верх(top), […]


::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 Отображается все содержание элемента, даже за пределами установленной […]