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

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

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

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

Дата добавления: 04.03.2017 - 01:19
Добавил: Buger
Количество просмотров: 140
Количество комментариев: 0
Размер файла: 4.7Kb
Рейтинг материала: 5.0 / 1
Сотовый телефон в светлом стиле на чистом CSS
рейтинг 5.0
/
голосов 1
Светлый стиль сотового телефона который написан на чистом CSS коде. Довольно интересное применение ему подойдет для вида материалов сайтов мобильной тематики. Установка очень проста и тривиальна. Применяйте данную реализацию в своих проектах и удивляйте им своих пользователей. Так как код написан на чистом CSS, вы значительно снизите нагрузку на свой проект.

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

И так, что нам надо? Да очень мало :) Указать HTML разметку и подключить CSS стили.

Давайте подключим разметку HTML:
Код
<div class="container">
  <div class="top-button"></div>
  <div class="side-button"></div>
  <div class="side-button vol"></div>
  <div class="side-button vol"></div>
  <div class="body">
  <div class="cam"></div>
  <div class="sensor"></div>
  <div class="speaker"></div>
  <div class="screen"></div>
  <div class="home-button"></div>
  </div>
</div>


И подключим стили :
Код
<style class="cp-pen-styles">
  body {
  background: #4a4a4a;
  margin: 0;
  }
   
  body .container {
  position: relative;
  margin: auto;
  margin-top: 30px;
  height: 500px;
  width: 250px;
  }
   
  body .container .top-button {
  position: absolute;
  top: 2px;
  left: 168px;
  height: 8px;
  width: 42px;
  border-radius: 4px;
  background: #d0bd9b;
  }
   
  body .container .side-button {
  position: absolute;
  left: 2px;
  width: 8px;
  border-radius: 4px;
  background: #d0bd9b;
  }
   
  body .container .side-button:nth-child(2) {
  height: 30px;
  top: 80px;
  }
   
  body .container .vol {
  height: 20px;
  }
   
  body .container .vol:nth-child(3) {
  top: 135px;
  }
   
  body .container .vol:nth-child(4) {
  top: 170px;
  }
   
  body .container .body {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  background: #fff;
  border-radius: 40px;
  border: 4px solid;
  border-right-color: #e7d5b3;
  border-left-color: #e7d5b3;
  border-top-color: #f2e1c0;
  border-bottom-color: #cdbc9b;
  box-sizing: border-box;
  }
   
  body .container .body::after,
  body .container .body::before {
  content: "";
  position: absolute;
  height: 5px;
  width: calc(100% + 8px);
  left: -4px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  box-sizing: border-box;
  }
   
  body .container .body::after {
  top: 50px;
  }
   
  body .container .body::before {
  bottom: 50px;
  }
   
  body .container .body .cam {
  position: absolute;
  top: 15px;
  left: calc(50% - 7px);
  height: 12px;
  width: 12px;
  background: #222;
  border-radius: 50%;
  }
   
  body .container .body .sensor {
  position: absolute;
  top: 40px;
  left: 78px;
  height: 8px;
  width: 8px;
  background: #222;
  border-radius: 50%;
  }
   
  body .container .body .speaker {
  position: absolute;
  top: 41px;
  left: calc(50% - 25px);
  height: 6px;
  width: 50px;
  background: #222;
  border-radius: 4px;
  }
   
  body .container .body .home-button {
  position: absolute;
  bottom: 10px;
  left: calc(50% - 26px);
  height: 52px;
  width: 52px;
  background: -webkit-linear-gradient(315deg, #291A00, #E5D2B1, #fff, #291A00);
  background: linear-gradient(135deg, #291A00, #E5D2B1, #fff, #291A00);
  border-radius: 50%;
  }
   
  body .container .body .home-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 46px;
  width: 46px;
  background: #fff;
  border-radius: 50%;
  }
   
  body .container .body .screen {
  position: absolute;
  top: 70px;
  left: 10px;
  height: calc(100% - 140px);
  width: calc(100% - 20px);
  background: #222;
  border-radius: 4px;
  background: url("https://lh3.googleusercontent.com/yaWaivd_MyjLDlffOqZNuQ5OvtIPxn8gWSCAXPXmwslWXNvBd2Gk6hdjETfR_Wf5jA8=h900");
  background-size: 100% 100%;
  background-position: 0px 0px;
  }
</style>


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