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 переключатель без JavaScript из песочницы tutorial

Здесь я покажу, как сделать переключатель на основе input-а на чистом CSS.
image

Демо
Все файлы


Для начала, надо сказать, что у input типом checkbox есть такая особенность:
если он выбран (галочка стоит), то элементу присваивается новый атрибут checked.
На этом эффекте и будет построен наш элемент.

Для начала, опишем сам инпут и обертку
<div class="switcher">
	<input id="sw" type="checkbox" class="switcher-value">
	<label for="sw" class="sw_btn"></label>
	<div class="bg"></div>
</div>


В качестве ползунка будем использовать элемент label, так как он жестко привязывается по ID к конкретному инпуту. То есть нажал на label — считай, кликнул и поставил галочку в input.

Див с классом bg — это просто задний фон.

Опишем основные стили
.switcher {
	width: 124px;
	height: 49px;
	cursor: pointer;
	position: relative;
}
.switcher * {
	transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
}
.switcher .sw_btn {
	background: url('btn.png') 0% 0% no-repeat;
	width: 49px;
	height: 49px;
	display: block;
	cursor: pointer;
	z-index: 1;
	position: relative;
}
.switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; }
.switcher input.switcher-value { display: none; }
.switcher .bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}


Как видно из кода, сам инпут мы скрываем. Он нам нужен только как хранитель значений.
(кстати, получить значение нашего будущего переключателя можно как значение этого самого инпута)

На фон ставим картинку с выключенного переключателя ('bg-off.png):
image

Так же установим свойство transition для плавности переключений.

А теперь — самое интересное
.switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; }
.switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; }


Эти две строчки и переключают =)

Первая строка означает, что внешний отступ станет 68px у элемента с классом sw_btn,
который следует сразу за ВКЛЮЧЕННЫМ инпутом (об этом нам сообщает :checked).
А вторая, что надо сменить фон для элемента с классом .bg, следующего за элементом с классом sw_btn,
который идет сразу за ВКЛЮЧЕННЫМ инпутом.
Для выключенного инпута эти 2 свойства не работают.

Весь код
.switcher {
	width: 124px;
	height: 49px;
	cursor: pointer;
	position: relative;
}

.switcher * {
	transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
}

.switcher .sw_btn {
	background: url('btn.png') 0% 0% no-repeat;
	width: 49px;
	height: 49px;
	display: block;
	cursor: pointer;
	z-index: 1;
	position: relative;
}

.switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; }
.switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; }
.switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; }
.switcher input.switcher-value { display: none; }
.switcher .bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}



Вот так, с помощью пары небольших трюков и поллитра кофе, можно создать интересный переключатель без нагромождения javascript-анимациями страницу.
Читать дальше
Twitter
Одноклассники
Мой Мир

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

2

      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.

          • hast
          • домен habrahabr.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

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