3D эффект для события hover


Содержание

Dobrovoi Master

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

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

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

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

Hover Effect Ideas

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

iHover

iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.

Caption Hover Effects

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

Эффект перехода CSS3

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

Hover-эффекты для миниатюр на CSS3

Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.

Circle Hover Effects

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

Вращение миниатюр при наведении

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

Sexy Image Hover Effects

Если перевести дословно:»Сексуальный эффект при наведении на изображения». Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.

5 Hover-эффектов на CSS3

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

Анимация подписей изображений

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

Hover-эффекты с элементами анимации

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

Изменение яркости картинок

Данный эффект особого ничего из себя не представляет, банальная смена яркости изображений при наведении, разве что добавлены элементы анимации. Разбираться с подробностями реализации придётся самостоятельно, разложив исходники демо.

10 Image Hover Effects

Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.

Border Animation Effect

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

Original Hover Effects With CSS3

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

Shape Hover Effect

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

Раздвижные изображения

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

Slick CSS3 Animated Image

С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.

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

Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.

Диагональное появление подписи

Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.

Анимированные заголовки миниатюр

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

Подчёркнутые или очерченные подписи к миниатюрам

Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.

Причудливые формы и zoom-эффект

Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.

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

Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.


6 Подписей к картинкам

6 Вариантов появления всплывающих подписей к картинкам при наведении с помощью CSS3. Подробнейший урок по реализации и настройке, доступные для скачивания исходники.

Ну и наконец, напоследок так сказать, не могу не упомянуть о самом простейшем способе создания всплывающей подписи к миниатюре с помощью CSS3.

Об этом способе я рассказывал в одном из предыдущих своих уроков: Тынц.

Хотите приступить к работе над созданием сайта как можно быстрее? Теперь это абсолютно возможно! По той простой причине, что на маркетплейсе TemplateMonster появился новый раздел с HTML шаблонами на русском языке . Коллекция будет пополняться, но и сейчас уже можно присмотреть что-то подходящее для вашего онлайн-проекта. Все, что вам нужно сделать — это выбрать свое идеальное готовое решение и поработать с презентацией нужной информации. И не забывайте, что текст для шаблона был написан вручную.

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

3D эффект для события hover

Сегодня мы хотим показать вам, как создавать впечатляющие 3D эффекты при наведении курсора мыши с использованием CSS3 и jQuery. Эта идея навеяна классными hover-эффектами, которые можно найти на странице Google SketchUp Showcase.

В наших примерах мы будем использовать миниатюры, которые раскроют больше информации при наведении на них курсора мыши. Мы создадим макет при помощи jQuery, что позволит нам складывать или сгибать изображение, когда мы наводим на него курсор мыши. Для создания эффектов мы будем использовать CSS 3D трансформацию.

Цукерберг рекомендует:  Как не бодаться с заказчиком и свести правки к минимуму

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

Изображения, используемые в демо-примерах, от Angelo González, используются они под лицензией Creative Commons Attribution 2.0 Generic (CC BY 2.0).

Мы будем опускать префиксы браузеров для свойств CSS в статье, но вы, конечно, можете найти их в исходных файлах.

Разметка

Разметка для миниатюр будет выглядеть следующим образом:

id = «grid» class = «main» >

Каждая миниатюра располагается в блоке (класс view) с еще одним блоком для дополнительной информации (класс view-back). Структура, которую мы хотим создать для каждого блока с классом view, используя JavaScript, следующая:

class = «slice s1» style = «background-image: url(/images/1.jpg); » >
class = «overlay» > >

class = «slice s2» style = «background-image: url(/images/1.jpg); » >
class = «overlay» > >

class = «slice s3» style = «background-image: url(/images/1.jpg); » >
class = «overlay» > >

class = «slice s4» style = «background-image: url(/images/1.jpg); » >
class = «overlay» > >

Каждая часть будет иметь соответствующее изображение, вставленное как фоновое изображение, и так как мы имеем вложенную структуру, это позволит нам контролировать эффект. Кроме того, мы добавим span с классом overlay, который мы будем использовать, чтобы сделать эффект более реалистичным.

Наша JavaScript-функция выглядит следующим образом:

$. fn . hoverfold = function ( args ) <

this . each ( function ( ) <

$ ( this ) . children ( ‘.view’ ) . each ( function ( ) <

var $item = $ ( this ) ,
img = $item. children ( ‘img’ ) . attr ( ‘src’ ) ,
struct = ‘

var $struct = $ ( struct ) ;

$item. find ( ‘img’ ) . remove ( ) . end ( ) . append ( $struct ) . find ( ‘div.slice’ ) . css ( ‘background-image’ , ‘url(‘ + img + ‘)’ ) . prepend ( $ ( ‘ ‘ ) ) ;

Теперь мы можем создавать классные эффекты! Но давайте сначала определим некоторые общие стили, а затем перейдем к первому примеру.

Давайте определим стили для блока view. Самое важное здесь то, что мы добавляем перспективу (perspective: 500px;):

Для отдельных ломтиков изображения будут нужны некоторые 3D-свойства и переходы (transition):

Часть описания, которую мы видим при наведении курсора на миниатюру, будет иметь следующие стили:

Зададим стили для span-ов и ссылок:

.view-back span <
display : block ;
float : right ;
padding : 5px 20px 5px ;
width : 100% ;
text-align : right ;
font-size : 16px ;
color : rgba ( 255 , 255 , 255 , 0.6 ) ;
>

.view-back span :first-child <
padding-top : 20px ;
>

.view-back a <
display : bock ;
font-size : 18px ;
color : rgba ( 255 , 255 , 255 , 0.4 ) ;
position : absolute ;
right : 15px ;
bottom : 15px ;
border : 2px solid rgba ( 255 , 255 , 255 , 0.3 ) ;
border-radius : 50% ;
width : 30px ;
height : 30px ;
line-height : 22px ;
text-align : center ;
font-weight : 700 ;
>

.view-back a :hover <
color : #fff ;
border-color : #fff ;
>

Для иконок мы будем использовать шрифт, который мы создали при помощи Fontello. Так как мы добавили атрибут data-icon для span-ов, мы можем использовать псевдо-класс :before, чтобы показать их:

Все, кроме первого среза, необходимо сдвинуть вправо (помните, мы имеем вложенную структуру):

Давайте установим соответствующие позиции фона каждого кусочка для фонового изображения:

Наложение первоначально будет иметь прозрачность равную 0, мы добавим переход и изменим уровень прозрачности при наведении курсора мыши:

.view .overlay <
width : 60px ;
height : 100% ;
opacity : 0 ;
position : absolute ;
transition : opacity 150ms ease-in-out ;
>

.view :hover .overlay <
opacity : 1 ;
>

Изменим position и z-index для изображения, а также добавим transition для браузеров, которые не поддерживают 3D-трансформацию:

В случае, если мы видим, что браузер не поддерживает все эти замечательные 3D-свойства, мы просто загрузим дополнительный файл стилей с именем fallback.css, который будет иметь следующее содержание:

.view <
overflow : hidden ;
>

.view :hover img <
left : -85px ;
>

.view div .view-back <
background : #666 ;
>

Это позволит сдвинуть изображение в левую сторону, когда мы наведем курсор мыши.

Теперь давайте взглянем на пример!

Пример

В этом примере мы хотим создать эффект складывания изображения. Для этого мы будем изменять значение для свойства perspective в блоке view и добавим переход для всех вложенных блоков:


.view <
perspective : 1050px ;
>

.view div <
transition : all 0.3s ease-in-out ;
>

Вторая, третья, четвертая и пятая часть будет преобразована в 3D, создавая эффект складывания изображения:

Каждый из этих кусочков будет перемещен в левую сторону. Вторая часть будет поворачиваться на -45 градусов, что повернет её влево. Четвертую часть повернем в другую сторону, а третью и пятую повернем на 90 градусов. Помните, что мы имеем вложенную структуру. Когда мы поворачиваем родительские элементы дочерние также все будут вращаться.

Чтобы сделать вещи выглядящие немного более реалистично, мы добавим некоторые градиенты:

.view .s2 > .overlay <
background : linear-gradient ( right , rgba ( 0 , 0 , 0 , 0.05 ) 0% , rgba ( 0 , 0 , 0 , 0 ) 100% ) ;
>

.view .s3 > .overlay <
background : linear-gradient ( left , rgba ( 255 , 255 , 255 , 0 ) 0% , rgba ( 255 , 255 , 255 , 0.2 ) 100% ) ;
>

.view .s4 > .overlay <
background : linear-gradient ( right , rgba ( 0 , 0 , 0 , 0.6 ) 0% , rgba ( 0 , 0 , 0 , 0.2 ) 100% ) ;
>

.view .s5 > .overlay <
background : linear-gradient ( left , rgba ( 0 , 0 , 0 , 0.8 ) 0% , rgba ( 0 , 0 , 0 , 0 ) 100% ) ;
>

Часть с дополнительной информацией, которую мы видим когда наводим курсор, также будет иметь градиентный фон, так как мы хотим имитировать падающую тень на него:

И вот и всё! Обратите также внимание и на другие примеры! Есть много различных возможностей для экспериментов с ними.
Надеюсь, вам понравилось!

Демонстрация

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

39 CSS Hover Effects

Collection of hand-picked free HTML and CSS hover effect code examples: animations, transitions, etc. Update of May 2020 collection. 14 new items.

Table of Contents:

CSS Hover Effect Examples

HTML and CSS hover effect code examples (34 items).

Author

  • Paul
  • January 28, 2020

Made with

About the code

Pure CSS Box Hover with Background Effect

As you hover on the quotes, the background will change upon which quote you hover upon. Best viewed on a tablet or desktop screens. Total responsiveness is still to be desired.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Dronca Raul
  • December 18, 2020

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Kinetic Magnetic Dot

Kinetic magnetic dot with little JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • 0guzhan
  • October 29, 2020

Made with

  • HTML / CSS (SCSS)

About the code

Hover Effect for Boxes

Hover effect for boxes in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Bradley Budach
  • October 23, 2020

Made with

About the code

Circle Hover Effect

Pure CSS circle hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • ViktorKorolyuk
  • October 21, 2020

Made with

  • HTML / CSS / JavaScript

About the code

Circular Ripple Hover Effect on Button

Hover over each of the buttons to see the effect in action.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

  • Siddharth Hubli
  • October 7, 2020

Made with

About the code

Hover for Product Info

CSS properties used: filter: drop-shadow() , clip-path: polygon() , CSS Grid.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

  • Jouan Marcel
  • September 5, 2020

Made with

  • HTML / CSS (SCSS)

About the code


Futuristic 3D Hover Effect

Usable as navigation, menu or effect. It uses CSS transform and perspective to create a unique hololens-like animation effect. Can be used for many more use cases, you will probably have your own ideas. This is an experimental idea, you may want to flesh it out for use in production.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • hiMRK
  • September 3, 2020

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Reveal Card Content on Hover

Clean card hover effect in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Tobias Glaus
  • July 25, 2020

Made with

  • HTML / CSS (SCSS)

About the code

Let Me See What You Got!

Hover effect for box with media content in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Yancy Min
  • July 20, 2020

Made with

  • HTML / CSS / JavaScript

About the code

Box with Magic Zoom Effect

Box with animated magic zoom effect in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Avi Thour
  • July 5, 2020

Made with

About the code


Animated Box with Hover Effects

Animated box with hover effects in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • LukГЎЕЎ Werner
  • June 22, 2020

Made with

  • HTML / CSS (SCSS)

About the code

Box Corners Animation

Box corners animation on hover in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • George W. Park
  • May 15, 2020

Made with

  • HTML
  • CSS
  • JavaScript/Babel

About the code

Radial Gradient Spotlight Effect

This pen shows how CSS radial gradients can be used to create a focusable spotlight effect.

Author

  • Ying Ying Szeto
  • April 18, 2020

Made with

About the code

Icons Hovering

Pretty hover effects for icons.

Author

  • Ryan Yu
  • March 17, 2020

Made with

  • HTML / CSS (SCSS)


About the code

Glitch Effect on Hover

Learn how to create the glitch effect with CSS clip-path without JS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

  • Quentin VГ©ron
  • March 3, 2020

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript

About the code

Responsive 16/9 Thumbnail & Shine Hover Effect

This thumbnail maintain 16/9 aspect ratio at any size. There are a shine hover effect and a little animation when launching the video. Shine effect using CSS variables inspired by Raul Dronca.

Author

  • Cassidy Williams
  • September 5, 2020

Made with

About the code

Hover Animation

One div hover animation.

Demo GIF: Attract Hover Effect

Attract Hover Effect

Attract hover effect with HTML, CSS and JavaScript.
Made by Louis Hoebregts
July 6, 2020

Demo Image: Pure CSS Perspective Hover Effect

Pure CSS Perspective Hover Effect

List of blocks with perspective effect.
Made by Maxime Lafarie
July 6, 2020

Demo Image: Image Hover Effect

Image Hover Effect

Image with reflection and proximity effect on hover.
Made by Tiago Alexandre Lopes
June 2, 2020

Demo Image: Stacked Cards Hover Effects

Stacked Cards Hover Effects

Just playing around with more CSS transitions and hover effects.
Made by Kyle Brumm
May 17, 2020

Author

  • Russ Pate
  • January 16, 2020

Made with

About the code

Pure CSS Hover Blur

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo Image: CSS 3D Hover


CSS 3D Hover

Pure CSS 3D hover effect for cards.
Made by Akhil Sai Ram
December 24, 2020

Author

  • Bastian Andre
  • November 17, 2020

Made with

  • HTML/Pug
  • CSS/Sass

About the code

Lifted Paper Strips

Lifted Paper Strips (Hover Effect).

Demo Image: 10 Stylish Hover Effects With LESS

10 Stylish Hover Effects With LESS

A small collection of stylish effects with LESS.
Made by Renan C. Araujo
October 13, 2020

Demo Image: 10 Stunning Hover Effects With SCSS

10 Stunning Hover Effects With SCSS

A small collection of stylish effects with SCSS.
Made by Renan C. Araujo
October 13, 2020

Demo Image: Pure CSS 3D Perspective Render With :hover Animation

Pure CSS 3D Perspective Render With :hover Animation

Tip: To keep this 3D look you must know a detail, the length of the word must be proportional to the body’s perspective property number. If the length of this word increase you must increase the perspective too :)
Made by Rafael GonzГЎlez
September 16, 2020

Девять простых примеров CSS3 анимации

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

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

Для более детального ознакомления вы можете скачать архив с файлами.

Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

2. Появление рамки

Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

3. Свинг

Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

  • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
  • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

4. Затухание

Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

7. Трансформация в круг

Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:

8. Вращение

Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:


Десктопные браузеры
Internet Explorer Поддерживается версией IE 10 и выше
Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
Opera Поддерживается с версии 12.1
Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
Мобильные браузеры
iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
Opera Mobile Поддерживается с версии 12.1
Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
Chrome/Firefox для Android Поддерживается с версии 47/44
Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
UC Browser для Android Поддерживается с префиксом -webkit-

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

Интересные эффекты анимации hover на CSS3

В CSS3 предусмотрено очень много интересных эффектов. Данная статья посвящена эффектам анимации hover

В этой статье приведено 10 распространенных эффектов анимации на чистом CSS, которые украсят и освежат любой сайт. К тому же сделать их может любой новичок.

Ниже будут подробно рассмотрены следующие эффекты:

1. Крутящийся элемент

2. Дрожащий / дергающийся элемент (анимация Tada)

3. «Падающая» иконка

4. Выезжающая иконка

5. Выезжающая иконка как на CoolWebMasters

6. Кнопка с бликом

7. Кнопка с увеличивающимся внутренним border

8. Качающаяся кнопка (анимация Swing)

9. Двойной текст с использованием data-hover

10. Выезжающий текст снизу с использованием data-hover

1. Крутящийся элемент

Хорошо подходит для маленьких элементов типа закрывающего крестика или стрелочки. На текстовые ссылки такое, конечно, вешать не надо.

Разметка здесь очень простая:

Непосредственно за кручение отвечает свойство transform, все остальное — украшательства (еще в этом примере плавно меняется значение прозрачности opacity).

2. Дрожащий / дергающийся элемент (анимация Tada)

Часто такую анимацию вешают на иконки соцсетей и другие небольшие элементы. А выглядит это вот так:

Верстка здесь такая же, как в предыдущем примере:

А в css нужно написать не только свойства этого div, но и саму анимацию:

3. «Падающая» иконка

Верстка этого элемента состоит из внешнего элемента А со SPAN внутри, который содержит иконку в качестве background:

Как видно из примера, анимация происходит вследствие изменения значения top у блока с иконкой. У внешнего блока нужно обязательно указывать overflow: hidden, так как иконка уезжает за его пределы.

4. Выезжающая иконка

Здесь тот же принцип, что и в предыдущем примере, – анимируется положение иконки внутри ссылки при наведении на нее. Только верстка немного изменена — иконка задается как background к псевдоэлементу :before.

Внешний элемент .btn2 должен иметь position: relative, так как блок с иконкой спозиционирован абсолютно. Также есть небольшая анимация margin на span с текстом внутри .btn2 (.btn2:hover span), которая отодвигает его при появлении иконки.

5. Выезжающая иконка как на CoolWebMasters

Анимация достигается за счет изменения background-position элемента. Нужно подготовить картинку с двумя состояниями иконки:

6. Кнопка с бликом

Блик делается через псевдоэлемент :after, который повернут на 35 градусов.

Верстка совсем простая, достаточно присвоить ссылке класс:

7. Кнопка с увеличивающимся внутренним border

Здесь внутренний border сделан через inset text-shadow, которая и анимируется.

CSS для анимации здесь такой:

8. Качающаяся кнопка (анимация Swing)

Выглядит это вот так:

Верстка здесь такая же, как в предыдущем примере, только ссылке задан класс btn6. В CSS нужно прописать стиль для :hover и саму анимацию swing.

9. Двойной текст с использованием data-hover

А вот еще один интересный эффект, который подойдет к текстовым ссылкам на цветном фоне:

В верстке этого элемента добавился атрибут data-hover, который содержит текст, прилетающий при наведении.

В CSS анимируется псевдоэлемент before, в который и передается текст из data-hover:

10. Выезжающий текст снизу с использованием data-hover

Как и в предыдущем примере, при наведении выезжает надпись, дублирующая текст ссылки, интересно будут смотреться разноцветные надписи.

В верстке внутрь ссылки нужно вставить span.

3D эффект для события hover

Сборник HTML, CSS, JavaScript/jQuery компонентов

Коллекция потрясающих эффектов для изображений | HTML, CSS и JavaScript (jQuery)


Эффекты для изображений — здесь мы собрали и продолжаем регулярно обновлять коллекцию бесплатных готовых решений для изображений, созданных при помощи HTML и CSS (CSS3 & HTML5), а также в некоторых эффектах немного присутствует JavaScript (jQuery). Hover-эффекты (эффекты при наведение), 3D, zoom (увеличение), magnify, overlay, transition… Сразу на странице Вы можете просмотреть Демо и скачать исходный код (* zip).

Hover-эффекты для изображений

Варианты оформления фотографий при наведении на них мышки с целью увеличения

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

В этой заметке я старался как можно больше упростить оформление ховер-эффектов, при этом не потеряв их привлекательности.

Все примеры могут использовать как графическую иконку увеличения, так и шрифт, кроме того все варианты адаптивны.

Мне приходилось создавать и оформлять множество фотогалерей на различных сайтах, и в 90% случаях все фотографии там не имели каких-либо подписей. Поэтому на всех примерах в данной заметке не будет оформления названия и описания фотографии, а только значок ее увеличения и соотв. самого изображения.

Если есть необходимость подписать фотографию, то можно просто добавить текст ниже нее.

CSS3 эффект для изображений при наведении (hover)

Здравствуйте, друзья. Есть у меня для вас отличный эффект для изображений с применением спецификации CSS3 и псевдокласса hover. При наведении курсора мыши на картинку, она превращается в 3D модель и, тем самым привлекает внимание. И что самое главное, создано это все без JS скриптов. А чтобы не тянуть кота за хвост предлагаю посмотреть пример.

Эффект объемного изображения

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

В строковом параметре span будет появляться надпись с торца картинки. А вот и сам CSS код:

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

Читайте также:

Эффект красивый!
Работает, только не видна картинка images/5
Подскажите, плиз, начинающему))

Скорее всего прописан неправильный путь к картинке. Попробуйте написать абсолютный путь, у меня он такой:
//serblog.ru/demo/hover-image/images/5.jpg

Ура, спасибо, появилась картинка!!
Точно, следует прописыввать ссылку абсолютную.

Как создать hover эффект на чистом CSS, привязанный к направлению курсора

Дата публикации: 2020-02-16

От автора: несколько уроков по созданию hover эффектов на чистом CSS, привязанных к направлению курсора. Уроки предназначены для тех, кто имеет хотя бы базовые знания HTML и на продвинутом уровне знают CSS/SASS.

Дисклеймер

Эффекты не работают в старых браузерах, для их работы нужен браузер с возможностью рендеринга 3D трансформаций. Я проверял эффекты в последних версиях браузеров Chrome, Firefox и Safari.

Также я использую замечательную библиотеку AutoPrefixer для автоматической подстановки вендорных префиксов. Зайдите в настройки CodePen на вкладку CSS и выберите AutoPrefixer.

Эффект hover с параллаксом

Введение

Мы с моим дизайнером наткнулись на домашнюю страницу сайта Kikk Festival еще в 2015 году, на ней были реализованы карточки с параллакс эффектом при наведении курсора. Нам понравилось, и мы захотели воссоздать такой эффект в своем проекте. Однако из-за особенностей кода мы не могли использовать JS. Я начал рыскать в поисках решений на чистом CSS и нашел кое-что интересное.

Всемогущая тильда

Один из самых любимых моих селекторов в CSS – тильда (

), которая выбирает ближайший элемент, подходящий под селектор, но расположенный после первого элемента. Например, ul

p выберет элементы p в коде ниже:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Я понял, что это можно использовать для создания hover эффектов с учетом направления курсора практически для чего угодно!

Структура

Добавим немного SASS/CSS, чтобы расположить все ссылки по углам карточки. Можно сделать больше ссылок, но для простоты возьмем четыре. Для ускорения процесса будем использовать Haml.

Так как у нас нет JS, который бы нас предупреждал о направлении движения мыши и положении курсора, мы будем использовать ссылки для разделения карточки на зоны обнаружения. Если, например, курсор попадет на ссылку №1 сверху, то мышь попадает в зону обнаружения №1 до захода в №3 и №4.

Эффект hover

Следующий этап – присвоить каждой ссылке событие, чтобы она влияла на карточку. Вот тут нам и поможет тильда.

Карточка будет меняться при наведении курсора на любую ссылку, в отличие от селектора +, который выбирает только ближние смежные элементы.

Далее необходимо добавить уникальный эффект hover для каждой ссылки. Я поменял фон ссылок на такой же, как у соответствующих рамок, чтобы было проще понять эффект.

Трансформации

Углы определяются правильно, теперь мы добавим трансформации, которые будут наклонять карточку по углам. Первым делом необходимо добавить перспективу к контейнеру. Я обычно использую что-то в районе 1000px, чтобы можно было показать легкую глубину.

Для параллакса такого вида самым важным свойством будет не transform, а transform-origin, наложенное на карточку. Оно должно меняться для всех зон обнаружения и присваиваться к противоположному углу от текущей зоны обнаружения.

Например, если мы заходим в зону обнаружения №1 (верх лево), transform-origin должно быть bottom right, т.е. противоположный угол. Суть такая – затронутый угол должен двигаться от нас, а остальные углы к нам.

Последние штрихи

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

Осталось (1) добавить transition к карточке, чтобы сгладить переход по углам, и (2) удалить стили ссылок, чтобы они были не видны. Я люблю ставить opacity в 0 во избежание казусов. Чтобы избежать перекрытия из-за поворотов карточки, я также двигаю ссылку, на которую наведен курсор, вперед.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Результат

Ниже показана завершенная версия параллакс эффекта при наведении на CodePen . Переключите чекбокс, чтобы увидеть расположение ссылок. Для улучшения параллакс эффекта я решил добавить еще немного ссылок.

Эффект hover на примере куба

Введение

Adult Swim Singles 2020 – еще один сайт с впечатляющим эффектом наведения с учетом направления курсора. По клику на иконку календаря в левом верхнем углу открывается 3D календарь, где каждый день представлен в виде куба, который поворачивается в зависимости от направления курсора. Замечательная идея!

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

Основа

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

Теперь можно приступить к созданию основы куба со ссылками. Нужно создать внешний контейнер, четыре треугольника, которые будут собираться в квадрат, и один внутренний контейнер с шестью элементами – четыре пустых и два с контентом. Мне нравится такой порядок: верх, низ, лево, право, перед, зад.

Для создания треугольных ссылок можно использовать Clippy . Для совместимости с Firefox вам также нужен SVG clip-path. Ссылки должны иметь положительное значение translateZ (быть выдвинутыми на передний план), иначе они спрячутся за кубом.

Для определения ширины, высоты и трансформаций для куба мы используем переменную со значением 12px. Чтобы отличать стороны куба, мы используем разные оттенки одного цвета для симуляции освещения. Задняя сторона полностью белая.

Мы слегка повернули куб, чтобы вы могли посмотреть, что все стороны правильно расположены. Если посмотреть на transform, видно, что все стороны куба имеют отрицательное значение translateZ. То есть все стороны кроме передней находятся на заднем плане.

Природа 3D трансформаций такова, что если не передвинуть весь куб вперед, то часть его может быть отрезана задним фоном. Можете передвинуть куб вперед, чтобы у вас не было этой проблемы. Так как у меня уже был куб, я почти его не трогал. Пишите в комментариях, если у вас возникли сложности с созданием куба.

Эффект hover

Далее необходимо добавить поворот по наведению курсора. Эффект можно стилизовать как угодно, но самый реалистичный метод, который я нашел, привязан к мыши. Если мышь заходит на куб слева, куб должен повернуться слева направо. Все повороты должны быть 180deg/0.5turn или отрицательные эквиваленты. Также добавим transition, чтобы куб вращался правильно.

Полировка

Нужно отполировать две вещи:

Нижний треугольник переворачивает задний текст вверх ногами.

Hover слишком чувствительный: переход между треугольниками вызывает лишние повороты.

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

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

Результат

CodePen ниже – моя завершенная опубликованная версия с цветами и иконками. Концепции в этом проекте были сложнее, но закончил его быстрее, чем параллакс эффект, так как тут я использовал знания, полученные из первого проекта.

Заключение

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

Автор: Gabrielle Wee

Источник: http://codepen.io/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

3D эффект для события hover

Сегодня мы хотим показать вам, как создавать впечатляющие 3D эффекты при наведении курсора мыши с использованием CSS3 и jQuery. Эта идея навеяна классными hover-эффектами, которые можно найти на странице Google SketchUp Showcase.

В наших примерах мы будем использовать миниатюры, которые раскроют больше информации при наведении на них курсора мыши. Мы создадим макет при помощи jQuery, что позволит нам складывать или сгибать изображение, когда мы наводим на него курсор мыши. Для создания эффектов мы будем использовать CSS 3D трансформацию.

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

Изображения, используемые в демо-примерах, от Angelo González, используются они под лицензией Creative Commons Attribution 2.0 Generic (CC BY 2.0).

Мы будем опускать префиксы браузеров для свойств CSS в статье, но вы, конечно, можете найти их в исходных файлах.

Разметка

Разметка для миниатюр будет выглядеть следующим образом:

id = «grid» class = «main» >

Каждая миниатюра располагается в блоке (класс view) с еще одним блоком для дополнительной информации (класс view-back). Структура, которую мы хотим создать для каждого блока с классом view, используя JavaScript, следующая:

class = «slice s1» style = «background-image: url(/images/1.jpg); » >
class = «overlay» > >

class = «slice s2» style = «background-image: url(/images/1.jpg); » >
class = «overlay» > >

class = «slice s3» style = «background-image: url(/images/1.jpg); » >
class = «overlay» > >

class = «slice s4» style = «background-image: url(/images/1.jpg); » >
class = «overlay» > >

Каждая часть будет иметь соответствующее изображение, вставленное как фоновое изображение, и так как мы имеем вложенную структуру, это позволит нам контролировать эффект. Кроме того, мы добавим span с классом overlay, который мы будем использовать, чтобы сделать эффект более реалистичным.

Наша JavaScript-функция выглядит следующим образом:

$. fn . hoverfold = function ( args ) <

this . each ( function ( ) <

$ ( this ) . children ( ‘.view’ ) . each ( function ( ) <

var $item = $ ( this ) ,
img = $item. children ( ‘img’ ) . attr ( ‘src’ ) ,
struct = ‘

var $struct = $ ( struct ) ;

$item. find ( ‘img’ ) . remove ( ) . end ( ) . append ( $struct ) . find ( ‘div.slice’ ) . css ( ‘background-image’ , ‘url(‘ + img + ‘)’ ) . prepend ( $ ( ‘ ‘ ) ) ;

Теперь мы можем создавать классные эффекты! Но давайте сначала определим некоторые общие стили, а затем перейдем к первому примеру.

Давайте определим стили для блока view. Самое важное здесь то, что мы добавляем перспективу (perspective: 500px;):

Для отдельных ломтиков изображения будут нужны некоторые 3D-свойства и переходы (transition):

Часть описания, которую мы видим при наведении курсора на миниатюру, будет иметь следующие стили:

Зададим стили для span-ов и ссылок:

.view-back span <
display : block ;
float : right ;
padding : 5px 20px 5px ;
width : 100% ;
text-align : right ;
font-size : 16px ;
color : rgba ( 255 , 255 , 255 , 0.6 ) ;
>

.view-back span :first-child <
padding-top : 20px ;
>

.view-back a <
display : bock ;
font-size : 18px ;
color : rgba ( 255 , 255 , 255 , 0.4 ) ;
position : absolute ;
right : 15px ;
bottom : 15px ;
border : 2px solid rgba ( 255 , 255 , 255 , 0.3 ) ;
border-radius : 50% ;
width : 30px ;
height : 30px ;
line-height : 22px ;
text-align : center ;
font-weight : 700 ;
>

.view-back a :hover <
color : #fff ;
border-color : #fff ;
>

Для иконок мы будем использовать шрифт, который мы создали при помощи Fontello. Так как мы добавили атрибут data-icon для span-ов, мы можем использовать псевдо-класс :before, чтобы показать их:

Все, кроме первого среза, необходимо сдвинуть вправо (помните, мы имеем вложенную структуру):

Давайте установим соответствующие позиции фона каждого кусочка для фонового изображения:

Наложение первоначально будет иметь прозрачность равную 0, мы добавим переход и изменим уровень прозрачности при наведении курсора мыши:

.view .overlay <
width : 60px ;
height : 100% ;
opacity : 0 ;
position : absolute ;
transition : opacity 150ms ease-in-out ;
>

.view :hover .overlay <
opacity : 1 ;
>

Изменим position и z-index для изображения, а также добавим transition для браузеров, которые не поддерживают 3D-трансформацию:

В случае, если мы видим, что браузер не поддерживает все эти замечательные 3D-свойства, мы просто загрузим дополнительный файл стилей с именем fallback.css, который будет иметь следующее содержание:

.view <
overflow : hidden ;
>

.view :hover img <
left : -85px ;
>

.view div .view-back <
background : #666 ;
>

Это позволит сдвинуть изображение в левую сторону, когда мы наведем курсор мыши.

Теперь давайте взглянем на пример!

Пример

В этом примере мы хотим создать эффект складывания изображения. Для этого мы будем изменять значение для свойства perspective в блоке view и добавим переход для всех вложенных блоков:

.view <
perspective : 1050px ;
>

.view div <
transition : all 0.3s ease-in-out ;
>

Вторая, третья, четвертая и пятая часть будет преобразована в 3D, создавая эффект складывания изображения:

Каждый из этих кусочков будет перемещен в левую сторону. Вторая часть будет поворачиваться на -45 градусов, что повернет её влево. Четвертую часть повернем в другую сторону, а третью и пятую повернем на 90 градусов. Помните, что мы имеем вложенную структуру. Когда мы поворачиваем родительские элементы дочерние также все будут вращаться.

Чтобы сделать вещи выглядящие немного более реалистично, мы добавим некоторые градиенты:

.view .s2 > .overlay <
background : linear-gradient ( right , rgba ( 0 , 0 , 0 , 0.05 ) 0% , rgba ( 0 , 0 , 0 , 0 ) 100% ) ;
>

.view .s3 > .overlay <
background : linear-gradient ( left , rgba ( 255 , 255 , 255 , 0 ) 0% , rgba ( 255 , 255 , 255 , 0.2 ) 100% ) ;
>

.view .s4 > .overlay <
background : linear-gradient ( right , rgba ( 0 , 0 , 0 , 0.6 ) 0% , rgba ( 0 , 0 , 0 , 0.2 ) 100% ) ;
>

.view .s5 > .overlay <
background : linear-gradient ( left , rgba ( 0 , 0 , 0 , 0.8 ) 0% , rgba ( 0 , 0 , 0 , 0 ) 100% ) ;
>

Часть с дополнительной информацией, которую мы видим когда наводим курсор, также будет иметь градиентный фон, так как мы хотим имитировать падающую тень на него:

И вот и всё! Обратите также внимание и на другие примеры! Есть много различных возможностей для экспериментов с ними.
Надеюсь, вам понравилось!

Демонстрация

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Цукерберг рекомендует:  Css - Зацикленный рандомный цвет фона страницы
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих