Будь вкурсе свежих уроков!

В категории: Курсы Frontend — HTML, CSS и JavaScript

Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.

Закрыть

Чат в телеграм

спроси эксперта сейчас

https://www.youtube.com/embed/Kdal-3AfeRc

https://www.youtube.com/embed/ut_bVBluskg

https://www.youtube.com/embed/EpYMaOoh5QI

https://www.youtube.com/embed/r355XPEiAoQ

https://www.youtube.com/embed/LIbidPWUq9k

https://www.youtube.com/embed/Oz664FmUdC8

https://www.youtube.com/embed/WFw-MLKNhRU

https://www.youtube.com/embed/3PNcIGQW-6w

https://www.youtube.com/embed/cDdDuKo0HgI

https://www.youtube.com/embed/neYjdM3D_S8

Следующий курс

Уроки CSS анимации

4 439 просмотров

Как сделать 3D-карточку, кнопка меню бургер и анимация для меню, конверт с подарками, чекбоксы, кнопки и многое другое ждёт вас при просмотре данного мини-курса. Автор расскажет обо всех тонкостях и на примерах покажет как сделать CSS-анимацию на сайте современной.

Урок 1. Как создать 3D-карточку на CSS3

Если вам нужна 3D-карточка которая при наведение разворачивается и отображается обратная часть, то смотрите первый урок или перейдите по ссылке:

DEMO | Видеоурок

HTML:

<div class="wrap">
  <div class="card">
    <div class="front"><span>Front</span></div>
    <div class="back"><span>Back</span></div>
  </div>
</div>

CSS:

body {
  font-family: sans-serif;
}
.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #BBDEFB;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  width: 300px;
  height: 300px;
  position: relative;
  perspective: 1000px;
}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
  border-radius: 10px;
}
.front {
  background-color: #fff;
}
.back {
  background-color: #BDBDBD;
  transform: rotateY(180deg);
}
.card:hover .front {transform: rotateY(180deg);}
.card:hover .back {transform: rotateY(360deg);}

Урок 2. Красивый эффект появления блоков с картинками

При помощи трансформации карточек можно воссоздать 3D-эффект появления изображения на промо-сайтах или Landing Page. Во-втором видео автор более детально расскажет про все свойства и как они работаю.

DEMO | Видеоурок

HTML:

<div class="section">
  <div class="phone"></div>
  <div class="tablet"></div>
  <div class="desctop"></div>
  <h1 class="heading">Адаптивная верстка</h1>
</div>

CSS:

body {
  margin: 0;
  font-family: sans-serif;
}
.section {
  background-color: #f2395a;
  color: #fff;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  perspective: 1000px;
}
.heading {
  margin-left: 20%;
}
.phone, 
.tablet,
.desctop {
  background-color: #fff;
  box-shadow: 13px 13px 32px 0 rgba(242, 57, 90, .3);
  position: absolute;
  transition: 1s;
  transform: translateY(100%);
}
.section:hover .phone,
.section:hover .tablet,
.section:hover .desctop {
  transform: translateY(10px) rotateY(-15deg);
}
.phone {
  width: 200px;
  height: 280px;
  left: 5%;
  bottom: 0;
  background: #fff url('http://jquerykiller.ru/img/mobile.svg') center no-repeat;
  z-index: 3;
  transition-delay: 0.2s;
}
.tablet {
  width: 360px;
  height: 380px;
  background: #fff url('http://jquerykiller.ru/img/tablet.svg');
  bottom: 0;
  left: 10%;
  z-index: 1;
  transition-delay: 0.4s;
}
.desctop {
  width: 680px;
  height: 480px;
  background: #fff url('http://jquerykiller.ru/img/desktop.svg');
  bottom: 0;
  left: 15%;
  transition-delay: 0.6s; 
}

Урок 3. Как сделать трансформацию карточек товара.

В данном видеоуроке автор покажет как сделать 3D-карточки товаров и трансформировать их при событие click при помощи библиотеки JQuery.

DEMO | Видеоурок

HTML:

<div class="section">
  <div class="container">
    <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
    <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
    <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
    <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
    <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
    <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
  </div>
</div>

CSS:

body {
  margin: 0;
  background-color: #3d385a;
}
.section  {
  perspective: 1000px;
}
.container {
  width: 680px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transition: 1s;
  transform: rotateX(55deg) rotateZ(-45deg) rotateY(10deg);
  transform-style: preserve-3d;
}
.container-origin {
  transform: rotate(0);
}
img {
  max-width: 100%;
}
.card {
  width: 200px;
  margin: 10px;
  transition: 0.3s;
}
.card:hover {
  cursor: pointer;
  transform: translateZ(10px);
}

JQuery:

$('.card').on('click', function() {
    $('.container').toggleClass('container-origin');
})

Урок 4. CSS-анимация кнопки меню

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

DEMO | Видеоурок

HTML:

<div class="section">
  <a href="#" class="menu-btn">
    <span></span>
  </a>
</div>

CSS:

body {
  font-family: sans-serif;
  margin: 0;
}
.section {
  height: 100vh;
  background-color: #7b1fa2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-btn {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  position: absolute;
  top: 50%; margin-top: -1px;
  left: 50%; margin-left: -10px;
  width: 20px;
  height: 2px;
  background-color: #222;
}
.menu-btn span::before,
.menu-btn span::after {
  content: '';
  display: block;
  transition: 0.2s;
}
.menu-btn span::before {
  transform: translateY(-5px);
}
.menu-btn span::after {
  transform: translateY(5px);
}

.menu-btn_active span:before {
  transform: rotate(-35deg);
  width: 10px;
  transform-origin: left bottom;
}
.menu-btn_active span:after {
  transform: rotate(35deg);
  width: 10px;
  transform-origin: left top;
}

.menu-block {
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-nav {
  background-color: #fff;
  height: 50px;
  
}
.menu-nav__link {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  margin-right: 20px;
}
.menu-nav__link {
  transition: 0.5s;
  transform-origin: right center;
  transform: translateX(50%);
  opacity: 0;
}
.menu-nav__link_active {
  transform: translateX(0%);
  opacity: 1;
}

JQuery:

$('.menu-btn').on('click', function(e) {
  e.preventDefault;
  $(this).toggleClass('menu-btn_active');
});

Урок 5. Анимация меню на CSS и JQuery

Продолжение четвёртого урока, автор покажет на практике как сделать анимацию выпадающего меню из кнопки.

DEMO | Видеоурок

HTML:

<div class="section">
  <div class="menu-block">
    <nav class="menu-nav">
      <a href="#">Main</a>
      <a href="#">Porfolio</a>
      <a href="#">About</a>
      <a href="#">Contacts</a>
    </nav>
    
    <a href="#" class="menu-btn">
      <span></span>
    </a>
    
  </div>
</div>

CSS:

body {
  font-family: sans-serif;
  margin: 0;
}
.section {
  height: 100vh;
  background-color: #7b1fa2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-btn {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  position: absolute;
  top: 50%; margin-top: -1px;
  left: 50%; margin-left: -10px;
  width: 20px;
  height: 2px;
  background-color: #222;
}
.menu-btn span::before,
.menu-btn span::after {
  content: '';
  display: block;
  transition: 0.2s;
}
.menu-btn span::before {
  transform: translateY(-5px);
}
.menu-btn span::after {
  transform: translateY(5px);
}

.menu-btn_active span:before {
  transform: rotate(-35deg);
  width: 10px;
  transform-origin: left bottom;
}
.menu-btn_active span:after {
  transform: rotate(35deg);
  width: 10px;
  transform-origin: left top;
}
.menu-block {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-nav a {
  text-decoration: none;
  color: #222;
  text-transform: uppercase;
  font-weight: 100;
  display: inline-block;
  margin-right: 20px;
  transition: 1s;
}
.menu-nav {
  transition: 0.2s;
  transform: scaleX(0) translateX(0%);
  transform-origin: right center;
  opacity: 0;
  visibility: hidden;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  padding-right: 25px;
  padding-left: 25px;
  margin-right: -25px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
.menu-nav_active {
  transform: scaleX(1) translateX(0%);
  opacity: 1;
  visibility: visible;
}

JQuery:

$('.menu-btn').on('click', function(e) {
  e.preventDefault();
  $(this).toggleClass('menu-btn_active');
  $('.menu-nav').toggleClass('menu-nav_active');
});

Урок 6. Конверт с подарком на CSS3 и JQuery

Урок по CSS анимации подарочного конверта на любое событие.

DEMO | Видеоурок

HTML:

<div class="section">
  <div class="envelope">
    
  <div class="envelope__top">
    <img src="http://up-skills.ru/test/envelope-top.svg" alt="">
    </div>   
    
    <div class="paper">
      Подарок
    </div>
    
    <div class="envelope__body">
      <img src="http://up-skills.ru/test/envelope.svg" alt="">
    </div>
    
  </div>
</div>

CSS:

body {
  margin: 0;
  font-family: sans-serif;
}
.section {
  background-color: #fab1a0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.envelope {
  position: relative;
  width: 200px;
  height: 110px;
}
.envelope__top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: 0.2s;
  transform: translateY(-100%);
  transform-origin: bottom;
}
.envelope__body {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
}
.paper {
  background-color: #fff;
  width: 100px;
  height: 80px;
  text-align: center;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  transform: translateY(-40px);
  transition: 0.2s;
  bottom: 0;
}

.envelope__top_close {
    transform: translateY(-110%) rotateX(180deg);
    z-index: 2;
}
.paper_close {
  transform: translateY(-10%);
  height: 40px;
}

JQuery:

$('.envelope').on('click', function(e) {
   $('.envelope__top').toggleClass('envelope__top_close');     
   $('.paper').toggleClass('paper_close');               
})

Урок 7. Выпадающее мобильное меню бургер на CSS3 и JQuery

Продолжение уроков по анимации меню. В данном видеоуроке автор покажет ещё один вариант с выпадающим мобильным меню.

DEMO | Видеоурок

HTML:

<div class="section">
  <div class="envelope">
    
  <div class="envelope__top">
    <img src="http://up-skills.ru/test/envelope-top.svg" alt="">
    </div>   
    
    <div class="paper">
      Подарок
    </div>
    
    <div class="envelope__body">
      <img src="http://up-skills.ru/test/envelope.svg" alt="">
    </div>
    
  </div>
</div>

CSS:

body {
  margin: 0;
  font-family: sans-serif;
}
.section {
  background-color: #fab1a0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.envelope {
  position: relative;
  width: 200px;
  height: 110px;
}
.envelope__top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: 0.2s;
  transform: translateY(-100%);
  transform-origin: bottom;
}
.envelope__body {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
}
.paper {
  background-color: #fff;
  width: 100px;
  height: 80px;
  text-align: center;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  transform: translateY(-40px);
  transition: 0.2s;
  bottom: 0;
}

.envelope__top_close {
    transform: translateY(-110%) rotateX(180deg);
    z-index: 2;
}
.paper_close {
  transform: translateY(-10%);
  height: 40px;
}

JQuery:

$('.envelope').on('click', function(e) {
   $('.envelope__top').toggleClass('envelope__top_close');     
   $('.paper').toggleClass('paper_close');               
})

Урок 8. Выпадающее меню слева на CSS3 и JQuery

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

DEMO | Видеоурок

HTML:

<div class="wrapper">
  <div class="menu">
    <a href="#" class="menu-btn"></a>
    <nav class="menu-list">
      <a href="#">Главная</a>
      <a href="#">Новости</a>
      <a href="#">Контакты</a>
      <a href="#">Портфолио</a>
    </nav>
  </div>
  <div class="content">
    <section class="main">
      <h2>Главная</h2>
    </section>
    <section class="news">
      <h2>Новости</h2>
    </section>
    <section class="contacts">
      <h2>Контакты</h2>
    </section>
    <section class="portfolio">
      <h2>Портфолио</h2>
    </section>
  </div>
</div>

CSS:

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.main {
  background-color: #27ae60;
}
.news {
  background-color: #9b59b6;
}
.contacts {
  background-color: #3498db;
}
.portfolio {
  background-color: #f1c40f;
}
.wrapper {
  position: relative;
  overflow-x: hidden;
}
.menu {
  position: fixed;
  left: 0;top: 0;
  z-index: 99;
  width: 30%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: 0.5s;
  transform: translateX(-100%);
}
.menu_active {
  transform: translateX(0%);
}
.menu-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50%;
  flex-direction: column;
}
.menu-list a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
}
.menu-btn {
  width: 30px;
  height: 30px;
  background-color: #333;
  position: absolute;
  right: -35px;
  top: 10px;
}
.content {
  transition: 0.5s;
  position: relative;
  z-index: 0;
}
.content_active {
  transform: translateX(30%);
}

JQuery:

$('.menu-btn').on('click', function(e) {
  e.preventDefault();
  $('.menu').toggleClass('menu_active');
  $('.content').toggleClass('content_active');
})

Урок 9. Стилизация checkbox-ов на CSS3

Очень часто заходит вопрос - как стилизовать input checkbox, ведь стандартными методами этого не решить и тогда в дело применяются псевдоэлементы тегов.

DEMO | Видеоурок

HTML:

<input type="checkbox" id="pizza" name="food">
<label for="pizza">Пицца</label>
<br>
<br>
<input type="checkbox" id="bread" name="food">
<label for="bread">Хлеб</label>
<br>
<br>
<input type="checkbox" id="pasta" name="food">
<label for="pasta">Паста</label>

CSS:

input[type="checkbox"] {
  display: none;
}
label {
  padding-left: 20px;
}
label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-left: -10px;
  margin-right: 10px;
  border-radius: 50%;
}
input[type="checkbox"]:checked + label::before {
  content: '';
  background-size: 100%;
  background-image: url(dаta:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MjYuNjY3IDQyNi42NjciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQyNi42NjcgNDI2LjY2NzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxwYXRoIHN0eWxlPSJmaWxsOiM2QUMyNTk7IiBkPSJNMjEzLjMzMywwQzk1LjUxOCwwLDAsOTUuNTE0LDAsMjEzLjMzM3M5NS41MTgsMjEzLjMzMywyMTMuMzMzLDIxMy4zMzMgIGMxMTcuODI4LDAsMjEzLjMzMy05NS41MTQsMjEzLjMzMy0yMTMuMzMzUzMzMS4xNTcsMCwyMTMuMzMzLDB6IE0xNzQuMTk5LDMyMi45MThsLTkzLjkzNS05My45MzFsMzEuMzA5LTMxLjMwOWw2Mi42MjYsNjIuNjIyICBsMTQwLjg5NC0xNDAuODk4bDMxLjMwOSwzMS4zMDlMMTc0LjE5OSwzMjIuOTE4eiIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)
}

Урок 10. Простой параллакс-эффект на чистом CSS3

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

DEMO | Видеоурок (как создать параллакс-эффект на CSS3)

HTML:

<header>
  <h1>Это всего лишь параллакс</h1>
  <small>Подзаголовок или текст</small>
</header>

CSS:

@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
html {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  padding: 0;
  perspective: 1px; 
  transform-style: preserve-3d;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: 'Amatic SC', cursive;
  color: #fff;
}
header {
  box-sizing: border-box;
  min-height: 100vh;
  text-align: center;
  padding-top: 20%;
  transform-style: inherit;
  width: 100vw;
}
header::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  transform-origin: center;
  min-height: 100vh;
  background-image: url('https://images.unsplash.com/photo-1531114181037-5e61a592cf2a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=23dbfaafedbf9400522ef9c47334f99a&auto=format&fit=crop&w=1350&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  transition: 1s;
  /* Параллакс */
  transform: translateZ(-1px) scale(2);
}
header h1 {
  margin-top: -100px;
  font-size: 42px;
}

Вы можете поделиться или сохранить для себя этот урок в социальных сетях: