Webleb - Snippet di Codice -

1158 Andev.web

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

21 June 2025

Contenitore di effetti luce HTML con CSS

27 December 2024

Una home page creata con directory

23 March 2025

Un codice di solosimbaa86

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<input type="checkbox" name="t-help" id="t-help" checked>
<input type="checkbox" name="t-success" id="t-success" checked>
<input type="checkbox" name="t-warning" id="t-warning" checked>
<input type="checkbox" name="t-error" id="t-error" checked>
<div class="toast-panel">
	<div class="toast-item help">
		<div class="toast help">
			<label for="t-help" class="close"></label> 
			<h3>Help!</h3>
			<p>Do you have a problem? Just use this <a href="#">contact form</a>.</p>
		</div>
	</div>
	<div class="toast-item success">
		<div class="toast success">
			<label for="t-success" class="close"></label>
			<h3>Success!</h3>
			<p>Your message has been sent successfully.</p>
		</div>
	</div>
	<div class="toast-item warning">
		<div class="toast warning">
			<label for="t-warning" class="close"></label>
			<h3>Warning!</h3>
			<p>Sorry, there was a problem with your request.</p>
		</div>
	</div>
	<div class="toast-item error">
		<div class="toast error">
			<label for="t-error" class="close"></label>
			<h3>Error!</h3>
			<p>Change a few thing up and try submitting again.</p>
		</div>
	</div>
	<div class="toast-icons">
		<label for="t-help" class="toast-icon icon-help"></label>
		<label for="t-success"  class="toast-icon icon-success"></label>
		<label for="t-warning"  class="toast-icon icon-warning"></label>
		<label for="t-error" class="toast-icon icon-error"></label>
	</div>
</div>  
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

:root {
	--tr: all 0.5s ease 0s;
	--ch1: #05478a;
	--ch2: #0070e0;
	--cs1: #005e38;
	--cs2: #03a65a;
	--cw1: #c24914;
	--cw2: #fc8621;
	--ce1: #851d41;
	--ce2: #db3056;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	background: radial-gradient(circle at 50% 100%, #1d2232, #262434);
	font-family: "Varela Round", sans-serif;
}

.toast-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: var(--tr);
	position: absolute;
	padding: 0 1rem;
	height: 100%;
	min-height: 20rem;
	min-width: 375px;
}

.toast-item {
	overflow: hidden;
	max-height: 25rem;
	transition: var(--tr);
	animation: show-toast 4s ease 3s 1;
}

@keyframes show-toast { 
	0%, 50%, 100% { max-height: 0; opacity: 0; }
	10%, 25% { max-height: 15rem; opacity: 1; }
}

.toast {
	background-color: #232b2b;
	background: var(--bg);
	color: #f5f5f5;
	padding: 1rem 2rem 1rem 6rem;
	text-align: center;
	border-radius: 2rem;
	position: relative;
	font-weight: 300;
	margin: 1.75rem 0 1rem;
	text-align: left;
	max-width: 15rem;
	transition: var(--tr);
	opacity: 1;
}

.toast:before {
	content: "";
	position: absolute;
	width: 5.5rem;
	height: 6rem;
	--drop: 
		radial-gradient(circle at 64% 51%, var(--clr) 0.45rem, #fff0 calc(0.45rem + 1px)), /*ball 1*/
		radial-gradient(circle at 100% 100%, #fff0 0.9rem, var(--clr) calc(0.9rem + 1px) 1.25rem, #fff0 calc(1.25rem + 1px) 100%), /*neck 2*/ 
		radial-gradient(circle at 0% 0%, #fff0 0.9rem, var(--clr) calc(0.9rem + 1px) 1.25rem, #fff0 calc(1.25rem + 1px) 100%), /*neck 1*/
		radial-gradient(circle at 0% 120%, var(--clr) 4rem, #fff0 calc(4rem + 1px)) /*big 1*/;
	background: 
		radial-gradient(circle at 22% 3.8rem, var(--clr) 0.75rem, #fff0 calc(0.75rem + 1px)), /*ball 8*/ 
		radial-gradient(circle at 95% 1.9rem, var(--clr) 0.07rem, #fff0 calc(0.07rem + 1px)), /*ball 7*/ 
		radial-gradient(circle at 80% 2.25rem, var(--clr) 0.18rem, #fff0 calc(0.18rem + 1px)), /*ball 6*/
		radial-gradient(circle at 80% 75%, var(--clr) 0.35rem, #fff0 calc(0.35rem + 1px)), /*ball 5*/
		radial-gradient(circle at 43% 2.3rem, var(--clr) 0.07rem, #fff0 calc(0.07rem + 1px)), /*ball 4*/ 
		radial-gradient(circle at 40% 1rem, var(--clr) 0.12rem, #fff0 calc(0.12rem + 1px)), /*ball 3*/ 
		radial-gradient(circle at 20% 1.5rem, var(--clr) 0.25rem, #fff0 calc(0.25rem + 1px)), /*ball 2*/
		var(--drop),
		#f000;
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 1.625rem 1.625rem, 1.625rem 1.625rem, 100% 100%, 100% 100%;
	background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, calc(100% - 1.75rem) 2.85rem, calc(100% - 1.75rem) 2.95rem, 0 0, 0 0;
	bottom: 0rem;
	left: 0rem;
	z-index: 0;
	border-radius: 0 0 0 2rem;
}

.toast:after {
	content: "";
	position: absolute;
	width: 3.5rem;
	height: 3.5rem;
	background: var(--clr);
	top: -1.75rem;
	left: 2rem;
	border-radius: 3rem;
	padding-top: 0.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.25rem;
	box-sizing: border-box;
}

.toast h3 {
	font-size: 1.35rem;
	margin: 0;
	line-height: 1.35rem;
	font-weight: 300;
	position: relative;
}

.toast h3:before,
.toast-icon:before {
	border: 0.5rem solid #fff0;
	width: 0;
	height: 0;
	position: absolute;
	content: "";
	left: -3.45rem;
	border-top: 1rem solid var(--clr);
	border-left: 1rem solid var(--clr);
	top: -0.4em;
	transform: rotate(-96deg) skewX(30deg);
	border-radius: 0.5rem;
}

.toast p {
	position: relative;
	font-size: 0.95rem;
	z-index: 1;
	margin: 0.25rem 0 0;
}

.close {
	position: absolute;
	width: 1.35rem;
	height: 1.35rem;
	text-align: center;
	right: 1rem;
	cursor: pointer;
	border-radius: 100%;
}

.close:after {
	position: absolute;
	font-family: 'Varela Round', san-serif;
	width: 100%;
	height: 100%;
	left: 0;
	font-size: 1.8rem;
	content: "+";
	transform: rotate(45deg);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close:hover {
	background: #f5f5f5;
	color: var(--clr);
}

.toast-item.success {
	animation-delay: 2s;
}

.toast-item.warning {
	animation-delay: 1s;
}

.toast-item.error {
	animation-delay: 0s;
}

.toast.help {
	--clr: var(--ch1);
	--bg: var(--ch2);
}
.toast.help:after,
.icon-help:after {
	content: "?";
}

.toast.success {
	--clr: var(--cs1);
	--bg: var(--cs2);
}

.toast.success:after,
.icon-success:after {
	content: "L";
	font-size: 1.7rem;
	font-weight: bold;
	padding-bottom: 0.5rem;
	transform: rotateY(180deg) rotate(-38deg);
	text-indent: 0.15rem;
}

.toast.warning {
	--clr: var(--cw1);
	--bg: var(--cw2);
}

.toast.warning:after,
.icon-warning:after {
	content: "!";
	font-weight: bold;
}

.toast.error {
	--clr: var(--ce1);
	--bg: var(--ce2);
}

.toast.error:after,
.icon-error:after {
	content: "+";
	font-size: 3rem;
	line-height: 1.2rem;
	transform: rotate(45deg);
}

.toast.success:before {
	--drop: radial-gradient(circle at 65% 63%, var(--clr) 0.425rem, #fff0 calc(0.425rem + 1px)), /*ball 1*/ radial-gradient(circle at 70% 125%, #fff0 1rem, var(--clr) calc(1rem + 1px) 1.25rem, #fff0 calc(1.25rem + 1px) 100%), /*neck 2*/ radial-gradient(circle at 30% -25%, #fff0 1rem, var(--clr) calc(1rem + 1px) 1.25rem, #fff0 calc(1.25rem + 1px) 100%), /*neck 1*/ radial-gradient(circle at 20% 120%, var(--clr) 3.5rem, #fff0 calc(3.5rem + 1px)) /*big 1*/;
	background-position: 0 0.4rem, -0.2rem 3.3rem, 0 0.4rem, -2rem -1.5rem, -0.8rem 0rem, -1rem 0.4rem, 0rem 1.5rem, 1.2rem 0.4rem, calc(100% - 0.75rem) 3.5rem, calc(100% - 0.75rem) 3.75rem, 0 0rem, 0 0rem;
}

.toast.warning:before {
	--drop: radial-gradient(circle at 65% 63%, var(--clr) 0.425rem, #fff0 calc(0.425rem + 1px)), /*ball 1*/ radial-gradient(circle at 129% 36%, #fff0 1rem, var(--clr) calc(1rem + 1px) 1.25rem, #fff0 calc(1.25rem + 1px) 100%), /*neck 2*/ radial-gradient(circle at -27% 25%, #fff0 1rem, var(--clr) calc(1rem + 1px) 1.25rem, #fff0 calc(1.25rem + 1px) 100%), /*neck 1*/ radial-gradient(circle at 20% 120%, var(--clr) 3.5rem, #fff0 calc(3.5rem + 1px)) /*big 1*/;
	background-position: 1.82rem 0.65rem, -1.2rem 1.2rem, -2rem 0.75rem, -3.5rem -1.95rem, -0.5rem -0.55rem, 3rem 4.25rem, 0rem -0.5rem, 1.2rem 0.4rem, calc(100% - 3.9rem) 2.75rem, calc(100% - 3.75rem) 2.75rem, 0 0rem, 0 0rem;
}

.toast.error:before {
	--drop: radial-gradient(circle at 65% 63%, var(--clr) 0.425rem, #fff0 calc(0.425rem + 1px)), /*ball 1*/ radial-gradient(circle at 129% 36%, #fff0 1rem, var(--clr) calc(1rem + 1px) 1.25rem, #fff0 calc(1.25rem + 1px) 100%), /*neck 2*/ radial-gradient(circle at -27% 25%, #fff0 1rem, var(--clr) calc(1rem + 1px) 1.25rem, #fff0 calc(1.25rem + 1px) 100%), /*neck 1*/ radial-gradient(circle at 20% 120%, var(--clr) 3.5rem, #fff0 calc(3.5rem + 1px)) /*big 1*/;
	background-position: 1.75rem 0.75rem, -0.75rem 1.2rem, -1.3rem 0.5rem, -3.5rem -2.5rem, -0.4rem 0rem, 2rem 1.25rem, 0.82rem 1.6rem, 0.5rem 1.65rem, calc(100% - 2.99rem) 3.25rem, calc(100% - 2.75rem) 3rem, 0 0rem, 0 0rem;
}

.toast a {
	color: #fff;
}

.toast-item.closed {
	max-height: 0;
}

/*** ICONS ***/

.toast-icons {
	background: #fff1;
	padding: 1rem 1rem 1.25rem 1rem;
	display: flex;
	justify-content: space-around;
	border-radius: 2rem;
	gap: 1.5rem;
	width: 100%;
	box-sizing: border-box;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.toast-icon {
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	position: relative;
}

.toast-icon:before {
	left: 0.7rem;
	top: 2.4em;
	transform: rotate(-96deg) skewX(30deg);
}

.toast-icon:after {
	font-size: 2rem;
	font-weight: bold;
}

.icon-error:after {
	font-size: 3.6rem;
	line-height: 2rem;
	font-weight: 500;
	padding-top: 0.25rem;
	max-height: 2rem;
}

.icon-help {
	background: #0070e0;
	--clr: #0070e0;
}

.icon-success {
	background: #03a65a;
	--clr: #03a65a;
}

.icon-warning {
	background: #fc8621;
	--clr: #fc8621;
}

.icon-error {
	background: #db3056;
	--clr: #db3056;
}

#t-help:checked ~ .toast-panel .toast-item.help,
#t-success:checked ~ .toast-panel .toast-item.success,
#t-warning:checked ~ .toast-panel .toast-item.warning,
#t-error:checked ~ .toast-panel .toast-item.error {
	max-height: 0;
	opacity: 0;
}

input[type=checkbox] {
	display: none;
}

Consigliato

Contenitore di effetti luce HTML con CSS

Una home page creata con directory

Un codice di solosimbaa86

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS