Illustration de phare de jour et de nuit

3139 Andev.web

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Illustration de phare de jour et de nuit

Recommandé

13 November 2024

Effet de cadre sur les images à l'aide de CSS pur

9 December 2024

Bouton de survol

26 June 2024

Formulaire de connexion/inscription à double curseur

HTML

CSS

:root {
	--red: #972627;
	--red-2: #c17d7d;
	--white: #e2b59a;
	--sm: #fcedbb90;
	--sm-2: #c57356;
	--sky-1: var(--red);
	--sky-2: var(--white);
	--sea-1: #645355;
	--sea-2: #9c766780;
	--sea-3: #0e3641;
	--base-1: #335e53;
	--base-2: #142c2c;
	--shine: #fff6;
	--windows: #5f3300;
	--reflex: #fff2;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

body * {
	transform-style: preserve-3d;
}

.sky {
	position: absolute;
	width: 100%;
	height: 50%;
	background: linear-gradient(180deg, var(--sky-1), var(--sky-2));
	top: 0;
	z-index: -1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.sea {
	position: absolute;
	width: 100%;
	height: 50%;
	background: linear-gradient(180deg, var(--sea-1), #fff0), radial-gradient(circle at 50% 0%, var(--sea-2) 30%, var(--sea-3) 50%, #fff0 100%), var(--sea-3);
	top: 50%;
	z-index: -1;
}

.content {
	width: 60vmin;
	height: 100vmin;
	background-size: contain;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sky:before,
.content:after {
	content: "";
	position: absolute;
	width: 19vmin;
	height: 19vmin;
	background: radial-gradient(circle at 50% 60%, var(--sm-2), var(--sm) 100%);
	border-radius: 100%;
	margin-top: -7.75vmin;
	box-shadow: 0 0.5vmin 0.5vmin 0 var(--sm) inset;
	clip-path: polygon(0 0, 100% 0, 100% 71%, 0 71%);
}

.content:after {
	transform: rotateX(180deg);
	transform-origin: 50% 71%;
	opacity: 0.25;
	background: linear-gradient(180deg, #fff0, var(--sm)), radial-gradient(circle at 50% 50%, #fff0, #fff0 5vmin 8.75vmin, #fff0 calc(9.25vmin + 5px) 100%);
	box-shadow: 0 -1vmin 1vmin 0 var(--sm) inset;
}

.sky:before {
	bottom: -6vmin;
}

.content * {
	position: absolute;
}
/*Andev Web*/
.lighthouse {
	background: #0ff0;
	width: 11vmin;
	height: 30vmin;
	margin-top: -30vmin;
	perspective: 80vmin;
}

.base {
	--rock-1: var(--base-1) 1.1vmin, #fff0 calc(1.1vmin + 3px) 100%;
	--rock-2: var(--base-1) 1vmin, #fff0 calc(1vmin + 1px) 100%;
	background:         
		radial-gradient(ellipse at 14% 37%, var(--rock-2)),
		radial-gradient(ellipse at 86% 37%, var(--rock-2)),
		radial-gradient(ellipse at 19% 6%, var(--rock-1)),
		radial-gradient(ellipse at 81% 6%, var(--rock-1)),
		radial-gradient(ellipse at 63% 32%, var(--rock-1)),
		radial-gradient(ellipse at 37% 32%, var(--rock-1)),
		radial-gradient(ellipse at 76% 60%, var(--rock-1)),
		radial-gradient(ellipse at 24% 60%, var(--rock-1)),
		radial-gradient(ellipse at 98% 84%, var(--rock-1)),
		radial-gradient(ellipse at 73% 96%, var(--rock-1)),
		radial-gradient(ellipse at 50% 72%, var(--rock-1)),
		radial-gradient(ellipse at 27% 96%, var(--rock-1)),
		radial-gradient(ellipse at 2% 84%, var(--rock-1)),
		linear-gradient(180deg, var(--base-1) 0 0.25vmin, #fff0 0 100%), 
		linear-gradient(90deg, #fff0 1vmin, var(--base-2) 0 calc(100% - 1vmin), #fff0 0 100%),
		linear-gradient(-119deg, #fff0 0 1.25vmin, var(--base-2) calc(0.9vmin) 70%, #fff0 0 100%), 
		linear-gradient(119deg, #fff0 0 1.25vmin, var(--base-2) calc(0.9vmin + 1px) 70%, #fff0 0 100%),
		linear-gradient(90deg, #fff0 0 0.75vmin, var(--base-1) 0 calc(100% - 0.75vmin), #fff0 0 100%),
		linear-gradient(-119deg, #fff0 0 0.9vmin, var(--base-1) calc(0.9vmin + 1px) 70%, #fff0 0 100%),
		linear-gradient(119deg, #fff0 0 0.9vmin, var(--base-1) calc(0.9vmin + 1px) 70%, #fff0 0 100%);
	width: 11vmin;
	height: 3vmin;
	bottom: 0;
	border-radius: 1.55vmin 1.55vmin 0 0;
}

.base:before {
	content: "";
	background: 
		linear-gradient(-95deg, #fff0 0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.65vmin, var(--red) calc(0.65vmin + 1px) 6vmin, #fff0 0 100%), 
		linear-gradient(95deg, #fff0 0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.65vmin, var(--red) calc(0.65vmin + 1px) 6vmin, #fff0 0 100%);
	width: 7.5vmin;
	height: 2vmin;
	position: absolute;
	top: -2vmin;
	left: 1.75vmin;
}

.base:after {
	content: "";
	background: 
		linear-gradient(-112deg, var(--red) 0 1vmin, var(--white) calc(1vmin + 1px) 1.25vmin, #fff0 calc(1.25vmin + 1px) 100% ), 
		linear-gradient(112deg, var(--red) 0 1vmin, var(--white) calc(1vmin + 1px) 1.25vmin, #fff0 calc(1.25vmin + 1px) 100%), 
		repeating-linear-gradient(0deg, var(--base-2) 0 0.3vmin, var(--base-1) 0 0.5vmin);
	width: 4.1vmin;
	height: 2vmin;
	position: absolute;
	top: -2vmin;
	left: 3.5vmin;
	background-repeat: no-repeat;
	background-position: 0 0, 0 0, 5% 0;
	background-size: 100% 100%, 100% 100%, 90% 100%;
}

.tower {
	background: 
		radial-gradient(circle at 50% 100%, var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), 
		radial-gradient(circle at 50% calc(100% - 0.25vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), 
		radial-gradient(circle at 50% calc(100% - 0.5vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), 
		radial-gradient(circle at 50% calc(100% - 0.75vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), 
		radial-gradient(circle at 50% calc(100% - 1vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
		linear-gradient(-94.5deg, var(--shine) 0 1.85vmin, #fff0 calc(1.85vmin + 1px) 100%), 
		linear-gradient(94.5deg, var(--shine) 0 1.85vmin, #fff0 calc(1.85vmin + 1px) 100%), 
		radial-gradient(circle at 50% 125%, var(--white) 0 9vmin, var(--red) calc(9vmin + 1px) 13vmin, var(--white) calc(13vmin + 1px) 17vmin, var(--red) calc(17vmin + 1px) 21vmin, var(--white) calc(21vmin + 1px) 23vmin);
	width: 6vmin;
	height: 19vmin;
	left: 2.5vmin;
	top: 6vmin;
	clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
}

.top {
	background: 
		linear-gradient(90deg, var(--shine) 0 0.75vmin, #fff0 0 100%),
		linear-gradient(90deg, var(--shine) 0 0.75vmin, #fff0 0 100%), 
		linear-gradient(90deg, var(--shine) 0 0.7vmin, #fff0 0 100%), 
		linear-gradient(90deg, var(--shine) 0 0.7vmin, #fff0 0 100%), 
		conic-gradient(from -1deg at 8% 89%, #fff0 0 35%, var(--shine) 36% 100%), 
		conic-gradient(from 0deg at 92% 89%, var(--shine) 0 64%, #fff0 65% 100%),
		radial-gradient(circle at 50% 1.55vmin, #fff, #fc0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%), 
		radial-gradient(circle at 50% 187%, var(--white) 0 7vmin, #fff0 calc(7vmin + 1px) 7.5vmin, var(--white) calc(7.5vmin + 1px) 8.35vmin, #fff0 calc(8.35vmin + 1px) 9.5vmin, var(--white) calc(9.5vmin + 1px) 100% ),
		linear-gradient(-95deg, #fff0 0 1.4vmin, var(--shine) calc(1.4vmin + 1px) 1.65vmin, var(--red) calc(1.65vmin + 1px) 2.85vmin, #fff0 0 100%), 
		linear-gradient(95deg, #fff0 0 1.4vmin, var(--shine) calc(1.4vmin + 1px) 1.65vmin, var(--red) calc(1.65vmin + 1px) 2.85vmin, #fff0 0 100%);
	width: 4.65vmin;
	height: 5.5vmin;
	left: 3.15vmin;
	top: 0.75vmin;
	border-radius: 0.5vmin;
	clip-path: polygon(0% 96%, 0% 70%, 22% 63%, 24% 53%, 7% 56%, 8% 41%, 25% 38%, 27% 17%, 15% 18%, 16% 10%, 22% 8%, 35% 6%, 54% 5%, 74% 8%, 73% 8%, 82% 10%, 83% 18%, 72% 17%, 75% 37%, 88% 41%, 89% 56%, 77% 54%, 78% 62%, 100% 70%, 100% 96%, 85% 100%, 15% 100%);
	background-repeat: no-repeat;
	background-size: 1vmin 1.1vmin, 1vmin 1.1vmin, 1vmin 1.15vmin, 0.45vmin 1.15vmin, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	background-position: 3.45vmin 0.25vmin, 0.35vmin 0.25vmin, 0vmin 2.1vmin, 3.75vmin 2.1vmin, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

.roof {
	border: 0.65vmin solid #fff0;
	border-bottom-color: var(--red);
	left: 4.9vmin;
	top: -0.2vmin;
}

.lighthouse + .lighthouse {
	transform-origin: 50% 100%;
	transform: rotateX(180deg);
	opacity: 0.15;
}

.lighthouse + .lighthouse .tower {
	background: 
		radial-gradient(circle at 50% 100%, var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),   
		radial-gradient(circle at 50% calc(100% - 0.25vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),   
		radial-gradient(circle at 50% calc(100% - 0.5vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),  
		radial-gradient(circle at 50% calc(100% - 0.75vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),   
		radial-gradient(circle at 50% calc(100% - 1vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),  
		linear-gradient(-94.5deg, #fff2 0 1.65vmin, #fff0 calc(1.65vmin + 1px) 100%),   
		linear-gradient(94.5deg, #fff2 0 1.5vmin, #fff0 calc(1.55vmin + 1px) 100%),   
		radial-gradient(circle at 50% 125%, var(--white) 0 9vmin, var(--red) calc(9vmin + 1px) 13vmin, var(--white) calc(13vmin + 1px) 14vmin, #fff0  18vmin);
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 70%, 100% 70%, 100% 100%;
	background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 0;
	filter: blur(2px);
}

.lighthouse + .lighthouse .tower:after {
	filter: blur(3px);
}
.lighthouse + .lighthouse .tower:before {
	opacity: 0;
}

input {
	display:none;
}

label[for=light] {
	width: 11vmin;
	cursor: pointer;
	height: 30vmin;
	margin-top: -30vmin;
	clip-path: polygon(30% 0, 70% 0, 95% 100%, 5% 100%);
}

label[for=night] {
	position: absolute;
	bottom: 3vmin;
	background: #fff;
	width: 36px;
	height: 36px;
	border-radius: 100% 1% 100% 100%;
	background: radial-gradient(circle at 90% 10%, #fff 0 0.1vmin, #fff0 calc(0.1vmin + 1px) 100%), radial-gradient(circle at 68% 25%, #fff 0 0.1vmin, #fff0 calc(0.1vmin + 1px) 100%), radial-gradient(circle at 85% 40%, #fff 0 0.08vmin, #fff0 calc(0.08vmin + 1px) 100%), radial-gradient(circle at 95% 20%, #fff0 0 2vmin, #fff calc(2vmin + 1px) 100%);
	cursor: pointer;
}

.light {
	width: 0.75vmin;
	height: 0.75vmin;
	background: #f600;
	border-radius: 100%;
	left: 5.1vmin;
	top: 1.95vmin;
	animation: spin 6s linear 0s infinite;
	animation-play-state: running;
	perspective: 10vmin;
}

.light:before,
.light:after {
	content: "";
	position: absolute;
	width: 30vmin;
	height: 4vmin;
	background: radial-gradient(circle at 0% 50%, #fdf8cc6e, #fff0);
	margin-top: -1.85vmin;
	clip-path: polygon(100% 0, 0 53%, 100% 100%);
	margin-left: 0.375vmin;
}

.light:after {
	transform: rotateX(60deg);
}

input#light:checked ~ .content .lighthouse .light {
	animation-play-state: paused;
}

@keyframes spin {
	25% { opacity: 0.5; }
	50% { opacity: 1; }
	100% { transform: rotateY(360deg); }
}

/* sea reflex */
.sea:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #fff4, var(--sea-1) 1%, #fff0 30%), radial-gradient(circle at 50% 0%, var(--sea-2), #024479 50%, #000);
	opacity: 0.75;
}

.sea span {
	position: absolute;
	z-index: -1;
	top: 1vmin;
	left: 1vmin;
	width: 20vmin;
	height: 0.15vmin;
	background: var(--reflex);
	border-radius: 1vmin;
	box-shadow: 
		20.5vmin 0 0 var(--reflex),
		53.5vmin 0 0 var(--reflex),
		74vmin 0 0 var(--reflex), 
		122.5vmin 0 0 var(--reflex);
	filter: 
		drop-shadow(-14vmin 0vmin 0 #fff) 
		drop-shadow(14vmin 0.85vmin 0 #fff) 
		drop-shadow(-24vmin 1.85vmin 0 #fff)  
		drop-shadow(-1vmin 3.5vmin 0 #fff)  
		drop-shadow(6vmin 7vmin 0 #fff)  
		drop-shadow(-6vmin 14vmin 0 #fff) 
		drop-shadow(3vmin 28vmin 0 #fff)    
		drop-shadow(3vmin 56vmin 0 #fff)    
		blur(1px);
}

.sea span:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 11.5vmin;
	right: 0;
	width: 2vmin;
	height: 0.15vmin;
	background: var(--reflex);
	border-radius: 1vmin;
	box-shadow: 20.5vmin 0 0 var(--reflex), 24vmin 0 0 var(--reflex),
		33vmin 0 0 var(--reflex), 59vmin 0 0 var(--reflex), 86vmin 0 0 var(--reflex),
		89.5vmin 0 0 var(--reflex), 93vmin 0 0 var(--reflex), 102vmin 0 0 var(--reflex);
}

.sea span:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 15vmin;
	right: 0;
	width: 2vmin;
	height: 0.15vmin;
	background: var(--reflex);
	border-radius: 1vmin;
	box-shadow: 24vmin 0 0 var(--reflex), 33vmin 0 0 var(--reflex),
		50vmin 0 0 var(--reflex), 71vmin 0 0 var(--reflex), 77vmin 0 0 var(--reflex),
		93vmin 0 0 var(--reflex), 102vmin 0 0 var(--reflex);
}

/* clouds */
.sky span {
	background: linear-gradient(0deg, #fff0 2vmin, #fff 0 100%);
	width: 8vmin;
	height: 8vmin;
	border-radius: 100% 120% 100% 100%;
	position: absolute;
	transform: translateX(-14vmin) translateY(-15vmin);
	opacity: 0.1;
}

.sky span:before,
.sky span:after{
	content: "";
	position: absolute;
	width: 7vmin;
	height: 5vmin;
	background: linear-gradient(0deg, #fff0 1vmin, #fff 0 100%);
	border-radius: 150% 120% 100% 100%;
	margin-left: -6vmin;
	margin-top: 2vmin;
}

.sky span:after {
	content: "";
	position: absolute;
	width: 7vmin;
	height: 3vmin;
	background: linear-gradient(0deg, #fff0 1vmin, #fff 0 100%);
	border-radius: 150% 120% 100% 200%;
	margin-left: -12vmin;
	margin-top: 4vmin;
}

.sky span:nth-child(even) {
	background: linear-gradient(0deg, #fff0 2vmin, #fff 0 100%);
	width: 5vmin;
	height: 4vmin;
	border-radius: 100% 120% 100% 100%;
	position: absolute;
	transform: translateX(5.5vmin) translateY(-17vmin);
	opacity: 0.2;
}

.sky span:nth-child(even):before {
	width: 3.75vmin;
	height: 3vmin;
	margin-left: 4.5vmin;
	margin-top: 0.1vmin;
	border-radius: 100%;
}

.sky span:nth-child(even):after {
	width: 3vmin;
	height: 2.5vmin;
	margin-left: 8vmin;
	margin-top: 0.6vmin;
	box-shadow: -9.5vmin -0.3vmin 0 -0.75vmin #fff, 1.25vmin -0.1vmin 0 -0.9vmin #fff;
	border-radius: 100% 100% 3vmin 100%;
}

.sky span:nth-child(2) {
	opacity: 0.7;
}

.sky span:nth-child(3) {
	transform: translateX(-8vmin) translateY(0.5vmin) scale(0.35);
	opacity: 0.9;
}

.sky span:nth-child(4) {
	transform: translateX(-28vmin) translateY(-5.5vmin);
	opacity: 0.4;
}

.sky span:nth-child(5) {
	transform: translateX(27vmin) translateY(-4.5vmin) scale(0.5);
}

.sky span:nth-child(6) {
	transform: translateX(27vmin) translateY(-38vmin) scale(3.75) scaleY(0.5) rotateY(180deg);
	opacity: 0.1;
}

.sky span:nth-child(7) {
	transform: translateX(-45vmin) translateY(-32vmin) scale(2.5) rotateY(180deg) scaleY(0.5);
}

.sky span:nth-child(8) {
	display: none;
}

.sky span:nth-child(9) {
	transform: translateX(50vmin) translateY(-26vmin) scale(2) scaleY(0.75);
}

/* rocks */
.sky i {
    background: var(--base-2);
    position: absolute;
    width: 10vmin;
    height: 3.5vmin;
    margin-left: -24vmin;
    border-radius: 100%;
    bottom: -2.25vmin;
    box-shadow: 0 -1px 0.15vmin 0 var(--base-1);
    z-index: 2;
}

.sky i + i {
    width: 8vmin;
    height: 4vmin;
    margin-left: -39vmin;
    bottom: -2.5vmin;
}
.sky i + i + i {
    width: 11vmin;
    height: 3.5vmin;
    margin-left: -56vmin;
    bottom: -2.2vmin;
}
.sky i + i + i + i {
    width: 9vmin;
    height: 3.5vmin;
    margin-left: 23.65vmin;
    bottom: -2.3vmin;
}
.sky i + i + i + i + i {
    width: 8vmin;
    height: 4vmin;
    margin-left: 39vmin;
    bottom: -2.5vmin;
}

.sky i + i + i + i + i + i {
    width: 11vmin;
    height: 3.75vmin;
    margin-left: 53vmin;
    bottom: -2.6vmin;
}

#night:checked ~ * {
	--sm: #fff;
	--sm-2: #7b7b7b;
	--sky-1: #060b28;
	--sky-2: #195eaa;
	--sea-1: #3264cb;
	--sea-2: #0059bb;
	--sea-3: #01072b;
	--red: #0c0926;
	--red-2: #323753;
	--white: #091140;
	--shine: #fff3;
	--base-1: #132141;
	--base-2: #06182c;
	--windows: #fc0;
}

#night:checked ~ .sky:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: repeating-conic-gradient(#FFF9 0%, #fff0 0.00002%, #fff0 0.00025%, #fff0 0.0175%);
}

/* windows */
.tower:before ,
.tower:after {
	content: "";
	position: absolute;
	background: 
		linear-gradient(90deg, #fff0 0 0.3vmin, var(--white) 0 0.45vmin, #fff0 0 100%), 
		linear-gradient(180deg, var(--windows) 0 0.35vmin, #fff0 0 0.45vmin, var(--windows) 0 0.75vmin, #fff0 0 0.85vmin, var(--windows) 0 100%);
	width: 0.7vmin;
	height: 1.3vmin;
	border-radius: 1vmin 1vmin 0 0;
	left: 2.6vmin;
	top: 0.5vmin;
	background-repeat: no-repeat;
	background-size: 100% 75%, 100% 100%;
	background-position: 0 100%, 0 0;
}

.tower:after {
	top: 8vmin;
}

/* labels */
label[for=night] {
	position: absolute;
	bottom: 3vmin;
	background: #0000;
	width: 36px;
	height: 36px;
	border-radius: 0%;
	--star: #fff 0 1px, #fff0 2px 100%;
	cursor: pointer;
	animation: hide-moon 0.5s ease-in-out 0s 1;
}

label[for=night]:before {
	content: "";
	position: absolute;
	bottom: 6px;
	background: #fff;
	width: 24px;
	height: 24px;
	left: 6px;
	border-radius: 100% 1% 100% 100%;
	background: 
		radial-gradient(circle at 90% 10%, var(--star)), 
		radial-gradient(circle at 68% 25%, var(--star)), 
		radial-gradient(circle at 85% 40%, var(--star)), 
		radial-gradient(circle at 95% 20%, #fff0 0 12px, #fff 13px 100%);
	cursor: pointer;
}

@keyframes hide-moon {
	0% { transform: rotate(0deg) scale(0.25); }
	100% { transform: rotate(360deg) scale(1); }
}

@keyframes hide-sun {
	0% { transform: rotate(0deg) scale(0.25);  }
	100% { transform: rotate(360deg) scale(1); }
}

#night:checked ~ label[for=night] {
	animation: hide-sun 0.5s ease-in-out 0s 1;    
}

#night:checked ~ label[for=night]:before { 
	width: 36px;
	height: 36px;
	left: 0;
	top: 0;
	border-radius: 1%;
	background: 
		radial-gradient(circle at 4px 17px, var(--star)),
		radial-gradient(circle at 32px 17px, var(--star)), 
		radial-gradient(circle at 18px 4px, var(--star)),
		radial-gradient(circle at 18px 32px, var(--star)),          
		radial-gradient(circle at 11px 6px, var(--star)),
		radial-gradient(circle at 11px 30px, var(--star)),
		radial-gradient(circle at 6px 10px, var(--star)),
		radial-gradient(circle at 6px 25px, var(--star)),         
		radial-gradient(circle at 25px 6px, var(--star)),
		radial-gradient(circle at 25px 30px, var(--star)),
		radial-gradient(circle at 30px 10px, var(--star)),
		radial-gradient(circle at 30px 25px, var(--star)),
		radial-gradient(circle at 50% 50%, #fff 0 9px, #fff0 10px 100%);
	cursor: pointer;
}

Recommandé

Effet de cadre sur les images à l'aide de CSS pur

Bouton de survol

Formulaire de connexion/inscription à double curseur

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS