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

    Вы здесь: Главная страница » Файлы » Виды материалов
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

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

    Дата добавления: 03.03.2017 - 17:05
    Добавил: Buger
    Количество просмотров: 1.5k
    Количество комментариев: 0
    Размер файла: 8.7 Kb
    Рейтинг материала: 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/
    Добавлять комментарии могут только зарегистрированные пользователи.


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