Tiếp tục với khóa học lập trình Android, hôm nay mình sẽ hướng dẫn các bạn tạo Tooltips chỉ với CSS. Tooltip là một chú thích xuất hiện khi bạn click chuột vào một đối tượng trong website. Với tooltips bạn sẽ hiểu được chức năng và vai trò của đối tượng đó trong web. Vậy các bước chi tiết như thế nào?
Cách tạo Tooltips với CSS
Tạo Tooltips với CSS như thế nào?
Đây là cách tạo Tooltips đơn giản chỉ với transitions và pseudo-classes :before và
:after. của CSS3 mà không cần thêm bất kỳ một đoạn mã JavaScripts hay JQuery nào
:after. của CSS3 mà không cần thêm bất kỳ một đoạn mã JavaScripts hay JQuery nào
Ví dụ, bạn đang muốn tạo Tooltips cho các icon trong website như: Homepage,
Email, Facebook…
Bước 1 : Tạo bộ khung icon với HTML
Hãy bắt đầu với việc tạo khung HTML cho icon
<ul class="tt-wrapper">
<li><a class="tt-hompage" href="#"><span>Home Page</span></a></li>
<li><a class="tt-email" href="#"><span>Email</span></a></li>
<li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
</ul>
|
Nội dung được đặt trong <span>...</span>chính là tooltips sẽ hiển thị
Bước 2 : Định dạng Tootips trong CSS
Thứ nhất, hãy định dạng icon mong muốn của bạn
.tt-wrapper ul li{ list-style:none; float:right;}
.tt-wrapper {
height: 50px;
margin: 60px auto 40px;
padding: 0;
width: 400px;
}
.tt-wrapper li a{
display: block;
width: 60px;
height: 75px;
margin: 0 3px;
outline: none;
background: transparent url(images/icons.png) no-repeat top right;
position: relative;
text-indent:-7000px;
}
.tt-wrapper li .tt-hompage{
background-position: 0px 0px;
}
.tt-wrapper li .tt-email{
background-position: -60px 0px;
}
.tt-wrapper li .tt-facebook{
background-position: -204px 0px;
}
|
Kế tiếp chúng ta sẽ định dạng cho phần tooltips :
.tt-wrapper li a span{
width:120px;
height:120px;
line-height:22px;
padding:11px;
right:50%;
text-indent:0px;
margin-right:-64px;
font-family: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-style: bold italic;
font-size: 13px;
color: #675DAB;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #fff;
background: rgba(255,255,255,0.3);
border-radius: 4px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity:0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
transition:all 0.3s ease-in-out;
}
|
Để hiển thị tooltips đẹp mắt, bạn nên để phần định dạng này với opacity:0 . Bước sau, bạn có thể tận dụng :before và :afater để tạo phần mũi tên trong tooltips
.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
content: '';
position: absolute;
bottom: -15px;
right: 50%;
margin-right: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
.tt-wrapper li a span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #fff;
}
|
Bước cuối cùng, tooltips sẽ được hiển thị trên hover.
.tt-wrapper li a:hover span{
opacity: 0.9;
bottom: 70px;
}
|
Bước cuối cùng: Chạy và tận hưởng thành quả
Vậy là với vào bước nhập mã cơ bản, bạn đã tạo Tooltips thành công và cực kỳ đơn giản. Hãy thử ngay để cảm nhận rõ hơn thành quả nhé. Chúc các bạn thành công!
Không có nhận xét nào:
Đăng nhận xét