कोडपेन होम आउटलाइन मोबाइल कार्ड

470 zegarkidawida

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

8 February 2025

कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी

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);
	}
}

कोडपेन होम आउटलाइन मोबाइल कार्ड

अनुशंसित

कार्ड की जानकारी

3D फ़्लिप्स कार्ड प्रभाव

कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी

HTML

CSS

JS

अनुशंसित

कार्ड की जानकारी

3D फ़्लिप्स कार्ड प्रभाव

कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS