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

В состоянии постоянного подключения...
Главная » HTML & CSS

Отражение и перспектива для 3D текста на чистом CSS

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

20+ Бесплатных библиотек CSS анимаций

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

Всплывающая рамка и подпись изображения при наведении на чистом CSS

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

Набор hover-эффектов для кнопок на чистом CSS3

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

Слайд-эффекты для подписей изображений на чистом CSS

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

Абсолютное центрирование отзывчивого изображения на CSS

Для абсолютного горизонтального и вертикального центрирования элементов на странице предлагаются различные методы, например, на Хабре, ещё в 2013г был представлен перевод отличной статьи с решением от Стефана Шоу, написанной в своё время для Smashing Magazine. Так что, в этом плане, ничего нового не открою, с центрированием элементов всё предельно ясно. Однажды, при разработке очередного лайтбокса, мне понадобилось сделать так чтобы ...

Три эффекта при наведении на изображение

Много раз писал о различных hover-эффектах для изображений, да и в интернетах этого добра наработали предостаточно. В этот раз решил использовать сразу три эффекта на одном изображении, срабатывающих при наведении на картинку. Кроме того продемонстрирую применение свойства box-shadow в оформлении изображения, конечно свойство довольно таки заезженное, но посмотреть на ещё одну вариацию думаю не повредит. Что касается hover-эффектов, мы ...

Эффект биения сердца на чистом CSS3

Как "нарисовать" хорошо всем знакомый символ сердца с помощью css3, показал на примере в одной из своих статей: "Рисуем сердце с помощью CSS3". Сегодня хочу показать, как можно оживить это сердечко, добавив визуальный эффект биения. Для этого нам понадобится чуточку магии свойств CSS3 и несколько строк несложного кода. Анимация CSS при правильном её использовании порой вообще творит чудеса, это лишь один из самых простейших примеров её ...

4 простых hover-эффекта для кнопки на чистом CSS

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

Набор правил CSS для формирования уведомлений

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

Фиксированные подписи к изображениям

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

Btns.css — Модульный набор стилей кнопок CSS

Небольшой модуль стилей CSS для создания красивых кнопок, отлично реагирующих на изменения размеров экранов пользовательских устройств. Btns.css - это очень лёгкий набор простых правил CSS, которые вы сможете использовать в своих проектах. При желании, будет очень просто изменить, настроить и расширить теми или иными свойствами, в соответствии с общим дизайнерским стилем ваших сайтов. В сжатом виде, размер всей библиотеки составляет всего ...

Варианты оформления кнопки «Читать далее» (read more)

Практически на всех интернет-ресурсах, будь-то простенький сайт, тяжеловесный новостной портал или персональный блог, используется заветная кнопка «Читать далее» (read more), чаще всего это главная страница с кратким анонсами записей, страницы рубрик, архивы тегов или временные архивы, там где большая часть текста постов скрыта и заменена на ссылку «Читать далее». Оформляют эту ссылку, кто во что горазд, кто-то обходится стандартной текстовой ...

Оригинальные hover-эффекты для изображений на чистом CSS3

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