Như các bạn đã thấy trên các trang web, mỗi bài viết đều có một hình ảnh đại diện (thumbnail). Hình đại diện nói lên một phần nội dung của bài viết, và đặc biệt hình đại diện cũng làm cho bài viết thêm đẹp và bắt mắt người đọc.
Trong bài viết này tôi sẽ hướng dẫn các bạn tạo hiệu ứng cho hình đại diện, hiệu ứng này cũng thông dụng và rất đẹp.
Tạo dự án mới HTML
Đầu tiên các bạn tạo và đặt tên cho dự án (project) mới của mình. Trong dự án, tạo thêm một thư mục tên images. Và lên chị Google xin một bức ảnh đẹp, tải về lưu vào thư mục images.
Quá trình xây dựng và hoàn thành dự án HTML
Thiết kế giao diện HTML
Chúng ta mở trình soạn thảo lên, tạo mới một file index.html cho dự án mới tạo vào và bắt đầu màu mè nhé.
Chép đoạn code mẫu sau đây vào file index.html, và lưu lại dữ liệu mới chép vào nhé. Chạy thử dự án với đường dẫn trên localhost như sau: http://localhost/tên dự án đã tạo/ xem có được không cái đã.
Lưu ý: tên dự án tạo không được để dấu, không được có khoảng trắng để tránh xảy ra lỗi vặt.
<!-- index.html --> <!DOCTYPE html> <html> <head> <title>Create Post With Beautiful Effects For Thumbnail</title> <meta charset="utf-8"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-8"> <h1>Using Plugin DataTable jQuery in PHP</h1><br /> </div> <div class="col-sm-2"></div> </div> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-8"> <div class="acticles"> <!-- div image --> <div class="acticle-thumb"> <div class="cls-image"> <img src="images/car-1.jpg"> </div> </div> <!-- div date --> <div class="acticle-date"> <span class="day">28</span> <span class="month">Tháng 08</span> </div> <!-- div info --> <div class="acticle-info"> <h3><a href="#link">Cách tạo DataTable trong PHP - sử dụng thư viện jQuery và Boostrap 4</a></h3> <p>DataTable là một plugin jQuery và nó là công cụ rất hữu hiệu để hiển thị dữ liệu ra bảng trong HMTL. Lợi ích lớn nhất của việc sử dụng plugin này vào dự án là nó giúp chúng ta giảm rất nhiều phía server.</p> </div> </div> </div> <div class="col-sm-2"></div> </div> </div> </body> </html>
Lưu lại và chạy thử cái xem thế nào nhé các bạn. Wow, thật là ngổn ngang và ...cứ từ từ không vội được đâu ạ.
Thêm thư viện Bootstrap, jQuery
Chép đoạn code dưới đây chứa thư viện CSS và jQuery vào trong cặp thẻ <head></head>, lưu lại và chạy thử lại lần nữa xem sao nhé. Riêng tôi thấy đã có chút ít thay đổi rồi đó.
<head>
<title>Create Post With Beautiful Effects For Thumbnail</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
Thêm CSS tự đinh nghĩa vào dự án
Sau đây là công đoạn khó khăn và khó hiểu nhất nếu như các bạn tự viết, thực ra thì mình hiểu sơ sơ chứ không hiểu hết đoạn code do mình viết ra. Thôi chúng ta bỏ qua nhé, chép cả đoạn CSS phía dưới này vào là ngon lành.
<style>
.container-fluid .acticles{
display: inline-block;
box-shadow: 0px 0px 5px #999;
width: 480px;
}
.acticles .acticle-thumb{
width: 100%;
height: 200px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.acticles .acticle-thumb img{
width: 100%;
height: 200px;
transition: all 0.3s;
}
/*zoom image*/
.cls-image:hover img{
transform: scale(1.1, 1.1);
}
.acticles .acticle-info{
padding: 20px;
position: relative;
}
.acticles .acticle-info h3{
max-height: 55px;
margin-bottom: 20px;
}
.acticles .acticle-info h3 a{
font-size: 18px;
text-decoration: none;
}
.acticles .acticle-info p{
font-size: 14px;
}
.acticle-date{
top: 10px;
left: 0px;
float: left;
display: flex;
flex-direction: column;
position: absolute;
background: #fff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
width: 60px;
margin: 3px 10px 8px 0;
text-align: center;
transition: all .3s ease;
opacity: 0;
}
.acticle-date .day{
background: #f4f4f4;
display: block;
font-size: 16px;
font-weight: bold;
padding: 5px 0;
color: #f6a22b;
}
.acticle-date .month{
background: #f6a22b;
display: block;
font-size: 12px;
font-weight: 600;
padding: 5px 0 5px;
color: #fff;
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.07) inset;
}
.acticles:hover .acticle-date{
top: 10px;
left: 30px;
opacity: 1000;
/*transform: translateX(10px);*/
}
</style>
Nếu các bạn muốn xem mỗi đoạn code CSS trên có tác động thế nào đến post, thì các nên nên xem trong video ở đầu bài nhé. Đừng quên cho 1 Subscribe để ủng hộ và theo dõi các bài đăng kế tiếp nhé.
Nếu bạn muốn lấy nguồn hoàn chỉnh, xin vui lòng ghi địa chỉ email của bạn vào phần nhận xét. Chúng tôi sẽ gửi cho bạn bộ nguồn hoàn chỉnh theo địa chỉ email của bạn.