Giới thiệu một số tính năng đơn giản mà hiệu quả của CSS3

Hẳn là các bạn cũng như tôi, khi nhìn thấy một bản demo ấn tượng của CSS3 thì sẽ ngay lập tức muốn đưa nó vào website của mình. Và bạn sẽ ngán ngẩm khi nhận ra rằng feature đó chỉ có mặt trên một số trình duyệt nhất định (và dĩ nhiên là không có IE) , nên bạn quyết định chờ. Thật may mắn rằng những phiên bản mới nhất của các trình duyệt thông dụng đã hỗ trợ những điều kỳ diệu của CSS3. Bạn hoàn toàn có thể sử dụng chúng ngay lập tức.

**Ghi chú: một số feature không thể sử dụng trên những phiên bản cũ của IE ( từ 9 trở xuống). **

1. CSS Animations and Transitions

CSS animations đã có thể sử dụng trên phần lớn trình duyệt, kể cả IE (từ phiên bản 10). Có 2 cách để tạo CSS animations. Cách đầu tiên khá là đơn giản, bạn chỉ cần animate sự thay đổi của CSS properties bằng cách delacre transition. Với transitions, bạn có thể tạo hiệu ứng trên hover hoặc mouse down, hoặc bạn có thể kích hoạt hiệu ứng bằng cách thay đổi style của một element bằng Javascript.

Cách thứ 2 phức tạp hơn một chút – liên quan đến việc miêu tả một thời điểm nhất định của animation với @keyframe rule. Việc này cho phép bạn lặp hiệu ứng mà không cần phụ thuộc vào user actions hoặc Javascript để kích hoạt.

Đoạn code tham khảo:

<div class="container">
  <div class="planet"></div>
  <div class="rocket"></div>`
</div>

.container {
  width: 300px;
  height:300px;
  margin: 0 auto;
  position:relative;
  overflow:hidden;
}

.planet {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center;
}

.rocket {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center;

/* Chrome prefix */
  -webkit-animation:orbit 2s linear infinite;
  animation:orbit 2s linear infinite;
  transition:background-position 0.8s;
}

.container:hover .rocket {
  background-position:80px center;
}

/* Define the keyframes of the animation */
@-webkit-keyframes orbit {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

@keyframes orbit {
  from {
    transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
  }

  to {
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
  }
}

2. Tính toán giá trị với calc()

Một tính năng mới và tuyệt vời của CSS đó là hàm calc(). Nó cho phép bạn làm những phép toán đơn giản trong CSS. Bạn có thể dùng nó ở mọi nơi, nơi mà length hay size được sử dụng. Có một điểm thú vị hơn đó là bạn có thể dùng các đơn vị khác nhau vào cùng phép toán, như là % hay pixel. Tính năng này hoạt động trên IE9 trở lên và ko cần có prefix.

Sau đây là một ví dụ

<div class="container">
  <p>Mỗi bên div này cách 20pixel</p>
</div>

.container{
/* Calculate the width */
  width: calc(100% - 40px);
  background-color:#CDEBC4;
  color:#6D8B64;
  text-align:center;
  padding:25px 0;
  margin: 0 auto;
}

3. Generated Content and Counters

Generated content là một công cụ hữu hiệu cho các lập trình viên, thực hiện bằng các puseudo elements là ::before và ::after. Feature này cho phép bạn sử dụng ít HTML mà vẫn tạo ra được layout như ý. Điều này thực sự có ích cho bạn trong trường hợp bạn cần thêm box shadow hoặc các visual element, buộc bạn cần dùng thêm <span> và <div>.

CSS3 cho phép pseudo element truy cập vào counters (tăng dần theo quy định của CSS). Những counters này cũng có thể truy cập vào attributes của các parent element chứa chúng. Hãy thử trải nghiệm với ví dụ sau

<div class="container">
  <span data-title="First Element">This is item</span>
  <span data-title="Second Element">This is item</span>
  <span data-title="Third Element">This is item</span>
  <span data-title="Fourth Element">This is item</span>
</div>

.container {
/* Set a counter named cnt to 0 */
  counter-reset: cnt;
  position:relative;
  text-align:center;
  padding:20px 0;
  width:420px;
  height: 160px;
  margin: 0 auto;
}

/* You can style pseudo elements and give them content, as if they were real elements on the page */

.container::before {
  display: block;
  content:'Hover over these items:';
  font-size:18px;
  font-weight:bold;
  text-align:center;
  padding:15px;
}

.container span {
  display:inline-block;
  padding:2px 6px;
  background-color:#78CCD2;
  color:#186C72;
  border-radius:4px;
  margin:3px;
  cursor:default;
}

/* Create a counter with a pseudo element */
.container span::after {
/* Every time this rule is executed, the
counter value is increased by 1 */

  counter-increment: cnt;

/* Add the counter value as part of the content */

  content:" #" counter(cnt);
  display:inline-block;
  padding:4px;
}

/* Pseudo elements can even access attributes of their parent element */

.container span::before {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  content:attr(data-title);
  color:#666;
  opacity:0;

/* Animate the transitions */
  -webkit-transition:opacity 0.4s;
  transition:opacity 0.4s;
}

.container span:hover::before {
  opacity:1;
}

4. Gradients

Gradients cho phép lập trình viên web sức mạnh tạo ra những transition đẹp mắt mà không cần phải chỉnh sửa hình ảnh. CSS gradient cũng được hiển thị tốt trên màn hình retina. Gradients có thể là linear, radial hoặc repeat. Giờ gradients đã có thể sử dụng khắp mọi nơi, không cần có prefix.

Một ví dụ nhỏ cho feature này:

<div class="container">
  <div id="el1">Linear</div>
  <div id="el2">Radial</div>
  <div id="el3">Repeating Lin.</div>
  <div id="el4">Repeating Rad.</div>
</div>

.container {
  text-align:center;
  padding:20px 0;
  width:450px;
  margin: 0 auto;
}

.container div {
  width:100px;
  height:100px;
  display:inline-block;
  margin:2px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD;
  border-radius:2px;
  color:#666;
  vertical-align: top;
  line-height: 230px;
  font-size: 12px;
}

#el1 {
  background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
}

#el2 {
  background:radial-gradient(#77d19e,#46c17b);
}

#el3 {
  background:repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);
}

#el4 {
  background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px);
}

4 features nói trên cũng đã giúp các bạn thiết kế website của mình nhẹ nhàng và ít khó khăn hơn rồi. Lần sau tôi sẽ đưa lên một bài khác về các tính năng phức tạp hơn nữa.

Chúc các bạn may mắn!

Nguồn: http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/