收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 6714|回复: 10

照片阴影效果代码

[复制链接]
发表于 2008-6-24 10:19:34 | 显示全部楼层 |阅读模式
仿Lightroom处理照片中自带的阴影效果,两个思路。

1. 四张图片适应所有规格,在HTML中固定外层div的宽度实现。

  1. .size_all {}
  2.         .size_all .br { background:url(bottom_right.jpg) no-repeat bottom right;}
  3.         .size_all .tr { background:url(top_right.jpg) no-repeat right top;}
  4.         .size_all .bl { background:url(bottom_left.jpg) no-repeat left bottom;}
  5.         .size_all .tl { background:url(top_left.jpg) no-repeat left top;}
复制代码

  1. <div class="shadow size_all" style=" width:840px; ">
  2.         <div class="br"><div class="tr"><div class="bl"><div class="tl">
  3.                 <a href="http://picasaweb.google.com/songvision/OCytBC/photo#5215092023382158194"><img src="http://lh6.ggpht.com/songvision/SF-6kISqq3I/AAAAAAAAAk0/LcdeG6qRodw/s800/P1150071.jpg" /></a></div></div></div></div>
  4. </div>
复制代码


2. 单图适应所有规格,在CSS中固定外层div的宽度实现。

  1. .size_800_450 { width:840px;}
  2.         .size_800_450 .br { background:url(shadow_bg.jpg) no-repeat 40px -110px;}
  3.         .size_800_450 .tr { background:url(shadow_bg.jpg) no-repeat 40px -600px;}
  4.         .size_800_450 .bl { background:url(shadow_bg.jpg) no-repeat -800px -110px;}
  5.         .size_800_450 .tl { background:url(shadow_bg.jpg) no-repeat -800px -600px;}
复制代码

  1. <div class="shadow size_800_450">
  2.         <div class="br"><div class="tr"><div class="bl"><div class="tl">
  3.                 <a href="http://picasaweb.google.com/songvision/OCytBC/photo#5215091997202620610"><img src="http://lh4.ggpht.com/songvision/SF-6imw-oMI/AAAAAAAAAks/QMSTqjYBld4/s800/P1150046.jpg" /></a></div></div></div></div>
  4. </div>
复制代码


尝试把shadow独立出来全局匹配,统一定义background-image和background-repeat,不过在FF下调试失败。

  1. .shadow { margin:15px auto;}
  2.         .shadow .br, .shadow .tr, .shadow .bl, .shadow .tl, {}
  3.         .shadow .tl { padding:20px;}
  4.         .shadow .img { vertical-align:middle;}
复制代码


演示 http://demo.rexsong.com/200806/photo_shadow/

[[i] 本帖最后由 一叶千鸟 于 2008-6-24 10:22 编辑 ]
发表于 2008-6-24 14:38:15 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2008-6-24 16:13:24 | 显示全部楼层
这样嵌套太多了吧 还不如滤镜来的方便
回复 支持 反对

使用道具 举报

发表于 2008-6-25 10:31:00 | 显示全部楼层
套的太多了,得不偿失~
回复 支持 反对

使用道具 举报

发表于 2008-6-25 11:53:35 | 显示全部楼层

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 marvellous 于 2008-6-25 11:57 编辑 ]
8765.gif
回复 支持 反对

使用道具 举报

发表于 2008-6-25 12:36:14 | 显示全部楼层
LZ的更艺术
回复 支持 反对

使用道具 举报

发表于 2008-6-25 15:24:53 | 显示全部楼层

回复 marvellous 在 5# 的帖子

用CSS滤镜,FF么搞
回复 支持 反对

使用道具 举报

发表于 2008-7-29 10:28:30 | 显示全部楼层
滤镜绝对不是什么好办法
为了实现阴影加多层嵌套也不是特别合理

我会选择给图片的父容器设置一个深色背景(如#999),右边框和下边框设置一个稍浅的颜色(如#333)
然后给图片一个相对定位,向上向左移动一像素(top:-1px; left:-1px)
回复 支持 反对

使用道具 举报

发表于 2008-7-29 10:30:20 | 显示全部楼层
再补充一下  这样自然是不如拿图片模拟的效果
就看在结构的语义化和视觉效果上如何取舍了
回复 支持 反对

使用道具 举报

发表于 2008-7-29 10:59:41 | 显示全部楼层
不如做个阴影图当背景用...
回复 支持 反对

使用道具 举报

发表于 2008-7-29 12:05:32 | 显示全部楼层
楼上谁发的美女跑步图,唉 美女就这样被你们糟蹋了!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-12-3 08:34 , Processed in 0.158776 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表