Notificaciones de tostadas salpicadas

1159 Andev.web

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

9 September 2024

Formulario de registro rotatorio en árabe (Glassmorphic)

13 October 2024

Mis redes sociales

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

Notificaciones de tostadas salpicadas

Recomendado

Burbuja de jabón

Formulario de registro rotatorio en árabe (Glassmorphic)

Mis redes sociales

HTML

CSS

JS

Recomendado

Burbuja de jabón

Formulario de registro rotatorio en árabe (Glassmorphic)

Mis redes sociales

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS