Gói thiết kế website Thiết kế website công ty Thiết kế website du lịch Thiết kế website bán hàng Thiết kế website bất động sản Thiết kế website nhà hàng Thiết kế website xây dựng Thiết kế website thuê xe ôtô Thiết kế website nội thất Thiết kế website trọn gói Thiết kế website sim số đẹp, bán sim online
Dịch vụ khác Nâng cấp website Quản trị website Thiết kế giao diện website Đăng tin rao vặt Thiết kế Logo Quảng cáo Google Ads hiệu quả
Thông thường khi chúng ta làm bóng đổ (Shadow) cho chữ chúng ta thường dùng các phần mềm đồ họa như Photoshop, Illustrator, Firework,..vv. Đối với những phần mềm đó thì việc tạo ra bóng đổ cho chữ hết sức đơn giản và có nhiều hiệu ứng bắt mắt, nhưng trong bài viết này tôi xin giới thiệu với các bạn một thủ thuật trong CSS – Cascading Style Sheets giúp bạn có thể tạo ra hiệu ứng bóng đổ giống như trong các phần mềm đồ họa. Tuy nhiên cách làm này không có nhiều hiệu ứng và kiểu dáng giống như các phẩn phềm đồ họa, nhưng nó vẫn là một cách khá tốt mà chúng ta có thể vận dụng nó để style cho Website và các khái niệm liên quan của mình, sau đây là toàn bộ các bước để thực hiện.
Thông thường khi chúng ta làm bóng đổ (Shadow) cho chữ chúng ta thường dùng các phần mềm đồ họa như Photoshop, Illustrator, Firework,..vv. Đối với những phần mềm đó thì việc tạo ra bóng đổ cho chữ hết sức đơn giản và có nhiều hiệu ứng bắt mắt, nhưng trong bài viết này tôi xin giới thiệu với các bạn một thủ thuật trong CSS – Cascading Style Sheets giúp bạn có thể tạo ra hiệu ứng bóng đổ giống như trong các phần mềm đồ họa. Tuy nhiên cách làm này không có nhiều hiệu ứng và kiểu dáng giống như các phẩn phềm đồ họa, nhưng nó vẫn là một cách khá tốt mà chúng ta có thể vận dụng nó để style cho Website và các khái niệm liên quan của mình, sau đây là toàn bộ các bước để thực hiện.
Để tạo ra hiệu ứng cho chữ trước hết chúng ta cần tạo ra một trang HTML có định dạng như sau:
CSS Text shadow
Lorem ipsum dolor sit amet consectetuer pretium mattis.
Để có thể định vị được các dòng text chúng ta cần định nghĩa cho thẻ
#css-shadow { margin: 0; padding: 0; position: relative; /* Dùng để định vị chữ */ width: 300px; height: 250px; }
Tiếp đó chúng ta sẽ định nghĩa vị trí mà màu sắc cho các dòng text, để có thể nhìn thấy bóng đổ thì ta sẽ định nghĩa cho dòng chữ ở dưới là màu xám và cách dòng chữ ở trên 2 pixel về phía phải và phía dưới. Cụ thể mã CSS – Cascading Style Sheets như sau:
#css-shadow h1.font { position: absolute; top: 0; left: 0; z-index: 1; color: #CC0000; } #css-shadow h1.shadow { position: absolute; top: 2px; left: 2px; z-index: 0; color: #C0C0C0; }Một điều mà chúng ta cần hết sức chú ý đó là thuộc tính z-index :. Trong trường hợp chúng ta muốn đặt lớp (layer) nào ở phía trên thì chúng ta sẽ đặt thuộc tính z-index của lớp đó lớn hơn các lớp (layer) khác.
Tag: Thiết kế web , thiết kế website
Tổng đài tư vấn miễn phí 100% cho khách hàng Tam Nguyên.
Hãy gọi cho chúng tôi!