Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách sử dụng hiệu ứng shadow cho nội dung hay các phần tử trong trang web để làm đẹp website của bạn hơn bằng một số thuộc tính quen thuộc trong CSS như là text-shadow, box-shadow… Nào bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!
Tóm Tắt
Shadow Text CSS
Text Shadow có nhiệm vụ tạo ra đổ bóng cho chữ giúp bạn làm nổi bật nội dung cũng như gây sự chú ý ngay tức thì đối với người dùng khi sử dụng trang web. Bây giờ chúng ta sẽ đi vào công thức tổng quát của nó nhé:
Bạn đang đọc: 40 Hiệu Ứng Shadow CSS Cho Web Design
text-shadow: (Khoảng cách chiều ngang) (Khoảng cách chiều dọc) (độ mờ) (màu sắc của shadow) Và để giúp bạn dễ tưởng tượng thì tất cả chúng ta sẽ đi vào thực hành thực tế một ví dụ nhỏ nhé !HTML :
Niềm Vui Lập Trình
CSS
h3{
color: DodgerBlue;
text-shadow: 1px 2px 3px Indigo;
font-size:50px;
}
Và tác dụng bạn xem bên dưới nhé :See the Pen vi du ve text shadow by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .
Ngoài ra bạn cũng có thể kết hợp nhiều hiệu ứng shadow trong thuộc tính text-shadow bằng việc sử dụng dấu phẩy để ngăn cách chúng. Bây giờ chúng ta sẽ đi vào cách tạo nhiều hiệu ứng shadow cho chữ nhé:
HTML :
Niềm Vui Lập Trình
CSS
h3{
color: DodgerBlue;
text-shadow: 6px 6px 5px Indigo, 3px 3px 4px Indigo;
font-size:50px;
}
Và tác dụng bạn xem bên dưới nhé :See the Pen Ket hop nhieu hieu ung shadow by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .Như bạn thấy thì tất cả chúng ta hoàn toàn có thể thuận tiện tạo ra hiệu ứng shadow cho nội dung trong website. Tuy nhiên để có được một hiệu ứng đổ bóng đẹp thì cần phải tích hợp nhiều thứ lại với nhau sắc tố, độ mờ, độ hòa giải giữa những shadow với nhau … Do đó phần tiếp theo tất cả chúng ta sẽ cùng nhau đi vào khám phá cách những bạn lập trình viên phong cách thiết kế và tạo ra hiệu ứng text shadow thích mắt cho website trải qua ví dụ và đoạn mã đơn cử nhé !
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Shadow CSS
Kết quả bạn xem bên dưới nha .See the Pen Pretty shadow by Alex Moore ( @ MoorLex ) on CodePen .
Text-Shadow HTML
Kết quả bạn xem bên dưới nha .See the Pen Awesome Text-Shadow by Nguyen Hoang Nam ( @ namho ) on CodePen .
Gradient Text Shadow
Kết quả bạn xem bên dưới nha .See the Pen Long Shadow Gradient Mixin by roikles ( @ roikles ) on CodePen .
Long Shadow Gradient CSS
Kết quả bạn xem bên dưới nha .See the Pen Variable Longshadow with Gradients Mixin by Dario Corsi ( @ dariocorsi ) on CodePen .
CSS Text Shadows
Kết quả bạn xem bên dưới nha .See the Pen 10 CSS Text Shadows by Tommy Hodgins ( @ tomhodgins ) on CodePen .
3D Text Shadow CSS
Kết quả bạn xem bên dưới nha .See the Pen 3D Text – version 2 by Sarah Fossheim ( @ fossheim ) on CodePen .
Inner Shadow Text Effect
Kết quả bạn xem bên dưới nha .See the Pen inner shadow text effect by Mohammed hanif ( @ hanifcodepen ) on CodePen .
Text-Shadow CSS Example
Kết quả bạn xem bên dưới nha .See the Pen CSS Dashed Shadow Type ( Demo ) by rob w ( @ rw1982 ) on CodePen .
CSS Shadow Effect
Kết quả bạn xem bên dưới nha .See the Pen text-shadow by IMarty ( @ IMarty ) on CodePen .
CSS3 Text-shadow Effects
Kết quả bạn xem bên dưới nha .See the Pen CSS3 text-shadow effects by Jorge Epuñan ( @ juanbrujo ) on CodePen .
Hover Shadow Effects
Kết quả bạn xem bên dưới nha .See the Pen A collection of CSS text-shadow and pattern effects by Ashley Watson-Nolan ( @ ashleynolan ) on CodePen .
Shadow CSS Text
Kết quả bạn xem bên dưới nha .See the Pen Text-Shadow by Mayur Elbhar ( @ mayurelbhar ) on CodePen .
Text Shadow Border CSS
Kết quả bạn xem bên dưới nha .See the Pen Text Stroke / Text Shadow border css by Beatriz Gonzalez ( @ b_atish ) on CodePen .
CSS3 text-shadow
Kết quả bạn xem bên dưới nha .See the Pen CSS3 text-shadow by Tommy McDonald ( @ tommymcdonald ) on CodePen .
Complex Text Shadow
Kết quả bạn xem bên dưới nha .See the Pen Complex Text Shadow Examples by Chris Coyier ( @ chriscoyier ) on CodePen .
Text Shadow Compilation CSS
Kết quả bạn xem bên dưới nha .See the Pen Text Shadow Compilation by emma ( @ boltaway ) on CodePen .
Text Shadow Javascript
Kết quả bạn xem bên dưới nha .See the Pen Kerning and text-shadow by Bart Veneman ( @ bartveneman ) on CodePen .
Text Shadow 3D Effect CSS
Kết quả bạn xem bên dưới nha .See the Pen 3D Cartoon Text w / CSS text-shadow by Fielding Johnston ( @ fielding ) on CodePen .
Text Shadow HTML CSS
Kết quả bạn xem bên dưới nha .See the Pen Super Discount by Daniel Riemer ( @ zitrusfrisch ) on CodePen .
Long shadow generator
Kết quả bạn xem bên dưới nha .See the Pen Long shadow generator by Max Kohler ( @ maxakohler ) on CodePen .
Masked Text-Shadow
Kết quả bạn xem bên dưới nha .
See the Pen Masked Text-Shadow by Daniel Riemer (@zitrusfrisch) on CodePen.
Shadow Mixin
Kết quả bạn xem bên dưới nha .See the Pen Shade – Shadow Mixin by Hugo Darby-Brown ( @ hugo ) on CodePen .
3D-Text with Text-Shadow
Kết quả bạn xem bên dưới nha .See the Pen 3D – Text with Text-Shadow by Daniel Riemer ( @ zitrusfrisch ) on CodePen .
Animated Text-Shadow
Kết quả bạn xem bên dưới nha .See the Pen Animated Text-Shadow by Erin E. Sullivan ( @ erinesullivan ) on CodePen .
Fancy text shadow
Kết quả bạn xem bên dưới nha .See the Pen Fancy text shadow by agathaco ( @ agathaco ) on CodePen .
HTML Text-Shadow
Kết quả bạn xem bên dưới nha .See the Pen CSS Text Shadow by Chris Eisenbraun ( @ chriseisenbraun ) on CodePen .
CSS Text-Shadow Example
Kết quả bạn xem bên dưới nha .See the Pen Milky Font Effect by Jorge Epuñan ( @ juanbrujo ) on CodePen .
Layered text-shadow effect CSS
Kết quả bạn xem bên dưới nha .See the Pen Layered text-shadow effect CSS by Shireen Taj ( @ TajShireen ) on CodePen .
Shadow Box CSS
Đây cũng là một thuộc tính giúp bạn hoàn toàn có thể tạo ra hiệu ứng đổ bóng cho những thành phần trong website như là card product, hình ảnh … Nó sẽ được viết theo công thức tổng quát là :
box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];Ở đây mình xin lý giải một tý là :
- horizontal offset: Độ lệch ngang của đổ bóng
- horizontal offset: Độ lệch dọc của đổ bóng
- blur radius : Độ mờ của đổ bóng
- spread radius : Nếu giá trị của thuộc tính này lơn hơn 0 thì sẽ tăng kích thước đổ bóng còn ngược lại sẽ giảm kích thước.(Bạn có thể lựa chọn dùng hay loại bỏ yếu tố này nhé)
- color: Màu sắc của đổ bóng
Và để dễ tưởng tượng hơn tất cả chúng ta sẽ đi vào ví dụ nhỏ sau đây nhé !HTML
Niềm Vui Lập Trình
CSS
body {
display: flex;
align-items: center;
justify-content: center;
}
.noi_dung{
margin-top:20px;
padding: 10px;
border: 0.5px solid #1c87c9;
border-radius: 20px;
line-height: 4em;
font-size: 25px;
box-shadow: 0 0 18px 0 #1c87c9;
}
Và tác dụng sau cuối bạn xem dưới đây nhé :See the Pen vi du box shadow by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .Tiếp theo đây tất cả chúng ta sẽ đi vào những ví dụ khác để tìm hiểu và khám phá cách những bạn lập trình viên tạo ra hiệu ứng box shadow thích mắt cho website nhé !
CSS Box Shadows
Kết quả bạn xem bên dưới nha .See the Pen Isolating CSS Box Shadows by TundraTech ( @ TundraTech ) on CodePen .
CSS3 Box Shadows Effects
Kết quả bạn xem bên dưới nha .See the Pen CSS3 Box Shadows Effects by Halil İbrahim Nuroğlu ( @ haibnu ) on CodePen .
Box Shadow Beautiful
Kết quả bạn xem bên dưới nha .See the Pen CSS Box Shadow Examples by vavik ( @ vavik96 ) on CodePen .
CSS Box-Shadow Trick
Kết quả bạn xem bên dưới nha .See the Pen CSS Box-Shadow Trick by Sasha ( @ sashatran ) on CodePen .
Smooth Box-shadow
Kết quả bạn xem bên dưới nha .See the Pen smooth box-shadow by Chris Coyier ( @ chriscoyier ) on CodePen .
Box-shadow Border
Kết quả bạn xem bên dưới nha .See the Pen box-shadow border by Derek Fogge ( @ PositionRelativ ) on CodePen .
Material Design Box Shadows
Kết quả bạn xem bên dưới nha .See the Pen Material Design Box Shadows by Samuel Thornton ( @ sdthornton ) on CodePen .
Hover box shadow
Kết quả bạn xem bên dưới nha .See the Pen Hover box shadow by Joey Lea ( @ ovdojoey ) on CodePen .
Shadow CSS Div
Kết quả bạn xem bên dưới nha .See the Pen Diffused shadow by Misha Heesakkers ( @ MishaHahaha ) on CodePen .
Button with gradient shadow
Kết quả bạn xem bên dưới nha .See the Pen Button with gradient shadow by Mohsen Khakbiz ( @ Mohsen-Khakbiz ) on CodePen .
Shadow visualization
Kết quả bạn xem bên dưới nha .See the Pen Cast shadow visualization by Scott Kennedy ( @ scottyzen ) on CodePen .
Direction-aware shadow with ES6
Kết quả bạn xem bên dưới nha .See the Pen direction-aware shadow with ES6 by Mert Cukuren ( @ knyttneve ) on CodePen .
CSS3 Box Shadow styles
Kết quả bạn xem bên dưới nha .See the Pen CSS3 Box Shadow styles by Steve Melcher ( @ xixao ) on CodePen .
Multiple Shadows
Kết quả bạn xem bên dưới nha .See the Pen Multiple Shadows by Andrew Spencer ( @ iam_aspencer ) on CodePen .
SCSS 3D-Shadow Functions
Kết quả bạn xem bên dưới nha.
See the Pen SCSS 3D – Shadow Functions by Kyle Wagner ( @ Keale2 ) on CodePen .
Tổng kết:
Qua đây mình mong bài viết sẽ cung ứng thêm cho bạn những hiệu ứng shadow có ích dành cho việc tăng trưởng, phong cách thiết kế web và nếu có vướng mắc gì cứ gửi email mình sẽ phản hồi sớm nhất hoàn toàn có thể. Rất mong bạn liên tục ủng hộ website để mình hoàn toàn có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui tươi !
Source: https://final-blade.com
Category: Kiến thức Internet
