rtCafe » css

Homer Simpson Rendered with CSS3

R@XiT — Sat, 04 Feb 2012 11:57:55 +0000

Homer Simpson Rendered with CSS3

Mac OS X Lion emulated in your web-browser using CSS 3

R@XiT — Wed, 25 Jan 2012 03:57:28 +0000

Check @

http://www.alessioatzeni.com/mac-osx-lion-css3/

IE7 vertically centering image inside a div

Pranav Mhapsekar — Wed, 04 Jan 2012 18:34:32 +0000

To vertically center an image inside a div tag we can use display:table-cell and vertical-align: middle as the css for the div , which will work for modern browsers.
Lets take an example
Suppose I have the following markup.

We can apply the following css to get the image vertically as well as horizontally(text-align:center) centered
.image {
display: table-cell;
height: 120px;
text-align: center;
vertical-align: middle;
width: 175px;
}

Now to get the same effect on IE7 (since IE7 doesn’t support table-cell value for display) we can use jQuery.
The code is given below
jQuery(‘.ie7 .image img ‘).each(function () {
var img_height=jQuery(this).height();
var padding_value=(120-parseInt(img_height))/2+’px’;
jQuery(this).css(‘padding-top’,padding_value);
});

This code will vetically center all images contained in the div having the class “image”
var padding_value=(120-parseInt(img_height))/2+’px’; on this line 120 refers to the height of the div

Note:Image dimension should be less than the “div” dimension

overriding (!important) of css by using jQuery

Pranav Mhapsekar — Mon, 19 Dec 2011 14:09:47 +0000

Guys,
If you are stuck with CSS which is having !important as a value for the property and as you must be knowing, jQuery doesn’t use !important value, and lets suppose it is a “must” thing for you to change the value through jQuery,then, you can use cssText property.

Here is an example,
Suppose i have a CSS statement.
#rtp-nav-menu li ul { display: none !important; color:#000000;}
jQuery for this is
jQuery( ‘#rtp-nav-menu li ul ‘).css({‘cssText’: ‘display: block !important’,'color’:'#000000′});

Remember that you give cssText property first as it overrides any style associated with the particular element.

Check out the Pseudo elements

Pradeep — Wed, 30 Nov 2011 12:22:06 +0000

Check out the Pseudo elements videos by Chris Coyier.. He has explained it very well.. specially “Front End Design Conference”!!

Results of Group Design Project on Rating Three Candy Bars | CSS-Tricks

Rahul Bansal — Fri, 11 Nov 2011 09:27:13 +0000

A very good compilation! This proves there are many ways to do same task!

Results of Group Design Project on Rating Three Candy Bars

Style a File Browse Button with CSS

Pradeep — Tue, 18 Oct 2011 09:38:23 +0000

http://htmlcampus.com/style-a-file-browse-button-with-css/

You can also check the styling here: http://demo150.rtcamp.biz/
Click on the contact form link in the menu..

Font Size Conversion Chart – webSemantics

Rahul Bansal — Tue, 09 Aug 2011 16:32:00 +0000

Font Size Conversion Chart – webSemantics.

How to add images and styles to the WordPress custom menu | WP Garage

Rahul Bansal — Sat, 11 Jun 2011 09:32:33 +0000

How to add images and styles to the WordPress custom menu

How many of you knew this already! Please comment.

Wufoo Blog · How to Use Custom CSS to Further Customize the Look of your Wufoo Forms

Rahul Bansal — Sat, 28 May 2011 10:54:23 +0000

This will help us very much while writing CSS for wufoo forms…

Wufoo Blog · How to Use Custom CSS to Further Customize the Look of your Wufoo Forms.

Direct Link to infographics - http://farm6.static.flickr.com/5085/5730351194_69b599cc03_o.png