Блок-секция для лицензий

Пример:

Открытие большой фотографии в модальном окне по клику присутствует только на примере и реализуется средствами данного блога, а не кодами, что представлены ниже.
Миниатюра, которая используется на примере представлена в оригинальном размере справа (в мобильной версии ниже) и размером 180 x 254 px
Последовательность фото начинается справа налево

HTML:

<div class="license-wr">
	<div class="license">
		<div>
			<a href="license-1.jpg">
				<img src="license_thumb-1.jpg" alt="" />
			</a>
		</div>
		<div>
			<a href="license-2.jpg">
				<img src="license_thumb-2.jpg" alt="" />
			</a>
		</div>
		<div>
			<a href="license-3.jpg">
				<img src="license_thumb-3.jpg" alt="" />
			</a>
		</div>
		<div>
			<a href="license-4.jpg">
				<img src="license_thumb-4.jpg" alt="" />
			</a>
		</div>
	</div>
</div>

<div>

</a>

</div>

<div>

</a>

</div>

<div>

</a>

</div>

<div>

</a>

</div>

CSS:

.license-wr {
	display: flex;
	background-color: #eee;
	background-repeat: no-repeat;
	background-image: linear-gradient(352deg, transparent 45.2%, #bbb 45.5%, #bbb 45.6%, #ccc 45.8%, #eee 60%), linear-gradient(30deg, #ccc, #eee 90%);
	background-size: 100% 320px;
	background-position: 50% 100%;  
	margin: 20px 0;
}	
.license {
	box-sizing: border-box;
	width: 100%;
	margin: 80px auto 0;
	min-height: 330px;
	position: relative;
}
@media (max-width: 767px) {
	.license {
		transform:scale(0.7);
		top: 6px;
	}
}
@media (max-width: 500px) {
	.license {
		transform:scale(0.4);
		top: 12px;
	}
}
.license > div {
	width: 150px;
	position: absolute;
	left: calc(50% + 100px);
	bottom: 73px;
	z-index: 0;
	display: flex;
	justify-content: flex-end;
}
.license > div:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: -100px;
	top: 14px;
	z-index: 1;
	background-repeat: no-repeat;
	background-image: linear-gradient(110deg, transparent 49%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.2) 65%), linear-gradient(30deg, transparent 46%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.25) 65%), radial-gradient(ellipse at 90% 100%, rgba(0,0,0,0.1) 10%, transparent 50%);
	transform: rotate(-8deg);
	pointer-events: none;
}
.license > div:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	transition: 0.3s;
	display: block;
	z-index: 3;
	background-image: linear-gradient(45deg, rgba(0,0,0,0.3), transparent 70%), linear-gradient(45deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.3) 80%);
	transform: perspective(200px) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));
	pointer-events: none;
}
.license > div img {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	z-index: 2;
	border-left: 2px solid;
	border-image: linear-gradient(105deg, transparent 0.5%, #bbb 0.7%) 1;
	box-shadow: 1px 2px 0 -1px #ccc;
	transform: perspective(200px) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));
}
.license > div:nth-of-type(4) {
	--resize: 0.99;
	margin-left: -404px;
}
.license > div:nth-of-type(4):before {
	background-size: 100% 85%, 100% 15%, 100% 10%;
	background-position: 1px 0, 0 100%, -30px 83%;
}
.license > div:nth-of-type(3) {
	--resize: 0.96;
	margin-left: -153px;
	transform: scaleY(0.98) translate(-80px, -21px);
}
.license > div:nth-of-type(3):before {
	background-size: 100% 84%, 100% 16%, 100% 10%;
	background-position: 4px 0, 0 100%, -30px 81%;
}
.license > div:nth-of-type(2) {
	--resize: 0.925;
	margin-left: 100px;
	transform: scaleY(0.965) translate(-170px, -42px);
}
.license > div:nth-of-type(2):before {
	background-size: 100% 83%, 100% 17%, 100% 10%;
	background-position: 6px 0, 1px 100%, -30px 81%;
}
.license > div:nth-of-type(1) {
	--resize: 0.895;
	margin-left: 352px;
	transform: scaleY(0.94) translate(-266px, -62px);
}
.license > div:nth-of-type(1):before {
	background-size: 100% 82%, 100% 18%, 100% 10%;
	background-position: 8px 0, 1px 100%, -30px 80%;
}

100

101

102

103

104

105

106

107

108

.license-wr {

display: flex;

background-color: #eee;

background-repeat: no-repeat;

background-image: linear-gradient(352deg, transparent 45.2%, #bbb 45.5%, #bbb 45.6%, #ccc 45.8%, #eee 60%), linear-gradient(30deg, #ccc, #eee 90%);

background-size: 100% 320px;

background-position: 50% 100%;

margin: 20px 0;

}

.license {

box-sizing: border-box;

width: 100%;

margin: 80px auto 0;

min-height: 330px;

position: relative;

}

@media (max-width: 767px) {

.license {

transform:scale(0.7);

top: 6px;

}

@media (max-width: 500px) {

.license {

transform:scale(0.4);

top: 12px;

}

.license > div {

width: 150px;

position: absolute;

left: calc(50% + 100px);

bottom: 73px;

z-index: 0;

display: flex;

justify-content: flex-end;

}

.license > div:before {

content: '';

width: 100%;

height: 100%;

position: absolute;

left: -100px;

top: 14px;

z-index: 1;

background-repeat: no-repeat;

background-image: linear-gradient(110deg, transparent 49%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.2) 65%), linear-gradient(30deg, transparent 46%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.25) 65%), radial-gradient(ellipse at 90% 100%, rgba(0,0,0,0.1) 10%, transparent 50%);

transform: rotate(-8deg);

pointer-events: none;

}

.license > div:after {

content: '';

width: 100%;

height: 100%;

position: absolute;

transition: 0.3s;

display: block;

z-index: 3;

background-image: linear-gradient(45deg, rgba(0,0,0,0.3), transparent 70%), linear-gradient(45deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.3) 80%);

transform: perspective(200px) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));

pointer-events: none;

}

.license > div img {

width: 100%;

height: 100%;

display: block;

position: relative;

z-index: 2;

border-left: 2px solid;

border-image: linear-gradient(105deg, transparent 0.5%, #bbb 0.7%) 1;

box-shadow: 1px 2px 0 -1px #ccc;

transform: perspective(200px) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));

}

.license > div:nth-of-type(4) {

--resize: 0.99;

margin-left: -404px;

}

.license > div:nth-of-type(4):before {

background-size: 100% 85%, 100% 15%, 100% 10%;

background-position: 1px 0, 0 100%, -30px 83%;

}

.license > div:nth-of-type(3) {

--resize: 0.96;

margin-left: -153px;

transform: scaleY(0.98) translate(-80px, -21px);

}

.license > div:nth-of-type(3):before {

background-size: 100% 84%, 100% 16%, 100% 10%;

background-position: 4px 0, 0 100%, -30px 81%;

}

.license > div:nth-of-type(2) {

--resize: 0.925;

margin-left: 100px;

transform: scaleY(0.965) translate(-170px, -42px);

}

.license > div:nth-of-type(2):before {

background-size: 100% 83%, 100% 17%, 100% 10%;

background-position: 6px 0, 1px 100%, -30px 81%;

}

.license > div:nth-of-type(1) {

--resize: 0.895;

margin-left: 352px;

transform: scaleY(0.94) translate(-266px, -62px);

}

.license > div:nth-of-type(1):before {

background-size: 100% 82%, 100% 18%, 100% 10%;

background-position: 8px 0, 1px 100%, -30px 80%;

}

За основу взято решение, найденное на codepen.io у пользователя Lynn Fisher

Андрей Ануфриев: 21.11.2021 в 18:00

Ура, *ля... Сделал!

Извиняюсь за мой "Французски"! :0)

Ответить
Станислав: 10.04.2021 в 00:04

https://yadi.sk/i/IverjOFr9hKZsA

Ответить
- Alexander: 10.04.2021 в 10:54
  
  Фотка не может загрузиться в вашем модальном окне.
  1 - проверить пути к ним
  2 - смотреть модалку, почему она не открывает
  
  Ответить
Станислав: 10.04.2021 в 00:03

This image failed to load.
ЗДРАВСТВУЙТЕ! ЧТО ЭТО МОЖЕТ БЫТЬ? ЭТО ПРИ НАЖАТИИ НА СЕРТИФИКАТ, НЕ УВИЛИЧИВАЕТСЯ...

Ответить
- Андрей Ануфриев: 30.10.2021 в 09:03
  
  Токая же песня... Увеличение не срабатывает...
  
  Ответить
- Alexander: 31.10.2021 в 13:32
  
  Я не делал код для увеличения фото, т.к. у каждого сайта своя галерея, например фансибокс или магнифик. Нет смысла ставить дополнительную ради этой секции.
  А если нет, то можно подключить например Fancybox 3 и использовать для других модальных окон или галерей.
  
  Ответить
Валерий: 11.01.2021 в 14:24

Доброго времени суток, скажите пожалуйста какими именно средствами реализуется? У вас можно это найти? Сайт отличный я уже много чем воспользовался у вас.

Ответить
- Alexander: 11.01.2021 в 16:17
  
  А тут же дан и CSS и HTML код
  
  Ответить
Пан Дмитро: 26.11.2020 в 17:27

Ответить
- Alexander: 26.11.2020 в 17:42
  
  Протестируй и будет понятнее 🙂
  
  Ответить

Пример:

HTML:

CSS:

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

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

Комментарии: