html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Включаем и выключаем свет при помощи css

Сегодня мы будем создавать один интересный проект. Сначала мы сделаем демонстрационную страницу, а затем добавим кнопку, которая позволит пользователю переключать цветовую схему (эффект «День и ночь»). Изменяться будут как цвета, так и другие элементы на странице. Самое главное, что мы сделаем все это только при помощи CSS. 

 

Приступаем к работе

По умолчанию у нас будет установлена тема «День» со светлым фоном и темным текстом. При нажатии на кнопку тема измениться на «Ночь» с темным фоном и светлым текстом (и наоборот). Мы будем изменять не только цвет, но и некоторые другие детали (заголовки и фоновые изображения). И сделаем все это без помощи JavaScript.

скриншот

Шаг 1. HTML-разметка

Для начала создадим разметку страницы.  Как видите, здесь использованы заголовки и параграфы.

<div class="main">
    <h2>Lights</h2>
    <div class="features">
      <p>Lorem ipsum dolor sit...</p>
      <p>Lorem ipsum dolor sit...</p>
      <p>Lorem ipsum dolor sit...</p>
    </div>
    <div class="headerimage"></div>
</div> 

 

Обратите внимание на пустой див “headerimage”. В CSS мы добавим фотографию к этому блоку, чтобы иметь возможность изменять изображение.

Шаг 2. CSS

Во-первых, мы будем использовать border-box sizing , чтобы легче управлять размерами наших изображений.

Обратите внимание, что если вы хотите использовать height: 100% для основного класса, то должны убедиться, что и тело HTML-документа имеет 100%-ую высоту.

/*Sizing & Transition*/
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

html, body {
  height: 100%;
}
/*Wrapper*/
.main {
  padding: 20px;
  width: 100%;
  height: 100%;
}

Шаг 3. Заголовки CSS

Теперь пришло время поработать над элементами страницы. Давайте начнем с заголовков. Центрируйте их, пропишите семейства шрифтов и установите для них заглавные буквы. Обратите внимание на использование псевдоэлемента :after . С его помощью мы добавим слово “On” после “Lights” (см. изображение внизу)

/*Headline*/
h2 {
  text-align: center;
  text-transform: uppercase;
  font: 70px Helvetica, Arial, sans-serif;
  margin-bottom: 20px;
}
h2:after {
  content: " On"
}
screenshot

 

Шаг 4. Параграфы CSS

Теперь давайте поработаем над параграфами. Мы добавили им обтекание по левому краю и установили ширину размером треть родительского дива (features).

/*Feature Paragraphs*/
.features {
  width: 940px;
  margin: 0 auto 30px auto;
}

.features p {
  width: 33.33%;
  float: left;
  padding: 0 20px;
  font: 13px/1.5 Helvetica, Arial, sans-serif;
}

.last {
  padding-right: 0;
}
.features:after {
  content: "";
  display: table;
  clear: both;
}

Шаг 5. Большая фотография

Чтобы закончить демонстрационную страницу, давайте добавим фоновое изображение к классу headerimage. Мы взяли изображение из LoremPixel .

/*Big Photo*/
.headerimage {
  height: 400px;
  width: 900px;
  margin: 0 auto;
  background: url(http://lorempixum.com/900/400/city/3);
}

У нас получился такой результат:

скриншот

Шаг 6. Разметка для переключения

Теперь, когда у нас есть демонстрационная страница, пришло время добавить функцию “выключить свет.” Для этой цели мы будем использовать checkbox.

<body>
  <label for="lightswitch">Light Switch</label>
  <input type="checkbox" id="lightswitch" />

  <div class="main">
    <h2>Lights</h2>
    <div class="features">
      <p>Lorem ipsum dolor sit...</p>
      <p>Lorem ipsum dolor sit...</p>
      <p>Lorem ipsum dolor sit...</p>
    </div>
    <!-- end .features --> 
    <div class="headerimage"></div>
  </div>
  <!-- end .main -->
</body>

Шаг 7. Стили для переключения CSS

Теперь мы заставим label выглядеть как кнопка. Установите display":block;" для label, затем установите высоту, ширину, цвет фона, выравнивания текста, шрифт и поля, как показано ниже. Также обратите внимание на  position: fixed (свойство устанавливает фиксированную позицию для переключателя и позволяет ему оставаться на месте при прокрутке страницы). При наведении на него будет изменяться цвет. Также мы используем абсолютное позиционирование для инпута, чтобы скрыть его со страницы.

/*Light Switch*/
label {
  display: block;
  height: 25px;
  width: 100px;
  background: #eee;
  text-align: center;
  font: 14px/25px Helvetica, Arial, sans-serif;
  margin: 20px 0;
  position: fixed;
}

label:hover {
  background: #ddca7e;
  color: #fff;
  cursor: pointer;
}
input#lightswitch {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

скриншот

Шаг 8. Изменяем цвет фона

Теперь давайте изменим цвет фона. Вся магия заключается в том, что для этого мы будем использовать только селекторы.

input#lightswitch:checked + .main {
  background: #222;
}

Шаг 9. Другие изменения

Теперь давайте установим цвет текста, цвет фона и даже фоновое изображение на фотографии для темы «Ночь»! Мы также изменилb h2: after на «Off», чтобы заголовок чередовался между «Lights On» и «Lights Off», как будто вы играете с переключателем. Очень здорово!

/*Switched Off*/
input#lightswitch:checked + .main {
  background: #222;
}

input#lightswitch:checked + .main h2 {
  color: #ddca7e;
}

input#lightswitch:checked + .main h2:after {
  content: " Off"
}

input#lightswitch:checked + .main p {
  color: #aaa;
}
input#lightswitch:checked + .main > .headerimage {
  background: url(http://lorempixum.com/900/400/city/4);
  border: 8px solid #fff;
}
скриншот

Смотрите результат

Теперь можете посмотреть плоды нашего труда. Не забудьте нажать на выключатель слева, чтобы увидеть эффект.

Смотрите демо

скриншот

Автор — designshack

Перевод — Дежурка

Возможно, вас также заинтересуют статьи:

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

1

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции