`

使用CSS为图片添加更多趣味的5种方法.

阅读更多


1, 阴影效果.
通过使用带有一些padding之的背景图来添加阴影效果。
演示:
http://www.sohtanaka.com/web-design/examples/drop-shadow/dropshadow.htm
HTML:
<img class=”shadow” src=”sample.jpg” alt=”" />
CSS:
img.shadow {
            background: url(shadow-1000×1000.gif) no-repeat right bottom;
            padding: 5px 10px 10px 5px;
}

2,双边框效果
这应该是目前最常见的技巧,我们通过以下方式创建说边框。
演示:
http://www.sohtanaka.com/web-design/examples/drop-shadow/doubleborder.htm
HTML:
<img class="double-border" src="sample.jpg" alt="" />
CSS:
img.double-border {
    border: 5px solid #ddd;
    padding: 5px; /*Inner border size*/
    background: #fff; /*Inner border color*/
}
3,图片外框效果
webdesignerwall.com





看起来效果不错而且有DEMO效果.....不防去看一看.很帅气!!!!!!

上有最好的讲解,这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题,可以参考这篇教程。
演示:
http://www.sohtanaka.com/web-design/examples/drop-shadow/framed.htm
HTML:
<div class="frame-block">
    <span> </span>
    <img src="sample.jpg" alt="" />
</div>
CSS:
.frame-block {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.frame-block span {
    background: url(frame.png) no-repeat center top;
    height:335px;
    width: 575px;
    display: block;
    position: absolute;
}
4,水印效果
你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印。
演示:
http://www.sohtanaka.com/web-design/examples/drop-shadow/watermark.htm
HTML:
<div class="transp-block">
    <img class="transparent" src="sample.jpg" alt="" />
</div>
CSS:
.transp-block {
    background: #000 url(watermark.jpg) no-repeat;
    width: 575px;
    height: 335px;
}
img.transparent {
    filter:alpha(opacity=75);
    opacity:.75;
}
5,为图片添加说明文字
使用绝对定位和透明度的设置来添加灵活的说明。
演示:
http://www.sohtanaka.com/web-design/examples/drop-shadow/caption.htm
HTML:
<div class="img-desc">
    <img src="sample.jpg" alt="" />
    <cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>
CSS:
.img-desc {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.img-desc cite {
    background: #111;
    filter:alpha(opacity=55);
    opacity:.55;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 555px;
    padding: 10px;
    border-top: 1px solid #999;
}
本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=1197
分享到:
评论

相关推荐

    jquery css3图片网格布局点击显示更多内容.rar

    【jQuery CSS3 图片网格布局】是一种常见的网页设计技术,用于在有限的页面空间内展示多张图片,并通过交互方式展现更多的内容。在这个项目中,"jquery css3图片网格布局点击显示更多内容.rar" 提供了一个实现这一...

    15种CSS3图片Hover悬停效果代码.

    在网页设计中,用户体验往往受到交互细节的...开发者可以根据项目需求,灵活组合和定制这些效果,为网页注入更多活力和个性。通过熟练掌握CSS3的这些特性,设计师可以创造出更加吸引人的用户界面,提升网站的整体品质。

    15种CSS3图片Hover悬停效果代码,超级实用

    本文将详细介绍15种利用CSS3实现的图片Hover悬停效果,帮助你为网站增添更多动态魅力。 1. 渐变变换 一种常见的Hover效果是通过CSS3的`transition`属性实现颜色渐变。例如,当鼠标悬停在图片上时,图片背景色可以从...

    18种炫酷CSS3动画效果库Mimic.css

    与知名的animate.css类似,Mimic.css以简洁易用的方式为网页增添动态元素,为设计师提供了更多创意表达的可能性。 ### CSS3动画基础知识 在深入探讨Mimic.css之前,我们需要了解一些CSS3动画的基础知识。CSS3动画...

    css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦

    《CSS3与HTML5绘制哆啦A梦:技术解析与应用》 在现代网页设计领域,HTML5和CSS3的应用已经越来越广泛,它们为开发者带来了更丰富的...在未来的网页开发中,HTML5和CSS3将会发挥更大的作用,带来更多令人惊叹的作品。

    CSS3网页图片加载动画代码.zip

    在网页中,图片加载动画能够为用户带来视觉上的趣味性,同时也可以掩盖图片加载时间过长的尴尬,提升网页的交互体验。CSS3中的关键帧动画(@keyframes)是实现这种效果的关键。通过定义动画的不同阶段,我们可以控制...

    jQuery html5 css3图片翻转特效_水平垂直360°

    "jQuery html5 css3图片翻转特效_水平垂直360°"是一个综合运用现代Web技术实现的交互式图像展示方法,它结合了jQuery的事件处理和动画控制,HTML5的结构和数据存储,以及CSS3的强大样式和动画功能,为用户提供了一...

    jQuery+CSS图片内容滑动效果

    这种效果使得多张图片可以自动切换,形成一种平滑的视觉流动,既节省空间又增加视觉趣味性。 jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax交互。使用jQuery实现图片轮换,可以...

    CSS3悬停图片线条边框动画特效.zip

    【CSS3悬停图片线条边框动画特效】是一种利用CSS3技术实现的交互式设计,主要应用于网页中的图片展示,当鼠标指针悬浮在图片上时,图片的边框会以线条的形式动态显现,为用户提供视觉上的反馈和交互体验。...

    纯CSS3表情图片旋转动画特效.zip

    【纯CSS3表情图片旋转动画特效】是一种利用CSS3特性实现的动态视觉效果,它将卡通表情图片设计成可旋转的动画,为网页增添趣味性和互动性。在现代网页设计中,这种效果常用于吸引用户的注意力,提升用户体验,特别是...

    css3 animation网页logo图片加载动画特效

    在网页设计中,CSS3 Animation是一种强大的工具,用于创建丰富的动态效果,比如我们今天要讨论的"网页logo图片加载动画特效"。这个特效能够提升用户体验,使得网站在内容加载时更具吸引力,不再枯燥乏味。下面我们将...

    jQuery+CSS3相册上传全选/取消多张图片选择动画

    此外,CSS3的`transform`属性配合`animation`可以实现图片的弹跳动画效果,使得用户交互更具趣味性和反馈感。 在实际应用中,为了实现图片预览,我们可以使用HTML5的File API,读取用户选择的图片文件,并利用`...

    Flyaway.css-炫酷纯CSS3纸飞机动画特效

    总的来说,Flyaway.css是一个创新且实用的CSS3库,它利用了CSS3的动画特性,为网页增加了趣味性和互动性,尤其适合需要视觉反馈的场景。通过深入理解和应用,开发者可以创建出更多独特且引人入胜的网页效果。

    javascript+css图片轮换/旋转/相册特效

    JavaScript 和 CSS 是网页开发中的两种关键技术,用于实现丰富的交互性和视觉效果。在这个“javascript+css图片轮换/旋转/相册...通过学习和实践这些代码,开发者可以提升自己的技能,为网站增加更多的互动性和趣味性。

    Wrox.Beginning.CSS.3rd.Edition.2011

    每章都针对一个或多个CSS属性进行详细讲解,包括如何使用、最佳实践以及一些常见问题的解决方法。 ### 第三部分:高级CSS和替代媒体 #### 14. Advanced Selectors(高级选择器) 随着CSS版本的不断更新,引入了...

    CSS3趣味万圣节动画场景特效

    【CSS3趣味万圣节动画场景特效】是一个利用CSS3技术构建的互动式网页特效,旨在为用户带来独特的万圣节氛围。...通过分析和解构这个项目,开发者能够提升自己的CSS技能,为网页增添更多创新和有趣的视觉元素。

    div css鼠标悬停图片细节说明代码.zip

    在网页设计中,CSS(Cascading Style Sheets)与HTML是构建页面布局和样式的基石。...如果你正在寻找一种方法来让自己的图片展示更加生动,这种“div css鼠标悬停图片细节说明代码”无疑是一个值得尝试的解决方案。

    CSS3鼠标经过图片上移特效代码

    总的来说,CSS3鼠标经过图片上移特效是一种增强网页交互性和用户体验的实用技巧,通过`:hover`、`transform`和`transition`等CSS3特性,可以轻松实现这种动画效果,为网站增添一份生动与趣味。在实际开发中,结合...

    css3 flyaway.css制作飞机飞行动画特效

    你也可以调整动画参数,比如改变飞行速度、飞行方向,或者添加更多的关键帧以增加动画的复杂性。 此外,为了使动画更具互动性,可以结合JavaScript实现点击触发动画的功能。例如,当用户点击按钮时,飞机元素开始...

    纯css3实现鼠标悬停后图片散开动画特效.zip

    标签“JS特效-图片相册”表明这个示例可能与一个更复杂的图片展示应用有关,可能涉及JavaScript来控制多个图片的展示和动画效果。在实际项目中,可能还需要考虑到浏览器兼容性、性能优化以及用户体验等因素。 综上...

Global site tag (gtag.js) - Google Analytics