Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Glass Effect CSS Và 12 Ví Dụ Thực Tế Trong Website

Cách Tạo Glass Effect CSS Và 12 Ví Dụ Thực Tế Trong Website


Ngày 14 Tháng 1 Năm 2021

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é!

Frosted Glass Effect HTML CSS

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.

Nguồn

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

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.

Nguồn

Thiết Kế Frosted Glass Card HTML CSS

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.

Nguồn

Thiết Kế Frosted Glass Effect Với SVG

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.

Nguồn

Thiết Kế Login Form Frosted Glass Effect

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.

Nguồn

Thiết Kế CSS3 Glass Effect

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.

Nguồn

Thiết Kế Glass Effect

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.

Nguồn

Thiết Kế UI Frosted Glass Effect

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.

Nguồn

Thiết Kế Table Frosted Glass Effect

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.

Nguồn

Thiết Kế Frosted Glass Effect HTML5 CSS3

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.

Nguồn

Thiết Kế CSS Frosted Glass Creditcard

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.

Nguồn

Thiết Kế Frosted Glass Quote

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.

Nguồn

Thiết Kế CSS Frosted Glass Responsive

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.

Nguồn

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ẻ!