用CSS装饰相册

最新推荐文章于 2024-05-25 11:06:15 发布

liu_zhongjie

最新推荐文章于 2024-05-25 11:06:15 发布

阅读量660

点赞数

分类专栏： CSS 文章标签： css 相册框架 jquery styles safari

本文链接：https://blog.csdn.net/liu_zhongjie/article/details/4167915

版权

CSS 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

你喜欢我之前的关于生成渐变文字效果的CSS教程么？现在我将使用同样的技巧来展示如何不通过编辑源图片来装饰图片和相册。这个技巧非常简单，你只需要添加<span>标签，并附上一张背景图片就可以生成覆盖效果。这真的很容易并且很灵活——看看我的demos吧，里面有超过20种的效果类型，从简单的图片icon到伪层的圆角（效果不错，也不简单）

这个CSS技巧有什么好处呢？

节约时间——你不再需要用PHOTOSHOP来手工制作装饰用的专用模板.
保持源图片——这样你就不需要担心在将来要修改设计主题了.
非常灵活——修改CSS就可以改变图片的外观和感觉.
在所有网站上都可行——这个CSS技巧在任何类型的网站和任何尺寸的图片上都可行.
跨浏览器支持——它已经通过了大部分的浏览器测试（FF，Safari，Opera，甚至是“buggy IE6”）.

基本概念（看demo）

插入一个含有<div>标签的<span>标签,我们将提供一张背景图片来生成覆盖效果.如果你不喜欢有一个空的span标签,你可以用JS来添加(教程的后面我会展示).下面是那些代码:

在CSS文件里,你要记住的关键点是:将div元素设定为position:relative,将span元素设定为position:absolute.通过修改top和left属性,你可以将span元素放到任何你想放的地方.

IE PNG Hack

为了在IE6下让透明的PNG图片有透明效果,我用了这个不错的iepngfix.htc Hack.下载一个iepngfix.htc并将下面的代码插入到<head>标签中:



外观和感觉

简单地编辑span元素的CSS样式,就可以改变图片的外观和感觉.点击下面的图片可以看到我的demo,为了让你知道它有多灵活,我做了15种不同的效果(注意HTML标签是相同的).

JQuery的解决方案(看demo)

我知道有些人不喜欢在标记中添加空的span标签.所以呢,我用jQuery在源代码上添加span标签来解决这个问题.在<head>标签中插入下面的代码:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//prepend span tag
$(".photo a").prepend("<span></span>");

});
</script>

#1.简单的相册效果 (看demo)

让我们从预览开始,把这个技巧用到生产图片相册效果中,以这个方式来掌握这个技巧.

#1b. 迷你图标效果 (看demo)

这个例子展示了如何将不同的图标放到每张图片上去(注意:在span标签上需要增加一个CSS样式名)

#2. 带文字的效果 (看demo)

这个例子展示了如何创建一个带链接文字的相册(em标签)

#2b. 文字泡泡效果 (看demo)

#3. 迷你纸夹效果 (看demo)

#4. Cork Board 相册效果(看demo, IE6 版本)

sIFR 版本 (Flash Text Replacement) (看sIFR demo)

这个版本通过sIFR 来把手写字体的文字替换了em文字(注意:在这个demo中,span标签是通过jQuery添加的)

#4b. 带贴纸的Cork Board 效果 (see demo, IE6 version)

#5. 美术框架-黑色框架 (see demo)

#5b. 美术框架-金色框架 (see demo)

#6. 斑驳的水纹效果 (see demo)

sIFR 版(see sIFR demo)

#7. 光亮的样式 (see demo)

#8. 木质相册效果 (see demo)

Finally, this example demonstrates how you can apply the background image to all elements to create a wood panel gallery: ul, li, and em.

这个例子完全说明了如何通过给所有的元素添加背景图片来实现木质相册得效果:ul,li,和em.

说在最后的话

As you can see, this CSS trick is very flexible. So, be creative! Feel free to incorporate the graphic images and CSS styles in this tutorial to create your own.

正如你看到的,这些CSS技巧非常灵活.所以,希望你能有创造性些.希望你能自由地在本教程的基础之上自由发挥,写出有你自己特色的东西.