Webleb - HTML UI Elements - CodePen Home Delineato Schede mobili

HTML

CSS

:root {
	--bg: 25% 0.0075 70;

--pink: 77.75% 0.1003 350.51;
	--gold: 84.16% 0.1169 71.19;
	--mint: 84.12% 0.1334 165.28;

--mobile--w: 360px;
	--mobile--h: 540px;

--outline-w: 9px;
	--preview-bg: #fff;
}

body {
	height: 100%;
}

body {
	background: linear-gradient(
		50deg,
		oklch(from oklch(var(--bg)) 50% c h),
		oklch(from oklch(var(--bg)) 90% c h)
	);
	background-attachment: fixed;
	padding: 3rem 10vw;
}

.preview__container {
	display: flex;
	flex-wrap: wrap;

place-items: center;
	place-content: center;

height: 100%;

/* fade out other cards when one is :hover/:focus-within */
	&:has(:hover, :focus-within) {
		.preview:not(:hover, :focus) {
			opacity: 0.4;
		}
	}
}

.preview {
	--bg-pos-y--start: 0;
	--bg-pos-y--end: 0;
	--bg-pos-y: var(--bg-pos-y--start);
	--delay: 0;
	--duration: 6s;

--shadow-blur: 24px;
	--shadow-color: oklch(var(--bg));

background-clip: padding-box;
	/* 	background-origin: content-box; */
	background-image: var(--img);
	background-position-y: var(--bg-pos-y);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;

border: var(--outline-w) solid var(--border-color, transparent);
	border-radius: 6px;
	box-shadow: 0 0 var(--shadow-blur) 0 var(--shadow-color);

transition-property: border, 	box-shadow, 	filter, 	outline-offset, 	opacity, 	rotate,		scale,	z-index;
	transition-duration: 0.15s, 	0.15s, 				0.6s, 		0.6s, 						0.3s, 		0.3s,			0.3s,		0.15s;

filter: grayscale(100%) sepia(5%);
	mix-blend-mode: multiply;
	opacity: 0.69;

/* 		backface-visibility: hidden;
	transform: translateZ(0) perspective(1px); */
	/* 	transform-origin: center center; */

scale: 0.85;
	rotate: var(--rotation, -4deg);
	/* 	will-change: box-shadow, filter, rotate, scale, z-index; */

outline: var(--outline-w) solid var(--preview-bg);
	outline-offset: var(--outline-w);

min-height: var(--mobile--h);
	height: 100%;

min-width: var(--mobile--w);
	width: 100%;

position: relative;

animation-name: bg-scroll;
	animation-delay: var(--delay);
	animation-duration: var(--duration);
	animation-fill-mode: forwards;

&:focus-within,
	&:hover {
		--shadow-blur: 200px;
		--shadow-color: oklch(var(--gold));
		--border-color: var(--shadow-color);

background-color: white;
		mix-blend-mode: initial;
		filter: none;		
		opacity: 1;	
		
		outline-offset: calc(var(--outline-w) / 2);
		
		scale: 1;
		rotate: 0deg;
		
		transition-property: border, 		box-shadow, 		filter, 	outline-offset, 	opacity,	rotate,		scale, 		z-index;
		transition-duration: 0.15s, 		0.15s, 					0.3s, 		0.3s, 						0.3s, 		0.3s, 		0.3s, 		0.15s;
	}

&:focus-within {
		--shadow-color: oklch(var(--pink));
		z-index: 5;
	}
	
	&:hover	{
		z-index: 6;
		&:focus { --shadow-color: oklch(var(--mint)); }
	}

&.mobile {
		max-height: var(--mobile--h);
		max-width: var(--mobile--w);
	}

&:nth-of-type(2) {
		--bg-pos-y--end: calc(var(--mobile--h) * -1.025);
		/*       --delay: .25s; */
		--rotation: 3deg;
	}

&:nth-of-type(3) {
		--bg-pos-y--end: calc(var(--mobile--h) * -2.25);
		/*       --delay: .5s; */
		--duration: 6.5s;
		--rotation: -1deg;
	}

&:nth-of-type(4) {
		--bg-pos-y--end: calc(var(--mobile--h) * -3.75);
		/*       --delay: .75s; */
		--duration: 6.75s;
		--rotation: -5deg;
	}

&:nth-of-type(5) {
		--bg-pos-y--end: calc(var(--mobile--h) * -4.82);
		/*       --delay: 1s; */
		--duration: 7s;
		--rotation: -2deg;
	}

&:nth-of-type(6) {
		--bg-pos-y--end: calc(var(--mobile--h) * -5.85);
		/*       --delay: 1.25s; */
		--duration: 7.25s;
		--rotation: 2deg;
	}

&:nth-of-type(7) {
		--bg-pos-y--end: calc(var(--mobile--h) * -7.21);
		/*       --delay: 1.5s; */
		--duration: 7.5s;
		--rotation: 4deg;
	}
}

/* preview-scroll */
@keyframes bg-scroll {
	to {
		background-position-y: var(--bg-pos-y--end);
	}
}

CodePen Home Delineato Schede mobili

Consigliato

Home Effetto Slider Immagine Sito Web

Piani Bot (Home Page)

Una home page moderna

HTML

CSS

JS

Consigliato

Home Effetto Slider Immagine Sito Web

Piani Bot (Home Page)

Una home page moderna

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS