Bo góc và đổ bóng với thẻ DIV dùng CSS

Bo góc và đổ bóng với thẻ DIV dùng CSS
Thực chất đây code dùng để đóng khung bài viết hay các tiện ích đã trình bầy ở ĐÂY
Thẻ <div></div> viết tắt của từ "division" có nghĩa là phân chia, ta có thể hiểu đây là sự phân chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ những vùng được bố cục trên trang web.
– Là khối dữ liệu không có màu và trong suốt, có hình dạng giống như hình chữ nhật có chiều rộng chiều cao.
– Nếu thẻ
không kết hợp với css mà chỉ đứng 1 mình thì nó sẽ không có ý nghĩa hay tác dụng gì cả.
– CSS là các yếu tố giúp cho thẻ div tùy biến khối không màu và giống hình chữ nhật đó.
Trong bài này muốn giới thiệu thêm 2 thuộc tính
- Border-radius
- Box-shadow
Nghĩa là bo góc cho khung(hộp) và đổ bóng cho khung(hộp)
Dựa vào bài viết TRƯỚC ta chỉ cần thêm vào sau <div style=" các thuộc tính cần áp dụng như:
border-radius:x x x; hoặc là box-shadow:x x x; trong đó x x x là các thông số,cũng là trị số của CSS3.
Dưới đây là một số trị số của 2 thuộc tính trên

Border-Radius_Bo góc

Bo góc và đổ bóng với thẻ DIV dùng CSS
border-radius: 15px (thuộc tính css để bo góc cho khung DIV với 4 góc có độ lượn là 15 chấm điểm).
Để bo tròn cho từng góc của khung DIV, các bạn thể dùng những lệnh mở rộng sau:
-border-radius : bo 4 góc.
-border-top-left-radius : bo góc phía trên bên tay trái.
-border-top-right-radius : bo góc phía trên bên tay phải.
-border-bottom-left-radius : bo góc phía dưới bên tay trái.
-border-bottom-right-radius : bo góc phía dưới bên tay phải.
Bo góc và đổ bóng với thẻ DIV dùng CSS
moz-border-radius dùng cho các trình duyệt Fireox cũ không nhận biết được các mã CSS,với sự update liên tục của các trình duyệt trong thời gian này thì ta có thể bỏ những dòng
moz-border-radius

Box-Shadow_Đổ bóng
Đối với khung DIV, CSS3 hỗ trợ hiệu ứng bóng mờ với thuộc tính box-shadow.
Thuộc tính box-shadow nhận vào 4 tham số.
Bo góc và đổ bóng với thẻ DIV dùng CSS
Tham số thứ 1 : kích thước của bóng mờ ở vị trí bên phải của khung div, nếu mà bạn muốn bóng mờ ở vị trí bên trái thì thêm dấu trừ vào trước tham số (như ví dụ : -5px).
Tham số thứ 2 : kích thước của bóng mờ ở vị trí phía dưới của khung div, nếu mà bạn muốn vị trí của bóng mờ nằm phía trên khung DIV thì chỉ cần thêm dấu trừ vào trước tham số (như ví dụ : -3px)
Tham số thứ 3 : là độ nhòe của bóng mờ, tham số truyền vào này càng cao thì độ nhòe của bóng càng cao.
Tham số 4 : màu của bóng.
Bóng đổ ngược lại (với trị số âm)
Bo góc và đổ bóng với thẻ DIV dùng CSS
Chỉ cần đặt thêm thuộc tính inset trước các tham số của thuộc tính box-shadow, thì vị trí của bóng mờ sẽ hiển thị vào bên trong khung DIV.
Bo góc và đổ bóng với thẻ DIV dùng CSS
Sau đây là một số mẫu với hình ảnh minh họa kèm luôn CSS trong nó
Bo góc và đổ bóng với thẻ DIV dùng CSS

Bo góc và đổ bóng với thẻ DIV dùng CSS

Bo góc và đổ bóng với thẻ DIV dùng CSS

Bo góc và đổ bóng với thẻ DIV dùng CSS

Bo góc và đổ bóng với thẻ DIV dùng CSS

Bo góc và đổ bóng với thẻ DIV dùng CSS

Bo góc và đổ bóng với thẻ DIV dùng CSS

Bo góc và đổ bóng với thẻ DIV dùng CSS
Bo góc và đổ bóng với thẻ DIV dùng CSS
CSS:
background-color:#777;
border-radius:20px;
box-shadow:
0px 2px 2px 0px rgba(0, 0, 0, 0.5),
0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;
Bo góc và đổ bóng với thẻ DIV dùng CSS
CSS:
background-color:#555;
border-radius:20px;
box-shadow:
0px 2px 2px 0px rgba(0, 0, 0, 0.5) inset,
0px 2px 2px 0px rgba(255, 255, 255, 0.5);
Bo góc và đổ bóng với thẻ DIV dùng CSS
CSS:
background: #eee;
background: -moz-linear-gradient(top, #fff 0%, #ddd 84%, #aaa 100%);
background: linear-gradient(top, #fff 0%, #ddd 84%, #aaa 100%);
-pie-background: linear-gradient(top, #fff 0%, #ddd 84%, #aaa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(84%,#ddd), color-stop(100%,#aaa));
-moz-box-shadow: 0 0 12px 1px #999 inset;
-webkit-box-shadow: 0 0 12px 1px #999 inset;
box-shadow: 0 0 12px 1px #999 inset;
outline: 1px dashed #777;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
Bo góc và đổ bóng với thẻ DIV dùng CSS
CSS:
.box {
position:relative;
width:600px;
height:300px;
margin:100px auto 0 auto;
}

.box-gradient {
position:absolute;
width:100%;
height:100%;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));
}

.box-shadow {
position:absolute;
left:50%;
margin:400px 0 0 -290px;
bottom:10px;
width:580px;
height:16px;
background:#fff;
border-radius:290px / 8px;
-moz-border-radius:290px / 8px;
-webkit-border-radius:290px / 8px;
box-shadow:0 10px 20px #000;
-moz-box-shadow:0 10px 20px #000;
-webkit-box-shadow:0 10px 20px #000;
}

HTML:
<div class="box">
<div class="box-shadow"></div>
<div class="box-gradient">
...some content can go here...
</div>
</div>

Bo góc và đổ bóng với thẻ DIV dùng CSS
CSS:
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
/*==================================================
* Effect 5
* ===============================================*/
.effect5
{
position: relative;
}
.effect5:before, .effect5:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 35px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.effect5:after
{
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}

HTML
<div class="box effect5">
<h3>Effect 5</h3>
</div>
Nhận xét

Không có nhận xét nào :