Ngôn ngữ CSS - CSS3 Shadow
Bài trước
Bài sau

Tạo bóng CSS3

CSS3 hỗ trợ việc thêm tạo bóng (Shadow) cho văn bản hoặc cho các phần tử.
Thuộc tính shadow :

  • Text shadow
  • Box Shadow

Tạo bóng cho văn bản

CSS3 hỗ trợ tạo hiệu ứng bóng cho văn bản.

Ví dụ: Chỉ chỉ định bóng ngang (2px) và bóng đứng (2px):Hiệu ứng bóng văn bản!

<html>
   <head>
   
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
      
   </head>
   <body>
   
      <h1>Chào mừng các bạn đến website Hiệp Sĩ It dot com</h1>
      <h2>Chào mừng các bạn đến website Hiệp Sĩ It dot com</h2>
      <h3>Chào mừng các bạn đến website Hiệp Sĩ It dot com</h3>
      <h4>Chào mừng các bạn đến website Hiệp Sĩ It dot com</h4>
      <h5>Chào mừng các bạn đến website Hiệp Sĩ It dot com</h5>
      <h6>Chào mừng các bạn đến website Hiệp Sĩ It dot com</h6>
      <p>Chào mừng các bạn đến website Hiệp Sĩ It dot com</p>
      
   </body>
</html>

Xem ví dụ

Tạo bóng cho hộp (Box)

Thuộc tính  CSS3 box-shadow  tạo bóng cho các phần tử

Ví dụ: Phải chỉ định bóng ngang và bóng đứng cho phần tử cần tạo bóng

<html>
<head>
<style> 
div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px;
}
</style>
</head>
<body>

<div>Phần tử Div có Box shadow</div>

</body>
</html>

Xem ví dụ

Cards
Ví dụ: sử dụng box-show để tạo trang cards văn bản

div.card {
  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-align: center;
}

div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}

div.container {
    padding: 10px;
}
</style>

Xem ví dụ

Ví dụ: sử dụng box-show để tạo trang cards hình

div.polaroid {
  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-align: center;
}

div.container {
  padding: 10px;
}

Xem ví dụ

Trình duyệt hỗ trợ

Thuộc tính Chrome IE Firefox Safari Opera
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5

Bài trước
Bài sau

HiepsiitMe Facebook Twitter Pinterest LinkedIn

 

 

×