Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Сниппеты » Страница 2

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

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

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

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

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

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

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

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

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

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

Ну очень большая кнопка в стиле 3D

Ну очень большая кнопка в стиле 3D Сейчас в мировом веб-дизайне по-большей части преобладает плоский стиль оформления интерфейса пользовательских элементов управления. Плоские панели навигации, блоки с содержанием и конечно же, неотъемлемый элемент любого сайта - кнопки. Я нераз уже подробно расписывал варианты создания кнопок с помощью CSS3, разных форм и расцветок. Сегодня хочу показать вам простейший пример создания большой объёмной кнопки в стиле 3D. Чаще всего в виде ...

Адаптивное видео для сайта с помощью CSS

Адаптивное видео для сайта с помощью CSS Как часто при использовании встроенного видео из различных источников у себя на сайте или блоге, вам приходилось подгонять размер того или иного видеоролика, предварительно изменяя заданные значения ширины и высоты плеера? Думаю, что большинство блогеров именно так и поступают, раз за разом, в ручную прописывают необходимые параметры, для того чтобы встроенное виде не выходило за границы блока, в котором оно расположено. А ведь существует ...

Абсолютно круглые изображения с помощью CSS

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

CSS Медиа-запросы для различных пользовательских устройств

CSS Медиа-запросы для различных пользовательских устройств В качестве шпаргалки, собрав информацию из разных источников, составил вот такой, небольшой набор стандартных правил css медиа-запросов, для различных типов пользовательских устройств и режимов их ориентации, в зависимости от положения телефона или планшета в руках пользователя. Так в портретном режиме portrait, когда высота превышает длину, и в альбомном режиме landscape, когда ширина больше высоты, ну и конечно же, комбинированные варианты ...

Редактируемый, визуальный блок стилей CSS

Редактируемый, визуальный блок стилей CSS Знаете ли вы, что тег по сути своей является таким же блочным элементом? Он так же, как и другие элементы может быть отображен на странице со всем содержимым! Более того, отображен не в виде привычного всем демо-кода, а в качестве простейшего визуального редактора фактических стилей CSS используемых на странице. Оказывается всё очень просто, используя атрибут HTML5 contenteditableв теге , добавим ему возможность редактировать фактические ...

Сниппет: Буквица в тексте с помощью CSS

Сниппет: Буквица в тексте с помощью CSS Недавно довелось мне оформлять простенькую, представительскую страницу для одной районной библиотеки. Заказчик пожелал видеть параграфы с использованием буквицы в заглавии каждого из них. Способы создания буквицы известны очень давно и хорошо отработаны, так что с выполнением работы никаких затруднений не возникло. Завершив работу, решил не отбрасывать в сторону материал, а пополнить им коллекцию сниппетов на своём блоге и попутно ...

Простые подсказки на CSS3 и HTML5

Простые подсказки на CSS3 и HTML5 Часто спрашивают, какой самый простой способ реализации подсказок к ссылкам. Самый простой, это не особо заморачиваясь по поводу внешнего вида подсказок, использовать встроенные средства браузеров, прописывая атрибут title="" в ссылках. В то же время существует масса других способов создания простых всплывающих подсказок, о некоторых из них я писал ранее, да и в "интернетах" материала по этой теме не мало. Сегодня, поделюсь ещё одним, очень ...

Эффект прозрачности для изображений при наведении с помощью CSS3

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

Эффект печатающегося текста с помощью CSS3

Эффект печатающегося текста с помощью CSS3 Существует немало решений для реализации эффекта печатающегося текста с помощью javascript. На jQuery например, можно с текстом выписывать такие кренделя, что диву даёшься. Но меня всегда интересует возможность выполнения той или иной задачи с помощью свойств CSS3, конечно только тогда, когда это оправданно и не несёт явных потерь в общей картине конечного результата. На одном из проектов, мне понадобилось (с легкой руки и по прихоти заказчика) ...
1 2 3
Рейтинг@Mail.ru