CSS Tips & Tricks

CSS Tips & Tricks

Rounded corners and shadowed boxes (fixed Width)


CSS3 will have properties to make rounded borders, borders consisting of images and boxes with shadows, but with some work you can simulate some of them already with CSS2 — and without any tables or extra mark-up. But unfortunatly CSS3 is not supported by IE, here is CSS2.1 example to create Rounded corners and shadowed boxes.

Rounded corners in CSS (Fluid Width)


Rounded corners in CSS has become sort of a holy grail. The problem with most of the rounded corner techniques is that they require alteration of the HTML document itself, which means that retrofitting it onto an existing design may require a lot of effort. However, there is a solution that will allow you to retrofit this to existing designs without altering any markup. Take a look at the example.

Rounded Corners Without Images!

A very nice tool from where you can generate CSS and HTML code for code for Rounded Corners Without Images..

A pinned-down menu


The menu you see in the left of this page is simply a DIV with some A elements inside. All the work to make it stay fixed in its place is done by rules in the style sheet. Here is the mark-up, it is taken straight from the source of this page:


A confetti menu


The colorful menu you see abovc is simply a DIV element with a few P elements inside. The visual effect is due to the fact that each P element is positioned individually and has its own font and color. It works best with short texts, because the visual effect is based on overlap, but if the text is too long, it overlaps so much that it becomes hard to read.

Text Tricks

Daisy likes the way the drop cap makes its own little box, which is a good reminder that everything in CSS is a box. And because it is a box we can take our crayons out and color the background and outline the box. The letter "D" for Daisy is in a box, the paragraph is a box, and every piece of text here is in a box. The code for the dropcap is simple, but we can fancy it up a bit. We use the inline CSS for fiddling with the look. We put our drop cap in a span




CSS-Based Forms

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


Image floats, without the text wrap

How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image? You’ve tried to accomplish this before, but what you really need is something that plays nicely with any HTML & any amount of content you, or more realistically, your database can throw at it. The example below can easily fall apart without the proper CSS in place:


CSS-Based Tables

We coninue to present some of the best CSS-techniques which web-developers can always use working on their current web-project. Recently we’ve taken a look at the best css-based forms, today we present some useful techniques for displaying information in a tabular mode. In fact, tables can present data quite efficiently, particularly if you can use some sorting or filtering functions in order to improve the legibility of the text stored in the table. Furthermore, Zebra tables are becoming more and more popular, and the techniqies supposed to enhance their functionality appear on a weekly basis.


More CSS Tips & Tricks

Here are around 10 new and 10 older version of Tips & Tricks of CSS, they all are nice…