CSS Форма №3 - пример кода

Демо

1,55 КБ
HTML, CSS
Форма
Лицензия MIT

Код
Редактор

HTML

<form>
    <input type="radio" id="on" name="status" value="on" checked />
    <label for="on">Вкл</label>
    <input type="radio" id="off" name="status" value="off" />
    <label for="off">Выкл</label>
</form>

CSS

body {
	font-family: "Montserrat", sans-serif;
}

form {
	margin: auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	   -moz-box-orient: vertical;
	   -moz-box-direction: normal;
	        flex-direction: column;
	position: relative;
	padding-left: 10rem;
color: #ccc;
}

form:before {
	content: "";
	display: block;
	position: absolute;
	width: 7.5rem;
	height: 100%;
	-webkit-border-radius: 99em;
	   -moz-border-radius: 99em;
	        border-radius: 99em;
	left: 0;
	top: 50%;
	border: 0.5rem solid #ccc;
	-webkit-transform: translatey(-50%);
	   -moz-transform: translatey(-50%);
	     -o-transform: translatey(-50%);
	        transform: translatey(-50%);
}

input {
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(100%);
	        clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

label {
	font-size: 8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-left: -1.06em;
	line-height: 1;
	cursor: pointer;
	position: relative;
}

label ~ label {
	margin-top: 1rem;
}

label::first-letter {
	color: transparent;
}

input:checked + label::first-letter {
	color: #ccc;
}

HTML
CSS

Представьте, что вы добавляете на веб-страницу крутой интерактивный элемент, например, переключатель между состояниями «Включено» и «Выключено», похожий на выключатель света в вашей комнате, но на экране компьютера. Код, о котором идет речь, именно это и делает, но с изящным поворотом, используя HTML для структуры, CSS для стильного оформления и место для JavaScript для потенциальной интерактивности (хотя в этом фрагменте он не используется).

Сначала, часть HTML с элементом <form> создает простой переключатель с двумя опциями, «Включено» и «Выключено». Это как выложить пути для поезда. Здесь используются радиокнопки — те самые маленькие кружочки, на которые вы нажимаете, чтобы сделать выбор. «Включено» установлено по умолчанию (уже выбрано, когда вы загружаете страницу).

Теперь в игру вступает CSS, чтобы превратить наш базовый переключатель в что-то визуально привлекательное. CSS здесь направлен на то, чтобы сделать вещи красивыми. Он использует шрифт «Montserrat», чтобы текст был острым и современным, и красиво центрирует нашу форму на странице. Затем, часть form:before добавляет крутой декоративный элемент к нашей форме, делая ее не только функциональной, но и приятной для глаз. CSS для ввода делает сами радиокнопки невидимыми, потому что мы стремимся к чистому виду, полагаясь на метки для взаимодействия. Метки стилизованы так, чтобы быть большими, жирными и легкими для нажатия, повышая удобство использования и сохраняя при этом эстетическую привлекательность.

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