Beiträge getagged ‘css’

CSS rounded corners (with pure css)

13 July 2009

I generally get rounded corners just with css, if browser does not support they see the content with flat corners. If rounded corners are not so critical for your site you can use these lines below.

If you want to use all corners with same radius this is the easy way:

.my_rounded_corners {
  border: 1px solid #ccc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

but if you want to control every corner this is good:

.my_rounded_corners {
  border: 1px solid #ccc;

  -moz-border-radius-topleft: 10px;
  -khtml-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;

  -moz-border-radius-topright: 0px;
  -khtml-border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  border-top-right-radius: 0px;

  -moz-border-radius-bottomleft: 4px;
  -khtml-border-bottom-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;

  -moz-border-radius-bottomright: 10px;
  -khtml-border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

As you see in each set you have browser specific styles and on the fourth rows we declare in standard way by this we assume if in future the others (hopefully IE too) decide to implement the feature to have our style be ready for them too.

This works beautifully on Firefox, Safari, Camino, Chrome. For other browsers there are tons of other tweaks you can find by googleing.

Inline-block problem in firefox 1 & 2

29 November 2008

Inline-block is really nice feature of css2.1 and css3, but unfortunately you have to make a work-around to achive its result in firefox 2. Mozilla guys fixed it in firefox 3 but i believe there is still plenty of people using firefox 2 or older. So there is that trick which i mention…

	display: -moz-inline-block;
	display: inline-block;

This fixes the problem :)

CSS background shifting instead of changing images on hover

22 August 2008

Old an easy method but worth to mention it. Instead of creating two images and changing them on hover state, create just one image and shift them when necessary. For an instance:

this is our image. » Weiterlesen: CSS background shifting instead of changing images on hover