CSS3 Questions Answered
June 17th, 2010
This is the first post in a new series that aims to help you, the reader, with your web design problems. To start it off, I’m asking you to submit any questions your might have about CSS3. Whether you’re interested in browser support, new selectors, properties, or anything else, feel free to post your question below.
What’s Your Question? Hit Me!
Feel free to ask anything CSS3 related. There are no stupid questions, so don’t feel intimidated to ask something you think might have a simple answer. Chances are, someone else has the same question. Simply post your question in the comments below, and I’ll reply asap.
Print This Post
Share this post
4 Comments on “CSS3 Questions Answered”
admin
Hi Stephan, try adding this property to the CSS.
border-collapse: collapse;
July 13, 2010 » 11:27 am
Stephan
Nope it doesn’t help, you mean to apply that rule on the image itself?
What I’ve figured out until now is that Firefox apply rounded corners only on transparency-background images and in order to see that effect a css background-color rule should be added or a solid border.
This is my progress for now :(
I hope your experience would add something to this matter.
July 14, 2010 » 6:37 am
admin
Hi Stephan,
sorry I missed this in your original question, -moz-border-radius doesn’t work on images in firefox yet. Only browser I’ve got it to work in is Safari, but it should work in any -webkit browser.
July 14, 2010 » 9:09 am
CSS3 Handbook iPhone App
10 tutorials to get you started with CSS3. Topics covered include: round corners, opacity, shadow, shapes, backgrounds, custom border, custom font, text effects, and fading. There is also a comprehensive list of CSS3 properties and which browsers support them.
Available for iPhone, iPad, and iPod Touch for only $2.99 $0.99 SALE. Learn More
Categories
Follow me
Mailing List
Stay up to date with all the latest news, apps, and tutorials by joining the mailing list.
Stephan
Hi Matt, my name is Stephan and I would like to ask you about a css3 issue.
It concerns the border-radius property.
So I’m using Jquery for a swap image effect like:
$(“#card-1″).mouseover( function(){$(“#Toucan”).attr({src:”images/t9tuqui.png”}).css(“-moz-border-radius”, “12px” ); })
.mouseleave( function(){$(“#Toucan”).attr({src:”images/t9tuqui_trans.png”}); });
and when applying
li img{border:solid 1px; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius:12px;}
the swap image is round-cornered only under safari :(
However if I apply a “solid border”-property on the images it works fine except that my design is ruined.
I hope there is a solution, appreciate any help and thanks in advance.
All best
Stephan :)
July 13, 2010 » 2:08 am