Providing supplementary information about potentially complex elements of a user interface is a central part of any website designer or developer’s workflow in creating usable and accessible websites.
One of the most common mechanisms for providing extra details beyond what you can see on the page is the tooltip (a design pattern for showing tips about a particular element on a screen).
Fonts on the Web
The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them.
Technologies like Cufon, sIFR, FLIR and
@font-face all represent different groups of developers placing bets on what they believe to be the future of web typography.
There is, as of yet, no consensus in this ever-evolving game. All of these methods have perfectly valid arguments both for and against their use.
Further, even the most popular browsers support each of these technologies in widely varying degrees.
Most notably among the various cool and interesting features you can find being injected into a design is the humble lightbox (modal window).
Seeing CSS3 on actual functioning websites is a lot like spotting a Himalayan Snow Leopard or a Giant Panda. Because roughly 53 percent of browsers in use don’t support CSS3 (ahem, IE, ahem), most web designers just don’t use it on a regular basis. At least they don’t use it on sites they design for work. As such, most people don’t see it regularly, and if they do, it’s just a fleeting glimpse.
With all these CSS3 effects and tutorials popping up every day that show all the new and wonderful things we can make happen, we sometimes forget about poor little old CSS2.1 and the great potential it still has.
With very good browser support, we can do lots of cool things that we know will work in all major browsers.
In this tutorial, I will be going over creating flexible advanced hover techniques using CSS2.1 properties.
Here is a live demonstration of the effect we will be creating.
In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: "Jacob already wrote a Photoshop tutorial on how to do that."
That is correct, but this time we are going to do it using only CSS.
After 13 years of being a vital part of web designs, Cascading Style Sheets (CSS) has evolved into a powerful tool, allowing you to develop more efficient and better-looking sites. Many of the new features in the latest CSS revision (CSS3) are rich and take the quality of our designs to the next level.