Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

сниппеты css

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

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

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

Предлагаю коротенький фрагмент кода CSS, с помощью которого вы легко сможете выстроить миниатюры изображений в стройную сетку, привычный всем макет галереи. Для размещения миниатюр, используем простой неупорядоченный список <ul>, который в зависимости от размера картинок, будет автоматом выстраиваться в идеально расчерченную сетку, с равными отступами между каждой картинкой. HTML <ul> <li><a href=”#”><img src=”http://placehold.it/100×100″></a></li> <li><a href=”#”><img…

Анимированные чекбоксы с использованием шрифт-иконок

Стандартные элементы управления форм, не отличаются хоть каким-нибудь оформлением. Разработчики и веб-дизайнеры используют различные решения чтобы оригинально оформить эти элементы. С полями ввода форм, всё более-менее понятно, а вот при изменении базовых стилей чекбоксов или радиокнопок, у многих возникают затруднения. Предлагаю на ваше рассмотрение ещё одно интересное решение оформления чекбоксов, исключительно средствами CSS, с использованием…

Разноцветные ленточки в углах страницы с помощью CSS3

Предлагаю на рассмотрение, готовый набор правил CSS, для создания и последующего размещения в разных углах страницы, разноцветных ленточек, сформированных исключительно средствами CSS3, без использования дополнительных файлов изображений. Для чего вообще нужны эти ленточки? Прежде всего, для акцентирования внимания пользователей на какой-либо важной информации, предельно сжатой и лаконичной. Смотреть Демо HTML Для формирования ленточек, используем блочный…

Вертикальный текст — это просто!

Самый простой способ развернуть текст вертикально при помощи CSS. Наверняка, многие из вас, встречали на страницах сайтов такую фишку, как развернутый текст вертикально. Понятно что банальный перенос строк с использованием тега <br>, добавляя его после каждой буквы, в данном случае не прокатывает. Как же тогда развернуть текст реально, именно развернуть буквы, так чтобы текст читался…

Всплывающая подпись к картинке при наведении с помощью CSS3

Готовых решений создания динамичных подписей к картинкам, появляющихся при наведении курсора на тело изображения, существует на сегодняшний день предостаточно. Однажды мы уже рассматривали один замечательный вариант, подробнейшим образом. Все они хороши по своему, какие-то отличаются простотой исполнения, другие наличием различных эффектов появления подписей. В общем, кому оно надо, тот всегда сможет найти для себя подходящий…

Ленточки с текстом, на изображении с помощью CSS3

Очень часто, на сайтах и блогах можно встретить изображения украшенные разнообразными ленточками, с надписями и без. Что это? Простое украшательство, или же функциональный элемент пользовательского интерфейса? В большинстве случаев всё же, эти красивые ленточки выполняют те или иные полезные функции, выступают в роли подписей к картинкам, заостряют внимание посетителей на размещенных в теле ленты ссылки,…

Адаптивный футер страницы приклеенный к низу окна браузера

Небольшой фрагмент кода (сниппет) css, с помощью которого, можно очень просто и надёжно «прибить», прижать (приклеить, sticky) футер страницы к низу окна браузера. Один из многочисленных способов, плох он или хорош, можно узнать только в сравнении и при реальном использовании на действующих или тестовых проектах.     Посмотрите на реализацию данного вида приклеенного футера, протестируйте…

Поворот элементов под любым градусом на CSS3

Простейшее решение для поворота блочных элементов страницы под любым градусом с помощью CSS3. В примере я использовал этот метод применительно к заголовку первого уровня <h1>. Вы же, запросто можете применить поворот к любому другому блочному элементу (div, blockquote, p, h2, h3, и др.).     Для того чтобы реализовать поворот на практике, достаточно в CSS…

Оформление заголовока в стиле 3D на CSS3

Здравствуйте всем! Предлагаю на рассмотрение, ещё один вариант оформления текста, в данном и конкретном случае, начального заголовка <h1>, в стиле 3D, исключительно средствами CSS3, без дополнительных изображений.     Небольшой сниппет, готовый набор правил и свойств CSS, с помощью которого, можно легко и просто видоизменить любой шрифт:     В свое время, я уже выкладывал…

1 2 3 4