Làm cách nào để tạo gạch chân tùy chỉnh trong css?
|
Trong hướng dẫn nhanh và thú vị này, tôi sẽ chỉ cho bạn cách tạo hiệu ứng gạch chân văn bản tùy chỉnh. Tôi luôn sử dụng hiệu ứng này khi muốn tạo điểm nhấn cho một cụm từ hoặc một số từ nhất định bên trong một dòng văn bản hoặc đoạn văn. Nó có thể cực kỳ tiện lợi cho việc chuyển đổi liên kết, UE (sự tương tác của người dùng) hoặc làm nổi bật một cụm từ quan trọng bằng một vài từ “bật ra” so với phần còn lại. Và phương pháp này thổi bay hiệu ứng văn bản “gạch chân văn bản” tiêu chuẩn với HTML Show Như tôi đã đề cập trong video, khách hàng yêu cầu tôi nhấn mạnh 3 từ trong ví dụ hiển thị trên Magnfi. com và tôi đã sử dụng hiệu ứng trên Basecamp như một nguồn cảm hứng để giúp đưa những từ đó lên một tầm cao mới. Chỉ với một chút CSS và một số chỉnh sửa của hình ảnh gạch chân, bạn có thể tạo ra những nét gạch chân phác họa siêu thú vị cho tất cả các trang web của bạn trong tương lai Cách tạo hiệu ứng gạch chân văn bản tùy chỉnh
Một vài lưu ý
Tải xuống tệp đường phác thảo PNG Thích hướng dẫn này?Sử dụng mã phiếu giảm giá “CSS30” để được GIẢM GIÁ $30 khi thanh toán
Đây là CSS tôi đã sử dụng. (lưu ý rằng kích thước nền được điều chỉnh một chút so với những gì được hiển thị trong video) .sketch-underline {
background: url(ENTER IMAGE URL PATH HERE) bottom left no-repeat;
background-size: 100% 10px;
padding-bottom: 8px;
}
Văn bản hiển thị trong video với hiệu ứng gạch chân. (Sau khi lớp học bắt đầu, hãy sử dụng phần này làm văn bản bắt đầu của bạn và điều chỉnh màu nếu cần. ) Gạch chân có thể được sử dụng để làm nổi bật văn bản quan trọng. Phần tử U và thuộc tính CSS text-decoration là hai kỹ thuật được sử dụng nhiều nhất để gạch chân văn bản trên trang web Cả hai đều dễ sử dụng, nhưng phần tử U cung cấp giá trị ngữ nghĩa cho ý nghĩa. Một cái khác có thể được hiển thị theo yêu cầu, giúp dễ dàng thay đổi trạng thái gạch chân bằng cách thêm các lớp CSS vào văn bản Việc gạch chân có hữu ích để diễn đạt ý nghĩa hoặc khả năng tiếp cận hay không là một vấn đề tranh luận. Gạch dưới là một cách tiếp cận tự nhiên để mang lại giá trị trải nghiệm người dùng cao hơn khi chỉ màu sắc thôi là không đủ để thể hiện ý nghĩa Thuộc tính text-decoration cung cấp một cách khác để gạch chân văn bản. Văn bản siêu liên kết cũng có thể được sử dụng để thay thế gạch dưới bằng gạch dưới Gạch đầu dòng ngược với gạch chân. Một dòng được thêm vào đầu văn bản Chúng tôi có thể sử dụng tất cả các giá trị gạch chân và gạch chân cho cùng một định nghĩa lớp. Thuộc tính text-decoration chi phối cách trình bày văn bản theo nhiều cách. Khi text-decoration được đặt thành gạch chân, văn bản bên trong thành phần được gạch dưới Các thuộc tính CSS trang trí văn bản rất tuyệt vời cho văn bản, nhưng chúng có thể bị hạn chế về mặt thiết kế và không thể áp dụng cho các loại nội dung không phải văn bản. Gạch chân cũng có thể được tạo bằng thuộc tính đường viền CSS Thuộc tính text-decoration là cách cơ bản nhất để gạch dưới văn bản. Nhược điểm đáng kể nhất của trang trí văn bản là nó không thể cấu hình được Thuộc tính text-decoration sử dụng gạch chân, gạch trên, nối dòng hoặc kết hợp các dòng để tô sáng văn bản đã chọn Nội dung được gạch chân bằng thuộc tính text-decoration-line. Gạch trên, gạch dưới và xuyên dòng là ba tùy chọn cho thuộc tính này. Trong CSS, thuộc tính gạch chân được sử dụng để làm nổi bật văn bản. Gạch dưới được vẽ bên dưới văn bản nội tuyến với giá trị này Trên các phần tử văn bản con cháu, trang trí văn bản được vẽ. Điều đó ngụ ý rằng khi một phần tử xác định trang trí văn bản, phần tử con không thể xóa phần trang trí đó Không có đường nào được vẽ và mọi trang trí hiện có sẽ bị xóa gạch dưới. một dòng 1px được vẽ trên đường cơ sở của văn bản Đường cắt ngang. tại điểm "giữa" của văn bản, chèn một dòng 1px trên đó gạch đầu dòng. thêm một dòng 1px ngay phía trên điểm "trên cùng" của văn bản trên văn bản Thừa kế. kế thừa trang trí của cha mẹ Trang trí văn bản được chỉ định thông qua thuộc tính text-decoration, đây là một đặc điểm tốc ký cho
gạch chân, gạch dưới, gạch chân-gạch trên, gạch đầu dòng xuất hiện dưới dòng trang trí văn bản Nét liền, nét chấm, nét đứt, lượn sóng, kép thuộc kiểu trang trí văn bản Màu ở giá trị thập phân, giá trị thập lục phân hoặc kế thừa nằm dưới màu văn bản-trang trí Thuộc tính border-bottom là một thay thế cho trang trí văn bản. Chúng ta cũng có thể sử dụng border-bottom để cung cấp phần đệm cú pháp. -Bây giờ chúng ta hãy tìm một ví dụ và hiểu cách sử dụng thuộc tính text-decoration trang trí văn bản. gạch chân gạch dướiThí dụ. - đầu ra Ví dụ trên được sử dụng để minh họa việc sử dụng thuộc tính text-decoration bằng gạch dưới, gạch dưới gạch dưới |
