{"id":7928,"date":"2005-07-20T18:15:28","date_gmt":"2005-07-21T01:15:28","guid":{"rendered":"http:\/\/hill-kleerup.org\/blog\/wp\/2005\/07\/20\/picture-perfect-5.html"},"modified":"2005-07-20T18:15:28","modified_gmt":"2005-07-21T01:15:28","slug":"picture_perfect","status":"publish","type":"post","link":"https:\/\/hill-kleerup.org\/blog\/2005\/07\/20\/picture_perfect.html","title":{"rendered":"Picture perfect"},"content":{"rendered":"

When I commented on implementing the “YDSF” CSS drop shadows for images<\/a> here, Ginny<\/a> noted that the solution she used was a bit simpler, requiring just a single div statement. Well, yeah,<\/em> I thought to myself, but when I tried doing it a while back, I never could make it look right.<\/em><\/p>\n

Well, duh, I must have been stupid that particular day, because I copied over the code from her stylesheet, which she got from the A List Apart article on CSS Drop Shadows<\/a>, and …<\/p>\n

<\/p>\n

… hey, that is <\/em>easier. And it works. <\/em><\/p>\n

I tweaked the code just a scosh, so that it has two versions, a left-aligned and a right-aligned. I tend toward the latter, but sometimes mix it up if doing multiple images in a post or multiple posts with images in them. And I further tweaked the margins so that the right-aligned images get a bit of white space on the left, and the left-aligned ones the same on the right.<\/p>\n

The resulting code:<\/p>\n

.img-shadow-left {\nfloat:left;\nbackground: url(\/blog\/images\/decor\/shadowAlpha.png) no-repeat bottom  right !important;\nbackground: url(\/blog\/images\/decor\/shadow.gif) no-repeat bottom right;\nmargin: 10px 10px 0 10px !important;\nmargin: 10px 10px 0 5px; \/* increase 2nd number +10 to add rt margin *\/\n}\n.img-shadow-left img {\ndisplay: block;\nposition: relative;\nbackground-color: #fff;\nborder: 1px solid #a9a9a9;\nmargin: -6px 6px 6px -6px;\npadding: 4px;\n}<\/pre>\n
.img-shadow-right {\nfloat:right;\nbackground: url(\/blog\/images\/decor\/shadowAlpha.png) no-repeat bottom  right !important;\nbackground: url(\/blog\/images\/decor\/shadow.gif) no-repeat bottom right;\nmargin: 10px 0 0 20px !important;\nmargin: 10px 0 0 15px; \/* increase last number +10 to add left margin *\/\n}\n.img-shadow-right img {\ndisplay: block;\nposition: relative;\nbackground-color: #fff;\nborder: 1px solid #a9a9a9;\nmargin: -6px 6px 6px -6px;\npadding: 4px;\n} <\/pre>\n
So if I want to take an <img> statement and work this particular magic, I just frame it as such:<\/p>\n
<div class=\"img-shadow-right\"><img=\"randominage.jpg\"><\/div><\/pre>\n
Sweet.  And purty.  And simpler to use than the YDSF code.  And more flexible (by making a left- and right-aligned version I can customize the extra margin). And it behaves well on my machine in both Firefox and IE 6.  (Well, bearing in mind that my IE 6 rendering is a bit wonky.  I need to do something about that.)<\/p>\n
I want to do a bit more testing, but I think this particular solution is a go.<\/p>\n","protected":false},"excerpt":{"rendered":"
When I commented on implementing the “YDSF” CSS drop shadows for images here, Ginny noted that the solution she used was a bit simpler, requiring just a single div statement….<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3],"tags":[],"class_list":["post-7928","post","type-post","status-publish","format-standard","hentry","category-blogging"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":7992,"url":"https:\/\/hill-kleerup.org\/blog\/2005\/07\/06\/how_incredibly.html","url_meta":{"origin":7928,"position":0},"title":"How incredibly cool and … well … clumsy to implement","author":"***Dave","date":"Wed 6-Jul-05 6:50pm","format":false,"excerpt":"On the Six Apart ProNet, there's a spiffy article about how to straightforwardly put drop shadows around text or graphic elements using pure CSS, in a way that works in...","rel":"","context":"In "Blogging & Internet"","block_context":{"text":"Blogging & Internet","link":"https:\/\/hill-kleerup.org\/blog\/category\/blogging"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":12936,"url":"https:\/\/hill-kleerup.org\/blog\/2008\/09\/04\/another_google_reader_mys.html","url_meta":{"origin":7928,"position":1},"title":"Another Google Reader mystery","author":"***Dave","date":"Thu 4-Sep-08 1:47pm","format":false,"excerpt":"I post a fair number of pictures in my blog entries. Most are surrounded by a div element (for the drop shadow -- thanks again, Ginny), which seems to work...","rel":"","context":"In "Blogging - Technical"","block_context":{"text":"Blogging - Technical","link":"https:\/\/hill-kleerup.org\/blog\/category\/blogging\/blogging-technical"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7986,"url":"https:\/\/hill-kleerup.org\/blog\/2005\/07\/07\/we_will_control.html","url_meta":{"origin":7928,"position":2},"title":"We will control the horizontal …","author":"***Dave","date":"Thu 7-Jul-05 3:48pm","format":false,"excerpt":"I am aware I've managed to make my individual blog pages look a bit off, format-wise, by trying to incorporate some of the drop shadow CSS code. I need to...","rel":"","context":"In "Blogging & Internet"","block_context":{"text":"Blogging & Internet","link":"https:\/\/hill-kleerup.org\/blog\/category\/blogging"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13837,"url":"https:\/\/hill-kleerup.org\/blog\/2009\/02\/20\/theme-thelection.html","url_meta":{"origin":7928,"position":3},"title":"Theme Thelection","author":"***Dave","date":"Fri 20-Feb-09 9:25pm","format":false,"excerpt":"So I'm trying out the \"Amazing Grace\" theme, made \"famous\" by Ginny. There's quite a few customizations I plan to make, but that's all going to take some time, so be merciful until I indicate I'm actually kinda-sorta done. Things I plan to do: Sort out the widgets between the\u2026","rel":"","context":"In "Blogging - Technical"","block_context":{"text":"Blogging - Technical","link":"https:\/\/hill-kleerup.org\/blog\/category\/blogging\/blogging-technical"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13862,"url":"https:\/\/hill-kleerup.org\/blog\/2009\/02\/21\/theme-thelection-part-deux.html","url_meta":{"origin":7928,"position":4},"title":"Theme Thelection, Part Deux","author":"***Dave","date":"Sat 21-Feb-09 12:36am","format":false,"excerpt":"Okay, I'm pretty happy with how adapting the \"Amazing Grace\" theme is working for me. Most of the most obvious \"problems\" have been skinned.\u00a0 Done ... Change the theme from fixed width columns to variables, so that (within a few bounds) I can widen or narrow the window and get\u2026","rel":"","context":"In "Blogging - Technical"","block_context":{"text":"Blogging - Technical","link":"https:\/\/hill-kleerup.org\/blog\/category\/blogging\/blogging-technical"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9156,"url":"https:\/\/hill-kleerup.org\/blog\/2006\/02\/07\/testing_testing.html","url_meta":{"origin":7928,"position":5},"title":"Testing … testing …","author":"***Dave","date":"Tue 7-Feb-06 10:18am","format":false,"excerpt":"I periodically try out other blogging clients than my long-time favorite, SharpMT, just to make sure I'm not missing out on something keen. This week it's ecto, which has been...","rel":"","context":"In "Blogging & Internet"","block_context":{"text":"Blogging & Internet","link":"https:\/\/hill-kleerup.org\/blog\/category\/blogging"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/hill-kleerup.org\/blog\/wp-json\/wp\/v2\/posts\/7928","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hill-kleerup.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hill-kleerup.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hill-kleerup.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hill-kleerup.org\/blog\/wp-json\/wp\/v2\/comments?post=7928"}],"version-history":[{"count":0,"href":"https:\/\/hill-kleerup.org\/blog\/wp-json\/wp\/v2\/posts\/7928\/revisions"}],"wp:attachment":[{"href":"https:\/\/hill-kleerup.org\/blog\/wp-json\/wp\/v2\/media?parent=7928"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hill-kleerup.org\/blog\/wp-json\/wp\/v2\/categories?post=7928"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hill-kleerup.org\/blog\/wp-json\/wp\/v2\/tags?post=7928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}