Trong bài viết Source User Card UI viết bằng CSS đã hướng dẫn các bạn tạo một User Card hiện đại và dễ thực hiện. Đối với bài này, Sharescript.net sẽ giới hiệu đến các bạn 3D Flipping Card Hover Effect – tạo User Card với hiệu ứng lật 3D hoàn toàn sử dụng CSS. Dưới đây là hình ảnh minh họa.
Một số thành phần cần thiết
Font Awesome: các bạn sẽ thêm phần sau vào file html:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Google Font – Josefin Sans: các bạn thêm phần sau vào file css:
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,700');
Hướng dẫn thực hiện
- Các bạn tạo file index.html, main.css, và một file ảnh có tỉ lệ 3:4 đặt tên là image.jpg dùng làm ảnh đại diện của user. Để các file này vào cùng một thư mục.
- Trong file index.html, các bạn thêm vào như sau:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>3D Flipping Card Hover Effect</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="main.js"></script> </head> <body> </body> </html>Trong file main.css các bạn thêm như sau:
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,700'); body{ margin: 0; padding: 0; font-family: 'Josefin Sans', sans-serif; } - Thêm các thẻ vào file index.html để tạo mặt trước và mặt sau thẻ:
<body> <div class="card"> <div class="front"><img src="image.jpg" alt=""></div> <div class="back"> <div class="details"> <h2>John Doe<br><span>Senior Designer</span></h2> <div class="social-icons"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </div> </div> </div> </div> </body>Ở đây có sử dụng FontAwesome.
- Trong main.css các bạn thêm vào:
.card{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 400px; transform-style: preserve-3d; perspective: 600px; transition: 0.5s; } .card .front{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; backface-visibility: hidden; transform: rotateX(0deg); transition: 0.5s; } .card:hover .front{ transform: rotateX(-180deg); } .card .back{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; backface-visibility: hidden; transform: rotateX(180deg); transition: 0.5s; } .card .back:before{ content: ''; position: absolute; top: 0; left: -50%; width: 100%; height: 100%; background:rgba(255, 255, 255, 0.1); } .card:hover .back{ transform: rotateX(0deg); } .card .back .details{ position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; text-align: center; padding: 20px; box-sizing: border-box; } .card .back .details h2{ margin: 0; padding: 0; font-size: 24px; color: #fff; } .card .back .details h2 span{ color: #a7a7a7; font-size: 16px; } .social-icons{ padding: 10px 0; } .social-icons a{ display: inline-block; width: 36px; height: 36px; text-align: center; background: #262626; color: #fff; text-decoration: none; border-radius: 50%; transition: 0.5s; } .social-icons a .fa{ line-height: 36px; } .social-icons a:hover{ background: #e91e63; } - Như vậy là bạn đã hoàn thành việc tạo User Card.
Video hướng dẫn chi tiết:
Các bạn có thể tạo user card với giao diện như thế này:
Các bạn có thể xem demo và download tại đây.