CSS3

Раздвигающееся вертикальное меню на CSS3

Меню построено на неупорядоченном списке и имеет один уровень (очень часто, такого уровня вложенности хватает для решения задач интерфейса приложения Главная HTML/CSS Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 jQuery/JS Ссылка 6 Ссылка 7 Ссылка 8 Ссылка 9 Ссылка 10 PHP MySQL XSLT #nav { border:3px solid #3e4547; box-shadow:2px 2px 8px #000000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } #nav, #nav ul { list-style:none; padding:0; width:200px; } #nav ul { position:relative; z-index:-1; } #nav li { position:relative; z-index:100; } #nav ul li { margin-top:-23px; -moz-transition: 0.4s linear 0.4s; -ms-transition: 0.4s linear 0.4s; -o-transition: 0.4s linear 0.4s; -webkit-transition: 0.4s linear 0.4s;…

CSS3

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

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

CSS3

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

Ваш браузер не поддерживает плавающие фреймы! Самый простой вариант разметки — задать элементам списка одинаковую ширину, указав ее в процентах относительно ширины элемента-контейнера. Разметка HTML About Portfolio Blog Contact Стили CSS nav { display: block; position: relative; } nav:after { content: ""; display: block; width: 100%; height: 5px; position: absolute; left: 0; background: linear-gradient(90deg, #CDE0EE, #CDE0EE 20%, #EBF0F3 20%, #EBF0F3 40%, #9BB0C1 40%, #9BB0C1 60%, #5D8BAD 60%, #5D8BAD 80%, #041E34 80%, #041E34 100%); } ul { width: 660px; margin: 0 auto; padding-left: 0; list-style: none; overflow: hidden; } li { float: left; width: 25%; } a { text-decoration: none; text-align:…

CSS3

LAVALAMP МЕНЮ НА CSS3

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

CSS3

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

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

CSS3

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

Если вы знаете о том, что WebKit умеет изменять вид тэга SPAN на кнопку, или на поле ввода, или если вы знаете каким свойством можно диктовать поведение элемента в момент тапа по нему, то вам не сюда. И так, есть несколько очень интересных свойств, которые присущи движкам WebKit. Например, есть свойство -webkit-touch-callout Это свойство позволяет вам диктовать поведение браузера в момент тапа и удержания пальца на ссылке. По умолчанию в браузерах всплывает окно, содержащее информацию о ссылке. По умолчанию у этого свойства выставлено значение default, но установив значение none окошко с информацией всплывать не будет. a.js-only { -webkit-touch-callout: none; }…

Add your widget here