Эффект размытия и фокуса. Blur и Focus в в CSS. CSS фишки от WebCademy.

Автор Vera Abramova
Эффект размытия и фокуса. Blur и Focus в в CSS. CSS фишки от WebCademy.

Всем привет.

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

Давайте реализуем этот эффект и посмотрим как — это можно сделать и так из стартовых файлов у меня есть папка Blur Focus в ней страница.

Яндексе чмл папка с файлом который пока пустой и папка с двумя картинками эта картинка с фоном и картинка с логотипом поехали я написал базу вы разметку для подключил сюда файл main.css теперь. Давайте напишем разметку и поместим сюда фон и наш логотип разметка в моём случае будет выглядеть следующим образом я определю — это всё в отдельный Tag section доля внутреннего отдельным тегом имидж разместил картинку имидж указывай атрибут Source Image Logo png здесь можно указать какой-то тег Alt и далее фон. Я тоже размещу отдельный блок — это нам понадобится. Мы конечно могли бы прописать фон через background execution not, тогда у нас не получится сделать. Какое какой эффект поэтому фон мы делаем отдельным пивом который будет идти после TGX. Вот так — это будет выглядеть div с классом Baby теперь. Давайте напишем стиле для нашей разметки и у тега Body. Я уберу все отступы. Марджани который у него есть подруги тоже. Поставим на 0 и сделай ему workflow hidden чтобы ничего не выходила за его. Хотя по сути для данного урока нам достаточно только вот этого идем далее. Теперь давайте. Поработаем над секцией. Давайте дадим ей класс равно section и будущее стилизовать по классам пропишем section который у нас лежит фоны логотип дам ей ширину 100% собственно и так по умолчанию занимает 100% высоту ей дам 102h то есть высота окна в упор то. Дай мне этот контент который будет в ней я хочу выстроить по центру. А — это будет логотип и — это будет фон поэтому укажу Display Flex justify-content центр и align-items-center сохраняю. Давайте посмотрим, что получается и так. Ну вот собственно большой логотип который внутри той странице. Давайте немножко уменьшим размер логотипа так чтобы мы чётко понимали, что он действительно по центру логотип я буду стилизовать по классу слово к слову который я ещё не прописал. Давайте пропишем класс равно Logo едадим логотипу ширину например 200 пикселей A Way Out высота автоматическая. Отлично вот мы видим наш логотип. Да он у нас стоит чётко по центру всё здорово теперь давайте создадим фон фон мы опишем. Ну например вот здесь после секса на он у нас имеет класс. Б г вот он прописан и пропишем его фон должен растягивается на всю ширину и всю высоту своего пескоблока то есть на весь экран на весь текст section поэтому мы растянем его с помощью абсолюта поместим его сделаем позицию. Абсолют топ 00 ширина 100% и высота 100% далее. Давайте укажем Phone background Image by URL скобки указываем путь к изображению. Заходим в папку Image так если я работаю сестра. Мне необходимо выйти на два уровня вверх зайти в папку имидж на один уровень вверх в зайти в папку misc выбрать бгпк готова для крупного размера фона укажи нему background CSS Cover background CSS Cover готова. Давайте посмотрим так на этом этапе у нас уже появился фон. Мы видим, что пока фон перекрывает логотип. Но — это и. Неудивительно потому, что вот он логотипа вот он сам то есть во-первых он идёт позже ну и во-вторых он позиционируется с помощью абсолюта ему чтобы поднять логотип. Чуть повыше мы зададим ему z-index например единичка и — это уже сделает его выше чем фон и зададим позиционируете чтобы работал z-index обновляем отлично видим фон и логотип далее начинаем делать нашу магию изначально по нашей задумки фон у нас будет немножко размытым и для того чтобы размытый мы добавим к нему CSS Filter Blur и дадим ему размытия 10 пикселей. Давайте посмотрим обновляю видим фон уже размытый далее. Нам необходимо с вами сделать такой эффект, тогда мы будем наводить на логотип наш логотип должен становится размытым соответственно для Logo. Давайте пропишем все Hover как он будет вести себя при наведении курсора на него по ховеру. Мы также дадим ему фильтр. Как вы уже догадались — это будет тоже Blur мы будем разговаривать и также на 10 пикселей также мы немножко увеличен до этого сделаю для него трансформацию трансформ и трансформируя его по размеру — это будет skill.im трансформируя его 20% то есть 1.2 — это сделать его на 20% больше плюс он у нас всё становится полупрозрачным поэтому дам ему opacity 0,5. Это Давайте посмотрим обновляю навожу на логотипы и действительно видно, что он становится как будто бы немножко больше и становится немножко прозрачным слово. Давайте логотип сделаем чуть побольше какой-то он мелкого ты мне кажется. Давайте дадим 350 вот так же интересней теперь вся соль урока. Нам необходимо сделать так чтобы по наведению на у нас ещё менялся и фонд и чтобы Blur. Исфана уходил так вот как. Мы — это можем.

0 комментариев
0

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