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

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

Пример:

Турция

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

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
362 просмотра

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

Радиокнопки с иконками

Стилизация переключателей radio с использованием иконочных шрифтов или картинок

Переключатель checkbox с фоновым изображением

Вариант использования фонового изображения на переключателе checkbox

Фильтр контента по буквам на jQuery

Небольшой скрипт на jQuery реализующий поиск и фильтрацию контента по буквам

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

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

Пример:

HTML:

CSS:

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

Радиокнопки с иконками

Переключатель checkbox с фоновым изображением

Фильтр контента по буквам на jQuery

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

Разделы: