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).
I was recently working on a personal project where I wanted to implement some cool “checkmark” icons like you see at left to spice up my unordered lists. I could’ve done it quite easily with the list-style-image property, but I was trying to keep my images and http requests to a minimum, so I wanted to figure out another way to do it (plus, the challenge sounded kind of fun.
Over the last years we’ve got a pretty good understanding of what CSS does, how it works and how we can use it for our layouts, typography and visual presentation of the content. However, there are still some attributes that are not so well-known; also, CSS3 offers us new possibilities and tools that need to be understood, learned and then applied in the right context to the right effect.
Last week, I published a massive roundup of HTML5 resources, articles, tips and techniques, and it was a big hit within the design and development community. Since HTML5 is only of the upgrades that is being rolled out, I thought it would be appropriate and helpful to assemble a set of CSS3 resources.
There are hundreds upon hundreds of Javscript based image gallery/slider plugins and techniques you could choose from, all offering something different, all of them offer a whole lot of interactivity and most are relatively easy to use and install. So, the question is, why would you even consider a pure CSS alternative?
Because CSS3 is AWESOME. Its moving at an amazing rate of knots, with new techniques and fresh ideas being published almost every day, pushing its own boundaries ever further, lessening our reliance on Javscript.
HTML5 and CSS3 are really revolutionizing the worlds of web development and web design, because they are bringing so many new features to work with to the fields. I have been spending much of my time working with both HTML5 and CSS3 in order to learn more about the two, and have learned that you can do everything from animation to rounded corners to amazing effects and fonts to easy offline line capabilities. In this post, I tried to collect some great tools that can help you to master these new features of both HTML5 and CSS3, by putting together an ultimate list of tools. Even though many of these features are not fully supported yet, as web developers and designers we should always be thinking about the future! I hope you find these tools helpful! Enjoy!
The challenge for any web designer is to create style sheets that are unique, distinctive and can be replicated in a way that will create brand recognition. To that end, the future of CSS typography is an ever evolving and changing field that is constantly being updated, altered, and manipulated to both meets the growing demands of clients and the challenging demands of the market.
One of the huge benefits to using CSS3 is the ability to create image-like effects without the use of images. CSS3 gradients, shadows, and rounded corners have helped designers greatly in this area.
While browsing the website of well-known web hosting company Media Temple, I stumbled upon their Labs page and noticed they’re using a block hover effect on the list of items, and the hover state uses (what I assume is) the border-radius property when the background becomes visible.
Today will discuss about some basic properties of css3. Last week one of our reader asked me to post an article based on css3 basic and advanced properties so today we come up with some css3 basic properties. Border Radius , Box Shadow, Text Shadow, Text Stroke, Radial Gradient, Rotate, Reflection, Resize, Outline …
Today I will show how to create the above subscription box using simple HTML markup and a few advanced CSS3 properties. I believe CSS3 is the future and the sooner you can jump on the CSS3 band wagon the better. All the stylish shadows and gradients used are rendered using CSS properties which can be experimented with to produce some fantastic results.
