Blog

Shadow Effects

sd

 

CSS3 Shadows sẽ giúp bạn định kiểu cho text hoặc box trở lên đẹp hơn, ảo hơn.

Chắc hẳn các bạn đã bắt gặp ở đâu đấy những dòng chữ có bóng rồi chứ? Rất tuyệt đúng không, sau khi học xong bài này, bạn cũng sẽ làm được như người ta. Thiết kế website là quá trình đòi hỏi sự tỉ mỉ, chăm trút.

Như đã đề cập ở trên, shadow effects có hai loại:

  • text shadow
  • box shadow

Box Shadow

Thuộc tính box-shadow áp dụng bóng cho các phần tử. Bắt đầu từ rễ đến khó.

Định dạng bóng ngang và bóng dọc cho box.

#box_shadow1{
    background-color: red;
    height: 100px; width: 300px;
    box-shadow: 10px 10px;
  }

 

Đổi màu cho bóng.

#box_shadow2{
    background-color: red;
    height: 100px; width: 300px;
    box-shadow: 10px 10px yellow;
  }

 Thêm hiệu ứng mờ cho bóng.

#box_shadow3{
    background-color: red;
    height: 100px; width: 300px;
    box-shadow: 10px 10px 15px yellow;
  }

Sử dụng box shadow để tạo các thẻ.

text card

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  #box_shadow1{
    background-color: lavender;
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  #text{
    color: red; text-align: center;padding: 15px;
    font-size: 100px;
  }
  #box_shadow2{
    height: 150px;
  }
  #box_shadow3{
    text-align: center;
    height: 50px;
  }
</style>
</head>
<body>
  <div id="box_shadow1">
    <div id="box_shadow2">
      <p id="text">23</p>
    </div>
    
    <div id="box_shadow3">
      <p>Thursday, February, 23, 2017</p>
      <p>Dang Cong San Viet Nam Muon Nam</p>
    </div>
  </div>
</body>
</html>

 

image card

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  }
  #box_shadow1{
    background-color: lavender;
    height: 280px; width:242px;
    box-shadow:0 6px 0 10px rgba(0, 0, 0, 0.3);
  }
  #box_shadow2{
    height: 150px;
  }
  #box_shadow3{
    color: red;
    padding-top: 50px;
    text-align: center;
  }
</style>
</head>
<body>
  <div id="box_shadow1">
    <div id="box_shadow2">
      <img src="css3.jpg">
    </div>
    <div id="box_shadow3">
      <p><a href="https://www.otvina.com/thiet-ke-website/">Học thiết kế Website cùng OTVINA</a></p>
      <p>Đảng Cộng sản Việt Nam muôn năm</p>
    </div>
  </div>
</body>
</html>

Trên đây là những gì cơ bản về box shadow, như vậy cũng đủ để có những box cực đẹp rồi, chỉ thêm sự sáng tạo của bạn nữa thôi.

Text Shadow

Mỗi trang web đều có đặc điểm riêng của nó, như khi bạn thiết kế website bất động sản thì giao diện, chức năng và kiểu chữ sẽ tạo nên đặc điểm riêng của website bất động sản. Bạn muốn làm nổi bật lên tiêu đề cho trang web của mình, thay vì bôi đen, in nghiêng, hay đổi font, bạn có thể tạo bóng cho text của mình.

 

Screenshot from 2017-02-23 15-46-51

Vì phần này khá đơn giản lên mình không cần giải thích nhiều. Cứ code rồi khác hiểu, có gì thắc mắc để lại ý kiến dưới phần comment, mình sẽ trả lời bạn sớm nhất.

code 1:

#text_shadow{
    font-size: 100px;color: lavender;text-align: center;
    text-shadow: 4px 4px 3px yellow;
  }

code 2:

#text_shadow{
    font-size: 100px;color: black;text-align: center;
    text-shadow: 0 0 30px #FF0000;
  }

code 3:

#text_shadow{
    font-size: 100px;color: white;text-align: center;
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
  }

code 4:

#text_shadow{
    font-size: 100px;color: white;text-align: center;
    text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }

Toàn bộ nội dung của Shadow. Thiết kế Website OTVINA xin chào và hẹn gặp lại ở bài tiếp theo.