HTML & CSS ★ Dobrovoimaster

{ -- dbmast.ru -- }

Главная » HTML & CSS

Многоцветный размытый фон с помощью градиентов CSS3

23 мая, 2019 driver Просмотрели: 161 Комментариев нет

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

Читать статью →

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

8 августа, 2018 driver Просмотрели: 987 Комментариев нет

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

Читать статью →

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

7 июня, 2018 driver Просмотрели: 4 448 Комментариев нет

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

Читать статью →

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

30 мая, 2018 driver Просмотрели: 1 985 3 комментария

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

Читать статью →

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

29 октября, 2017 driver Просмотрели: 6 946 Комментариев нет

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

Читать статью →

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

10 октября, 2017 driver Просмотрели: 2 632 2 комментария

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

Читать статью →

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

6 мая, 2017 driver Просмотрели: 1 599 Комментариев нет

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

Читать статью →

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

4 декабря, 2016 driver Просмотрели: 4 208 3 комментария

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

Читать статью →

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

5 февраля, 2016 driver Просмотрели: 4 434 Комментариев нет

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

Читать статью →

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

23 августа, 2015 driver Просмотрели: 13 678 5 комментариев

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

Читать статью →

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

31 июля, 2015 driver Просмотрели: 4 118 5 комментариев

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

Читать статью →

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

25 мая, 2015 driver Просмотрели: 8 369 4 комментария

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

Читать статью →

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

15 января, 2015 driver Просмотрели: 1 559 Комментариев нет

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

Читать статью →

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

30 ноября, 2014 driver Просмотрели: 9 001 4 комментария

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

Читать статью →

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

25 ноября, 2014 driver Просмотрели: 184 051 21 комментарий

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

Читать статью →

Привлекательные 3D кнопки с помощью CSS3

10 октября, 2014 driver Просмотрели: 2 591 Комментариев нет

Благодаря новым функциям CSS3 стало возможным отказаться от использования изображений при оформлении элементов интерфейса сайта, на смену картинкам приходит чистый код CSS. Так например, всё чаще поступают при формировании кнопок, используемых на сайте. Однажды я уже рассказывал, как пользуясь исключительно средствами CSS3, можно "нарисовать" красивую кнопку в стиле 3d. Сегодня, предлагаю очередной набор правил CSS3, для формирования ...

Читать статью →

Модальное окно на CSS3 (вариант №2)

4 августа, 2014 driver Просмотрели: 3 918 13 комментариев

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

Читать статью →

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

14 мая, 2014 driver Просмотрели: 48 379 14 комментариев

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

Читать статью →

Оформление текста с эффектами тени, анимации и градиента

21 апреля, 2014 driver Просмотрели: 3 036 Комментариев нет

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

Читать статью →

Очередной набор стилей CSS3 для создания кнопок

19 марта, 2014 driver Просмотрели: 795 3 комментария

Очередной набор стилей CSS3 для создания кнопок

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

Читать статью →

1 2 »