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

[Код формы вставляется здесь] Слева: #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; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #slideout:hover { left: 250px; } #slideout:hover #slideout_inner { left: 0; } Справа #slideout { position: fixed; top: 40px; right: 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; right: -250px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #slideout:hover { right: 250px; } #slideout:hover #slideout_inner { right: 0; }

CSS3

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

Вся анимация выполнена с помощью CSS, без подключения дополнительных скриптов и плагинов. Сначала нужно добавить HTML разметку. У нас это будет обычная ссылка. В нужном месте у себя на сайте, в шапке или подвале вставляем такую строку. Теперь в файл стилей надо добавить сами стили CSS. #popup__toggle{bottom:25px;right:10px;position:fixed;z-index:999;} .img-circle{background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content-box;} .circlephone{box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:150px;height:150px;bottom:-25px;right:10px;position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in-out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: circle-anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;} .circle-fill{box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:100px;height:100px;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim…

CSS3

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

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

Текст и шрифт

::first-letter

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

Текст и шрифт

::first-line

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

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