Chú giải công cụ CSS xuất hiện khi người dùng di chuyển chuột qua một phần tử hoặc khi người dùng chạm vào phần tử đó bằng thiết bị di động
Mã nguồn demo. TRÊN PHẢI DƯỚI TRÁI
Trình tạo mã này không bao gồm tất cả các cấu hình kiểu và Html. Bạn có thể dễ dàng tinh chỉnh thêm dựa trên mã được tạo hoặc tham khảo Mã nguồn demo được liệt kê ở trên để biết thêm các biến thể
Đặt trống nếu không yêu cầu hiệu ứng đường viền bóng hộp
Nếu được chọn, nó sẽ sử dụng thuộc tính độ mờ, khả năng hiển thị và chuyển đổi CSS để chuyển đổi chú giải công cụ
Nếu không, nó sẽ sử dụng thuộc tính hiển thị ["none" hoặc "block"] để bật và tắt chú giải công cụ
Bạn cũng có thể cân nhắc sử dụng Chú giải công cụ JavaScript của chúng tôi
Css Tooltip đơn giản và được coi là thỏa đáng trong hầu hết các trường hợp. Tuy nhiên, có những lúc những hạn chế của nó đang trở nên rõ ràng.
Hạn chế của nó có thể được giải quyết bằng cách sử dụng Chú giải công cụ JavaScript của chúng tôi
Các tính năng Chú giải công cụ CSS Chú giải công cụ Javascript Sự kiện mở Di chuột qua [hoặc nhấn bằng thiết bị di động]Có thể được định cấu hình cho bất kỳ sự kiện máy khách nào như title, onmouseover, onfocus, v.v.
Nhấp vào tôi Mã
Khả năng truy cập Nội dung [chẳng hạn như liên kết] trong chú giải công cụ không thể truy cập đượcHoàn toàn có thể truy cập. Chú giải công cụ sẽ ở lại khi di chuyển chuột từ phần tử đích sang chú giải công cụ. ví dụ
- Tiêu chuẩn
- dính
- Rất Dính
Click me
Tôi đã được định cấu hình là {sticky. true}
Bạn có thể đóng tôi bằng cách nhấp vào các khu vực trang khác.
Tôi đã được định cấu hình là {sticky. 1}
Tôi chỉ có thể đóng bằng cách nhấp vào nút đóng
Truy cập Tùy chọn chú giải công cụ JavaScript để biết thêm chi tiết
Nội dung chú giải công cụ được khai báo trong tập lệnh, chẳng hạn như.
.container {
width: 80%;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: auto;
}
h2 {
text-align: center;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
p {
width: 50%;
margin: auto;
text-align: center;
}
.right {
transform: rotate[-45deg];
-webkit-transform: rotate[-45deg];
}
.left {
transform: rotate[135deg];
-webkit-transform: rotate[135deg];
}
.up {
transform: rotate[-135deg];
-webkit-transform: rotate[-135deg];
}
.down {
transform: rotate[45deg];
-webkit-transform: rotate[45deg];
}
0Một phần tử và phần tử bên trongHTML của nó trong trang, chẳng hạn như
......
sẽ được sử dụng làm nội dung chú giải công cụ..container {
width: 80%;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: auto;
}
h2 {
text-align: center;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
p {
width: 50%;
margin: auto;
text-align: center;
}
.right {
transform: rotate[-45deg];
-webkit-transform: rotate[-45deg];
}
.left {
transform: rotate[135deg];
-webkit-transform: rotate[135deg];
}
.up {
transform: rotate[-135deg];
-webkit-transform: rotate[-135deg];
}
.down {
transform: rotate[45deg];
-webkit-transform: rotate[45deg];
}
1Thông thường những yếu tố đó được đặt bên trong một màn hình. không có trình bao bọc
.container {
width: 80%;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: auto;
}
h2 {
text-align: center;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
p {
width: 50%;
margin: auto;
text-align: center;
}
.right {
transform: rotate[-45deg];
-webkit-transform: rotate[-45deg];
}
.left {
transform: rotate[135deg];
-webkit-transform: rotate[135deg];
}
.up {
transform: rotate[-135deg];
-webkit-transform: rotate[-135deg];
}
.down {
transform: rotate[45deg];
-webkit-transform: rotate[45deg];
}
2Vì vậy, những nội dung chú giải công cụ đó không hiển thị trừ khi được yêu cầuChú giải công cụ có thể được điền bằng nội dung được tìm nạp từ các tệp bên ngoài, chẳng hạn như tài liệu văn bản, tài liệu XML hoặc các trang web khác
Đầu tiên chúng ta sẽ xây dựng các thành phần, các bạn tạo chỉ mục tệp. html và dán đoạn mã sau vào phần thân thẻ
Mã số
Freetuts.net hướng dẫn tạo các dấu mũi tên
Right arrow:
Left arrow:
Up arrow:
Down arrow:
Các thành phần này rất đơn giản, chúng ta sẽ tạo các thẻ i để hiển thị các dấu mũi tên
2. Add CSS for interface
Chúng ta đã có các thành phần hiển thị rồi giờ sử dụng CSS để định dạng cho chúng, các bạn đặt đoạn CSS dưới đây vào bên trong kiểu thẻ
.container {
width: 80%;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: auto;
}
h2 {
text-align: center;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
p {
width: 50%;
margin: auto;
text-align: center;
}
.right {
transform: rotate[-45deg];
-webkit-transform: rotate[-45deg];
}
.left {
transform: rotate[135deg];
-webkit-transform: rotate[135deg];
}
.up {
transform: rotate[-135deg];
-webkit-transform: rotate[-135deg];
}
.down {
transform: rotate[45deg];
-webkit-transform: rotate[45deg];
}
Các đoạn mã trên đều rất cơ bản, các bạn có thể tùy chỉnh theo ý thích sao cho phù hợp nhất với website của mình
Thuật toán chúng ta sử dụng ở đây như sau
- Đầu tiên là tạo viền cho thẻ i, tuy nhiên chỉ tạo 2 cạnh của viền, sau khi tạo ta sẽ nhận được một biểu tượng là 2 cạnh của hình vuông
- Tiếp đến, ta sẽ sử dụng thuộc tính transform để xoay biểu tượng trên các dấu phù hợp
Time of you run file index. html để xem thành quả mình vừa tạo ra nhé
Trên đây là bài viết của eLib. VN về CSS Arrow. Như vậy, qua bài viết này, eLib đã cùng các bạn tạo các mũi tên bằng CSS. Hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn trong quá trình xây dựng website
Tham khảo thêm
- Hoạt ảnh CSS tài liệu Hoạt ảnh CSS
- Dải màu CSS tài liệu Dải màu CSS
- Chuyển tiếp tài liệu trong CSS Chuyển tiếp trong CSS
- doc Chú giải công cụ trong CSS Chú giải công cụ trong CSS
- doc CSS Flexbox CSS Flexbox
- doc Loại phương tiện trong CSS Loại phương tiện trong CSS
- Chuyển đổi tài liệu 2D trong CSS Chuyển đổi 2D trong CSS
- Chuyển đổi tài liệu 3D trong CSS Chuyển đổi 3D trong CSS
- Giao diện người dùng doc trong CSS Giao diện người dùng trong CSS
- doc Qui tắc @page trong CSS Qui tắc @page trong CSS
37
Mới. Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm. Tìm hiểu thêm.
Tìm hiểu thêm.
Làm thế nào để tạo một hộp có mũi tên trong CSS?
Làm tròn góc là dễ dàng. Nhưng bất kỳ ý tưởng nào để làm cho mũi tên ở bên trái mà không sử dụng hình ảnh
Can't doing for could with
Only a element
.container {
width: 80%;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: auto;
}
h2 {
text-align: center;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
p {
width: 50%;
margin: auto;
text-align: center;
}
.right {
transform: rotate[-45deg];
-webkit-transform: rotate[-45deg];
}
.left {
transform: rotate[135deg];
-webkit-transform: rotate[135deg];
}
.up {
transform: rotate[-135deg];
-webkit-transform: rotate[-135deg];
}
.down {
transform: rotate[45deg];
-webkit-transform: rotate[45deg];
}
9body {
background: #ff004e;
padding: 40px
}
p {
background: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 250px;
height: 150px
}
____4Stewartside
19. 7K12 Huy hiệu vàng62 Huy hiệu bạc76 Huy hiệu đồng12 Huy hiệu vàng62 Huy hiệu bạc76 Huy hiệu đồng12 Huy hiệu vàng62 Huy hiệu bạc76
Hỏi ngày 7 tháng 8 năm 2011 lúc 10. 30 Tháng tám 7, 2011 lúc 10. 30 7 tháng 8, 2011 lúc 10. 30
Jitendra Vyasjitendra VyasJitendra Vyas Jitendra Vyas
Huy hiệu vàng 144K225563 Huy hiệu bạc841 Huy hiệu đồng225 huy hiệu vàng563 huy hiệu bạc841 huy hiệu đồng225 huy hiệu vàng563 huy hiệu bạc841 bronze badges
3
Như thế này
.arrow {
border: solid 10px transparent;
border-right-color: #FFF;
}
Bản demo. http. //jsfiddle. mạng/sparkup/edjdxjf2/ http. //jsfiddle. mạng/sparkup/edjdxjf2/ http. //jsfiddle. mạng/sparkup/edjdxjf2/
CẬP NHẬT
Nó cũng có thể đạt được mà không cần các phần tử trống với thuộc tính CSS
body {
background: #ff004e;
padding: 40px
}
p {
background: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 250px;
height: 150px
}
0element:before {
content: "";
position: absolute;
top: 50%; // half way down [vertical center].
margin-top: -15px; // adjust position, arrow has a height of 30px.
left:-30px;
border: solid 15px transparent;
border-right-color: #FFF;
z-index: 1;
}
Bản demo. http. //jsfiddle. net/sparkup/y89f1te0/. http. //jsfiddle. net/sparkup/y89f1te0/. http. //jsfiddle. net/sparkup/y89f1te0/
hy vọng nó sẽ giúp
Đã trả ngày 7 tháng 8 năm 2011 lúc 10. 37Ngày 7 tháng 8 năm 2011 lúc 10. 37 7 tháng 8, 2011 lúc 10. 37
5
Standard tool
Nếu bạn muốn một mũi tên đơn giản, thì bạn có thể thêm phần tử giả vào
body {
background: #ff004e;
padding: 40px
}
p {
background: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 250px;
height: 150px
}
1câu đố 1
Sharp Tool Tool
Nếu bạn muốn một cạnh phẳng cho mũi tên, hãy thử điều này. cạnh phẳng cho mũi tên, hãy thử điều này. cạnh phẳng cho mũi tên, hãy thử điều này