Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng frosted glass effect và các ví dụ thực tế được xây dựng bằng HTML, CSS, Javascript cho thiết kế và phát triển web nhé!
Cách Tạo Hiệu Ứng Frosted Glass Effect HTML CSS
Trong phần này chúng ta sẽ đi vào tạo các cấu trúc HTML cơ bản cho hiệu ứng glass effect bằng đoạn mã sau nhé:
HTML
<main>
<blockquote>
Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
<footer>—
<cite>
Albert Einstein
</cite>
</footer>
</blockquote>
</main>
Việc tiếp theo chúng ta sẽ đi vào thiết lập style CSS để tạo hiệu ứng frosted glass effect bằng đoạn mã dưới đây nhé:
CSS
body, main::before {
background:url("https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/glass-effect-html-css/pexels-valiphotos-589841%20%281%29.jpg") 0 / cover fixed;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Roboto', sans-serif;
}
main {
width: 20rem;
height: 15rem;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
border-radius: 5px;
position: relative;
z-index: 1;
background: inherit;
overflow: hidden;
font-size: 24px;
font-weight: bold;
line-height: 42px;
}
main::before {
content: "";
position: absolute;
background: inherit;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
margin: -20px;
}
Đây là hình ảnh của hiệu ứng này nhé!
Và kết quả cuối cùng bạn xem ở dưới đây nhé:
See the Pen Frosted Glass Effect HTML CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.
Các Ví Hiệu Ứng Frosted Glass Khác Cho Website
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Thiết Kế CSS Frosted Glass Effect
Kết quả bạn xem bên dưới nhé!
See the Pen CSS only frosted glass effect by Gregg OD (@GreggOD) on CodePen.
Thiết Kế Frosted Glass Card HTML CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Frosted glass card overlay by Trevor Eyre (@trevoreyre) on CodePen.
Thiết Kế Frosted Glass Effect Với SVG
Kết quả bạn xem bên dưới nhé!
See the Pen Frosted glass effect with CSS & SVG by Matori (@Matori) on CodePen.
Thiết Kế Login Form Frosted Glass Effect
Kết quả bạn xem bên dưới nhé!
See the Pen Frosted Glass Effect - Form by Usama Tahir (@AmJustSam) on CodePen.
Thiết Kế CSS3 Glass Effect
Kết quả bạn xem bên dưới nhé!
See the Pen CSS Glass Effect by Yariv Fruend (@YarivFrd) on CodePen.
Thiết Kế Glass Effect
Kết quả bạn xem bên dưới nhé!
See the Pen CSS Glass Reflection Effect by Dovydas (@dovydas) on CodePen.
Thiết Kế UI Frosted Glass Effect
Kết quả bạn xem bên dưới nhé!
See the Pen Frosted Glass Effect Using Multiple Images by betravis (@betravis) on CodePen.
Thiết Kế Table Frosted Glass Effect
Kết quả bạn xem bên dưới nhé!
See the Pen Exercise - Coffee Shop Menu App by Zach Saffrin (@zachsaffrin) on CodePen.
Thiết Kế Frosted Glass Effect HTML5 CSS3
Kết quả bạn xem bên dưới nhé!
See the Pen Frosted glass effect by Michèle van den Aardweg (@michelenl) on CodePen.
Thiết Kế CSS Frosted Glass Creditcard
Kết quả bạn xem bên dưới nhé!
See the Pen CSS Frosted glass creditcard by Chris Bongers (@rebelchris) on CodePen.
Thiết Kế Frosted Glass Quote
Kết quả bạn xem bên dưới nhé!
See the Pen Frosted Glass Quote by Joni Trythall (@jonitrythall) on CodePen.
Thiết Kế CSS Frosted Glass Responsive
Kết quả bạn xem bên dưới nhé!
See the Pen CSS - Frosted Glass by Kyle Wetton (@kylewetton) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những ví dụ frosted glass effect dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!