Tạo hiệu ứng hộp content đẹp với Css

đăng ngày: 28-08-2018 lúc 10:55

634 lượt xem 6 lượt tải

Mô tả chi tiết

Trong bài viết trước mình đã chia sẻ cách tạo hiệu ứng shadow box,trong bài viết này chúng ta sẽ kết hợp những hiệu ứng đó lại để một hộp content ấn tượng. với kỹ thuật này các bạn có thể tạo ra những content đẹp mắc và mới lạ. không để mất nhiều thời gian mình xin đi vào bài hướng dẫn luôn.hehehe

Chúng ta sẽ tiến hành từng bước một cho các bạn dễ tìm hiểu,đầu tiên là xây dựng khung Html.

<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css">
 <title>Conten box </title>
</head>
<body>

 Sample Title
 
 First Paragraph of Sample Description.
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.
 
 

</body>
</html>

Đoạn html của chúng ta chỉ đơn giản vậy thôi,nhiệm vụ của chúng ta bây giờ là định dạng lại đoạn Html này bằng Css.Ở bài này,mình sử dụng font bộ font ‘lucida grande’, helvetica, arial, sans-serif.Khối “lifted_content_box” mình sẽ để chiều rộng 500px và căn giữa trang.Vì sau này chúng ta sẽ sử dụng nhiều đến thuộc tính position nên mình sẽ để khối này với thuộc tính position : relative.

body {
 font-family: 'lucida grande', helvetica, arial, sans-serif;
 font-size: 76%;
}
 
/* basic styling first */
 
.lifted_content_box {
 display: block;
 width: 500px;
 margin: 0 auto;
 position: relative;
}

Xong phần định dangh content-box của chúng ta nhìn đã gọn gàng hơn.Chúng ta bắt tay vào việc tạo hình khối cho tiêu đề h1.Trong ảnh,các bạn có thể thấy tiêu đề được nằm trong một hình cắt vát khá đẹp mắt.Thủ thuật tạo ra hiệu ứng này là sử dụng kết hợp border-bottom và border-right.Chúng ta thêm đoạn Css sau để định dạng cho h1.

.lifted_content_box h1 {
 font-size: 14px;
 font-weight: bold;
 line-height: 2em;
 color: #fff;
 padding: 0 10px;
 margin: 0; /* for the triangular shape/cut */
 height: 0;
 border-bottom: 25px solid #505050; /* kinda acts as the height */
 border-right: 15px solid transparent; /* adjust to change the angle */
 display: inline-block
 
}

Kết hợp border-bottom với giá trị màu sắc với border-right với giá trị transparent để tạo một cạnh cắt vát.Các bạn có thể thay đổi độ nghiêng của cạnh cắt bằng cách thay đổi giá trị của border-right.Bạn có thể áp dụng thủ thuật này để tạo ra các hình tam giác với css.Ở cuối của đoạn code này mình sử dụng thêm thuộc tính display: inline-block để thu ngắn chiều dài của khối h1.

Bước tiếp theo chúng ta cần định dạng lại đôi chút cho đoạn văn bản phía dưới tiêu đề h1,các bạn thêm vào đoạn code sau :

.content {
 
padding: 10px;
 background: #fff;
 border-top: 5px solid #505050;
 -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
 -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
 box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
}
 
.content p {
 margin: 0 0 10px;
 color: #555;
 line-height: 1.5em;
}

Sau khi thực hiện xong bước này thì project của chúng ta đã hoàn thành tương đối,bước cuối cùng cũng là bước khó nhất đó là tạo hiệu ứng bóng cho khối.Thủ thuật được sử dụng để tạo hiệu ứng này là “ghép ảnh”.Chính xác là như vậy,chúng ta sẽ tạo hai khối con nằm ở hai góc của khối chính và tạo hiệu ứng bóng cho hai khối đó.Trong bài này,mình sẽ dùng thuộc tính Css :before và :after để tạo hai khối đó.Các bạn cùng xem đoạn Css dưới

.lifted_content_box::before
{
    content: '';
    position: absolute;
    width: 50%; /* maybe we could set a max-width for larger content boxes ? */
    height: 20px;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-5deg) skew(-10deg);
    -moz-transform: rotate(-5deg) skew(-10deg);
    -o-transform: rotate(-5deg) skew(-10deg);
    -ms-transform: rotate(-5deg) skew(-10deg);
    transform: rotate(-5deg) skew(-10deg);
    left: 10px;
    bottom: 13px;
    z-index: -1;
}

Tác dụng của đoạn Css trên là tạo một khối mới với chiều dài 50% của khối “lifted_content_box”,chiều rộng 20px.Sử dụng thuộc tính position để đưa khối này về góc trái bên dưới màn ảnh nhỏ của các bạn (left: 10px;bottom: 13px;).Sau khi đã ở vị trí thích hợp thực hiện “chiêu xoay compa” với Css transform để tạo hiệu ứng nghiêng.Cuối cùng là giảm z-index xuống -1 để núp người tránh việt vị.Và tất nhiên nếu các kỹ thuật trên các bạn đều thực hiện ngon lành thì đây là bàn thắng của chúng ta.

Thực hiện tương tự kỹ thuật trên nhưng với chiều ngược lại với .lifted_content_box::after chúng ta sẽ hoàn thành được trận đấu.

.lifted_content_box::after {
 content: '';
 position: absolute;
 width: 50%; /* maybe we could set a max-width for larger content boxes ? */
 height: 20px;
 left: auto;
 right: 10px;
 bottom: 13px;
 -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
 -webkit-transform: rotate(5deg) skew(10deg);
 -moz-transform: rotate(5deg) skew(10deg);
 -o-transform: rotate(5deg) skew(10deg);
 -ms-transform: rotate(5deg) skew(10deg);
 transform: rotate(5deg) skew(10deg);
 z-index: -1;
 
}

Hy vọng bài viết này sẽ giúp ích cho 1 số bạn. Mình xin Cảm ơn!