Avatar's nlhnam

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ế? :)
3017 ngày trước · Bình luận · Loan tin ·  
được loan tin bởi greenleaf8x , haithanhhcmpt2 người nữa
chelx
"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 đổ."
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
8 năm trước· Trả lời
chelx
ngon , e vừa thử với border-width là 1px , kết quả tương tự .
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ế
giờ e mới biết cái này , hay thế
8 năm trước· Trả lời
nlhnam
Khi border 1-2 px thì hầu như ko nhìn thấy cái hiệu ứng này. Nên mình nghĩ mọi người hầu hết sẽ quên mất nó
8 năm trước· Trả lời
chelx
dạ
8 năm trước· Trả lời
Website liên kết