Tạo hình ảnh poster đẹp chỉ với CSS

views

A+A-

PrintEmail

Bài viết này, LaiXe.Xyz xin được phép chia sẻ cách tạo những tấm hình poster đẹp, có hiệu ứng nếp gấp bằng CSS. Hi vọng sẽ giúp các bạn sẽ làm nổi bật cho website của mình hơn nhé

Ví dụ về Poster đẹp bằng CSS

Dưới đây là những poster về những bộ phim đã được cài đặt style

Các bạn thấy thế nào ? Style CSS này đẹp đúng không ạ. Những tấm ảnh được tạo hiệu ứng nếp gấp trông rất thật. Hãy cùng xem code thực hiện như thế nào nhé !

Cách thực hiện

Bước 1: Bạn thêm HTML có cấu trúc như sau
Mẹo: Bấm nút để copy code

<div class="laixe">
   <div class="poster">
      <img  src="image_url" />
   </div>
   <div class="poster">
      <img  src="image_url" />
   </div>
   <div class="poster">
      <img  src="image_url" />
   </div>
</div>

Trong đó image_url là đường dẫn của hình ảnh Bước 2: Các bạn chèn thêm CSS sau nhé

.poster {
  width: 300px;
  padding: 7%;
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
  -webkit-filter: saturate(70%) contrast(85%);
          filter: saturate(70%) contrast(85%);
}
.poster img {
  width: 100%;
  display: block;
  z-index: 1;
}
.poster:before,
.poster:after {
  content: '';
  width: 100%;
  left: 0;
  position: absolute;
}
.poster:before {
  height: 4%;
  bottom: -4%;
  background-repeat: no-repeat;
  background-image: linear-gradient(177deg, rgba(0,0,0,0.22) 10%, transparent 50%), linear-gradient(-177deg, rgba(0,0,0,0.22) 10%, transparent 50%);
  background-size: 49% 100%;
  background-position: 2% 0, 98% 0;
}
.poster:after {
  height: 100%;
  top: 0;
  z-index: 2;
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(265deg, rgba(0,0,0,0.2), transparent 10%), linear-gradient(5deg, rgba(0,0,0,0.2), transparent 15%), linear-gradient(-5deg, rgba(0,0,0,0.1), transparent 10%), linear-gradient(5deg, rgba(0,0,0,0.1), transparent 10%), linear-gradient(-265deg, rgba(0,0,0,0.2), transparent 10%), linear-gradient(-5deg, rgba(0,0,0,0.2), transparent 15%), linear-gradient(266deg, rgba(0,0,0,0.2), transparent 10%);
  background-size: 50% 100%, 100% 33.3333%, 100% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%;
  background-position: right top, left center, left bottom, left top, left top, right top, left center, right center, right center, left bottom;
}
body{
  background-color: #c8cac9;
  padding: 60px 20px;
}
.laixe{
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
          align-items: center;
  justify-items: center;
  gap: 60px 30px;
  margin: 0 auto;
}
.laixe > img {
  width: 250px;
}

Chúc các bạn thực hiện thành công style css này cho hình ảnh trên website của mình nhé, đặc biệt là những web phim online

Xêm thêm: Học jQuery cơ bản

Chuyên Mục : CSS Hiệu ứng CSS Thiết kế website