Tạo bóng cho văn bản bằng CSS. Phác thảo văn bản bằng CSS. CSS: đường viền. Giới hạn phần tử
Xin chào tất cả độc giả của ấn phẩm hiện tại! Hôm nay chúng tôi sẽ hướng dẫn bạn cách tạo dàn ý văn bản bằng các công cụ CSS. Tôi sẽ cho bạn biết những công cụ nào hiện có để triển khai phác thảo nội dung văn bản, cách thức hoạt động của tất cả các công cụ này trong các trình duyệt khác nhau và tất nhiên, tôi sẽ đưa ra các ví dụ cụ thể. Bây giờ chúng ta hãy bắt tay vào công việc!
Hãy chuyển sang các công cụ quen thuộc
Trong một thời gian dài và cho đến ngày nay, các nhà phát triển vẫn sử dụng thuộc tính này chữ-bóng tốiđể tạo đường viền xung quanh các nhân vật. Nhưng trên thực tế, phần tử được đặt tên ban đầu được thiết kế để tạo bóng xung quanh văn bản.
Nhờ cơ chế quản lý lớp linh hoạt, sử dụng chữ-bóng tối bạn có thể tạo các hiệu ứng hoàn toàn khác nhau: văn bản được ép hoặc đồ sộ, trong suốt hoặc chuyển màu, v.v. Tất nhiên, thuộc tính này cũng có thể được sử dụng để thực hiện các đường viền.
Ưu điểm của công cụ hiện tại là:
- nó quen thuộc với các nhà phát triển để sử dụng;
- hiển thị chính xác không có ngoại lệ;
- dễ sử dụng;
- cho phép bạn tạo nhiều hiệu ứng khác nhau cho nội dung.
Bây giờ chúng ta hãy xem việc thực hiện phần mềm. Trong phần này, tôi đã tạo một tiêu đề cấp đầu tiên đơn giản và trong các kiểu từ tiêu đề chính, tôi đã chỉ định các tham số màu và bóng của văn bản.
Tiêu đề siêu lừa đảo Mega
Tuy nhiên, trong trường hợp này, đường viền gần như vô hình. Do đó, hãy sẵn sàng cho thực tế là trong phần này, bạn sẽ phải tạo một số lớp:
bóng văn bản: 0 0 2px #010010, 0 0 3px #010010, 1px 1px 2px #010010, 2px 2px 2px #010010, 3px 3px 1px #010010;
Bất chấp sự tồn tại của cơ chế này, một cơ chế khác đã được tạo ra, tập trung đặc biệt vào việc thực hiện đường viền xung quanh các biểu tượng.
Một công cụ mới để giải quyết vấn đề
Trong số các thuộc tính của css3 style sheet, một thuộc tính mới đã xuất hiện, tên của nó là -webkit-text-nét. Thuộc tính được đặt tên chỉ hoạt động trong các trình duyệt được tạo trên công cụ Bộ web. Thật không may, điều này có nghĩa là nó sẽ không được hiển thị trong Firefox và Internet Explorer.
Tôi muốn cảnh báo ngay với bạn rằng công cụ hiện tại đang ở giai đoạn được gọi là thử nghiệm. Bạn thậm chí sẽ không tìm thấy nó trong thông số kỹ thuật của W3C. Mặc dù trước đây nó được mô tả dưới tên text-outline và sau đó bị xóa khỏi tài liệu.
Để làm việc với -webkit-text-nét khá đơn giản, vì nó hoạt động giống như ranh giới. Để đặt một màu cụ thể, hãy thêm -color vào tên trên và -width để xác định độ dày. Tuy nhiên, giống như đường viền, bạn có thể sử dụng mô tả kiểu tốc ký. Những thứ kia. Đầu tiên chỉ định độ dày của nét, sau đó là màu của nó. Để hiểu rõ hơn về tài liệu, chúng ta hãy xem một ví dụ.
Tiêu đề siêu lừa đảo Mega
Như bạn có thể thấy, trong trường hợp này nét vẽ trông gọn gàng và dễ tạo hơn nhiều.
Nhờ đặc tính này, bạn không chỉ có thể tạo nét vẽ thông thường mà còn có thể làm cho nó trở nên mờ.
Tuy nhiên, đừng quên rằng khi sử dụng nét văn bản, bạn nên chú ý đến việc hiển thị chính xác nội dung văn bản trên các trình duyệt khác.
Một vài lời về máy phát điện
Nếu bạn không biết nên viết mã nào để triển khai một thiết kế cụ thể, thì hãy sử dụng các trình tạo trực tuyến. Để làm ví dụ tôi có thể đưa ra một liên kết http://protocoding.ru/css/StrokeTextGen. Bằng cách nhấp vào nó, bạn có thể tạo một loại phác thảo nhất định cho văn bản, đồng thời xem mã css kết quả trong hàm tạo bên dưới.
Về lưu ý này, ấn phẩm của tôi đã kết thúc. Nếu bạn thích tài liệu được trình bày, vui lòng cung cấp cho tôi các yêu cầu đăng ký của bạn và đừng tham lam mà hãy chia sẻ các liên kết thú vị với đồng nghiệp và bạn bè. Tạm biệt!
Trân trọng, Roman Chueshov
(Chưa có xếp hạng)
Tất nhiên, bạn có thể tạo vẻ đẹp trong Photoshop, nhưng nếu bạn cần lưu văn bản và không dán kèm theo một bức ảnh đẹp thì sao?
Ví dụ: để lập chỉ mục tốt hơn, tôi muốn đặt văn bản tiêu đề trong thẻ
. Nhưng đồng thời vẫn giữ được vẻ đẹp. Như thế này:
Vì vậy, hãy tạo một số văn bản có bóng bằng CSS:
CSS cấp 3 có thuộc tính "text-shadow" để thêm bóng vào mỗi chữ cái của bất kỳ văn bản nào.
| 1. Hình thức đơn giản nhất: h3 (bóng văn bản: 0,1em 0,1em #333) |
 |
| 2. Bóng chữ mờ: h3.b (bóng văn bản: 0,1em 0,1em 0,2em đen) |
|
| 3. Văn bản màu trắng có thể đọc được: h3.a (màu: trắng; bóng văn bản: đen 0,1em 0,1em 0,2em) |
|
| 4. Bóng nhiều lớp: h3 (bóng văn bản: 0,2em 0,5em 0,1em #600, -0,3em 0,1em 0,1em #060, 0,4em -0,3em 0,1em #006) |
 |
| 5. Vẽ chữ và phác thảo: h3 (bóng văn bản: -1px 0 đen, 0 1px đen, 1px 0 đen, 0 -1px đen) |
|
| 6. Đèn neon phát sáng: h3.a (bóng văn bản: 0 0 0.2em #8F7) h3.b (bóng văn bản: 0 0 0.2em #F87, 0 0 0.2em #F87) h3.c (bóng văn bản: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F) |
 |
Một ví dụ thú vị khác:
Phác thảo văn bản bằng CSS
Có thể phác thảo văn bản bằng CSS mà không cần dùng đến tập lệnh. Hiệu ứng này có thể được tạo bằng thuộc tính text-shadow. Mặc dù IE không chấp nhận thuộc tính này trong bất kỳ phiên bản nào của nó nhưng công thức được mô tả sẽ hoạt động tốt trong các trình duyệt phổ biến khác.
Hãy xem xét đoạn mã dưới đây:
Ví dụ số 1
H1(bóng văn bản: đỏ 1px 0px, đỏ 1px 1px, đỏ 0px 1px, đỏ -1px 1px, đỏ -1px 0px, đỏ -1px -1px, đỏ 0px -1px, đỏ 1px -1px;)
Tham số đầu tiên của thuộc tính text-shadow đặt màu của bóng, tham số thứ hai là độ lệch ngang của bóng so với văn bản, tham số thứ ba là độ lệch dọc. Khi bạn chỉ định lần lượt độ lệch bóng theo mọi hướng xung quanh văn bản 1 pixel, bạn sẽ có được hiệu ứng nét vẽ.
Ví dụ cú đánh số 1
Để làm cho nét vẽ bão hòa hơn, bạn có thể sử dụng tham số thứ tư text-shadow, tham số này chịu trách nhiệm về bán kính mờ của bóng:
Ví dụ số 2
H1(bóng văn bản: đỏ 1px 0px, đỏ 1px 1px, đỏ 0px 1px, đỏ -1px 1px, đỏ -1px 0px, đỏ -1px -1px, đỏ 0px -1px, đỏ 1px -1px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px;)
Ví dụ cú đánh số 2
Nếu bạn để ý, thuộc tính "red 0 0 3px" được lặp lại nhiều lần. Đây là nơi có hiệu ứng bão hòa. Để đạt được sự hiển thị nét rõ ràng hơn, thuộc tính có thể được thêm vào với các tham số khác nhiều lần. Nhược điểm duy nhất là nó có thể làm chậm trình duyệt trên các máy tính yếu hơn rất nhiều.
Vlad Merzhevich
Đã có lúc có một phong cách nhất định cho văn bản có bóng và hiệu ứng tương tự có thể được tìm thấy trên hầu hết mọi trang web. Trong trình chỉnh sửa đồ họa, việc thêm bóng rất đơn giản, trông rất đẹp, đây là văn bản có bóng và được đưa lên các trang web, bất kể phong cách của trang web và ý thức về tỷ lệ của nhà thiết kế. Khi hầu hết các trình duyệt bắt đầu hỗ trợ thuộc tính kiểu bóng văn bản, thời trang này đã qua và hiện nay văn bản có bóng là khá hiếm. Tuy nhiên, text-shadow còn có một số công dụng tiềm ẩn khác mà ít người nghi ngờ. Bằng cách sử dụng thuộc tính này, bạn có thể tạo văn bản phác thảo, “đùn” nó, tạo độ sáng, độ mờ, v.v.
Sử dụng bóng văn bản
Bốn tham số được viết dưới dạng giá trị: màu bóng, chuyển vị ngang và dọc và bán kính mờ bóng (Hình 1).
Cơm. 1. Tham số bóng văn bản
Màu sắc có thể được viết ở đầu hoặc cuối tất cả các tham số ở bất kỳ định dạng CSS phù hợp nào. Vì vậy, bạn có thể tạo bóng mờ bằng định dạng rgba. Các giá trị offset dương đổ bóng sang phải và xuống dưới, trong khi các giá trị offset âm tương ứng đổ bóng sang trái và lên trên. Để có bóng xung quanh văn bản, chỉ cần đặt giá trị offset về 0. Bán kính mờ xác định độ sắc nét của bóng. Bán kính mờ càng lớn thì bóng trông càng mềm.
Ưu điểm lớn của bóng văn bản là khả năng thêm nhiều bóng khác nhau cùng một lúc, liệt kê các tham số của chúng được phân tách bằng dấu phẩy. Tính năng này về cơ bản cho phép bạn tạo các hiệu ứng khác nhau.
Đáng tiếc là IE trước phiên bản 10.0 không hỗ trợ text-shadow nên chúng ta sẽ không thấy được vẻ đẹp nào ở trình duyệt này.
Văn bản phác thảo được đặc trưng bởi thực tế là mỗi chữ cái được bao quanh bởi một dòng, màu của dòng này khác với màu của văn bản (Hình 2). Hiệu ứng này trông đẹp nhất với cỡ chữ lớn, chẳng hạn như tiêu đề. Đối với văn bản nội dung, việc sử dụng dàn ý chỉ làm giảm khả năng đọc.
Cơm. 2. Dàn ý văn bản
Một đường viền có thể được tạo bằng hai phương pháp. Trong phương pháp đầu tiên, chúng tôi đặt độ lệch bóng bằng 0 và bán kính mờ nhỏ, nghĩa đen là 1-2 pixel (ví dụ 1). Việc tăng giá trị độ mờ sẽ biến đường viền thành ánh sáng xung quanh văn bản, đây là một hiệu ứng khác.
Ví dụ 1: Dàn ý văn bản
phác thảo văn bản
Đường viền được thực hiện bằng phương pháp này được hiển thị trong Hình. 1. Đường viền hơi mờ nên đối với những ai muốn có đường nét rõ ràng thì nên áp dụng phương pháp thứ hai. Nó bao gồm việc sử dụng bốn bóng sắc nét cùng màu, chúng được dịch chuyển sang các góc khác nhau một pixel (ví dụ 2).
Ví dụ 2. Bốn bóng cho đường viền
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
phác thảo văn bản
Sự xuất hiện của một đường viền như vậy được hiển thị trong Hình. 3. Điều đáng chú ý là đường viền biểu cảm hơn.
Cơm. 3. Đường viền với bốn bóng
Để thêm hiệu ứng văn bản 3D như trong Hình. 4, một số bóng được áp dụng đồng thời, được dịch chuyển tương đối với nhau một pixel theo chiều ngang và chiều dọc.
Cơm. 4. Văn bản 3D
Cá nhân tôi, loại văn bản này làm tôi nhớ đến kiểu chữ cổ điển và một lần nữa, nó phù hợp nhất cho các tiêu đề hơn là nội dung của trang web.
Số lượng bóng phụ thuộc vào mức độ bạn muốn “kéo” văn bản về phía trước. Ngược lại, số lớn hơn sẽ làm tăng “độ sâu” của các chữ cái, số nhỏ hơn thì ngược lại, làm giảm tính ba chiều. Ví dụ 3 sử dụng năm bóng cùng màu.
Ví dụ 3: Bóng để thêm ba chiều
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Tủ lạnh mười buồng
Đối với tất cả các bóng, chúng tôi đặt bán kính mờ về 0 và cùng màu. Các bóng chỉ khác nhau ở giá trị offset của chúng.
dập nổi văn bản
Để tạo hiệu ứng dập nổi văn bản hay nói cách khác là phù điêu, màu sắc của văn bản phải trùng với màu nền. Một phần của các chữ “nhô ra” trên bề mặt dường như được chiếu sáng, trong khi phần còn lại nằm trong bóng tối (Hình 5).
Cơm. 5. Văn bản dập nổi
Để thêm hiệu ứng tương tự, chúng ta cần hai bóng - chúng ta di chuyển bóng trắng lên bên trái một pixel và bóng màu xám đậm xuống bên phải (ví dụ 4).
Ví dụ 4: Chữ nổi
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Văn bản dập nổi
Bức phù điêu trông đẹp nhất trên nền màu xám, vì vậy hiệu ứng này không phù hợp với mọi bảng màu của trang web. Nhân tiện, nó dễ dàng được nhấn hơn là văn bản được ép đùn; chỉ cần hoán đổi màu bóng.
Bóng văn bản: #333 -1px -1px 0, #fff 1px 1px 0;
Ánh sáng
Ánh sáng xung quanh văn bản là cùng một bóng, chỉ có điều nó sáng và tương phản. Vì vậy, để tạo hiệu ứng phát sáng, chỉ cần thay đổi màu bóng và đặt bán kính mờ mong muốn. Vì ánh sáng xung quanh văn bản phải đồng nhất nên độ lệch bóng phải được đặt thành 0. Trong bộ lễ phục. Hình 6 cho thấy một ví dụ về phát sáng với nhiều màu sắc khác nhau.
Cơm. 6. Văn bản phát sáng
Ví dụ 5. Phát sáng
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Bên sáng
Mặt tối
Mơ hồ
Bản thân bóng bị mờ, vì vậy nếu chúng ta chỉ để lại bóng và ẩn văn bản, chúng ta sẽ nhận được các chữ cái mờ (Hình 7) và có thể dễ dàng điều chỉnh mức độ mờ bằng cách sử dụng tham số text-shadow.
Cơm. 7. Văn bản bị mờ
Để ẩn văn bản gốc, chỉ cần đặt màu thành trong suốt (ví dụ 6). Khi đó, màu bóng sẽ đóng vai trò là màu văn bản và bán kính mờ sẽ đặt mức độ mờ của các chữ cái.
Ví dụ 6: Làm mờ văn bản
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Văn bản bị mờ
Lớp bóng và lớp giả
Bóng không cần phải được thêm trực tiếp vào văn bản; thuộc tính text-shadow hoạt động tốt với các lớp giả :hover và :first-letter. Do đó, văn bản sẽ thu được các hiệu ứng thú vị, chẳng hạn như chữ cái đầu tiên có đường viền của đoạn văn hoặc ánh sáng rực rỡ của liên kết khi bạn di con trỏ chuột qua nó. Ví dụ 7 cho thấy những kỹ thuật như vậy.
Ví dụ 7: Sử dụng các lớp giả
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Một dự án ngách sẽ làm chậm lại kênh truyền thống, bất chấp chi phí. Cấu trúc thị trường, loại bỏ các chi tiết, ổn định bộ phận tiếp thị và bán hàng, sử dụng kinh nghiệm của các chiến dịch trước đó. Tất nhiên, việc xây dựng thương hiệu sẽ đẩy lùi PR hội tụ một cách tự nhiên, giành được một phân khúc thị trường. Đầu tư đồng bộ hóa vai trò địa vị xã hội, tăng tính cạnh tranh. Thương hiệu xác định kế hoạch vị trí một cách tự nhiên, sử dụng kinh nghiệm của các chiến dịch trước đó.
3,5 trên 5
Bạn có nghĩ có thể tạo một hình tam giác có thể mở rộng bằng một vài thẻ và CSS thuần túy không? Còn hình ngũ giác thì sao? Nhưng một ngôi sao như vậy? Tôi nghĩ nhiều người nghĩ là không. Trên thực tế điều đó là có thể.
Vì vậy, hôm nay chúng ta có một bài thí nghiệm sau. Chúng ta sẽ chơi với thuộc tính CSS nổi tiếng - đường viền (và tất cả những thứ liên quan đến nó). Trong quá trình thử nghiệm, chúng ta sẽ xem xét cách tạo một số đa giác đơn giản, một ngôi sao và xem xét một trường hợp mà những kỹ thuật này có thể được sử dụng trong thực tế. Đi!
Hình dạng hình học đơn giản
Vì vậy, hãy bắt đầu với những ví dụ đơn giản. Bạn có biết cách vẽ hình tam giác chỉ bằng HTML và CSS không? Và như thế này:
HTML
CSS
.hình thang ( Vertical-align: text-bottom; )Hình thang,
.polygon ( hiển thị: -moz-inline-block; )
đa giác,
.hình thang ( lề:0; phần đệm: 0; nền: không có; )
Đa giác ( chiều rộng: 10em; chiều cao: 10em; đường viền: không có; hiển thị: khối nội tuyến; căn chỉnh văn bản: giữa; )
.hình thang (
hiển thị: khối nội tuyến; chiều rộng: 1px; chiều cao: 0; lề: 0 tự động;
viền trái: 5em trong suốt; viền bên phải: 5em trong suốt;
}
Đa giác .aa ( viền-đáy: 10em; viền-trên: không có; )
Polygon.r2 ( chiều cao: 0em; )
Polygon.r3 ( chiều cao: 8,66em; )
.polygon.r3 .trapezoid ( chiều rộng đường viền: 8,66em 5em; )
div.eg ( chiều rộng: 10em; nền: #FFF; lề: 0 0; phần đệm: 1em; )
div.eg .polygon ( hiển thị: khối; lề: 0 tự động; )
R3 (màu: đỏ; cỡ chữ: 0,5em;)
Ngôi sao
HTML
Ngôi sao
CSS
#ngôi sao(chiều rộng: 15em;
chiều cao: 14,27em;
vị trí: tương đối;
}
#khoảng sao,
#ngôi sao(
hiển thị: khối;
}
#đứng đầu(
chiều rộng: 0;
chiều cao: 0;
lề: tự động;
viền bên phải: 4,64em trong suốt;
viền trái: 4,64em trong suốt;
viền-đáy: 14,27em rắn;
}
#trung tâm(
chiều rộng: 5,7em;
viền bên phải: 4,65em trong suốt;
viền trái: 4,65em trong suốt;
viền trên: 3,36em rắn;
chiều cao: 0;
vị trí: tuyệt đối;
trên cùng: 5,46em;
trái: 0;
chỉ số z: 100;
căn chỉnh văn bản: giữa;
}
#đáy(
vị trí: tuyệt đối;
đáy: 0;
trái: 2.852em;
viền bên phải: 4.635em trong suốt;
viền trái: 4.635em trong suốt;
viền dưới: 3,4em rắn #fff;
chiều rộng: 0;
chiều cao: 0;
}
#nhịp trung tâm(
lề trên: -2em;
màu: #000;
độ dày phông chữ: đậm;
}
a#star:di chuột #khoảng trung tâm(
màu sắc: #fff;
màu nền: trong suốt;
}
một ngôi sao(
màu: #f90;
màu nền: trong suốt;
}
a#star:di chuột(
màu: #fc3;
màu nền: trong suốt;
}
Một số ví dụ khác
- Cây thông Noel và cách bố trí khác thường của Eric Meyer;
- Các ô và menu từ kỹ thuật viên trưởng của Technocracy;
