Главная » Сниппеты

Фон в стиле «карбон» с помощью градиентов CSS

Всем, здравствуйте! В предыдущей статье расписывал, как с помощью линейных и радиальных градиентов CSS, можно "нарисовать" вполне симпатичные текстуры для фона. На этот раз предлагаю воспроизвести тёмный фон в стиле "карбон", который отлично подойдёт для заливки, как основного фона сайта, так и для оформления отдельных блочных элементов. В примере использовал повторяющиеся линейные градиенты с углом наклона 45deg, а так же наложение ...

3 Варианта фоновых текстур с помощью градиентов css3

3 Варианта фоновых текстур с помощью градиентов css3 Представляю вашему вниманию 3 варианта основного фона для сайта в тёмных тонах, созданные с помощью линейного и радиального градиентов из обоймы CSS3, без использования дополнительных изображений. Ранее я показывал, как с помощью этих замечательных свойств css, можно очень легко "нарисовать" фон в виде диагональной сетки, в форме шахматной доски, или же, как в школьной тетради в клеточку. Конечно, сейчас в интернетах предостаточно ...

Плавное подчёркивание ссылки при наведении

Плавное подчёркивание ссылки при наведении Представляю коротенький фрагмент кода(сниппет) CSS, для реализации плавного выделения анкоров ссылок с подчёркиванием. Зачем нужно выделять ссылки из общего месива текста, это и ежу понятно. Существует великое многообразие способов и видов оформления ссылок, всё ограничивается лишь фантазией мастера. С помощью псевдо-класса :hover и магии CSS3, можно навесить на стандартные, скучно-оформленные синюшные ссылки, практически любой эффект. ...

CSS — Макет Контактной Формы

Много раз рассказывал о различных решениях создания контактных форм, подробно расписывал варианты вёрстки и оформления с помощью CSS3. Сегодня хочу представить вам ещё один css-макет оригинальной формы обратной связи. Ничего не обычного и сколь-нибудь вычурного, всё просто, стандартный html-каркас формы помещённый в div-контейнер, поля ввода размещены в отдельные секции, а плавающие размеры позволяют корректно отображаться при просмотре на ...

Фон в виде диагональной сетки на CSS

Фон в виде диагональной сетки на CSS В продолжение темы создания фоновых текстур на чистом CSS, предлагаю парочку фрагментов кода, с помощью которых, вы легко сможете выполнить визуальный эффект в виде диагональной сетки и применять его, как к целой странице, так и к отдельным блокам. Как в случае с шахматной доской и фоном в виде тетрадной клеточки, сетку с ромбовым плетением, мы будем "рисовать" с помощью повторяющегося линейного градиента linear-gradient. Всё что нам ...

Набор стилей css для создания кнопок

Набор стилей css для создания кнопок Пару месяцев назад делал простенький шаблон на заказ, использовал отдельные элементы фреймворков LumX и Materialize. В частности из LumX выделил в отдельный набор классы для создания динамичных кнопок. Отсёк всё ненужное(исключительно для меня), разбавил шрифт-иконками от Font Awesome и получился, вполне себе автономный, небольшой наборчик стилей, с помощью которого можно быстро интегрировать на страницы сайта, довольно симпатичные кнопки. ...

Фон в виде шахматной доски на чистом CSS3

Фон в виде шахматной доски на чистом CSS3 Не так давно, я уже рассказывал, как можно разлиновать фон в тетрадную клетку с помощью нескольких строчек кода CSS, без использования изображений, текстур(паттернов). Сегодня хочу продемонстрировать простейший пример заливки фона в более крупную клетку, что-то вроде шахматной доски. Может кому да и пригодится в работе, так как дизайнерские запросы заказчиков порой просто непредсказуемы)). Как и в случае с тетрадной клеточкой, будем ...

Выделение внешних ссылок с помощью CSS

Выделение внешних ссылок с помощью CSS При написании статей мы так или иначе нет-нет да используем ссылки на внешние сайты, это могут быть ссылки на первоисточники, различные веб-приложения, каталоги и т.д. Большинство из нас никак не выделяет внешние ссылки, чаще ограничиваясь атрибутом target="_blank" в ссылке, определяющим открытие этой самой ссылки в новом окне, ну, или же стандартные подсказки через атрибут title. Давайте рассмотрим простейший пример того, как с помощью ...

Фон в клеточку на чистом CSS

Фон в клеточку на чистом CSS Наверняка все вы, встречали сайты, где основной фон, или же фоны отдельных блоков с содержанием, выполнены в виде клеток. Чаще всего для оформления фона в клеточку используют изображения различных фоновых текстур (паттернов). Мало кто знает, что при создании клеточек, как в школьной тетради, можно обойтись без дополнительных изображений, исключительно средствами CSS. Предлагаю на рассмотрение простейший способ реализации фоновой заливки в ...

Организация миниатюр в галерею с помощью CSS

Организация миниатюр в галерею с помощью CSS Предлагаю коротенький фрагмент кода CSS, с помощью которого вы легко сможете выстроить миниатюры изображений в стройную сетку, привычный всем макет галереи. Для размещения миниатюр, используем простой неупорядоченный список , который в зависимости от размера картинок, будет автоматом выстраиваться в идеально расчерченную сетку, с равными отступами между каждой картинкой. HTML ...
1 2 3
Рейтинг@Mail.ru