Trong bài viết lần trước, Sharescript.net đã giới thiệu đến các bạn cách tạo hiệu ứng 3D Layered cho image. Bài viết này sẽ tiếp tục hướng dẫn các bạn cách tạo một UI component bằng HTML + CSS thuần: User Card.
Hướng dẫn chi tiết:
- Các bạn tạo lần lượt các file index.html, main.css, và lấy một file ảnh tỉ lệ 1:1, đặt tên là img.jpg. File ảnh bất kỳ mà bạn muốn đặt làm avatar hoặc bạn có thể tải ảnh ở cuối bài viết. Cho các file vào cùng một thư mục.
- Các bạn thêm thẻ head và body vào file index.html (Đối với các bạn sử dụng VS Code có thể gõ html, nhấn tab để tự động tạo head và body thông qua snippet html (hình tờ giấy bị mất phần dưới))
Đoạn code cần thêm vào:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>User Card UI Design</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body> </body> </html>Lưu ý là các bạn cần để tên file css là main.css nhé.
- Các bạn lần lượt thêm các element vào phần body:
<body> <div class="card"> <div class="box"> <!-- Ảnh đại diện của user --> <div class="img"> <img src="img.jpg" alt=""> </div> <!-- Username và title của user --> <h2>John Doe<br><span>Senior UX/UI Designer</span></h2> <!-- Thông tin giới thiệu về user --> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur ducimus consequatur consectetur, corrupti aliquam atque eligendi delectus amet voluptate?</p> <!-- Các social button, sử dụng FontAwesome icons --> <ul> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> </ul> </div> </div> </body>Trong ul list trên có sử dụng FontAwesome icons nên các bạn nhúng FontAwesome vào phần head:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
- Sang phần main.css các bạn thêm vào như sau:
body{ margin: 0; padding: 0; font-family: sans-serif; background: #fbfbfb; } .card{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; min-height: 400px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); border-radius: 10px; transition: 0.5s; } .card:hover{ box-shadow: 0 30px 70px rgba(0, 0, 0, 0.2); } .card .box{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); text-align: center; padding: 20px; width: 100%; box-sizing: border-box; } .card .box .img{ width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; overflow: hidden; } .card .box .img img{ width: 100%; } .card .box h2{ font-size: 20px; color: #262626; } .card .box h2 span{ font-size: 14px; background: #e91e63; color: #fff; display: inline-block; padding: 4px 10px; border-radius: 15px; } .card .box p{ color: #262626; } .card .box ul{ margin: 0; padding: 0; display: inline-block; } .card .box ul li{ list-style: none; float: left; } .card .box ul li a{ display: block; color: #aaa; margin: 0 10px; font-size: 20px; transition: 0.5s; text-align: center; } .card .box ul li:hover a{ color: #e91e63; transform: rotateY(360deg); } - Các bạn lưu lại các file đã chỉnh sửa ở trên và tận hưởng thành quả.
Dưới đây là video hướng dẫn cụ thể:
Các bạn có thể xem demo và download tại đây.