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

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

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

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

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

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

    Дата добавления: 05.03.2017 - 15:42
    Добавил: Buger
    Количество просмотров: 1.2k
    Количество комментариев: 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/
    Добавлять комментарии могут только зарегистрированные пользователи.


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