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

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

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

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

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

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

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

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

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

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

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

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

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

Стили CSS для форм обратной связи

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

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

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

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

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

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

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

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

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

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

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