A Web Development Blog Focused on Code and Technology
Currently Browsing: Home » Posts tagged 'css'
Posts Tagged ‘css’
A few months back, I wrote an article about Giving Elements Cool Effects Using CSS3. One of the major disappointments at the time of the writing of that article was a lack of support. Back then, Firefox, Safari, Chrome, and variants supported all effects, with Opera 10.5 slated to support them.
Now, Opera 10.5 has been released, and a wide variety of browsers support these effects, with the exception of Internet Explorer, which we all know will not support things like that natively for a while.
A few months back, I presented a stunningly simple CSS minifier that enables you to pack your CSS while still maintaining format and readability. Soon after that, I presented a system called Lateral Cache that you could use to store the minified CSS and deliver it quickly.
Although the Lateral Cache system works well and is great for general purposes, the CSS minifier can be aided by a more intelligent caching system. Well, what do I mean by that? That’s what you are going to find out.
Please note that the demo link above directs you to Lateral Code’s own CSS file, where intelligent caching is used.
CSS3 is full of cool new features. For example, last week we talked about CSS3 colors. In this post, I’d like to talk about some other cool features that CSS3 has to offer, and how you can access some of them now.
Traditionally, people using colors in CSS have dealt with either the hexadecimal format, which looks like this:
#ABCDEF or the rgb format, which looks like this:
CSS3 comes with a few new ways of manipulating colors, such as using HSL (Hue, Saturation, Light) and opacity/alpha-channels. Unfortunately, only Firefox 3+, Opera 10+, Chrome 1.0+ and Safari 3+ and a few derivatives fully support these at the moment, but we make do with what we can, seeing as Internet Explorer doesn’t even start supporting CSS3 elements until Internet Explorer 9.
Navigation is a vital part of all websites. Visitors must have ways to traverse through pages to find what they need. Top navigation is a specific style in which links are placed at the top of a website. In this tutorial, we will explore the creation of a pure CSS top navigation.
Note: This article is for CSS beginners!
What makes top navigation so special?
When a user first visits a site, they immediately see the top half of a web page. For a quick fact, this half is known as the area above the fold.