Форма входа

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

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

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

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

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

    Ноутбук и кружка на CSS

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

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

    Установка
    HTML разметка:
    Код
    <div class="container">
      <div class="laptop">
      <div class="screen"></div>
      <div class="base"></div>
      </div>
      <div class="cup"></div>
      <div class="steam">
      <div></div>
      <div></div>
      <div></div>
      </div>
      </div>

    CSS стили:
    Код
    <style class="cp-pen-styles">
      body {
      background: #dedede;
      }
       
      body .container {
      position: relative;
      height: 240px;
      width: 500px;
      margin: auto;
      margin-top: 100px;
      }
       
      body .container::after {
      content: "";
      position: absolute;
      top: 216px;
      left: 10px;
      width: 480px;
      border: 3px solid rgba(0, 0, 0, 0.2);
      border-radius: 0px 0px 50% 50%;
      }
       
      body .container::before {
      content: "";
      position: absolute;
      top: 218px;
      left: 25px;
      height: 5px;
      width: 450px;
      background: #C8DBFE;
      border-radius: 50%;
      }
       
      body .container .laptop {
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 100;
      }
       
      body .container .laptop .screen {
      position: absolute;
      left: 115px;
      top: 0px;
      height: 200px;
      width: 300px;
      background: #fafafa;
      border-radius: 12px 12px 0px 0px;
      border: 3px solid #666;
      box-sizing: border-box;
      }
       
      body .container .laptop .screen::after,
      body .container .laptop .screen::before {
      content: "";
      position: absolute;
      }
       
      body .container .laptop .screen::after {
      top: 20px;
      left: 8px;
      height: 162px;
      width: 278px;
      background: #555;
      border: 3px solid #666;
      box-sizing: border-box;
      }
       
      body .container .laptop .screen::before {
      top: 5px;
      left: calc(50% - 4px);
      height: 8px;
      width: 8px;
      background: #777;
      border-radius: 50%;
      }
       
      body .container .laptop .base {
      position: absolute;
      top: 198px;
      left: 85px;
      height: 18px;
      width: 360px;
      background: #fafafa;
      border-radius: 0px 0px 15px 15px;
      border: 3px solid #666;
      box-sizing: border-box;
      }
       
      body .container .laptop .base::after {
      content: "";
      position: absolute;
      left: 135px;
      height: 4px;
      width: 90px;
      background: #fff;
      border-radius: 0px 0px 8px 8px;
      background: #ddd;
      border: 2px solid #666;
      box-sizing: border-box;
      border-top: none;
      }
       
      body .container .cup {
      position: absolute;
      top: 136px;
      left: 30px;
      height: 80px;
      width: 75px;
      background: #d81159;
      border-radius: 0px 0px 10px 10px;
      border: 3px solid #666;
      box-sizing: border-box;
      }
       
      body .container .cup::after,
      body .container .cup::before {
      content: "";
      position: absolute;
      }
       
      body .container .cup::after {
      left: -30px;
      top: 4px;
      height: 55px;
      width: 60px;
      background: #d81159;
      z-index: -10;
      border-radius: 50%;
      border: 3px solid #666;
      }
       
      body .container .cup::before {
      left: -20px;
      top: 14px;
      height: 41px;
      width: 40px;
      background: #dedede;
      border: 3px solid #666;
      border-radius: 50%;
      z-index: -5;
      box-sizing: border-box;
      }
       
      body .steam {
      position: absolute;
      top: 130px;
      left: 45px;
      width: 45px;
      height: 30px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      z-index: -1;
      opacity: 0;
      -webkit-animation: steam 3s linear infinite;
      animation: steam 3s linear infinite;
      }
       
      body .steam div {
      height: 30px;
      width: 10px;
      background: #fff;
      border-radius: 10px 0px 10px 0px;
      }
       
      @-webkit-keyframes steam {
      20% {
      opacity: 0.6;
      }
      35% {
      top: 100px;
      opacity: 0.6;
      }
      70% {
      top: 70px;
      opacity: 0;
      }
      }
       
      @keyframes steam {
      20% {
      opacity: 0.6;
      }
      35% {
      top: 100px;
      opacity: 0.6;
      }
      70% {
      top: 70px;
      opacity: 0;
      }
      }
      </style>


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


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