Khung Thông Báo Bằng Css Tuyệt Đẹp Cho Website/Blog

Chào mọi người, bài viết này mình chia sẽ đến mọi người một mẫu thông báo tuyệt đẹp từ CSS và được tối ưu không sữ dụng Javascript để giảm tối thiểu tốc độ tải trang và tộc tải sẽ nhanh hơn.
Bên dưới là hình ảnh DEMO khung thông báo.

Chúng ta bắt đầu nhé.

CODE HTML.

 <div class="wrapper">
	<div class="alert alert--success">
		<svg class="alert__icon" width="24" height="24">
			<use href="#check-circle"></use>
		</svg>
		<div>
			<h2 class="alert__title">Success Message</h2>
			<p class="alert__desc">
				Bạn có thể chèn mô tả cho tin nhắn tại đây. Nội dung mô tả liên quan đến
hành động đã được thực hiện. (Hung.Pro.VN)
			</p>
		</div>
	</div>
	<div class="alert alert--danger">
		<svg class="alert__icon" width="24" height="24">
			<use href="#exclamation-circle"></use>
		</svg>
		<div>
			<h2 class="alert__title">Error Message</h2>
			<p class="alert__desc">
				Bạn có thể chèn mô tả cho tin nhắn tại đây. Nội dung mô tả liên quan đến
hành động đã được thực hiện. (Hung.Pro.VN)
			</p>
		</div>
	</div>
	<div class="alert alert--warning">
		<svg class="alert__icon" width="24" height="24">
			<use href="#exclamation-circle"></use>
		</svg>
		<div>
			<h2 class="alert__title">Warning Message</h2>
			<p class="alert__desc">
				Bạn có thể chèn mô tả cho tin nhắn tại đây. Nội dung mô tả liên quan đến
hành động đã được thực hiện. (Hung.Pro.VN)
			</p>
		</div>
	</div>
</div>

<svg width="0" height="0" style="display: none">
	<symbol id="check-circle" viewBox="0 0 24 24">
		<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" fill="currentColor" />
	</symbol>
	<symbol id="exclamation-circle" viewBox="0 0 24 24">
		<path d="M11 15H13V17H11V15ZM11 7H13V13H11V7ZM11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="currentColor" />
	</symbol>
</svg>

<div class="no-support">
	<h2>Trình duyệt của bạn hiện chưa hỗ trợ hàm `if()`.</h2>
	<p>
		Please check the
		<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/if#browser_compatibility" target="__blank">browser compatibility table</a>
		và sử dụng trình duyệt hỗ trợ tính năng này.
	</p>
</div>

Code CSS.

:root {
	--green: #43a047;
	--light-green: #e8f5e9;
	--red: #f44336;
	--light-red: #ffebee;
	--yellow: #ff9800;
	--light-yellow: #fff3e0;
}

.alert {
	background-color: if(
		style(--alert-type: success): var(--light-green); 
		style(--alert-type: danger): var(--light-red);
		style(--alert-type: warning): var(--light-yellow);
	);
	color: if(
		style(--alert-type: success): var(--green);
		style(--alert-type: danger): var(--red);
		style(--alert-type: warning): var(--yellow);
	);
}

.alert--success {
	--alert-type: success;
}

.alert--danger {
	--alert-type: danger;
}

.alert--warning {
	--alert-type: warning;
}

/* Not relevant */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background-color: #f5f5f5;
	font-family: "Inter", sans-serif;
	line-height: 1.5;
}

.wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1rem;
}

.alert {
	padding: 1rem;
	border-radius: 0.5rem;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	border: 1px solid currentColor;
	font-size: 0.75rem;
}

.alert__icon {
	flex-shrink: 0;
}

.alert__title {
	font-weight: 600;
	color: #263238;
	margin-bottom: 4px;
}

.alert__desc {
	color: #546e7a;
}

.no-support {
	align-content: center;
	background-color: #000d;
	color: #fff;
	display: grid;
	gap: 1em;
	inset: 0;
	place-items: center;
	position: fixed;
	z-index: 10;
	display: if(media(width > 1px): none);

	a {
		color: inherit;
	}
}

Như vậy đã hoàn thành, mọi người có thể áp dụng và kiểm tra xem thế nào nhé.

DEMO Ở PHÍA BÊN DƯỚI.

Success Message

Bạn có thể chèn mô tả cho tin nhắn tại đây. Nội dung mô tả liên quan đến hành động đã được thực hiện. (Hung.Pro.VN)

Error Message

Bạn có thể chèn mô tả cho tin nhắn tại đây. Nội dung mô tả liên quan đến hành động đã được thực hiện. (Hung.Pro.VN)

Warning Message

Bạn có thể chèn mô tả cho tin nhắn tại đây. Nội dung mô tả liên quan đến hành động đã được thực hiện. (Hung.Pro.VN)

Trình duyệt của bạn hiện chưa hỗ trợ hàm `if()`.

Please check the browser compatibility table và sử dụng trình duyệt hỗ trợ tính năng này.