Скрипты

timeloto-скрипт-моментальной-лотереи Оригинальный скрипт TimeLoto с качественным дизайном, тремя соц. системами для входа, встроено звуковое оповещение при выиграше. Выплаты на:...
vcity-браузерная-игра vCity - это браузерная онлайн-игра, которая разработана с помощью новейших веб-технологий. vCity - это многофункциональный игровой скрипт, который...
php-pro-bid-v7-8-магазин-аукцион PHP Pro Bid является первым продуктом на рынке, который включает всестороннюю поддержку как онлайн-аукционов, так и электронной коммерции. Если Вам...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

CSS3 Анимация на примере колбы с пузырьками

thumb CSS3 animated bulb with bubbles 1

В этом примере мы будем создавать анимированную колбу с пузырьками средствами CSS3. Очень часто, когда мы хотим создать анимацию, мы думаем об использовании JavaScript, но иногда создать анимацию можно используя возможности CSS3. Мы можем нарисовать основные элементы, такие как прямоугольники, круги и треугольники с помощью псевдо-классов CSS3.

 CSS3 animated bulb with bubbles 1

Ссылка на файл из нашего архива доступна только для зарегистрированных пользователей сайта!
Регистрация

Изучаем задачи.

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

1-Псевдо-элементы :before и :after
2-Позиционирования top, right, bottom, left и z-index.
3-border, width и height.

Основание колбы.

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

<div class="flask">
  <div class="flask_bottom">
    <div class="big_triangle">

    </div>
  </div>
</div>

Основной элемент с классом flask находится в базовом классе flask_bottom.
Мы добавили шаблон для будущего треугольника.

Стили для разметки:

Спойлер.
body {
  background-color: #292548;
}

.flask {
  height: 405px;
  width: 368px;
  position: absolute;
  bottom: 0;
}

.flask_bottom {
  bottom: 0;
  position: absolute;
}

.big_triangle {
  overflow: hidden;
  position: relative;
  width: 368px;
  height: 250px;
  background-color: #fff;
}

Основание фиксируется на дне колбы используя position: absolute и bottom: 0. 
Установив ширину 368 px. и высоту 250 px.

В результате мы имеем прямоугольник.

 CSS3 animated bulb with bubbles 2

Теперь начинается самое интересное, как же теперь сделать треугольник?
Для этого мы будем использовать псевдо-классы :before и :after.
Используя их мы создадим правильные треугольники и разложим их по верх белого прямоугольника от левого и правого края, таким образом скрывая часть его площади.

CSS3 animated bulb with bubbles 3
Но сначала нам надо сделать прямоугольные треугольники.

Для этого надо добавить следующий CSS код:

Спойлер.
.big_triangle:before, .big_triangle:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 250px solid #292548;
  position: absolute;
  top: 0;
  z-index: 100;
}

.big_triangle:before {
  border-right: 152px solid transparent;
  left: 0;
}

.big_triangle:after {
  border-left: 152px solid transparent;
  right: 0;
}

Основная техника создания треугольников с помощью CSS это использовать border.
Но сначала нужно установить ширину и высоту элементов равную 0, для правильного расчёта размера треугольника.
Рядом с ним устанавливается свойство border-top равное 250 px. и цвет #292548 (Цвет фона).
Далее слева треугольника свойство border-left со значением 152 px.
Тоже самое делаем для прямоугольного треугольника , только вместо border-left испольуем border-right.
По краям прямоугольника используем свойства left и right.

CSS3 animated bulb with bubbles 4

Элементы основания.

Сейчас мы начнём реализовывать элементы базы.
Чтобы сделать это необходимо добавить следующую разметику:

Спойлер.
<div class="flask">
  <div class="flask_bottom">
    <div class="big_triangle">
      <div class="flask_bottom_one"></div>
      <div class="flask_bottom_two"></div>
      <div class="flask_bottom_five"></div>
      <div class="flask_bottom_six"></div>
      <div class="flask_bottom_seven"></div>
      <div class="flask_bottom_eight"></div>
    </div>
  </div>
</div>

Затем используем следующие стили CSS:

Спойлер.
.flask_bottom_one {
  width: 0;
  height: 0;
  border-bottom: 55px solid #3a2481;
  border-left: 32px solid transparent;
  border-right: 42px solid transparent;
  position: absolute;
  bottom: 0;
  z-index: 4;
}

.flask_bottom_two {
  border-bottom: 165px solid #4266c0;
  border-left: 93px solid transparent;
  border-right: 200px solid transparent;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.flask_bottom_five {
  position: absolute;
  background-color: #4248c0;
  width: 100%;
  height: 75px;
  position: absolute;
  z-index: 3;
  left: 50px;
  bottom: 18px;
  -webkit-transform: rotate(24deg);
  transform: rotate(24deg);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.flask_bottom_six {
  position: absolute;
  background-color: #37acdd;
  width: 100%;
  height: 170px;
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
}

.flask_bottom_seven {
  position: absolute;
  background-color: #1493c8;
  width: 100%;
  height: 218px;
  position: absolute;
  z-index: 3;
  right: -95px;
  bottom: 24px;
  -webkit-transform: rotate(24deg);
  transform: rotate(24deg);
  -webkit-transform-origin: right top;
  transform-origin: right top;
}

.flask_bottom_eight {
  position: absolute;
  background-color: #5c30ae;
  width: 100%;
  height: 50px;
  position: absolute;
  z-index: 3;
  right: -95px;
  bottom: 218px;
  -webkit-transform: rotate(-12deg);
  transform: rotate(-12deg);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

Важным шагом в создании элементов является сохранение треугольной формы основания.
При установки внутренних элементов, они будут вне треугольника.
Чтобы избежать этого, можно добавить свойство overflow с значением hidden к классу big_triangle.
Когда браузер прочитает это свойство, он будет скрывать всё что выходит за пределы элемента с классом big_triangle.
Далее нам нужно создать 6 дополнительных элементов используя свойство transform ( со значением rotate) и transform-origin, располагая их так как нам нужно.
В нашем случае трансформация необходима чтобы вращать элементы и и transform-origin для указания точки вокруг которой будем вращать элементы.
Также используя абсолютное позиционирование, мы имеем элементы на своих местах.
В результате мы получаем:

Верхняя часть и её элементы.

Для создания верхней части колбы нам нужно создать прямоугольник размером 62 на 152 px. и поместить внутрь все 4 элемента.
Рассмотрим следующую разметку:

Спойлер.
<div class="flask">
  <div class="flask_throat">
    <div class="flask_throat_one"></div>
    <div class="flask_throat_two"></div>
    <div class="flask_throat_three"></div>
    <div class="flask_throat_four"></div>
  </div>
  <div class="flask_bottom">
    <div class="big_triangle">
      <div class="flask_bottom_one"></div>
      <div class="flask_bottom_two"></div>
      <div class="flask_bottom_five"></div>
      <div class="flask_bottom_six"></div>
      <div class="flask_bottom_seven"></div>
      <div class="flask_bottom_eight"></div>
    </div>
  </div>
</div>

И стили для этой разметки:

Спойлер.
.flask_throat {
  overflow: hidden;
  height: 155px;
  width: 64px;
  position: absolute;
  left: 152px;
  top: 0;
}

.flask_throat_one {
  position: absolute;
  -webkit-transform: rotate(24deg);
  transform: rotate(24deg);
  -webkit-transform-origin: right top;
  transform-origin: right top;
  background-color: #5c30ae;
  width: 150px;
  height: 50px;
  position: absolute;
  z-index: 3;
  right: -26px;
  top: 110px;
}

.flask_throat_two {
  position: absolute;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  -webkit-transform-origin: right top;
  transform-origin: right top;
  background-color: #37acdd;
  width: 150px;
  height: 60px;
  position: absolute;
  z-index: 3;
  right: -35px;
  top: 35px;
}

.flask_throat_three {
  position: absolute;
  background-color: #5c30ae;
  width: 100%;
  height: 50px;
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
}

.flask_throat_four {
  position: absolute;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  -webkit-transform-origin: right top;
  transform-origin: right top;
  background-color: #6c49ac;
  width: 150px;
  height: 20px;
  position: absolute;
  z-index: 3;
  right: -45px;
  top: 100px;
}

Расположение элементов точно такое же как и у базы.
В итоге мы получаем готовую колбу!

CSS3 animated bulb with bubbles 6

Анимация пузырьков.

После того как будет загружена колба через некоторое время появляются пузырьки.
Они будут разных размеров и цветов и время появления будет разным.
Для реализации пузырьков сы будем использовать современные возможности CSS, а в частности свойство border-radius.
Используя это свойство можно скруглить углы элемента.
Теперь создадим 3 разноцветных пузырька одинокого размера, один немного больше и ещё один более крупный.

Вот разметка:

Спойлер.
<div class="flask">
  <div class="circle small_circle"></div>
  <div class="circle middle_circle"></div>
  <div class="circle little_circle little_circle_white"></div>
  <div class="circle little_circle little_circle_purpure"></div>
  <div class="circle little_circle little_circle_blue"></div>
  <div class="flask_throat">
    <div class="flask_throat_one"></div>
    <div class="flask_throat_two"></div>
    <div class="flask_throat_three"></div>
    <div class="flask_throat_four"></div>
  </div>
  <div class="flask_bottom">
    <div class="big_triangle">
      <div class="flask_bottom_one"></div>
      <div class="flask_bottom_two"></div>
      <div class="flask_bottom_five"></div>
      <div class="flask_bottom_six"></div>
      <div class="flask_bottom_seven"></div>
      <div class="flask_bottom_eight"></div>
    </div>
  </div>
</div>

Затем добавим стили CSS для пузырьков:

Спойлер.
.circle {
  border-radius: 50%;
  border: 1px solid #fff;
  position: absolute;
  left: 45%;
  top: 30px;
  -webkit-animation-name: circle;
  animation-name: circle;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.little_circle {
  width: 5px;
  height: 5px;
}

.little_circle_white {
  background-color: #fff;
  left: 48%;
  -webkit-animation-duration: 2000ms;
  animation-duration: 2000ms;
}

.little_circle_purpure {
  background-color: #6c49ac;
  border: 1px solid #6c49ac;
  left: 52%;
  -webkit-animation-duration: 2000ms;
  animation-duration: 2000ms;
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

.little_circle_blue {
  background-color: #117fba;
  border: 1px solid #117fba;
  left: 45%;
  -webkit-animation-duration: 2000ms;
  animation-duration: 2000ms;
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.small_circle {
  width: 20px;
  height: 20px;
  -webkit-animation-duration: 4200ms;
  animation-duration: 4200ms;
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}

.middle_circle {
  width: 45px;
  height: 45px;
}

@-webkit-keyframes circle {
  0% {
    -webkit-transform: translateZ(0px) translateY(20px) scale(1);
    transform: translateZ(0px) translateY(20px) scale(1);
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px) translateY(-200px) scale(0);
    transform: translateZ(0px) translateY(-200px) scale(0);
    opacity: 0;
  }
}

@keyframes circle {
  0% {
    -webkit-transform: translateZ(0px) translateY(20px) scale(1);
    transform: translateZ(0px) translateY(20px) scale(1);
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px) translateY(-200px) scale(0);
    transform: translateZ(0px) translateY(-200px) scale(0);
    opacity: 0;
  }
}

Следующим шагом будет создание анимации с использованием @keyframes.
При загрузки страницы пузырьки находятся в начальной координате 20px. по оси Y.
Затем пузырьки начинают двигаться по оси Y от начала координат до 200px.
Помимо этого движения, пузырьки будут двигаться дальше.
Для этого мы используем свойство transform.
Также при движении пузырьки постепенно исчезают, для этого используем свойства opacity.
Сценарий создан, теперь нам нужно указать это в классе circle.
Далее для каждого пузырька мы поставили задержку с помощью animation-delay, и таким образом они будут появляться в разные сроки. Последним шагом будет это установить animation-iteration-count на бесконечное значение для повторения сценария анимации.

Анимация колбы

Для анимации колбы я создал другой сценарий для каждого элемента:

Спойлер.
@-webkit-keyframes animation_bg_element1 {
  0% {
    border-bottom-color: #3a2481;
  }
  25% {
    border-bottom-color: #242781;
  }
  50% {
    border-bottom-color: #244081;
  }
  75% {
    border-bottom-color: #242781;
  }
}

@keyframes animation_bg_element1 {
  0% {
    border-bottom-color: #3a2481;
  }
  25% {
    border-bottom-color: #242781;
  }
  50% {
    border-bottom-color: #244081;
  }
  75% {
    border-bottom-color: #242781;
  }
}

@-webkit-keyframes animation_bg_element2 {
  0% {
    border-bottom-color: #4266c0;
  }
  25% {
    border-bottom-color: #4287c0;
  }
  50% {
    border-bottom-color: #42a8c0;
  }
  75% {
    border-bottom-color: #4287c0;
  }
}

@keyframes animation_bg_element2 {
  0% {
    border-bottom-color: #4266c0;
  }
  25% {
    border-bottom-color: #4287c0;
  }
  50% {
    border-bottom-color: #42a8c0;
  }
  75% {
    border-bottom-color: #4287c0;
  }
}

@-webkit-keyframes animation_bg_element3 {
  0% {
    background-color: #4248c0;
  }
  25% {
    background-color: #4269c0;
  }
  50% {
    background-color: #428ac0;
  }
  75% {
    background-color: #4269c0;
  }
}

@keyframes animation_bg_element3 {
  0% {
    background-color: #4248c0;
  }
  25% {
    background-color: #4269c0;
  }
  50% {
    background-color: #428ac0;
  }
  75% {
    background-color: #4269c0;
  }
}

@-webkit-keyframes animation_bg_element4 {
  0% {
    background-color: #37acdd;
  }
  25% {
    background-color: #37d8dd;
  }
  50% {
    background-color: #37ddb5;
  }
  75% {
    background-color: #37d8dd;
  }
}

@keyframes animation_bg_element4 {
  0% {
    background-color: #37acdd;
  }
  25% {
    background-color: #37d8dd;
  }
  50% {
    background-color: #37ddb5;
  }
  75% {
    background-color: #37d8dd;
  }
}

@-webkit-keyframes animation_bg_element5 {
  0% {
    background-color: #1493c8;
  }
  25% {
    background-color: #14c2c8;
  }
  50% {
    background-color: #14c89d;
  }
  75% {
    background-color: #14c2c8;
  }
}

@keyframes animation_bg_element5 {
  0% {
    background-color: #1493c8;
  }
  25% {
    background-color: #14c2c8;
  }
  50% {
    background-color: #14c89d;
  }
  75% {
    background-color: #14c2c8;
  }
}

@-webkit-keyframes animation_bg_element6 {
  0% {
    background-color: #5c30ae;
  }
  25% {
    background-color: #3a30ae;
  }
  50% {
    background-color: #3048ae;
  }
  75% {
    background-color: #3a30ae;
  }
}

@keyframes animation_bg_element6 {
  0% {
    background-color: #5c30ae;
  }
  25% {
    background-color: #3a30ae;
  }
  50% {
    background-color: #3048ae;
  }
  75% {
    background-color: #3a30ae;
  }
}

@-webkit-keyframes animation_bg_element7 {
  0% {
    background-color: #6c49ac;
  }
  25% {
    background-color: #5249ac;
  }
  50% {
    background-color: #495aac;
  }
  75% {
    background-color: #5249ac;
  }
}

@keyframes animation_bg_element7 {
  0% {
    background-color: #6c49ac;
  }
  25% {
    background-color: #5249ac;
  }
  50% {
    background-color: #495aac;
  }
  75% {
    background-color: #5249ac;
  }
}

Теперь я добавлю вызов анимации в каждом классе:

Спойлер.
.flask_throat_one {
  position: absolute;
  -webkit-transform: rotate(24deg);
  transform: rotate(24deg);
  -webkit-transform-origin: right top;
  transform-origin: right top;
  background-color: #5c30ae;
  width: 150px;
  height: 50px;
  position: absolute;
  z-index: 3;
  right: -26px;
  top: 110px;
  -webkit-animation-name: animation_bg_element6;
  animation-name: animation_bg_element6;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.flask_throat_two {
  position: absolute;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  -webkit-transform-origin: right top;
  transform-origin: right top;
  background-color: #37acdd;
  width: 150px;
  height: 60px;
  position: absolute;
  z-index: 3;
  right: -35px;
  top: 35px;
  -webkit-animation-name: animation_bg_element5;
  animation-name: animation_bg_element5;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.flask_throat_three {
  position: absolute;
  background-color: #5c30ae;
  width: 100%;
  height: 50px;
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  -webkit-animation-name: animation_bg_element6;
  animation-name: animation_bg_element6;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.flask_throat_four {
  position: absolute;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  -webkit-transform-origin: right top;
  transform-origin: right top;
  background-color: #6c49ac;
  width: 150px;
  height: 20px;
  position: absolute;
  z-index: 3;
  right: -45px;
  top: 100px;
  -webkit-animation-name: animation_bg_element7;
  animation-name: animation_bg_element7;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.flask_bottom_one {
  width: 0;
  height: 0;
  border-bottom: 55px solid #3a2481;
  border-left: 32px solid transparent;
  border-right: 42px solid transparent;
  position: absolute;
  bottom: 0;
  z-index: 4;
  -webkit-animation-name: animation_bg_element1;
  animation-name: animation_bg_element1;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.flask_bottom_two {
  border-bottom: 165px solid #4266c0;
  border-left: 93px solid transparent;
  border-right: 200px solid transparent;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  -webkit-animation-name: animation_bg_element2;
  animation-name: animation_bg_element2;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.flask_bottom_five {
  position: absolute;
  background-color: #4248c0;
  width: 100%;
  height: 75px;
  position: absolute;
  z-index: 3;
  left: 50px;
  bottom: 18px;
  -webkit-transform: rotate(24deg);
  transform: rotate(24deg);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-animation-name: animation_bg_element3;
  animation-name: animation_bg_element3;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.flask_bottom_six {
  position: absolute;
  background-color: #37acdd;
  width: 100%;
  height: 170px;
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  -webkit-animation-name: animation_bg_element4;
  animation-name: animation_bg_element4;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.flask_bottom_seven {
  position: absolute;
  background-color: #1493c8;
  width: 100%;
  height: 218px;
  position: absolute;
  z-index: 3;
  right: -95px;
  bottom: 24px;
  -webkit-transform: rotate(24deg);
  transform: rotate(24deg);
  -webkit-transform-origin: right top;
  transform-origin: right top;
  -webkit-animation-name: animation_bg_element5;
  animation-name: animation_bg_element5;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.flask_bottom_eight {
  position: absolute;
  background-color: #5c30ae;
  width: 100%;
  height: 50px;
  position: absolute;
  z-index: 3;
  right: -95px;
  bottom: 218px;
  -webkit-transform: rotate(-12deg);
  transform: rotate(-12deg);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-animation-name: animation_bg_element6;
  animation-name: animation_bg_element6;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

Вывод

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



  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

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

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...