We pride ourselves on having the friendliest
and most welcoming forums for moms and moms to be! Please take a moment
for free so you can be a part of our growing community of mothers.
If you have any problems registering please drop an email to email@example.com.
Our community is moderated by our moderation team so you won't see spam or offensive messages posted on our forums. Each of our message boards is hosted by JustMommies hosts, whose names are listed at the top each board. We hope you find our message boards friendly, helpful, and fun to be on!
Ok I know css and use it alot while designing a web site, but there are still some things that I can not do, and have a hard time finding the right tutorial on how to do it. For instance in this website or this one, it has drop shadows that look real and not blocky. But every tutorial I find does not do this effect. Any ideas ladies?
Also I am really trying to figure out how to do rounded corners. On divs and on buttons. But again can't seem to find any good tutorials or sample code. I would love to have both rounded corners and drop shadows on this one website I am doing for a client, as that is what he wants, but can't do it.
So if there are any of you css'ers out there that know how to do this stuff and more, come out. I have some books I took from the library about css, but does not seem to mention either of these to. Now I know these things might seem so unimportant, but when a client wants it and I can't do it, I get so frustrated.
Thank you ladies. I know it's asking alot, but I have done my research and just can't find it. Any good tutorials or books you can recommend to learn css coding better???
You got me I'm weak in my CSS skills. If I can't make an effect in Photoshop it's not getting made. Hopefully someone else will chime in with some advice for you! Have you tried asking on the Adobe User to User forums?
Heidi, mama to 4 kiddos and an lost 11.25.13 at 11w5d
The shadows in both the sites you linked to are from images, not just CSS. You have to make the gradient shadows as images (in Photoshop you just add a drop shadow using the Layer tools, probably similar in other packages).
Similarly, rounded corners can't be done with CSS alone*. They're usually made by creating images of rounded corners, then using CSS to position those images as the background for the container DIV, for example creating an image for an upper left corner then styling the div -- background: transparent url(/images/ul.gif) top left no-repeat;
*CSS3 will include rounded corners, and Opera and Firefox already support it. Google moz-border-radius to find out how to use the Firefox version, but again, it will only work if the client browser is Firefox.
Sorry for my delay in posting...I have been extremely busy these days....if you want to look into a great book for learning CSS and how to make it work great with your site.."The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition" By Rachel Andrew is awesome and highly recommended by many of the webmasters and web developers I work with...This book covers layout, text (including shadows), and images...You will learn a lot I promise.
You'll find both those techniques in CSS Mastery by Budd, Moll, and Collison. Another excellent one for doing those advanced techniques and ensuring they work in all browsers and situations is Bulletproof Web Design by Cederholm. Seriously, if you've got the basics down, you need these advanced books
Mama to Monkey born Feb 24th, 2007, and Toddler born Nov 1st, 2005.