Homer Simpson Rendered with CSS3
Tagged: css RSS Toggle Comment Threads | Keyboard Shortcuts
-
R@XiT
-
R@XiT
Mac OS X Lion emulated in your web-browser using CSS 3
Check @
http://www.alessioatzeni.com/mac-osx-lion-css3/
-
Pranav Mhapsekar
IE7 vertically centering image inside a div
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 divNote:Image dimension should be less than the “div” dimension
-
Pranav Mhapsekar
-
Pranav Mhapsekar
The markup is as follows
<div class=”image”>
<img alt=”imagetext” src=”http://imagepath”/>
</div>
-
-
-
Pranav Mhapsekar
overriding (!important) of css by using jQuery
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.
-
Pradeep
Check out the Pseudo elements videos by Chris Coyier.. He has explained it very well.. specially “Front End Design Conference”!!
-
Rahul Bansal
Results of Group Design Project on Rating Three Candy Bars | CSS-Tricks
A very good compilation! This proves there are many ways to do same task!
Results of Group Design Project on Rating Three Candy Bars
-
Radhe
@all must check this out “order of preference using only CSS”
http://tinkerbin.com/AcdTuJP0
-
-
Pradeep
Style a File Browse Button with CSS
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.. -
Rahul Bansal
-
Rahul Bansal
How to add images and styles to the WordPress custom menu | WP Garage
How to add images and styles to the WordPress custom menu
How many of you knew this already! Please comment.
-
Pradeep
Yes, I know this.. Thanks to Manish..
-
Prasad
Yes….Manish has already written an article for this on WpVeda:
” How to Add Custom Class to Individual Menu Items ”
http://wpveda.com/add-custom-class-individual-menu-items-wpnavmenu/Cool Na….!
-
Rahul Bansal
WOW…. That’s great
-
-
Tapan Bojja
Yes, I know this…I mostly refer this link to client in their theme manual.
-
rutwick.gangurde
Yes Sir, I have used this for styling the menu in NakedOffice… The orange colored tab on the extreme right in the main nav menu…
-
umesh.nevase@rtcamp.com
Yes Sir, I know it, used most ot the time for last or first menu item.
-
Santosh
I knew it.
-
sandeep.kumar
Yeah, usually I use this feature to change target
-
Manish Songirkar
Yes, I know that feature, as Prasad already mentioned above. First time I used this Feature in http://hypnotics.rtcamp.info/ Site.
-
-
Rahul Bansal
Wufoo Blog · How to Use Custom CSS to Further Customize the Look of your Wufoo Forms
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
Pranav Mhapsekar is discussing. 
Manish Songirkar, 
sandeep.kumar, 
Santosh and 6 others are discussing. 
Radhe 5:20 am on January 25, 2012 Permalink | Log in to Reply
Nice