Tiếp tục với những chia sẽ thú vị về CSS trong bài viết này tôi sẽ hướng dẫn các bạn thực hiện các hiệu ứng css trên text. Bắt tay thôi nào !.
2. Text Spacing
khi nói tới text-spacing các bạn sẽ liền nghĩ việc tạo khoảng các giữa các chữ trong văn bản. mặc dù chúng ta đã biết qua thuộc tính line-hight để phân định khoảng cách giữa các đoạn văn bản thì bạn nên biết tới thuộc tính letter-spacing này. Nó sẽ giúp phân cách giữa các câu chữ với nhau.
h2 {
letter-spacing: 1px;
}
2. CSS3 Text Shadow
text-shadow giúp chúng ta tạo bóng cho các câu chữ hay các đoạn văn.
h2 {
text-shadow: 2px 2px 2px #CCCCCC;
}
3. Hiệu ứng đục lổ với CSS3
Tôi rất thích hiệu ứng đục lổ trên CSS3 nó mang lại cho ta hiệu ứng như các dòng chữ được khắc trên một bức tường hãy thữ xem nhé.
<div class="inset"> <h2><p>CODEVIVU.COM</p></h2> </div
bây giờ ta sẽ thêm vào CSS cho ra hiệu ứng khắc chữ nhé.
.inset h2 {
color: #444444;
text-shadow: -1px -1px 1px #000, 1px 1px 1px #ccc;
}
.inset p {
background: #CCCCCC;
text-shadow: 0 1px 0 #FFFFFF;
}
4. Hiệu ứng nổi với CSS3
Khác với hiệu ứng đục lổ hiệu ứng này sẽ cho ta cảm giác dòng chữ như nổi trên bức tường
<div class="emboss"> <h2><p>CODEVIVU.COM</p></h2> </div
.emboss {
color: #ECECF6;
text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px #000000;
background:#ccc;
}
.emboss h2 {
opacity: 0.5;
}
4. Hiệu ứng ánh đèn lờ mờ với CSS3
Ở hiệu ứng này chúng ta sẽ áp dụng lại thuộc tính text-shadow để thực hiện một hiệu ứng làm mờ như những dòng chữ led điện tử nhé
<div class="neon"> <h2><p>CODEVIVU.COM</p></h2> </div
.neon {
background:#000;
}
.neon h2 {
color: #D0F8FF;
text-shadow: 0 0 5px #A5F1FF, 0 0 10px #A5F1FF,
0 0 20px #A5F1FF, 0 0 30px #A5F1FF,
0 0 40px #A5F1FF;
}
5. Hiệu ứng 3D với CSS3
Quả thật text-shadow cho ta khá nhiều hiệu ứng đẹp mắt trong đó có hiệu ứng 3D
.3d-text {
color: #CCCCCC;
text-shadow: 0 1px 0 #999999, 0 2px 0 #888888,
0 3px 0 #777777, 0 4px 0 #666666,
0 5px 0 #555555, 0 6px 0 #444444,
0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4),
0 9px 10px rgba(0, 0, 0, 0.2);
}
6. Tạo giao điện văn bản nhiều cột với CSS
Để có thể có được đoạn văn bản được bố trí nhiều cột khác nhau cho đẹp mắt. Bạn không cần phải cố gắn chia nhỏ các thành nhiều doạn văn bản khác nhau. Bởi css có thể giúp bạn thực hiện điều này.
#column p {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 50px;
-webkit-column-gap: 50px;
column-gap: 50px;
text-align:justify;
}
7. Tạo chữ in hoa đầu tiên trong đoạn văn bản.
Để làm được điều này đôi khi chúng ta sẽ nghĩ tạo hẳn một CSS cho riêng chữ cái đầu tiên phải không. Thật ra không phải thế CSS có thể giúp chúng ta thực hiên5 điều này mà không cần quá nhiều công sức.
.content p:first-child {
font-style: italic;
color: #333333;
}
.content p:first-child:first-letter {
font-size: 250%;
margin: 10px 7px 0;
float: left;
}
7. Thay đổi màu sắc vùng chọn văn bản với CSS.
Có khi nào bạn cảm thấy chán ngắt màu sắc mặt định khi chọn một đoan văn bằng chuột. nếu đã chắn thì thay đổi nó ngay và luôn nhé.
.content p.green::selection{
background: green;
color: #FFFFFF;
}
.content p.green::-moz-selection{ /* Firefox */
background: green;
color: #FFFFFF;
}
Lời kết: Với việc vận dụng css để chỉnh sữa văn bản hay thêm hiệu ứng bắt mắt khá là thú vị phải không nào. Hy vọng bài viết sẽ giúp ích cho các bạn. Chúc các bạn thành công !
