Nhân dịp nữ ca sĩ xinh đẹp bền vững - "Thánh ế toàn năng" vì đen của chúng ta Bích Phương ra mắt "Nằm xuống Liu riu". Xin hướng dẫn các hiệu ứng Glassmorphism rất sạch đẹp, hiện đại và bắt mắt cho trang blogspot.

Các bác có thể tận dụng hiệu ứng trong suốt và đục mờ này để tự làm : Album ảnh, Khoe hotgil, giới thiệu sản phẩm, LandingPage ấn tượng... Hướng dẫn dưới đây tràn màn hình, để các bạn tiện thưởng thức luôn.

Để hiệu ứng Glassmorphism thể hiện đẹp và nhất quán, việc đầu tiên là cần chuẩn bị hình ảnh thật đẹp với các tiêu chí: kích thước giống nhau, link nguồn ảnh lấy bất kỳ đâu, lựa chọn định dạng phù hợp  khi cần thiết, sử dụng được cả bài post lẫn page, trải nghiệm tràn màn hình ấn tượng,...

Liu riu hiệu ứng Glassmorphism cùng Bích Phương

Clink để xem chúng ta có gì với hiệu ứng Liu riu Glassmorphism cùng Thánh ế Bích Phương nhé.!

• Một hình nền đẹp
• Những hình ảnh sinh động các thể loại: PNG, GIF,...
• Chèn nội dung text thoải mái
• Nhúng thẻ video youtube quá dễ dàng
• Tùy chỉnh số lượng thoải mái
• Thiết lập thông số CSS độc lập từng khối
• Hiệu ứng nhẹ nhàng mềm mịn

Trông khá ổn phải không?  Hiển thị trên PC rất ổn, quá ngon để làm các trang Landing Page hoặc Page độc lập ở các website về thời trang, gái xinh, bất động sản,... Nhưng mobile thì em cùi mía nên hơi lười nên nhờ các bác chủ động. Sau đây là phần giới thiệu cơ bản về HTML và CSS của hiệu ứng Liu riu Glassmorphism cùng "thánh ế Bích Phương - Thiên thần dẫn ngủ"

HTML hiệu ứng Glassmorphism 

Soạn một page/trang hoặc một bài/post trên blogger của bạn. Chuyển chế độ soạn HLTM và sử dụng mẫu html dưới đây:

 <div class="card-container">

<div class="card" >

   <div class="photo"><img alt="" src="Image01" /></div>   

        <div class="content">

          <h2>Title01</h2>

          <div class="social">

            <a href="#"><img alt="" src="Icon01" /></a>

            <a href="#"><img alt="" src="Icon02" /></a>

            <a href="#"><img alt="" src="icon03" /></a>

          </div>

        </div>

      </div>   

</div>

<script crossorigin="anonymous" integrity="sha512-K9tDZvc8nQXR1DMuT97sct9f40dilGp97vx7EXjswJA+/mKqJZ8vcZLifZDP+9t08osMLuiIjd4jZ0SM011Q+w==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>

Các thành phần tùy biến theo nội dung gồm: Đường dẫn của ảnh src="Image01" ; tiêu đề của ảnh <h2>Title01</h2> ; đường dẫn của biểu tượng src="Icon01" và đường link  các thẻ <a href="#">

Từ cơ sở đó, bạn có thể sử dụng các ảnh động GIF, ảnh PNG, video, nội dung chữ, ... để làm sinh động và cho ra nhiều phương án ra hồn hơn.

Style hiệu ứng Glassmorphism 

Tiếp đến phần style, sẽ để chung luôn trong phần biên tập HTML để có thể thoái mái hiệu chỉnh riêng biệt cho mỗi Post hoặc Page. Tùy bạn tinh chỉnh thêm nếu biết tí HTML và CSS.

<style>
.card-container{width:100%;height:500px;background:url("link hình nền");background-size:cover;display:flex;align-items:center;justify-content:center}
.card-container .card{width:200px;margin:0 32px;background:rgba(255,255,255,0.07);backdrop-filter:blur(20px);border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.07);font-family:"Roboto",sans-serif;color:#fff;padding-bottom:24px;height:255px;transition:all 400ms}
.card-container .card:hover{height:340px}
.card-container .card .photo img{width:100%}
.card-container .card .content{padding:0 24px}
.card-container .card .social img{height:26px}
.card-container .card .social{display:flex;justify-content:space-between;padding:0 12px}
</style>

Phần này thì dễ dàng hơn chỉ cần thay đổi link hình nền nếu cần thiết. Chỉnh thêm ít CSS cho phù hợp với hiển thị của bạn. Vậy là xong.

Đa phần là chiều rộng, cao .card-container .card và .card-container .card:hover ổn là được. Các bạn linh động đặt tùy theo hiện trạng như: độ mờ, độ nghiêng, kích thước ảnh, độ giãn cách,...

Tải về Html & CSS 

Hãy nâng cấp chất lượng bài viết của bạn không chỉ trên blogspot mà còn trên website cùng hiệu ứng Glassmorphism. Để những bài viết ngày càng chất lượng hơn, thay vì cóp nhặt một cách vô tội vạ. Chúc ngày mới vui vẻ, đừng quên đeo tai nghe, lên giường, bật Podcast và Liu riu cùng Bích Phương.