Метка «css3 transition»

Я думаю с вопросом адаптивных изображений все верстальщики часто встречались. Большинство статей, которые я прочитал, мне не подошли. В каждом случае были свои минусы. Приходилось писать дополнительные стили css или загружать разные изображения на определенных разрешениях. Почему-то универсального метода я не нашел. Это было похоже на то, как сделать блоки одинаковой высоты. Вроде бы можно сделать это несколькими способами, но лучший способ — это js.

Да, изображения. С панели администратора постоянно заливались изображения не той ширины или высоты. И в на страницах смотрелось очень криво. А если одно и тоже изображение будет на разных страницах и в разных блоках.

image

В общем я решил эту задачу с помощью доброго старого js.
Читать полностью »

Я думаю с вопросом адаптивных изображений все верстальщики часто встречались. Большинство статей, которые я прочитал, мне не подошли. В каждом случае были свои минусы. Приходилось писать дополнительные стили css или загружать разные изображения на определенных разрешениях. Почему-то универсального метода я не нашел. Это было похоже на то, как сделать блоки одинаковой высоты. Вроде бы можно сделать это несколькими способами, но лучший способ — это js.

Да, изображения. С панели администратора постоянно заливались изображения не той ширины или высоты. И в на страницах смотрелось очень криво. А если одно и тоже изображение будет на разных страницах и в разных блоках.

image

В общем я решил эту задачу с помощью доброго старого js.
Читать полностью »

«backgroundImageTransition», плавная анимация фоновых изображений

Во время создания front-end составляющей веб приложения, часто приходится сталкиваться с созданием так называемых hover-эффектов. Когда при наведении указателя мыши на DOM элемент меняется цвет ссылки, размер текста или иконка у пункта меню. С такой технологией, как CSS3 Transition, появилась возможность применять анимационные эффекты для DOM-элементов, без использования javascript-кода. Меня эта возможность сразу заинтересовала и я стал применять ее, без лишних усилий создавая плавные переходы. Читать полностью »

Effeckt.css — это постоянно пополняемая подборка эффектов для оформления веб-приложений. Один из главных плюсов этой библиотеки эффектов — достаточно жёсткие критерии включения. Это не куча-мала, в которую сваливают всё подряд, каждый эффект должен соответствовать ряду критериев: эффекты должны быть практичными, их назначение — не демонстрировать возможности технологий, а облегчать и украшать жизнь пользователя, они должны работать быстро и плавно, они должны быть полностью совместимыми с мобильными технологиям.

Effeckt.css от команды HTML5 Boilerplate: избранные эффекты и переходы на CSS
Читать полностью »

Предлагаю широкой общественности для тестов следующую страницу vsandy.16mb.com/hs3nplus1/
Наведя на Limitations слева, активируется css3, можно будет визуально оценить качества прорисовки наклоненных букв. По итогам моего тестирования, Опера справляется с этим тестом лучше остальных браузеров.
size of variable — стресс-тест максимальной длины переменной в Javascript
size of array — стресс-тест максимальной длины массива в Javascript

Тесты The 3n+1/direct
classics from 90-s
modern
fast
Chrome killer
покажут быстродействие и стабильность работы Javascript с массивами и хэшами. Последний тест легко доводил предыдущие версии хрома до падения.

Читать полностью »

HINT.css — всплывающие подсказки средствами CSS

Что

Hint.css — библиотека, реализующая всплывающие подсказки, средствами CSS3 без применения JavaScript.

Библиотека использует атрибут data-*, псевдоэлементы, свойство content и CSS3 transitions для вывода всплывающих подсказок.

Разработчики библиотеки напоминают, что CSS3 transitions для псевдоэлементов работают пока только в браузере Firefox, но в скором времени будут доступны и в webkit.
Читать полностью »

CSS анимации на реальном проекте

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

Производительность и гибкость CSS анимаций позволяет творить удивительные вещи, но можно ли уже использовать эти новые возможности в силу их нестабильности и незрелости на реальных больших проектах?

В этом посте мы расскажем, почему так важно начинать использовать новые технологии клиентской разработки уже сегодня и о трудностях, которые могут ждать вас на пути.
Читать полностью »

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

Картинка для привлечения внимания:
Предлагаются лёгкие кнопки «Дальше» (оптом, недорого)

Читать полностью »

image
Привет, читатель!
Уже давно серьёзно занимаюсь вёрсткой макетов и с недавнего времени стал использовать CSS3 и HTML 5, то есть стал пренебрегать олдскульными старыми браузерами.
Сегодня вечером решил перейти на новый уровень, попробовал использовать CSS3 для выпадающего меню, и это оказалось очень просто.

Прошу сильно не пинать и прочее, моё первое меню без JS.

Читать полностью »

Доброго времени суток, уважаемые читатели! Сегодня я хочу рассказать Вам о том, как за несколько минут при помощи CSS3 создать такую вот красоту:
Анимированные картинки на CSS3
В чём вся красота вы поймёте попозже.


Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js