Создавайте красивые изображения с помощью CSS и прокачайте ваше портфолио

84

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

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

Упражнение 1. Самое первое облако на CSS

Начнем с простого облака. Оно состоит из одного прямоугольника и двух кругов. Можно использовать три div, но лучше минимизировать HTML насколько это возможно. Поэтому используем один div для прямоугольника и два псевдоэлемента для создания кругов.

 <div class="cloud_1_init"></div>
.cloud_1_init{
  top: 20px;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 8px 5px rgba(0,0,0, 0.1);
  height: 80px;
  position: relative;
  width: 200px;
}
.cloud_1_init:after,
.cloud_1_init:before {
  content: '';
  position: absolute;
  border-radius: 100px;
  }
.cloud_1_init:after {
  top: 0px;
  left: 30px;
  height: 60px;
  width: 60px;
  background: green;
}
.cloud_1_init:before {
  top: 0px;
  right: 30px;
  width: 100px;
  height: 100px;
  color: orange;
}
один прямоугольник и два круга на CSS

Теперь нам нужно изменить фон наших кругов и передвинуть их ближе к прямоугольнику.

 <div class="cloud_1"></div>
.cloud_1 {
    top: 20px;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 8px 5px rgba(0,0,0, 0.1);
    height: 80px;
    position: relative;
    width: 200px;
  }

  .cloud_1:after,
  .cloud_1:before {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 100px;
  }
  .cloud_1:after {
    top: -30px;
    left: 30px;
    height: 60px;
    width: 60px;
  }
  .cloud_1:before {
    top: -56px;
    right: 30px;
    width: 100px;
    height: 100px;
  }
мы создали облако с помощью CSS

Вуаля! Первое созданное облако!

Упражнение 2. Волшебное Облако

Это облако необычное. Оно создано одним прямоугольником и тремя квадратиками: одним div, двумя псевдоэлементами и одним span.

<div class="FU_cloud">
  <span></span>
</div>
.FU_cloud{
  top: 60px;
  background: #fff;
  filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.2));
  height: 80px;
  width: 200px;
  position: relative;
}

.FU_cloud:after,
.FU_cloud:before {
  content: '';
  position: absolute;
  background: #fff;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  top:-17px;
}
.FU_cloud:before {
  background: green;
  left: -110px;
}
.FU_cloud:after {
  background: orange;
  right: -110px;
}
.FU_cloud span {
  width: 120px;
  height: 120px;
  transform: rotate(45deg);
  background: purple;
  top: -155px;
  margin: 0 auto;
  display: block;
  z-index: 1;
  position: relative;
}
три ромба созданные с помощью div, двух псевдоэлементов и одного span

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

<div class="FU_cloud">
  <span></span>
</div>
.FU_cloud{
  top: 30px;
  background: #fff;
  filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.2));
  height: 80px;
  width: 200px;
  position: relative;
}

.FU_cloud:after,
.FU_cloud:before {
  content: '';
  position: absolute;
  background: #fff;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  top:-17px;
}
.FU_cloud:before {
  left: -40px;
}
.FU_cloud:after {
  right: -40px;
}
.FU_cloud span {
  width: 120px;
  height: 120px;
  transform: rotate(45deg);
  top: -64px;
  margin: 0 auto;
  display: block;
  background: #fff;
  z-index: 1;
  position: relative;
}
облако в форме квадрата или треугольника

Упражнение 3. Изображения погоды

Теперь мы создадим два образа: основное солнечное облако и штормовое.

Во-первых, нам нужно создать несколько компонентов:

  • облако
  • солнце
  • молния

Наша базовая цветовая составляющая создана так же, как и первая.

<div class="cloudBase">
  <div></div>
</div>
.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}
белое облако

Облачная тень

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

<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>
  <div class="cloudBaseShadow">
    <div></div>
  </div>
</div>
.cloudWrap {
  position: relative;
  z-index: 1;
}
.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow {
  position: absolute;
  top: 65px;
  left:0;
  right:0;
  background: #69C1F8;
  height: 120px;
  width: 230px;
  border-radius: 100px;
  filter: blur(15px);
  transform: scale(0.8);
  opacity: 0.4;
  z-index: 2;
}

.cloudBaseShadow div {
  background: #69C1F8;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow div:after,
.cloudBaseShadow div:before {
  content: '';
  position: absolute;
  background: #fff;
  height: 100px;
  width: 100px;
  filter: blur(16px);
  border-radius: 100%;
}
.cloudBaseShadow div:after {
  right: -12px;
  top: -20px;
}
.cloudBaseShadow div:before {
  right: -92px;
  top: 33px;
}
облако с тенью

Шаг за шагом:

  • Дублиркем облако синим цветом.
  • Добавляем размытие.
  • Масштабируем — преображаем: масштаб(0.8).
  • Добавляем псевдоэлементы — два белых круга для маскировки тени.

Изображение солнца

Сделать его довольно просто: круг с тенью и псевдоэлементным фоном, чтобы осветить солнце.

<div class="sun"></div>
.sun {
  width:120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(30deg, #ffb347, #fbeb36);
  position: relative;
  box-shadow: 0px -6px 36px 0px #fbeb36, 0px 0px 6px 0px #ffb347;
}
.sun:after {
  content: '';
  position: absolute;
  top:-3px;
  bottom:-3px;
  left:-3px;
  right:-3px;
  border-radius: 50%;
  filter: blur(10px);
  background: linear-gradient(30deg,rgb(251 235 54 / 30%) 20%,rgb(255 255 255 / 49%));
  z-index: 1;
}
солнце круг


Облако и солнце

Теперь мы должны соединить солнце, облако и несколько дополнительных солнечных вспышек.

<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>

  <div class="cloudBaseShadow">
    <div></div>
  </div>
  <div class="sun"></div>
  <div class="flash"></div>
</div>
.cloudWrap {
  position: relative;
  z-index: 1;
}
.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow {
  position: absolute;
  top: 65px;
  left:0;
  right:0;
  background: #69C1F8;
  height: 120px;
  width: 230px;
  border-radius: 100px;
  filter: blur(15px);
  transform: scale(0.8);
  opacity: 0.4;
  z-index: 2;
}

.cloudBaseShadow div {
  background: #69C1F8;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow div:after,
.cloudBaseShadow div:before {
  content: '';
  position: absolute;
  background: #fff;
  height: 100px;
  width: 100px;
  filter: blur(16px);
  border-radius: 100%;
}
.cloudBaseShadow div:after {
  right: -12px;
  top: -20px;
}
.cloudBaseShadow div:before {
  right: -92px;
  top: 33px;
}

.sun {
  position: absolute;
  top: -50px;
  right: -20px;
  z-index: -1;
  width:120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(30deg, #ffb347, #fbeb36);
  box-shadow: 0px -6px 36px 0px #fbeb36, 0px 0px 6px 0px #ffb347;
}
.sun:after {
  content: '';
  position: absolute;
  top:-3px;
  bottom:-3px;
  left:-3px;
  right:-3px;
  border-radius: 50%;
  filter: blur(10px);
  background: linear-gradient(30deg,rgb(251 235 54 / 30%) 20%,rgb(255 255 255 / 49%));
  z-index: 1;
}

.flash {
  position: absolute;
  bottom: -40px;
  left: -20px;
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.4);
  box-shadow: 0px 0px 6px 3px rgba(255,255,255,0.4);
  border-radius: 50%;
  z-index: 2;
}
.flash:before {
  content: '';
  width: 10px;
  height: 10px;
  background: #fff;
  box-shadow: 0px 0px 6px 3px rgba(255,255,255,0.4);
  border-radius: 50%;
  filter: blur(0px);
  position: absolute;
  top: 60px;
  left: -10px;
}
солнце и облако

И все! Вы можете играть с солнечным облаком на CodePen.

Как видите, создание этого изображения заняло у нас всего несколько минут работы. Более того, создание еще одного на основе этого же может быть даже быстрее. Так что давайте сделаем его!

Молния

Прежде всего, создадим форму молнии, объединив два треугольника. Теперь используйте два треугольника и анимируйте форму с помощью CSS.

<div class="lightningBolt"></div>
@keyframes flash{
  0%, to { opacity: 1; }
  4% { opacity: 0; }
  6% { opacity: .6; }
  8% { opacity: .2; }
  10% { opacity: .9; }
}

@keyframes float{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}


.lightningBolt {
  position: absolute;
  z-index: 3;
  width: 80px;
  height: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -40px;
  animation: flash 3s infinite, float 3s ease-in-out infinite;
}

.lightningBolt:before,
.lightningBolt:after {
  content: '';
  position: absolute;
}
.lightningBolt:before {
  width: 0;
  height: 0;
  left: -4px;
  top: 5px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg);
}
.lightningBolt:after {
  width: 0;
  height: 0;
  left: 4px;
  top: -40px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg) scaleY(-1) scaleX(-1);
}
желтая молния

Грозовое облако

Теперь объединим наше основное облако (с серым фоном), молнию и немного CSS для ветра и капель воды.

<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>
  <div class="cloudBaseShadow">
    <div></div>
  </div>
  <div class="wind"></div>
  <div class="lightningBolt"></div>
</div>
.cloudWrap {
  position: relative;
  z-index: 1;
}
.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow {
  position: absolute;
  top: 65px;
  left:0;
  right:0;
  background: #5B7186;
  height: 120px;
  width: 230px;
  border-radius: 100px;
  filter: blur(15px);
  transform: scale(0.8);
  opacity: 0.4;
  z-index: 2;
}

.cloudBaseShadow div {
  background: #5B7186;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow div:after,
.cloudBaseShadow div:before {
  content: '';
  position: absolute;
  background: #fff;
  height: 100px;
  width: 100px;
  filter: blur(16px);
  border-radius: 100%;
}
.cloudBaseShadow div:after {
  right: -12px;
  top: -20px;
}
.cloudBaseShadow div:before {
  right: -92px;
  top: 33px;
}


@keyframes flash{
  0%, to { opacity: 1; }
  4% { opacity: 0; }
  6% { opacity: .6; }
  8% { opacity: .2; }
  10% { opacity: .9; }
}

@keyframes float{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}


.lightningBolt {
  position: absolute;
  z-index: 3;
  width: 80px;
  height: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -40px;
  animation: flash 3s infinite, float 3s ease-in-out infinite;
}

.lightningBolt:before,
.lightningBolt:after {
  content: '';
  position: absolute;
}
.lightningBolt:before {
  width: 0;
  height: 0;
  left: -4px;
  top: 5px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg);
}
.lightningBolt:after {
  width: 0;
  height: 0;
  left: 4px;
  top: -40px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg) scaleY(-1) scaleX(-1);
}

.wind {
  position: absolute;
  top: 20px;
  left: -10px;
  width: 90px;
  height: 20px;
  background: linear-gradient(-90deg,rgb(91 113 134 / 0.4),transparent);
  z-index: -1;
}
.wind:before {
  content: '';
  width: 60px;
  height: 20px;
  background: linear-gradient(90deg,transparent,rgb(91 113 134 / 0.4));
  position: absolute;
  top: 60px;
  right: -190px;
}
.wind:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50%;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  z-index: 1;
  filter: blur(2px);
  z-index: 1;
  box-shadow: 
  50px -30px 2px rgb(91 113 134 / 0.4),
  -20px 90px 0px rgb(91 113 134 / 0.4),
  240px 10px 2px rgb(91 113 134 / 0.4);
  animation: float 3s ease-in-out infinite;
}
туча и желтая молния

Ну вот и все! Вы можете играть с грозовым облаком на CodePen.

Источник: dev.to

Поделитесь в соц.сетях
  • 1
  •  
  •  
  •  
  •  
  •  
  •  

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *