Để thiết kế liên kết hoặc tạo hoạt ảnh cho các nút menu, bạn có thể cần sử dụng gạch dưới. Từ bài viết này, bạn sẽ tìm hiểu về một số phương pháp tạo gạch dưới CSS. sử dụng các thuộc tính text-decoration, border-bottom, background-image, box-shadow hoặc thậm chí là SVG
Thuộc tính trang trí văn bản CSS
Thuộc tính text-decoration là cách đơn giản nhất để gạch chân văn bản. Tuy nhiên, vấn đề chính với trang trí văn bản là thiếu khả năng tùy chỉnh. Chúng ta sẽ xem thêm các ví dụ tùy chỉnh khác trong bài viết này.
Bây giờ, hãy xem cách chúng ta có thể sử dụng text-decoration cho một gạch dưới CSS đơn giản
Thuộc tính text-decoration là thuộc tính tốc ký cho 3 thuộc tính khác
- text-decoration-line [bắt buộc]. gạch chân, gạch chân, gạch dưới gạch chân, gạch đầu dòng
- văn bản-trang trí-phong cách. rắn, chấm, nét đứt, lượn sóng, gấp đôi
- văn bản-trang trí-màu sắc. ví dụ: #ccc, blue, currentColor hoặc inherit
Dưới đây là một số ví dụ
group of elasmobranch fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
a::after {
content: "";
display: block;
width: 32px;
padding-top: 3px;
border-bottom: 2px solid #f9dd94;
}
Bạn cũng có thể đặt độ dày của đường gạch dưới CSS [ví dụ: 2 px] bằng cách áp dụng border-bottom. 2px cố định #f9dd94;
Gạch dưới kiểu đánh dấu
Bạn có thể tạo một gạch dưới lệch ngắn với thuộc tính biến đổi
h1 {
padding: 30px 0 8px;
position: relative;
}
h1::before {
content: "";
position: absolute;
left: 7%;
bottom: 16px;
width: 150px;
height: 14px;
transform: skew[-12deg] translateX[-50%];
background: rgba[238,111,87,0.5];
z-index: -1;
}
Hơn nữa, bạn có thể tạo gạch dưới kiểu đánh dấu cho một đoạn văn bản dài. Đây là một ví dụ lấy cảm hứng từ Codepen. io/Tro
phong cách chung
body {
padding: 4rem;
}
.box {
padding: 2rem;
max-width: 14rem;
background-color: #f2f2f2;
border-radius: 4px;
max-width: 50rem;
}
Kiểu gạch chân cụ thể
:root {
/* The intrinsic width of the underline stroke [in pixels]. This is
* the same as the height of the cap images. Don't specify the
* units! This is because of some of the calculations we do later on. */
--underline-intrinsic-width: 8;
/* The actual width of the underline stroke we want to render [in pixels].
* You can modify this, and the sizing and positioning should be calculated
* accordingly. Again, Don't specify the units! */
--underline-width: 12;
/* The color used to draw the underline. It should match the color
* used in the cap images.. unfortunately we can't modify the SVG
* fill via CSS because it's a background image. */
--underline-color: #f1a1e3;
/* We need to know the width of the cap images so that we
* can position everything on the x axis accordingly. */
--underline-cap-width: 4px;
/* The border is positioned relative to the bottom of the line.
* We can move it upwards a little to create an overlap effect. */
--underline-offset-y: -2px;
/* The padding to add to the x axis. By default, the caps would be
* aligned with the beginning and end of the line. */
--underline-padding-x: 0.12em;
}
.text {
display: inline;
--underline-width-scale: calc[var[--underline-width] / var[--underline-intrinsic-width]];
padding: 0 calc[var[--underline-padding-x] + calc[var[--underline-cap-width] * var[--underline-width-scale]]];
box-decoration-break: clone;
background-repeat: no-repeat;
color: #32557f;
background-image:
linear-gradient[180deg, var[--underline-color], var[--underline-color]],
var[--cap-image-left],
var[--cap-image-right];
background-position-x:
calc[var[--underline-cap-width] * var[--underline-width-scale]],
0,
100%;
background-position-y: calc[100% - var[--underline-offset-y] * -1];
background-size:
calc[100% - calc[var[--underline-cap-width] * var[--underline-width-scale] * 2]] calc[var[--underline-width] * 1px],
auto calc[var[--underline-width] * 1px],
auto calc[var[--underline-width] * 1px];
font-size: 3rem;
font-weight: bold;
--underline-width: 20;
--underline-offset-y: -2px;
/* The cap images to use that form the left and right shape.*/
--cap-image-left: url[//files-6lc03kjqt.now.sh/left-2.svg];
--cap-image-right: url[//files-e7gkh52mq.now.sh/right-2.svg];
}
Cách gạch chân tiêu đề trong CSS
Để gạch dưới tiêu đề, bạn có thể sử dụng text-decoration. gạch dưới; . Tuy nhiên, trong trường hợp sau, bạn cần thêm màn hình. nội tuyến;
Gạch chân tùy chỉnh nhiều dòng
Bây giờ, giả sử, chúng tôi muốn tạo một gạch chân trải dài trên một số dòng văn bản. Không phải tất cả các phương pháp sẽ hoạt động cho việc này
Trong hai ví dụ dưới đây, chúng tôi sẽ sử dụng hình nền vì nó cho phép kéo dài nhiều dòng. Mặc dù bạn có thể sử dụng một hình ảnh thực tế, nhưng đây chỉ là một đường thẳng, vì vậy chúng tôi sử dụng một gradient tuyến tính sẽ tạo ra một hình ảnh
Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
a:nth-of-type[1] {
color: #32557f;
text-decoration: underline #32557f dashed;
}
a:nth-of-type[2] {
color: #32557f;
text-decoration: none;
border-bottom: 2px dashed #32557f;
padding-bottom: 3px;
}
0Bối cảnh Lặp lại. lặp lại-x;
Bạn có thể thay đổi giá trị thứ hai ở vị trí nền. 0 100%;
Bạn cũng có thể thay đổi giá trị thứ hai trong kích thước nền. 100% 3px;
Chúng tôi cũng có thể tạo một gạch dưới nhiều dòng hoạt hình chỉ được hiển thị khi di chuột
Đây là đánh dấu
a:nth-of-type[1] {
color: #32557f;
text-decoration: underline #32557f dashed;
}
a:nth-of-type[2] {
color: #32557f;
text-decoration: none;
border-bottom: 2px dashed #32557f;
padding-bottom: 3px;
}
11. Đầu tiên, xóa trang trí văn bản mặc định
2. Sử dụng hình nền vì nó cho phép kéo dài nhiều dòng. Vì chúng tôi muốn phần gạch chân có cùng màu với liên kết, chúng tôi sử dụng màu hiện tại cho cả phần đầu và phần cuối của dải màu. currentColor yêu cầu trình duyệt sử dụng màu của phần tử từ thuộc tính màu chính
3. Sử dụng vị trí nền để đặt vị trí của hình ảnh ở góc dưới bên trái. Trong ví dụ của chúng tôi, 0% liên quan đến vị trí nằm ngang và 100% cho vị trí dọc. Ngoài ra, hãy tắt lặp lại nền để ngăn nhiều phiên bản của hình ảnh được tạo. Bạn có thể sử dụng cách viết tắt cho hai thuộc tính này [nền. không lặp lại 0 100%;]
4. Sử dụng kích thước nền để chỉ định chiều rộng bằng 0 và chiều cao 2 px. Chiều rộng bằng không có nghĩa là gạch dưới sẽ chỉ xuất hiện khi di chuột. Nếu không, nó sẽ không được nhìn thấy
5. Đặt quá trình chuyển đổi thành kích thước nền, để thay đổi mất 0. 3 giây
6. Khi di chuột qua liên kết, chúng tôi thay đổi độ rộng của hình ảnh thành 100% tạo ra một gạch chân đầy đủ và quá trình chuyển đổi cung cấp hoạt ảnh
Đây là mã đầy đủ
a:nth-of-type[1] {
color: #32557f;
text-decoration: underline #32557f dashed;
}
a:nth-of-type[2] {
color: #32557f;
text-decoration: none;
border-bottom: 2px dashed #32557f;
padding-bottom: 3px;
}
2Sử dụng hình ảnh làm gạch chân CSS
Bạn cũng có thể sử dụng hình ảnh thực tế [e. g. SVG hoặc PNG] để tạo kiểu gạch chân CSS. Dưới đây là một vài ví dụ lấy cảm hứng từ John D. CodePen của Jameson
Gạch dưới CSS hình ngôi sao
a:nth-of-type[1] {
color: #32557f;
text-decoration: underline #32557f dashed;
}
a:nth-of-type[2] {
color: #32557f;
text-decoration: none;
border-bottom: 2px dashed #32557f;
padding-bottom: 3px;
}
3gạch dưới hình trái tim
a:nth-of-type[1] {
color: #32557f;
text-decoration: underline #32557f dashed;
}
a:nth-of-type[2] {
color: #32557f;
text-decoration: none;
border-bottom: 2px dashed #32557f;
padding-bottom: 3px;
}
4Đọc thêm về hình nền. Nền CSS
Gạch chân hoạt hình trên Hover
Bây giờ, hãy tạo một đường gạch dưới hoạt hình của các nút menu khi di chuột. Chúng tôi sẽ cần đánh dấu này
a:nth-of-type[1] {
color: #32557f;
text-decoration: underline #32557f dashed;
}
a:nth-of-type[2] {
color: #32557f;
text-decoration: none;
border-bottom: 2px dashed #32557f;
padding-bottom: 3px;
}
5Dưới đây là các phong cách phổ biến cho 4 ví dụ sẽ theo sau
a:nth-of-type[1] {
color: #32557f;
text-decoration: underline #32557f dashed;
}
a:nth-of-type[2] {
color: #32557f;
text-decoration: none;
border-bottom: 2px dashed #32557f;
padding-bottom: 3px;
}
6Chúng tôi sẽ xóa trang trí văn bản tiêu chuẩn và thêm đường viền bằng các phần tử giả CSS. Đường viền này sau đó sẽ được làm động với các thuộc tính chuyển tiếp CSS
Gạch chân hoạt hình khi di chuột #1
a:nth-of-type[1] {
color: #32557f;
text-decoration: underline #32557f dashed;
}
a:nth-of-type[2] {
color: #32557f;
text-decoration: none;
border-bottom: 2px dashed #32557f;
padding-bottom: 3px;
}
7Gạch chân hoạt hình khi di chuột #2
a:nth-of-type[1] {
color: #32557f;
text-decoration: underline #32557f dashed;
}
a:nth-of-type[2] {
color: #32557f;
text-decoration: none;
border-bottom: 2px dashed #32557f;
padding-bottom: 3px;
}
8Gạch chân hoạt hình khi di chuột #3
a:nth-of-type[1] {
color: #32557f;
text-decoration: underline #32557f dashed;
}
a:nth-of-type[2] {
color: #32557f;
text-decoration: none;
border-bottom: 2px dashed #32557f;
padding-bottom: 3px;
}
9Gạch chân hoạt hình khi di chuột #4
background: linear-gradient[to left, #f69ec4, #f9dd94 100%];
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
0Đọc thêm các mẹo về tạo kiểu menu. Cách tạo thanh điều hướng. 6 thủ thuật hữu ích
Gạch chân hoạt hình với thuộc tính box-shadow
Bạn cũng có thể tạo gạch chân bằng thuộc tính box-shadow để gắn bóng vào phần tử HTML. Bạn có thể làm cho bóng này lớn hơn khi di chuột bằng cách tăng độ lệch dọc. Xem ví dụ bên dưới
background: linear-gradient[to left, #f69ec4, #f9dd94 100%];
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
1
background: linear-gradient[to left, #f69ec4, #f9dd94 100%];
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
2Here we attach two shadows to our element:
- hình nhỏ thay đổi bóng từ bóng bên ngoài [phần đầu] thành bóng bên trong
- 0 -30px 0 rgba[50,85,127,0. 5]. 0 là phần bù ngang, -30px phần bù dọc, 0 bán kính mờ và rgba[50,85,127,0. 5] là nửa trong suốt [0. 5 độ mờ] màu xanh lam
- 0 2px 0 rgba[50,85,127,0. 5]. 0 là phần bù ngang, 2px phần bù dọc, 0 bán kính mờ
Đọc thêm về bóng CSS trong bài viết của chúng tôi CSS Shadows
Gạch chân hoạt hình “viết tay” trên Hover
Đối với phần cuối, hãy tạo những đường gạch dưới lạ mắt sẽ xuất hiện khi di chuột. Cái đầu tiên sẽ gợi nhớ đến một nét chữ viết tay và cái thứ hai là một nét vẽ nhẹ nhàng của bút đánh dấu.
Chúng tôi sẽ làm điều này với sự trợ giúp của Scalable Vector Graphics [SVG]. Chúng ta sẽ có một phần tử HTML cho SVG và một khối cho văn bản có liên kết [chọn một trong hai. mực-svgline hoặc. liên kết-svgmarker]
Cấu trúc chung
background: linear-gradient[to left, #f69ec4, #f9dd94 100%];
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
3Thay thế nhận xét “Khối SVG vô hình” bằng đoạn mã sau
background: linear-gradient[to left, #f69ec4, #f9dd94 100%];
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
4Dưới đây là các quy tắc CSS để ẩn phần tử này
background: linear-gradient[to left, #f69ec4, #f9dd94 100%];
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
5Và đây là các quy tắc CSS chung cho cả hai ví dụ sẽ tuân theo
background: linear-gradient[to left, #f69ec4, #f9dd94 100%];
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
6Ví dụ SVG đầu tiên
Thay thế nhận xét “Ví dụ SVG đầu tiên” bằng đoạn mã này [sử dụng bất kỳ văn bản nào bạn cần, chỉ giữ cấu trúc với các lớp]