Ваша корзина пуста
Форма входа

Бесплатный раздел

Вы здесь: Главная страница » Файлы » Хаки / Дополнения
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Фотоапарат на CSS

Дата добавления: 05.03.2017 - 15:42
Добавил: Buger
Количество просмотров: 1.0k
Количество комментариев: 0
Размер файла: 2.7 Kb
Рейтинг материала: 5.0 / 1
Фотоапарат на CSS
БЕСПЛАТНО
Демонстрация
рейтинг 5.0
/
голосов 1
Отличный вид фотоаппарата на CSS в плоском стиле Flat. Весь его вид выполнен на css коде и не содержит ни одного изображения. Так что вы его сможете изменить под свои нужды, достаточно поиграться с кодом и ваш фотоаппарат будет иметь темный стиль. Из преимуществ можно отметить то, что нет лишней нагрузки на сайт, быстро читается и открывается в браузерах. А это, как говорится, имеет большой плюс.

Демонстрацию вы сможете увидеть в скачанном файле.

И так, поехали!

Код CSS
Код
<style>
body {
  background: #54525C;
}
.container {
  position: relative;
  margin: 0 auto;
  width: 495px;
  margin-top: 10%;
}
.camera,
.band,
.lens,
.flash {
  position: absolute;
}
.camera {
  width: 50vmin;
  height: 30vmin;
  background: #E6E8E6;
  border-radius: 2vmin;
  box-shadow: 1vmin 1vmin 0 0 rgba(0, 0, 0, 0.2);
}
   
.band {
  top: 50%;
  margin-top: -8vmin;
  width: 50vmin;
  height: 15vmin;
  background: #E88873;
}
.lens {
  width: 20vmin;
  height: 20vmin;
  border-radius: 100%;
  background: radial-gradient(#000000 0%, #000000 20%, #383838 0%, #383838 40%, #4b4b4b 0%, #4b4b4b 50%, #3a3a3a 0%, #3a3a3a 60%, #e6e8e6 0%, #e6e8e6 100%);
  left: 50%;
  margin-left: -10vmin;
  top: 50%;
  margin-top: -10vmin;
}
   
.lens:before,
.lens:after {
  position: absolute;
  content: '';
  }
  .lens:before {
  width: 14vmin;
  height: 7vmin;
  border-radius: 100%;
  border-bottom: 7vmin solid rgba(255, 255, 255, 0.2);
  left: 3vmin;
  top: 3vmin;
  transform: rotate(-50deg);
  }
  .lens:after {
  width: 1.5vmin;
  height: 1.5vmin;
  border-radius: 100%;
  background: #FFF;
  top: 8vmin;
  left: 10vmin;
  opacity: 0.8;
  }
  .flash {
  top: 2vmin;
  }  
.flash:before,
.flash:after {
  position: absolute;
  content: '';
  }  
.flash:before {
  width: 3vmin;
  height: 3vmin;
  background: #ADE1E5;
  left: 44vmin;
  border-radius: 100%;
}  
.flash:after {
  width: 1vmin;
  height: 1vmin;
  background: #FFF;
  top: 13vmin;
  border-radius: 100%;
  left: 23vmin;
  opacity: 0.6;
}
</style>


Код HTML
Код
<div class="container">
  <div class="camera">
  <div class="band"></div>
  <div class="lens"></div>
  <div class="flash"></div>
  </div>
</div>


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: