Рубрика «css3 transform»

в 8:34, , рубрики: css, CSS3 animation, css3 transform, css3 transitions, html, javascript, web animations, Блог компании mr. Gefest, Веб-разработка

Советы, библиотеки и дополнительные материалы по CSS-анимации

Введение

Была глубокая ночь. В темную комнату через деревянные окна проникал лунный свет. Он недостаточно освещал мой деревянный стол с ноутбуком, блокнотом и синей ручкой. Поэтому я протянул свою руку к настольной лампе и включил её.

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.
Читать полностью »

в 9:32, , рубрики: css, css3, CSS3 animation, css3 transform, css3 transition, Веб-разработка

Сегодня хочу рассказать о том, как я создавал анимированную колбу, используя только CSS3. Полученный результат можно увидеть здесь. Ну что интересно? Тогда давай приступим!Читать полностью »

в 6:42, , рубрики: css, css3, CSS3 animation, css3 transform, css3 transition, hover effects, hover-эффект, html, html-верстка, веб-дизайн, Веб-разработка

Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.

Из-за большого размера статья разбита на три части. Первая часть. Вторая часть

Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

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

в 6:42, , рубрики: css, css3, CSS3 animation, css3 transform, css3 transition, hover effects, hover-эффект, html, html-верстка, веб-дизайн, Веб-разработка

Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.

Из-за большого размера статья разбита на три части. Первая часть. Третья часть.

Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

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

в 9:36, , рубрики: css3 transform, html, javascript, кроссворд, ненормальное программирование, Регулярные выражения, метки: , , , ,

Вдохновлённый недавним постом и комментарием к нему, решил сделать аналогичную интерактивную версию.
Есть навигация с клавиатуры, подсветка активных строк, а также индикация соответствия строки регулярному выражению. Для удобства подсказки выделенной ячейки поворачиваются горизонтально.
Разметка – чистый HTML+CSS3.
Почти работает в последних версиях популярных браузеров. В IE9 глючит навигация мышкой, в FF и Opera наблюдаются проблемы с производительностью. И только Chrome – 100% OK.
Буду благодарен за советы по оптимизации.
Ссылка – вот. Детали реализации – под катом.
image
Читать полностью »

в 0:45, , рубрики: css, css3, CSS3 animation, css3 transform, html, Веб-разработка, демонстрация, метки: , , ,

Пример — часы на СSS3 без изображений и JavaScript

Это статья о том, как был сделан демонстрационный пример Wall Clock in Pure CSS3. Изначально, я предполагал написать данную статью в виде пошагового учебного пособия, но в процессе я понял, что такой пример мало для этого подходит. Потому я решил остановиться только на деталях, которые, на мой взгляд, наиболее интересны, а реализацию остального можно посмотреть и в коде.

Для начала собственно сам пример — на codepen.io или на cssdesk.сom

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

в 8:42, , рубрики: css, css3, css3 transform, css3 transition, веб-дизайн, Веб-разработка, метки: , ,

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

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

в 14:14, , рубрики: css, css3 transform, Интересное, метки: ,

Здравствуй Хабрахабр.

Вдохновленный недавно законченым курсом «Learn Jquery in 30 days» и статьей про генерацию изображения в виде кода матрицы, решил прокачать свой js до уровня чуть выше плинтуса, попробовать заработать инвайт и сделать что-нибудь интересное, что-то что можно показать, не сгорая от желания провалится под землю, такому искушенному сообществу как хабр.
Читать полностью »

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js