[css-d] drop shadows
hey all, Is there a good way to get a drop shadow on text using css? I've got something that seems to work in Safari, and in FireFox 3.6.8 on a mac, but I think that's about it. I can't really fake this with an image or duplicated text - the site needs to work for people who will be increasing text size and also for those who will be using a screen reader. http://sandyfeldman.com/ana/8test.shtml http://sandyfeldman.com/ana/css_js/8test.css any suggestions are much appreciated. thanks! Sandy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
Hi!
The CSS way is using text-shadow:
h1 {text-shadow: 3px 3px 3px #ccc}
Another way is using 2 wrappers:
h1spanText/span/h1
h1 span {
position: relative;
top: 3px;
left: 3px;
color: #ccc;
}
Finally, you can use image replacement and graphics:
h1 {
background: url(text.png) no-repeat 0 0;
text-indent: -1000em;
height: value;
}
HTH ^^/
http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://onwebdev.blogspot.com/ (English)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
Is there a good way to get a drop shadow on text using css? You're using it. I've got something that seems to work in Safari, and in FireFox 3.6.8 on a mac, but I think that's about it. Actually, it works in Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+, on all platforms. Only IE doesn't play ball. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
Am 09.08.2010 17:46, schrieb Climis, Tim: Is there a good way to get a drop shadow on text using css? You're using it. I've got something that seems to work in Safari, and in FireFox 3.6.8 on a mac, but I think that's about it. Actually, it works in Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+, on all platforms. Only IE doesn't play ball. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ For IE you could take a look here: http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows Best regards Christian Kirchhoff *Editura GmbH Co. KG* Tempelhofer Damm 2 · 12101 Berlin www.editura.de AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548 Geschäftsführer: Ralf Szymanski __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
sfeld...@sympatico.ca wrote: hey all, Is there a good way to get a drop shadow on text using css? I've got something that seems to work in Safari, and in FireFox 3.6.8 on a mac, but I think that's about it. Others have answered your quesion. I can't really fake this with an image or duplicated text - the site needs to work for people who will be increasing text size and also for those who will be using a screen reader. Then set no font less than default, and ditch the Verdana and MS stuff: Arial, Helvetica, sans-serif will do. Letter-spacing content text is not helping their cause. You are dropping the right col with a heavy + hand-- and same if minimum font-size is set in the prefs at 24 in FF and 32 in Opera. If you use em you'll need to declare font-size 100% on html or the fonts will go totally goofy in IE when scaled. http://sandyfeldman.com/ana/8test.shtml any suggestions are much appreciated. thanks! Sandy Best, Helen K. Tuscumbia, Alabama -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
hi Tim, hi Gabriele, Thanks for your help with my efforts to get some drop shadows going. I think this is the best approach http://sandyfeldman.com/dstest/dstest3.shtml though it doesn't work with everything. http://www.browsercam.com/public.aspx?proj_id=525331 I'm afraid I can't use repeated offset text, since this would be repetitive and confusing for the screen reader users, and I can't use an image, since it wouldn't always get bigger when the user increases text size. thanks again for taking the time. best regards, Sandy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
the site needs to work for people who will be increasing text size and also for those who will be using a screen reader. Then set no font less than default, and ditch the Verdana and MS stuff: Arial, Helvetica, sans-serif will do. Letter-spacing content text is not helping their cause. You are dropping the right col with a heavy + hand-- and same if minimum font-size is set in the prefs at 24 in FF and 32 in Opera. If you use em you'll need to declare font-size 100% on html or the fonts will go totally goofy in IE when scaled. Hi Helen K. - or is this David? Thanks for your input. I've made some changes http://sandyfeldman.com/ana/10test.shtml and I have some questions - why not Verdana or trebuchet MS? letter-spacing on browser text is often really tight - a small bit of opening up seems to increase legibility to me. I can understand objecting to the kind of spacing that ends up looking like t h i s but a .1em just looks to me like it makes things better. Is there something I'm not thinking of? I'm not sure what you mean by You are dropping the right col with a heavy + hand-- thanks again for taking the time to help me think about this. Sandy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
Sandy wrote: the site needs to work for people who will be increasing text size and also for those who will be using a screen reader. Then set no font less than default, and ditch the Verdana and MS stuff: Arial, Helvetica, sans-serif will do. Letter-spacing content text is not helping their cause. You are dropping the right col with a heavy + hand-- and same if minimum font-size is set in the prefs at 24 in FF and 32 in Opera. If you use em you'll need to declare font-size 100% on html or the fonts will go totally goofy in IE when scaled. Hi Helen K. - or is this David? Thanks for your input. I've made some changes http://sandyfeldman.com/ana/10test.shtml and I have some questions - why not Verdana or trebuchet MS? Use whatever does it for you and your clients /visually impaired users/. Neither of the above fits the bill in my book. Verdana was designed in 1996 for low resolution monitors in use at that time. It is ugly at default and larger. Trebuchnet MS is not much better. Why you should avoid the Verdana font http://www.xs4all.nl/~sbpoley/webmatters/verdana.html letter-spacing on browser text is often really tight - a small bit of opening up seems to increase legibility to me. I can understand objecting to the kind of spacing that ends up looking like t h i s but a .1em just looks to me like it makes things better. Is there something I'm not thinking of? Do whatever does it for you and your clients /visually impaired users/ with the content text. Generally it is not a good practice to tinker with a type-designers text font. I'm not sure what you mean by You are dropping the right col with a heavy + hand-- Hold the ctrl key [or apple key] and repeatedly bang the + key in FF. Current accessibility requirements, of which the /visually impaired/ qualify, call for use and funtionality of typography at *twice default.* You are also dropping at 24px minimum font-size in FF and at 32 minimum in Opera. thanks again for taking the time to help me think about this. May be you should ask some of your clients users what they think before making up their mind for them? Sandy Best, Helen -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Drop shadows on a non-white background
I want to use some drop shadows against a dark green background. All the tutorials I have found are for white backgrounds. (I even tried some of these with my background and the drop shadow didn't work.) Any ideas on how to create drop shadows against colored backgrounds? Thanks! __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop shadows on a non-white background
On 13/05/2009, at 9:56 AM, Ellen Heitman wrote: I want to use some drop shadows against a dark green background. All the tutorials I have found are for white backgrounds. (I even tried some of these with my background and the drop shadow didn't work.) If you are planning on creating your drop shadows in a graphics app (e.g. Photoshop) rather than via CSS then this list is the wrong place to ask I'm afraid. This is a CSS list. If you *are* doing it with CSS (only supported in Safari 3+ and Firefox 3.5) have a look at this: http://www.css3.info/preview/box-shadow/ All you need to do to make you shadow visible is make it darker (or make it white and go for a glow effect!) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop shadows on a non-white background
David Laakso wrote: Error Correction: text-shadow should read box-shadow Ellen Heitman wrote: I want to use some drop shadows against a dark green background. All the tutorials I have found are for white backgrounds. (I even tried some of these with my background and the drop shadow didn't work.) Any ideas on how to create drop shadows against colored backgrounds? Thanks! Very simple CSS drop-shadows on any background-color is easy enough to produce. http://chelseacreekstudio.com/ca/cssd/shadow.html Just a matter of using a darker shade of whatever the hue is for the shadow. Gets a little tougher trying to get the shades balanced when using two or more multiple shadows. The CSS3 text-shadow module could be a neat, easy and viable alternative, if it were not for the fact that it is so poorly supported cross-browser-- at least as of this writing. If you are trying to do a drop-shadow using images for the shadows; and, you have run into a CSS issue in positioning those images, you'll need to post a clickable link to the problem page. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Drop Shadows
Can anyone point me to a good tutorial on how to create drop shadows that tile vertically on either side of a main column? Thanks. -- Jamie Cantrell Creative Director Square 1 Creative ph. 703-738-9656 fax. 703-9974833 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Shadows
jamie cantrell wrote: Can anyone point me to a good tutorial on how to create drop shadows that tile vertically on either side of a main column? Thanks. If you mean using CSS to create drop shadows, you might look at these demos and see if you can modify same to meet your need? http://www.cssplay.co.uk/menu/shadow2.html http://www.cssplay.co.uk/menu/shadow.html Otherwise, Google for Photoshop or Gimp techniques. Regards, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Shadows
David Laakso wrote: jamie cantrell wrote: Can anyone point me to a good tutorial on how to create drop shadows that tile vertically on either side of a main column? Thanks. If you mean using CSS to create drop shadows, you might look at these demos and see if you can modify same to meet your need? http://www.cssplay.co.uk/menu/shadow2.html http://www.cssplay.co.uk/menu/shadow.html Otherwise, Google for Photoshop or Gimp techniques. Regards, ~davidLaakso Hi Jamie, And perhaps: a one page mini-tutorial http://home.tiscali.nl/developerscorner/css-discuss/test-dropshadows.htm with some examples and links. francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] drop shadows
hi, This is a pretty newbie question so please bear with me. I am styling a blog using css (duh), its going pretty well so far, but I can't figure out how to add drop shadows to the edges of the divs. I'm not sure if I can edit much of the structure of the page (I'm using blogger). Any suggestions will be much appreciated. my page: test.btswami.com/blog.html what I want to acheive: http://test.btswami.com/blog-layout2.png thanks in advance regards, Bala Clark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
Bala Clark wrote: I can't figure out how to add drop shadows to the edges of the divs. my page: test.btswami.com/blog.html what I want to acheive: http://test.btswami.com/blog-layout2.png Bala Clark Bala, This is one method for creating drop shadows for divisions: http://www.cssplay.co.uk/menu/shadow.html Best, ~dL -- David Laakso http://www.dlaakso.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
Nancy Smith wrote: Can anyone tell me how to add drop shadows to a div? I am doing my first site in CSS, so if it is too complicated, I will just pass. Not complicated at all, but require some extra wrapper-element(s). http://www.alistapart.com/articles/cssdropshadows/ ...shows one method. Plenty of others around. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
