Радиокнопки — карточки

Ранее уже был похожий пример в теме "Радиокнопки с иконками". Этот отличается немного другой реализацией, оформлением и предназначением.

Пример:

Турция

Море
Номер близко к пляжу, бесплатная парковка
Спорт
Развлечения

46 000 ₽ 42 000 ₽

Египет

Пирамиды
Песок

47 000 ₽

ОАЭ

Удобства в номерах
Шейхи
Небоскребы

96 000 ₽ 84 000 ₽

HTML:

<div class="card-grid">
	<label class="card">
		<input name="plan" class="card-radio" type="radio" />
		<div class="plan-details">
		<div class="plan-type">Турция</div>
			<div class="plan-image"><img src="photo-1.jpg" /></div>
			<ul>
				<li>Море</li>	  
				<li>Номер близко к пляжу, бесплатная парковка</li>
				<li>Спорт</li>
				<li>Развлечения</li>
			</ul>
			<div class="plan-cost">
				<span class="oldprice">46 000 <span>₽</span></span> 
				<span class="newprice">42 000 <span>₽</span></span> 
			</div>
		</div>
	</label>
	<label class="card">
		<input name="plan" class="card-radio" type="radio" />
		<div class="plan-details">
			<div class="plan-type">Египет</div>
			<div class="plan-image"><img src="photo-2.jpg" /></div>
			<ul>
				<li>Пирамиды</li>
				<li>Песок</li>
			</ul>
			<div class="plan-cost">
				<span class="newprice">47 000 <span>₽</span></span> 
			</div>
		</div>
	</label>
	<label class="card">
		<input name="plan" class="card-radio" type="radio" checked />
		<div class="plan-details">
			<div class="plan-type">ОАЭ</div>
			<div class="plan-image"><img src="photo-3.jpg" /></div>
			<ul>
				<li>Удобства в номерах</li>
				<li>Шейхи</li>
				<li>Небоскребы</li>
			</ul>
			<div class="plan-cost">
				<span class="oldprice">96 000 <span>₽</span></span> 
				<span class="newprice">84 000 <span>₽</span></span> 
			</div>  
		</div>
	</label>
</div>

<div class="plan-type">Турция</div>

<ul>

<li>Номер близко к пляжу, бесплатная парковка</li>

<li>Спорт</li>

<li>Развлечения</li>

</ul>

</div>

</label>

<div class="plan-type">Египет</div>

<ul>

<li>Пирамиды</li>

<li>Песок</li>

</ul>

</div>

</label>

<ul>

<li>Удобства в номерах</li>

<li>Шейхи</li>

<li>Небоскребы</li>

</ul>

</div>

</label>

</div>

CSS:

.card-grid *,
.card-grid *:after {
	box-sizing: border-box;
}
.card-grid {
	box-sizing: border-box;
	display: grid;
	grid-gap: 20px;
	margin: 20px auto;
	max-width: 1000px;
	padding: 0;
	font-family: Verdana, sans-serif;   
}
@media (min-width: 768px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 992px) {
	.card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.card {
	background-color: #fff;
	border-radius: 15px;
	position: relative;
}
.card-radio {
	font-size: inherit;
	margin: 0;
	position: absolute;
	right: 16px;
	top: 16px;
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
	.card-radio {
		-webkit-appearance: none;
		-moz-appearance: none;
		background: #fff;
		border: 3px solid #BFE2FF;
		border-radius: 50%;
		cursor: pointer;
		height: 28px;
		width: 28px;	
		outline: none;
		transition: background 0.2s ease-out, border-color 0.2s ease-out;
	}
	.card-radio::after {
		border: 3px solid #fff;
		border-top: 0;
		border-left: 0;
		content: '';
		display: block;
		height: 16px;
		left: 26%;
		position: absolute;
		top: 50%;
		transform: rotate(45deg) translate(-50%, -50%);
		width: 8px;
	}
	.card-radio:checked {
		background: green;
		border-color: green;
	}
	
	.card:hover .card-radio {
		border-color: #337AB7;
	}
	.card:hover .card-radio:checked {
		border-color: green;
	}
}
.plan-details {
	border: 3px solid #BFE2FF;
	border-radius: 15px;
	cursor: pointer;
	padding: 14px 16px;
	height: 100%;
	transition: border-color 0.2s ease-out, box-shadow 0.3s ease-out;
}
.card:hover .plan-details {
	border-color: #337AB7;
	box-shadow: 0 4px 14px rgba(0,0,0,0.2); 
}
.card-radio:checked ~ .plan-details {
	border-color: green;
}
.plan-type {
	color: #337AB7;
	font-family: 'Roboto Condensed', Verdana, sans-serif;  
	font-size: 24px;
	text-transform: uppercase;
	padding-right: 52px;
	line-height: 24px;
	font-weight: bold;
}
.plan-image {
	overflow: hidden;
	position: relative;
	left: -16px;
	margin: 14px 0;
	width: calc(100% + 32px);
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.plan-image img {
	width: 100%;
	transition: transform 0.5s ease-out;
}
.card:hover .plan-details .plan-image img,
.card-radio:checked + .plan-details .plan-image img {
	transform: scale(1.2);
}
.plan-details ul {
	padding:0;
	list-style: none;	
	margin-bottom: 30px;
}
.plan-details ul li { 
	position: relative;
	left: 16px;
	padding: 4px;	
	line-height:20px;
}
.plan-details ul li:before {
	font-size:15px;
	font-weight: bold;
	color: #337AB7;
	content: "\2714";
	position: absolute;
	left:-16px;
	top: 4px;
}
.plan-cost {
	position: absolute;
	bottom: 12px;
	right: 20px;
}
.plan-cost span span {
	font-size: 85%;
}
.plan-cost .oldprice {
    position: relative;
	font-size: 18px;
	padding:0 6px;
}
.plan-cost .oldprice:before {
    content: "";
    width: 100%;
    height: 0.12em;
    background: #db7d76;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(-1deg);
}
.plan-cost .newprice {
	font-size: 28px;
	color: #337AB7;
	padding-left: 6px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

.card-grid *,

.card-grid *:after {

box-sizing: border-box;

}

.card-grid {

box-sizing: border-box;

display: grid;

grid-gap: 20px;

margin: 20px auto;

max-width: 1000px;

padding: 0;

font-family: Verdana, sans-serif;

}

@media (min-width: 768px) {

.card-grid {

grid-template-columns: repeat(2, 1fr);

}

@media (min-width: 992px) {

.card-grid {

grid-template-columns: repeat(3, 1fr);

}

.card {

background-color: #fff;

border-radius: 15px;

position: relative;

}

.card-radio {

font-size: inherit;

margin: 0;

position: absolute;

right: 16px;

top: 16px;

}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {

.card-radio {

-webkit-appearance: none;

-moz-appearance: none;

background: #fff;

border: 3px solid #BFE2FF;

border-radius: 50%;

cursor: pointer;

height: 28px;

width: 28px;

outline: none;

transition: background 0.2s ease-out, border-color 0.2s ease-out;

}

.card-radio::after {

border: 3px solid #fff;

border-top: 0;

border-left: 0;

content: '';

display: block;

height: 16px;

left: 26%;

position: absolute;

top: 50%;

transform: rotate(45deg) translate(-50%, -50%);

width: 8px;

}

.card-radio:checked {

background: green;

border-color: green;

}

.card:hover .card-radio {

border-color: #337AB7;

}

.card:hover .card-radio:checked {

border-color: green;

}

.plan-details {

border: 3px solid #BFE2FF;

border-radius: 15px;

cursor: pointer;

padding: 14px 16px;

height: 100%;

transition: border-color 0.2s ease-out, box-shadow 0.3s ease-out;

}

.card:hover .plan-details {

border-color: #337AB7;

box-shadow: 0 4px 14px rgba(0,0,0,0.2);

}

.card-radio:checked ~ .plan-details {

border-color: green;

}

.plan-type {

color: #337AB7;

font-family: 'Roboto Condensed', Verdana, sans-serif;

font-size: 24px;

text-transform: uppercase;

padding-right: 52px;

line-height: 24px;

font-weight: bold;

}

.plan-image {

overflow: hidden;

position: relative;

left: -16px;

margin: 14px 0;

width: calc(100% + 32px);

box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);

}

.plan-image img {

width: 100%;

transition: transform 0.5s ease-out;

}

.card:hover .plan-details .plan-image img,

.card-radio:checked + .plan-details .plan-image img {

transform: scale(1.2);

}

.plan-details ul {

padding:0;

list-style: none;

margin-bottom: 30px;

}

.plan-details ul li {

position: relative;

left: 16px;

padding: 4px;

line-height:20px;

}

.plan-details ul li:before {

font-size:15px;

font-weight: bold;

color: #337AB7;

content: "\2714";

position: absolute;

left:-16px;

top: 4px;

}

.plan-cost {

position: absolute;

bottom: 12px;

right: 20px;

}

.plan-cost span span {

font-size: 85%;

}

.plan-cost .oldprice {

position: relative;

font-size: 18px;

padding:0 6px;

}

.plan-cost .oldprice:before {

content: "";

width: 100%;

height: 0.12em;

background: #db7d76;

position: absolute;

top: 50%;

left: 0;

transform: rotate(-1deg);

}

.plan-cost .newprice {

font-size: 28px;

color: #337AB7;

padding-left: 6px;

}

Опубликовано: 08.10.2020
Рубрики: Формы
Метки: CSS
848 просмотров

Смотрите также:

Запрет отправки формы пока не установлен флажок

Очень простой метод запрета отправки формы пока не установлена галочка checkbox

Показ определенных блоков при изменении формы

Вывод заданных блоков при изменении элементов формы radio, checkbox и select

Изменение высоты textarea в зависимости от кол-ва текста

Небольшой скрипт Autosize.js для автоматической настройки высоты текстовой области textarea.

Добавить комментарий:

Ваш комментарий отправлен!

Пример:

HTML:

CSS:

Смотрите также:

Запрет отправки формы пока не установлен флажок

Показ определенных блоков при изменении формы

Изменение высоты textarea в зависимости от кол-ва текста

Добавить комментарий:

Разделы: