04/10/2018, 20:11

Tạo mẫu ribbon đỏ bằng CSS3

Trước đây khi thiết kế web, mình cũng sử dụng rất nhiều kiểu ribbon như trong bài viết này để đánh dấu những mục quan trọng trong trang web nhằm tạo sự thu hút người dùng với sản phẩm từ bên khách hàng. Hôm nay, mình cũng muốn chia sẻ cho các bạn mẫu này, vì biết đâu, sẽ có một ngày, các bạn cũng ...

Trước đây khi thiết kế web, mình cũng sử dụng rất nhiều kiểu ribbon như trong bài viết này để đánh dấu những mục quan trọng trong trang web nhằm tạo sự thu hút người dùng với sản phẩm từ bên khách hàng. Hôm nay, mình cũng muốn chia sẻ cho các bạn mẫu này, vì biết đâu, sẽ có một ngày, các bạn cũng cần sử dụng đến nó như mình đã từng.

Tạo mẫu ribbon đỏ bằng CSS3

Xem Demo | Download

HTML

Để tạo ribbon thì các bạn tạo theo cấu trúc html như sau :

<div id="bm-ribbon">
    <div class="inset"></div>
    <div class="container">
            <div class="base"></div>
            <div class="left_corner"></div>
            <div class="right_corner"></div>
    </div>
</div>

CSS

Các bạn nên đọc kỹ từng phần trong đoạn css bên dưới để hiểu rõ thuộc tích và cách sử dụng để tạo ra một hình hài như ribbon này.

#bm-ribbon {
  awidth: 180px;
  height: 280px;
  margin: 50px auto 0;
  position: relative;
  overflow: hidden;
}

#bm-ribbon .inset {
  awidth: 200px;
  height: 55px;
  position: absolute;
  top: -50px;
  left: -10px;
  z-index: 5;
  
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  
  background: rgba(0,0,0,0.3);
  
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}

#bm-ribbon .container {
  position: relative;
  awidth: 100px;
  height: 250px;
  overflow: hidden;
  margin: 0 auto;
  border-left: 1px solid #631a15;
  border-right: 1px solid #631a15;
}

#bm-ribbon .base {
  height: 200px;
  awidth: 100px;
  
  background: rgb(199,59,60);
  background: -moz-linear-gradient(top,  rgba(199,59,60,1) 0%, rgba(184,32,31,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,59,60,1)), color-stop(100%,rgba(184,32,31,1)));
  background: -webkit-linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
  background: -o-linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
  background: -ms-linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
  background: linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c73b3c', endColorstr='#b8201f',GradientType=0 );

  position: relative;
  z-index: 2;
}

#bm-ribbon .base:after {
  content: ';
  position: absolute;
  top: 0;
  awidth: 86px;
  left: 6px;
  height: 242px;
  border-left: 1px dashed #631a15;
  border-right: 1px dashed #631a15;
}

#bm-ribbon .base:before {
  content: ';
  position: absolute;
  top: 0;
  awidth: 86px;
  left: 7px;
  height: 242px;
  border-left: 1px dashed #da5050;
  border-right: 1px dashed #da5050;
}

#bm-ribbon .left_corner {
  awidth: 100px;
  height: 100px;
  background: #b8201f;
  position: absolute;
  bottom: 20px;
  left: -50px;
  z-index: 1;
  
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#bm-ribbon .right_corner {
  awidth: 100px;
  height: 100px;
  background: #b8201f;
  position: absolute;
  bottom: 20px;
  right: -50px;
  z-index: 1;
  
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

Chúc các bạn tìm được những ý tưởng mới cho những mẫu thiết kế khác.

Tags: css3 Ribbons

Chuyên Mục: Css

Bài viết được đăng bởi webmaster

Bài liên quan

Tạo mẫu ribbon đỏ bằng CSS3

Trước đây khi thiết kế web, mình cũng sử dụng rất nhiều kiểu ribbon như trong bài viết này để đánh dấu những mục quan trọng trong trang web nhằm tạo sự thu hút người dùng với sản phẩm từ bên khách hàng. Hôm nay, mình cũng muốn chia sẻ cho các bạn mẫu này, vì biết đâu, sẽ có một ngày, các bạn cũng ...

Hoàng Hải Đăng viết 20:11 ngày 04/10/2018

Đơn giản mẫu Social-Tooltip bằng CSS3

Hôm nay mình sẽ chia sẻ cho các bạn một mẫu chia sẻ mạng xã hội (social) được làm hoàn toàn từ CSS. Mẫu này rất đơn giản và dễ thực hiện, rất phù hợp cho các bạn sinh viên mới bước chân vào lĩnh vực thiết kế web và muốn nâng cao về CSS3. Xem Demo | Download HTML Các bạn tạo danh ...

Vũ Văn Thanh viết 20:07 ngày 04/10/2018

Tạo nút download động bằng CSS3 Animated

Tiếp tục mang đến cho các bạn một kiểu button động được làm từ CSS3, hôm nay mình sẽ chia sẻ cho các bạn thêm một nút bấm cho phép người dùng tải file trên trang web của bạn với hiệu ứng không hề thua kém với bài viết Animated Download Button Với CSS3 mà mình đã giới thiệu cho các bạn. Xem ...

Trần Trung Dũng viết 20:06 ngày 04/10/2018

Ấn tượng với mẫu Circle Loading bằng CSS3

Tiếp tục mang đến cho các bạn thêm một mẫu loading được làm hoàn toàn bằng CSS3, đây sẽ là một lựa chọn khá đẹp cho trang web hay blog của các bạn. Thông qua bài viết này, các bạn sẽ học thêm được rất nhiều về cách sử dụng các thuộc tính của CSS3 trong việc tạo một hiệu ứng động. Xem Demo ...

Trịnh Tiến Mạnh viết 20:05 ngày 04/10/2018

Tạo hiệu ứng Hover bằng CSS3 đơn giản với Hover.css

Hover.css là một tập hợp những hiệu ứng hover bằng CSS3 được viết sẵn, và bạn có thể dễ dàng áp dụng cho những phần tử trong website như hình ảnh, nút bấm, chữ, logo… Chỉ với việc chèn vào các class tương ứng. Xem Demo | Download Có tất cả 40 hiệu ứng để cho các bạn lựa chọn , ...

Bùi Văn Nam viết 20:03 ngày 04/10/2018
0