List Of Best CSS Techniques
CSS has fundamentally changed web design, it has provided designers with a set of properties that can be tweaked to make various techniques to make your pages just look right. There are many articles have written by web-developers about CSS in last few years and developed many useful time saving techniques.
Let’s take a look at CSS-based techniques you should always have ready to hand if you develop web-sites. Stay tuned and Enjoy!
Custom Reading Width - Custom Reading Width Beta is specifically geared towards those that have liquid, or full-width layouts. Jakob Nielson already tells us to use a liquid layout, but users at higher resolutions suffer when it comes to reading text on screen. Custom Reading Width, when implemented on a site, allows a user to select the desired reading width.
Dynamic Piechart with CSS - This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries.
Displaying Percentages with CSS
Creating a Star Rater using CSS
CSS-Based Forms: Techniques - In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, so web-forms are becoming more and more important for the success of any company. In the end, exactly those web-forms are responsible for the first contact with potential customers. Let’s take a look, which modern solutions a web-developer can use, designing his/her next css-based form.
CSS Map Pop - An image map can be very useful but normally employs JavaScript. Not this time. This experiment uses a single unordered list and a pair of spans to create such a map, with CSS pop-ups providing more information about the mapped hot-spots.
Link Thumbnail - A little bit JavaScript, a little bit CSS and a little bit clairvoyance, Link Thumbnail shows users that are about to leave your site exactly where they’re going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page. It’s a nice visual cue that serves a very real purpose: providing a clearer picture (no pun intended) of what’s ahead.
CSS Image Pop-Up - When you hover your mouse over the thumbnail the larger image appears beside it. Move your mouse off the thumbnail image to pop-down the enlarged image. The large image is already displayed at 1px by 1px then “pops up” on mouse over.
How to Create a Block Hover Effect for a List of Links
Drop Cap - Capital Letters with CSS
CSS Rounded Corners Roundup (Nifty Corners) - This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it’s hard to know which one to choose. To that end I’ve provided some more information about each method in order to help people choose which best fits their needs. Some of these techniques use CSS and one or more background images, some use CSS, JavaScript and no images, and a couple use only CSS — no images or JavaScript required (more markup is needed though).
CSS Shadows (CSS Shadows Roundup) - Now, the CSS. The div that contain the image is floated left, and a 6 pixels padding is specified on bottom and right sides to leave room for the background image. Then the image is shifted 3 pixels up and left by using relative positioning with negative values, and a white frame with grey border is added to get a nicer effect. Here’s the CSS, with key declaration emphasized:
Adam’s Radio & Checkbox Customisation Method
Turning a list into a navigation bar - I’ve cleaned up the HTML and CSS slightly, so if you compare this to what is actually used on the site there will be some small differences. In case I have redesigned by the time you read this, check out the finished example to see what the menu looked like at the time of this writing.
Uberlink CSS List Menus - What if you could make a great looking CSS navigation bar that looked and behaved like an image swapping menu? And what if it used just two images to power an unlimited number of links? And what if you could easily automate highlighting the current page link? If you’d like to learn how to make such a menu, please read on.
Inline Minitabs - One of the most underestimated part of CSS are inline boxes. Probably most of you know the CSS specifications on the subject, but if you haven’t read it, I suggest to look at the article on inline formatting model, by Eric Meyer, one of the most in-depth articles on CSS I’ve ever read for its level of detail.
2 Trackback(s)