Ghi chép của nlhnam
Mũi tên xổ xuống của Google - Văn hóa trong một hạt bụi
Ngồi mầy mò thanh task bar của Google+ tự dưng thấy cái hay hay.
Khi làm menu ngang, đối với những menu có nhiều hơn 1 cấp, người ta thường hay cho thêm icon tam giác ngược (▼) vào cạnh text của menu đó để báo hiệu cho người dùng là menu này có menu con sẽ xổ xuống khi ta di chuột vào.
Thường thì người làm web sẽ phải lấy ký tự đặc biệt của windows hoặc (thường xuyên hơn) thì dùng 1 cái ảnh background có hình tam giác ngược đối với menu item đó. Nhưng thằng Google lại chả phải dùng ảnh, cũng chả phải dùng ký tự đặc biệt (rủi ro), mà nó lại dùng thuộc tính CSS Border để làm.
Thường thì người ta chỉ dùng border 1 đến 2px khi làm web nên đa số quên mất khi để border cao hơn (3 chẳng hạn) nó sẽ có hiệu ứng window với các cạnh tạo bóng đổ.
Đơn giản & dễ hiểu thì cứ xem đoạn CSS sau:
CSS:
.gbma{
border-style: solid; /* Thằng G+ nó để là solid dashed dashed nhưng thực ra để solid ko là đủ.*/
border-color: transparent; /* Tất cả màu viền đều trong suốt. */
border-top-color: silver; /* Set màu cho thằng border top là ghi thôi. */
border-width: 3px 3px 0; /* Kích thước viền - thích hình tam giác to hơn thì để giá trị lớn hơn */
display: -moz-inline-box; display: inline-block; /* Thể hiện span như một Block trong dòng */
font-size: 0; /* Không nội dung - không kích thước */
width: 0; /* ------------------------------------------------ */
height: 0; /* ------------------------------------------------ */
line-height: 0; /* ------------------------------------------------ */
}
HTML:
Hello [span class="gbma"][/span]
Ko biết có mới ko :D ko khéo mình lại là thằng đào mộ ^^
Live demo: Vào google+ Nhìn lên thanh taskbar, menu item: "More ▼"
Vãi Gúc! Ngồi ngơ ngẩn mò mẫm mãi mới ra.
Tại sao ko dùng 1 cái ảnh kích thước 46 bytes mà lại phải dùng cả 1 đoạn CSS như thế? :)
Loan tin
câu này e ko hiểu lắm :-?
cái dấu tam giác đó làm được là do cái này http://linkhay2.vc
vậy chắc chắn là do phần nội dung bên trong border bằng 0 nên làm được như thế :P
giờ e mới biết cái này , hay thế :D