google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






10 thủ thuật CSS3 cực kì hữu ích & sáng tạo CSS3, cùng với HTML5 mặc dù là những công nghệ đã được ứng dụng nhiều năm, nhưng có lẽ vẫn còn khá mới với những ai mới chập chững bước vào lĩnh vực phát triển web.

CSS3 thực sự rất mạnh bởi nó làm được những thứ mà trước đây dường như là không tưởng với ngôn ngữ JavaScript cũ (nếu so sánh ở mặt hiệu năng), hiển nhiên CSS3 cũng cần được trình duyệt xử lí và tính toán các lệnh này, nhưng không là vấn đề gì với những trình duyệt hiện đại ngày nay cùng với cấu hình phần cứng của máy tính.

Hôm nay, trong bài viết này, JavaScriptBank.com muốn giới thiệu đến bạn 10 thủ thuật CSS3 cực kì hữu ích & sáng tạo giúp bạn xử lý các đối tượng mục tiêu trong một đại dương các đối tượng DOM của một trang web. Chỉ với một vài dòng CSS3 đơn giản, chúng ta có thể làm được những công việc phức tạp mà JavaScript có thể tốn đến vài chục, vài trăm, thậm chí vài nghìn dòng mã lệnh, nếu không dùng các thư viện JavaScript có sẵn như jQuery, MooTools, Prototype,...


Miễn phí web hosting 1 năm đầu tại iPage



Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

----

+

Adjacent Sibling Selector - Sometimes when you are styling an element, you'd like a simpler way of also styling the element right after it. For example, you might have a small tooltip (within a span) that you want to appear when hovering over an input.

/* CSS */
input + span { opacity: 0;  transition: all 0.3s; }
input:hover + span { opacity: 1; padding-left: 10px; }
<!-- HTML -->
<input placeholder="Type here" /><span>I'm a tooltip</span>

Would give you something like:

I'm a tooltip

~

General Sibling Selector - In the case you want to select any (instead of only the directly proceeding) sibling, use this selector instead. Do note, you can only select everything after an element, there are no selectors to select something "before" it.

/* CSS */
input ~ span { opacity: 0;  transition: all 0.3s; }
input:hover ~ span { opacity: 1; padding-left: 10px; }
<!-- HTML -->
<input placeholder="Type here" /><span></span><span></span><span></span>

*

Universal Selector - The catch-all selector, this will apply properties to everything, so make sure you use it properly. One of it's primary usages nowadays is for applying border-box, but there are some other fun things you can do as well.

/* CSS */
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

[attr]

Attribute Selector -You are probably used to using class or ID selectors, but did you know you can also target elements by their attributes? A common usage might be for input types, but you can grab any attribute you feel like, even custom HTML5 data-* attributes. You can also do some special filtering on the attribute itself, for example, if it starts with a certain word, etc.

/* CSS */
input[type=text] { border-color: green; }
input[type=password] { border-color: blue; }

:empty

Empty Selector - This selector is probably rarely used, but definitely comes in handy when needed. Image you have a div that would normally contain items you add to a shopping cart. If the shopping cart is empty, no element is ever added to the div. You could then style the div:empty (meaning that div has no elements within it) to have a nice background indicating that.

/* CSS */
div:empty { background: url(images/empty.png) no-repeat center; }

:target

Target Selector - if you are using ID's on elements within a page, you can actually use them to your advantage with this selector. For example, I've added an ID of "target-example" to the previous 2 headings above. If you click here, the page should move up to the :empty heading. However, clicking here will take you to the :target heading, with a highlight using the :target selector!

#target-example:target { background: #FFF9D8; }

:only-of-type

Only of Type Selector - This is closely related to the "nth-of-type" selector, and it's cousin "nth-child". One which grabs the certain occurrence of a type of element, and the other the certain occurrence of any child element, respectively. However, you can also use CSS to check if it's the only occurrence of the element as well. For example, let's say you have a trio of boxes on a page, that show the "latest posts" or something on your blog. They are automatically removed with time, so sometimes you'll see all 3, other times you'll only see one. You can have it so that, when only one is being displayed, to go ahead and use the full width of the space it's in, instead of being displayed in the usual 1/3rd format.

<!-- HTML -->
<section class="blog-content">
    <article>Hi, I'm an article</article>
    <article>Hi, I'm an article</article>
    <article>Hi, I'm an article</article>
</section>
/* CSS */
article {
    background: #FAFAFA;
    border: 1px solid #999;
    float: left;
    line-height: 100px;
    margin-right: 10px;
    width: 100px;
}

article:only-of-type {
    width: 100%; margin-right: 0;
}
Hi, I'm an article
Hi, I'm an article
Hi, I'm an article

Above is how it'd normally look, but if we leave only one article element...

Hi, I'm an article all by myself

:checked

Checked Selector - Unsurprisingly, this will activate a style for when a checkbox is checked. This is very useful in combination with some of the above selectors, and can even be used for various checkbox hacks.

input[type=checkbox]:checked { box-shadow: 0 0 3px green; }

:not()

Negetation Selector - This super handy selector will let you exclude certain elements from a more general selector. Inside the not, you can add another selector, which you don't want to apply the style too. Let's say I want all links in a paragraph to be red, except in the very first paragraph where they are the default color of the page.

p:not(:first-child) a { color: red; }

Cupcake ipsum dolor sit amet chocolate cake. Faworki sweet cupcake toffee. Candy canes macaroon muffin cupcake. Marzipan applicake faworki cheesecake chocolate bar toffee pastry lollipop.

Cake candy canes marzipan tootsie roll liquorice candy canes donut marzipan. Sweet roll bear claw muffin cheesecake lollipop. Chocolate bar jelly-o powder tart.

Icing pie sweet fruitcake donut. Toffee lollipop ice cream gummies. Tiramisu cookie tart.

:before/:after

Pseudo-element - Last, but definitely not least, is the pseudo element selector. These selectors will actually generate a new element through the CSS, usually allowing for some aesthetic enhancement such as an icon or image to be added to an element. Pseudo elements can be very powerful, yet they can be very simple to learn. For example, if I wanted to add a star at the start of a paragraph and a happy face at the end (using simple Unicode characters), I could do something like:

p:before { content: '★'; }
p:after { content: '☺'; }

Cupcake ipsum dolor sit amet chocolate cake. Faworki sweet cupcake toffee. Candy canes macaroon muffin cupcake. Marzipan applicake faworki cheesecake chocolate bar toffee pastry lollipop.

JavaScript theo ngày


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web