Really Useful CSS Tips and Tricks for Web Designers and Developers

Author: | Posted in CSS 5 Comments

css-tips-tricks-530
CSS (Cascading Style Sheet) is most important language technique for web designing and development, we mostly prefer in our modern designs where some new techniques also introduce like CSS3 and some third party scripts as well which can help in latest website designs.

Now CSS (Cascading Style Sheet) offering many advanced advantages which helping in table-less and web 2.0 designs, as you know number of websites about CSS tips, but we choose some very useful techniques which you cannot ignore as designer or developer.

How To Create an IE-Only Stylesheet

1

Figures & captions

2

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

3

Get a Consistent Base Font Size

Until IE finally supports the resizing of text in pixels, this is the best technique to gain full control over your font sizes. By setting the body font-size to 62.5%, that will set your font size to 10 pixels. That way, 1em is equal to 10 pixels.

Although I typically then set my container font-size to 1.2em, which in turn sets the font-size to 12 pixels. But still, then you know that 1em is equal to 12 pixels.

4

Avoid CSS hacks, use future proof method

5

Nifty Corners: rounded corners without images

6

CSS Sprites

CSS sprites is the technique of combing images to lessen the number of calls that need to be made to the server. Then you just shift the position of the background image to view the correct part of the image. May sound complicated, but it just takes a little math. Note: In both of these examples, I am using the Image Replacement technique discussed above.

7

The CSS Overflow Property

8

Poll Results: Hyphens, Underscores, or camelCase?

9

A pinned-down menu

10

The CSS Box Model

11

Alternative style sheets

12

CSS Ratings Selector

13

A confetti menu

14

Rational Z-Index Values

15

CSS Tabs

16

CSS For Bar Graphs

17

Even/odd: coloring every other row

18

Adam’s Radio & Checkbox Customisation Method

19

The ‘:target’ pseudo-class

20

5 Techniques to Style Buttons using Images and CSS

21

CSS Image Replacement for Buttons

22

CSS Unordered List Calender

23

Drop shadows (using css)

24

CSS-Based Forms: Techniques

25

Rounded corners and shadowed boxes

26

CSS-Based Tables: Techniques

27

Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome

28

Image Floats without the Text Wrap

29

Dynamic Piechart with CSS

30

Creating rounded corners (the “Deviant art’s” way)

31

Comments
  1. Posted by Hermitbiker
  2. Posted by Paola
  3. Posted by wparena
  4. Posted by aj
  5. Posted by Jason Bourne

Add Your Comment