Интернет магазин шабонов
Форма входа

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

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

Сотовый телефон на чистом CSS

Дата добавления: 03.03.2017 - 17:05
Добавил: Buger
Количество просмотров: 171
Количество комментариев: 0
Размер файла: 8.7Kb
Рейтинг материала: 5.0 / 1
Сотовый телефон на чистом CSS
рейтинг 5.0
/
голосов 1
Очень интересная задумка без применений изображений которые нагружают сайт. Телефон был создан и написан на чистом CSS коде, что существенно снижает нагрузку на сайт. Думаю что данная реализация отлично подойдет для вида материалов на сайтах посвященным мобильным телефонам и приложениям. Так что используйте данный код в своих проектах где нужен показ и вывод телефона. Идея нашлась, остается за малым, решить где ее применить у себя.

Ну а теперь давайте приступим к установке кода.

И так, подключаем стили CSS
Код
<style class="cp-pen-styles">
  .image {
  left: 50%;
  position: absolute;
  top: calc(50% + 5vh);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  }
   
  .phone {
  background: url("https://lh3.googleusercontent.com/lc9oV4bP2JldhDt0JIdKbZ11E4FV5bGkdQ63cWZTbIg0OYVaqkKQ74EtSTHt_TehTSE=h900") no-repeat 50% 50%/*/cover*/;
  background-size: 87%;
  border-radius: 5vmin;
  box-shadow: inset 0 58.575vmin 0 -50vmin black, inset 0 -58.575vmin 0 -50vmin black, inset 2.275vmin 0 0 0 black, inset -2.275vmin 0 0 0 black, 0 0 0.5vmin 0.1vmin silver, 0 0 0 0.5vmin #333;
  height: 69.15vmin;
  width: 33.55vmin;
  }
   
  .phone:before {
  border-radius: 50%;
  bottom: 1.5vmin;
  box-shadow: inset 0 0 0.5vmin -0.5vmin white, inset -0.25vmin 0 1vmin -0.5vmin white, inset 0.5vmin -0.5vmin 1vmin -1vmin white, -5.9vmin -60.48333vmin 0.05vmin -2.1vmin #111, -5.8vmin -60.48333vmin 0 -2vmin #444, 0 0 0 0, -3vmin -60.48333vmin 0 -2.5vmin #333, -2.95vmin -60.48333vmin 0 -2.5vmin #333, -2.9vmin -60.48333vmin 0 -2.5vmin #333, -2.85vmin -60.48333vmin 0 -2.5vmin #333, -2.8vmin -60.48333vmin 0 -2.5vmin #333, -2.75vmin -60.48333vmin 0 -2.5vmin #333, -2.7vmin -60.48333vmin 0 -2.5vmin #333, -2.65vmin -60.48333vmin 0 -2.5vmin #333, -2.6vmin -60.48333vmin 0 -2.5vmin #333, -2.55vmin -60.48333vmin 0 -2.5vmin #333, -2.5vmin -60.48333vmin 0 -2.5vmin #333, -2.45vmin -60.48333vmin 0 -2.5vmin #333, -2.4vmin -60.48333vmin 0 -2.5vmin #333, -2.35vmin -60.48333vmin 0 -2.5vmin #333, -2.3vmin -60.48333vmin 0 -2.5vmin #333, -2.25vmin -60.48333vmin 0 -2.5vmin #333, -2.2vmin -60.48333vmin 0 -2.5vmin #333, -2.15vmin -60.48333vmin 0 -2.5vmin #333, -2.1vmin -60.48333vmin 0 -2.5vmin #333, -2.05vmin -60.48333vmin 0 -2.5vmin #333, -2vmin -60.48333vmin 0 -2.5vmin #333, -1.95vmin -60.48333vmin 0 -2.5vmin #333, -1.9vmin -60.48333vmin 0 -2.5vmin #333, -1.85vmin -60.48333vmin 0 -2.5vmin #333, -1.8vmin -60.48333vmin 0 -2.5vmin #333, -1.75vmin -60.48333vmin 0 -2.5vmin #333, -1.7vmin -60.48333vmin 0 -2.5vmin #333, -1.65vmin -60.48333vmin 0 -2.5vmin #333, -1.6vmin -60.48333vmin 0 -2.5vmin #333, -1.55vmin -60.48333vmin 0 -2.5vmin #333, -1.5vmin -60.48333vmin 0 -2.5vmin #333, -1.45vmin -60.48333vmin 0 -2.5vmin #333, -1.4vmin -60.48333vmin 0 -2.5vmin #333, -1.35vmin -60.48333vmin 0 -2.5vmin #333, -1.3vmin -60.48333vmin 0 -2.5vmin #333, -1.25vmin -60.48333vmin 0 -2.5vmin #333, -1.2vmin -60.48333vmin 0 -2.5vmin #333, -1.15vmin -60.48333vmin 0 -2.5vmin #333, -1.1vmin -60.48333vmin 0 -2.5vmin #333, -1.05vmin -60.48333vmin 0 -2.5vmin #333, -1vmin -60.48333vmin 0 -2.5vmin #333, -0.95vmin -60.48333vmin 0 -2.5vmin #333, -0.9vmin -60.48333vmin 0 -2.5vmin #333, -0.85vmin -60.48333vmin 0 -2.5vmin #333, -0.8vmin -60.48333vmin 0 -2.5vmin #333, -0.75vmin -60.48333vmin 0 -2.5vmin #333, -0.7vmin -60.48333vmin 0 -2.5vmin #333, -0.65vmin -60.48333vmin 0 -2.5vmin #333, -0.6vmin -60.48333vmin 0 -2.5vmin #333, -0.55vmin -60.48333vmin 0 -2.5vmin #333, -0.5vmin -60.48333vmin 0 -2.5vmin #333, -0.45vmin -60.48333vmin 0 -2.5vmin #333, -0.4vmin -60.48333vmin 0 -2.5vmin #333, -0.35vmin -60.48333vmin 0 -2.5vmin #333, -0.3vmin -60.48333vmin 0 -2.5vmin #333, -0.25vmin -60.48333vmin 0 -2.5vmin #333, -0.2vmin -60.48333vmin 0 -2.5vmin #333, -0.15vmin -60.48333vmin 0 -2.5vmin #333, -0.1vmin -60.48333vmin 0 -2.5vmin #333, -0.05vmin -60.48333vmin 0 -2.5vmin #333, 0vmin -60.48333vmin 0 -2.5vmin #333, 0.05vmin -60.48333vmin 0 -2.5vmin #333, 0.1vmin -60.48333vmin 0 -2.5vmin #333, 0.15vmin -60.48333vmin 0 -2.5vmin #333, 0.2vmin -60.48333vmin 0 -2.5vmin #333, 0.25vmin -60.48333vmin 0 -2.5vmin #333, 0.3vmin -60.48333vmin 0 -2.5vmin #333, 0.35vmin -60.48333vmin 0 -2.5vmin #333, 0.4vmin -60.48333vmin 0 -2.5vmin #333, 0.45vmin -60.48333vmin 0 -2.5vmin #333, 0.5vmin -60.48333vmin 0 -2.5vmin #333, 0.55vmin -60.48333vmin 0 -2.5vmin #333, 0.6vmin -60.48333vmin 0 -2.5vmin #333, 0.65vmin -60.48333vmin 0 -2.5vmin #333, 0.7vmin -60.48333vmin 0 -2.5vmin #333, 0.75vmin -60.48333vmin 0 -2.5vmin #333, 0.8vmin -60.48333vmin 0 -2.5vmin #333, 0.85vmin -60.48333vmin 0 -2.5vmin #333, 0.9vmin -60.48333vmin 0 -2.5vmin #333, 0.95vmin -60.48333vmin 0 -2.5vmin #333, 1vmin -60.48333vmin 0 -2.5vmin #333, 1.05vmin -60.48333vmin 0 -2.5vmin #333, 1.1vmin -60.48333vmin 0 -2.5vmin #333, 1.15vmin -60.48333vmin 0 -2.5vmin #333, 1.2vmin -60.48333vmin 0 -2.5vmin #333, 1.25vmin -60.48333vmin 0 -2.5vmin #333, 1.3vmin -60.48333vmin 0 -2.5vmin #333, 1.35vmin -60.48333vmin 0 -2.5vmin #333, 1.4vmin -60.48333vmin 0 -2.5vmin #333, 1.45vmin -60.48333vmin 0 -2.5vmin #333, 1.5vmin -60.48333vmin 0 -2.5vmin #333, 1.55vmin -60.48333vmin 0 -2.5vmin #333, 1.6vmin -60.48333vmin 0 -2.5vmin #333, 1.65vmin -60.48333vmin 0 -2.5vmin #333, 1.7vmin -60.48333vmin 0 -2.5vmin #333, 1.75vmin -60.48333vmin 0 -2.5vmin #333, 1.8vmin -60.48333vmin 0 -2.5vmin #333, 1.85vmin -60.48333vmin 0 -2.5vmin #333, 1.9vmin -60.48333vmin 0 -2.5vmin #333, 1.95vmin -60.48333vmin 0 -2.5vmin #333, 2vmin -60.48333vmin 0 -2.5vmin #333, 2.05vmin -60.48333vmin 0 -2.5vmin #333, 2.1vmin -60.48333vmin 0 -2.5vmin #333, 2.15vmin -60.48333vmin 0 -2.5vmin #333, 2.2vmin -60.48333vmin 0 -2.5vmin #333, 2.25vmin -60.48333vmin 0 -2.5vmin #333, 2.3vmin -60.48333vmin 0 -2.5vmin #333, 2.35vmin -60.48333vmin 0 -2.5vmin #333, 2.4vmin -60.48333vmin 0 -2.5vmin #333, 2.45vmin -60.48333vmin 0 -2.5vmin #333, 2.5vmin -60.48333vmin 0 -2.5vmin #333, 2.55vmin -60.48333vmin 0 -2.5vmin #333, 2.6vmin -60.48333vmin 0 -2.5vmin #333, 2.65vmin -60.48333vmin 0 -2.5vmin #333, 2.7vmin -60.48333vmin 0 -2.5vmin #333, 2.75vmin -60.48333vmin 0 -2.5vmin #333, 2.8vmin -60.48333vmin 0 -2.5vmin #333, 2.85vmin -60.48333vmin 0 -2.5vmin #333, 2.9vmin -60.48333vmin 0 -2.5vmin #333, 2.95vmin -60.48333vmin 0 -2.5vmin #333;
  content: '';
  height: 5.5vmin;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 5.5vmin;
  }
   
  .phone:after {
  box-shadow: 1vmin 0 0 -0.1vmin rgba(192, 192, 192, 0.5), 1vmin 0 0 -0.15vmin rgba(192, 192, 192, 0.5), 1.25vmin 0 0 0 #333, 1vmin 6vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 1vmin 6.5vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 1vmin 7.5vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 1vmin 8vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 1.25vmin 6vmin 0 0 #333, 1.25vmin 8vmin 0 0 #333, 1vmin 12vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 1vmin 12.5vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 1vmin 13.5vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 1vmin 14vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 1.25vmin 12vmin 0 0 #333, 1.25vmin 14vmin 0 0 #333, 36.25vmin 6vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 36.25vmin 6.5vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 36.25vmin 7.5vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 36.25vmin 8vmin 0 -0.1vmin rgba(192, 192, 192, 0.5), 36vmin 6vmin 0 0 #333, 36vmin 8vmin 0 0 #333;
  content: '';
  height: 3vmin;
  left: -1.95vmin;
  position: absolute;
  top: 9vmin;
  width: 0.25vmin;
  }
   
  body {
  background: -webkit-linear-gradient(135deg, #999, #fff);
  background: linear-gradient(-45deg, #999, #fff);
  min-height: 100vh;
  }
   
  .heading {
  background-color: #84edbe;
  border-bottom: 1vh solid #565f73;
  font-family: 'Josefin Sans', sans-serif;
  padding: 4vh 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100vw;
  }
   
  .heading h1 {
  color: #d86b85;
  font-size: 5vh;
  margin: 0 0 2vh;
  }
   
  .heading h2 {
  color: #983f64;
  font-size: 5vh;
  margin: 2vh 0 0;
  }
   
  *,
  *:before,
  *:after {
  box-sizing: border-box;
  }
   
  *,
  *:focus,
  *:active,
  *:focus:active,
  *:before,
  *:before:focus,
  *:before:active,
  *:before:focus:active,
  *:after,
  *:after:focus,
  *:after:active,
  *:after:focus:active {
  outline: none;
  }
  </style>


Ну и собственно сама HTML разметка (оооочень маленькая)
Код
<div class="image phone"></div>


Демонстрация в файле который нужно скачать :)

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