Стильные выключатели на чистом CSS

Разместил: Apocalypse
Опубликовано: 25 марта 2016

Отличный пример того, как стилизовать обычные переключатели (input type=«checkbox») при помощи CSS3 Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

sup {
color: #AF5D6C;
}

.text-center {
text-align: center;
}

/* Important switch stuff */
label {
width: 34px;
height: 14px;
background: lightgray;
display: inline-block;
border-radius: 10px;
position: relative;
cursor: pointer;
margin: 10px;
}
label:before, label:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
position: absolute;
top: -3px;
left: 0;
transition: all .2s;
}
label:after {
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}
label:before {
background: lightgray;
transform: scale3d(0, 0, 1);
}
label:active:before {
transform: scale3d(3, 3, 1);
opacity: 0;
}

input[type=checkbox].switch {
display: none;
}
input[type=checkbox].switch:checked + label {
background: rgba(3, 155, 229, 0.5);
}
input[type=checkbox].switch:checked + label:before, input[type=checkbox].switch:checked + label:after {
left: 14px;
background: #039be5;
}
input[type=checkbox].switch:disabled + label {
opacity: 0.4;
cursor: not-allowed;
}

input[type=checkbox].switch.green {
display: none;
}
input[type=checkbox].switch.green:checked + label {
background: rgba(4, 196, 52, 0.5);
}
input[type=checkbox].switch.green:checked + label:before, input[type=checkbox].switch.green:checked + label:after {
background: #04c434;
}

input[type=checkbox].switch.red {
display: none;
}
input[type=checkbox].switch.red:checked + label {
background: rgba(244, 67, 54, 0.5);
}
input[type=checkbox].switch.red:checked + label:before, input[type=checkbox].switch.red:checked + label:after {
background: #f44336;
}

sup {

color: #AF5D6C;

}

.text-center {

text-align: center;

}

/* Important switch stuff */

label {

width: 34px;

height: 14px;

background: lightgray;

display: inline-block;

border-radius: 10px;

position: relative;

cursor: pointer;

margin: 10px;

}

label:before, label:after {

content: "";

display: inline-block;

width: 20px;

height: 20px;

background: white;

border-radius: 50%;

position: absolute;

top: -3px;

left: 0;

transition: all .2s;

}

label:after {

box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);

}

label:before {

background: lightgray;

transform: scale3d(0, 0, 1);

}

label:active:before {

transform: scale3d(3, 3, 1);

opacity: 0;

}

input[type=checkbox].switch {

display: none;

}

input[type=checkbox].switch:checked + label {

background: rgba(3, 155, 229, 0.5);

}

input[type=checkbox].switch:checked + label:before, input[type=checkbox].switch:checked + label:after {

left: 14px;

background: #039be5;

}

input[type=checkbox].switch:disabled + label {

opacity: 0.4;

cursor: not-allowed;

}

input[type=checkbox].switch.green {

display: none;

}

input[type=checkbox].switch.green:checked + label {

background: rgba(4, 196, 52, 0.5);

}

input[type=checkbox].switch.green:checked + label:before, input[type=checkbox].switch.green:checked + label:after {

background: #04c434;

}

input[type=checkbox].switch.red {

display: none;

}

input[type=checkbox].switch.red:checked + label {

background: rgba(244, 67, 54, 0.5);

}

input[type=checkbox].switch.red:checked + label:before, input[type=checkbox].switch.red:checked + label:after {

background: #f44336;

}

2#: HTML код для использования:

<input type="checkbox" id="switch1" class='switch' checked/>
<label for="switch1"></label>

<input type="checkbox" id="switch2" class='switch red' checked/>
<label for="switch2"></label>

<input type="checkbox" id="switch3" class='switch green' checked/>
<label for="switch3"></label>

<input type="checkbox" id="switch4" class='switch green' disabled/>
<label for="switch4"></label>

Метки: CSS3 Выключатель Переключатель Стильные

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

Вы точно не робот?

0 Комментарий

Межтекстовые Отзывы

Посмотреть все комментарии

VVL99

ctrl +f5

2023-09-23 16:37:07

Apocalypse

@VVL99, просто пожалей своих посетителей с хотя бы средними ПК

2023-09-23 16:37:09

VVL99

@Apocalypse, это да перегружать тоже не хорошо..

2023-09-23 16:37:58

Apocalypse

@VVL99, ну. Важен баланс. Один раз я тоже настолько нагрузил свой сайт, что он 1фпс выдавал на том моём старом ПК

2023-09-23 16:39:43

VVL99

@Apocalypse, обычно начинаешь понимать только когда уже приелись все эти украшательства.

2023-09-23 16:41:25

Apocalypse

@VVL99, раньше я тоже пытался каждый день сделать сайт уникальным, а потом понял, что это никому вообще не нужно, кроме меня

2023-09-23 16:44:03

VVL99

@Apocalypse, согласен.

2023-09-23 17:08:28

VVL99

@Apocalypse, изменил анимацию падающих листьев и решил подсмотреть как у тебя сделано, ты используешь расчёт свойств Transform, а я генерирую анимацию...

2023-09-26 18:16:57

VVL99

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

2023-09-27 18:16:13

VVL99

При этом листья выполняют все возможные вращения и с разнообразной скоростью.

2023-09-27 18:19:03

......

Для публикации сообщений в чате необходимо авторизоваться

Стильные выключатели на чистом CSS

Вам может также понравиться...

Посетители сайта

Панель управления

Сентябрь 2023
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Стильные выключатели на чистом CSS

Вам может также понравиться...

Солнечное затмение с плывущими облаками на чистом CSS и SVG

Простой синий переключатель страниц для сайтов на uCoz

Красивые информационные блоки на CSS3

Посетители сайта

Панель управления