Series 11 kĩ thuật CSS3 cơ bản(Phần I)

07/07/2014
1125
0

Hôm nay chúng tôi sẽ chỉ cho bạn 11 hiệu ứng bằng cách sử dụng CSS3. Rõ ràng, thời đại mới đang đến với sự phát triển của CSS3, vậy thì chẳng có lý do gì để bạn cứ ôm những kĩ thuật CSS đã cũ kĩ nữa.

CSS3 là gì?

Bạn có thể xem qua về khái niệm của CSS3 ở đây. Nói chung, về mặt cú pháp thì CSS3 không có nhiều sự khác biệt so với người tiền nhiệm. Tuy nhiên, sức mạnh của nó lại vượt trội hơn nhiều. Như bạn sẽ thấy trong 11 ví dụ sắp tới, chúng tôi sẽ làm rõ về sự phát triển giữa cái cũ và cái mới, cổ điển và hiện đại để bạn có thể đánh giá một cách khách quan.

1. Bo tròn góc ảnh

corners

Có lẽ trong 11 tính năng cơ bản này thì tôi yêu thích nhất là sự thay đổi trong việc bo tròn góc ảnh. Bạn có thể tạo ra những bức ảnh mượt mà, được bo tròn góc chỉ trong vài giây. Sở thích của tôi là làm một hình nền được lặp lạo theo chiều ngang và sau đó áp dụng các góc tròn để tạo ra một giao diện đẹp cho web 2.0.

Trước đây, bạn có thể tạo ra các góc tròn bằng việc sử dụng bốn div hoặc dùng Javascrip. Tuy nhiên, người dùng sẽ không thấy những góc mịn nếu trình duyệt bị vô hiệu hóa Javascrip, tôi nghĩ rằng website thì vẫn hoạt động tốt thôi. Nhưng bạn nên học cách chỉ sử dụng CSS để tạo các góc tròn vì thực sự nó khá đơn giản và chẳng phải website tốt-đẹp thì hay hơn so với website tốt hay sao?

Về cách làm cổ điển có thể là:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
    $('.box').corners('10px');
});
</script>
 
<div class="box">
    <!--CONTENT-->
</div>

Còn trong CSS3, ta chỉ cần:

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>

Như bạn có thể thấy, tất cả những điều bạn cần làm là xác định 3 thuộc tính của CSS3. Thực ra nó cũng chỉ là một thôi, tuy nhiên những trình duyệt khác nhau thì yêu cầu thuộc tình khác nhau nên bạn phải khai báo cả 3 thuộc tính.

2. Box Shadow

Box Shadow là một khái niệm cực kì quan trọng. 99% thời gian khi thiết kế, tôi thấy mình dang đổ bóng cho một cái gì đó. Một lần nữa, tôi sử dụng plugin Javascrip cho cách cổ điển bởi vì làm nó hoàn hảo bằng CSS thực sự là rất khó. Tại sao tôi lại phải lãng phí thời gian cho việc tìm negative margins trong khi đã có thứ làm cho mình việc đó. Miễn là mọi người đừng tắt JavaScrip thì website của tôi sẽ vẫn đẹp.

Cách cổ điển:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.d-ropShadow.js"></script>
<script type="text/javascript">
$(function(){
    $('.box').d-ropShadow({
        left: 5,
        top: 5,
        opacity: 1.0,
        color: 'black'
    });
});
</script>
 
<div class="box">
    <!--CONTENT-->
</div>

Tôi sử dụng d-ropShadow plugin. Mặc dù tôi vẫn thích sử dụng code thuần CSS hơn.

Sử dụng CSS3:

<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>

Giá trị cho thuộc tính box shadow là: x-offset y-offset blur color. Dễ hơn đối với việc nhập vào 2 file Javascrip và còn dễ hơn nhiều đối với việc loay hoay với negative margins.

3. Text Shadow

Nếu bạn đã từng đọc hướng dẫn về việc làm hiệu ứng letterpress trong PTS thì bạn cũng biết cách để làm hiệu ứng đổ bóng chữ. Nó rất đơn giản để tạo ra.

Cách cổ điển:

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>
 
<div class="fonts">
    <span class="font">The quick brown fox jumps over the lazy dog.</span>
    <span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>

Thay vì sử dụng plugin Javascrip, tôi chỉ sử dụng một số thủ thuật CSS đơn giản về absolutely position cho chữ phía dưới một phiên bản copy của nó. Vấn đề là nếu tắt CSS đi thì bạn sẽ có 2 đoạn văn bản giống hệt nhau cùng được hiển thị.

Sử dụng CSS3:

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>
 
<span class="font">The quick brown fox jumps over the lazy dog.</span>

Nếu bạn muốn đổ bóng chữ kiểu blurred thì thực sự tôi cũng chẳng biết làm thế nào nếu sử dụng thuần CSS hay không có hình ảnh.

Hãy tiếp tục đón xem series Series 11 kĩ thuật CSS3 cơ bản. Trước đó, bạn có thể xem qua bài viết Tạo captcha theo kiểu tính tổng 2 số ngẫu nhiên để biết cách phòng chống spammer một cách hiệu quả và mang lại nội dung tốt nhất cho website của mình.

Ý kiến bạn đọc

Bạn cần trở thành thành viên của nhóm để có thể bình luận bài viết này. Nhấn vào đây để đăng ký làm thành viên nhóm!

Series 11 kĩ thuật CSS3 cơ bản(Phần I)

CSS3 là gì?

1. Bo tròn góc ảnh

2. Box Shadow

3. Text Shadow

Bài viết liên quan

Đăng nhập Đăng ký