- 浏览: 357358 次
- 性别:
- 来自: 保定
文章分类
- 全部博客 (266)
- ERP (69)
- ERP-SAP-MM (50)
- ERP-SAP-FICO (23)
- ERP-SAP-HR (2)
- ERP-SAP-HU (1)
- ERP-SAP-BASIS (4)
- ERP-SAP-EWM (2)
- div+css (34)
- flex (9)
- 网页设计理论 (17)
- 网页代码理论 (1)
- 网页代码技巧 (12)
- UI设计理论 (6)
- flash (3)
- 界面设计 (14)
- 数码照片处理 (7)
- 影像处理 (1)
- logo设计 (3)
- 测试 (6)
- 习惯性思维 (6)
- 心情日记 (14)
- 印刷 (3)
- seo优化 (5)
- 人力资源eHR管理 (3)
- 项目管理相关链接 (1)
- PPT演示沟通 (5)
- 项目管理 (4)
- TAMM40_Part2.rar (1)
- SAP VIM (1)
- SAP使用公司 (1)
- 会计 (1)
- erp-sap-qm (1)
- WEB前端 (0)
最新评论
-
liomao:
火狐浏览器不通用吧?
收藏本站代码及设为首页代码 -
上善如水:
我刚刚开始写网页,看了不少的写作规范写作规范,可是还是有浏览器 ...
UL-LI 标签结合CSS的运用基础 -
ksmjava:
关于技术人员的前途,目前在国内确实得用"惨淡&quo ...
WEB前端设计师需要的技能 -
AlexChen_China:
Web开放工具是如此的丰富啊...初来乍道很多工具都不知道;
前端开发大众手册(包括工具、网址、经验等) -
xiaoqing20:
不错长见识了
什么是UI
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
发表评论
-
精通 CSS 造型设计元素
2010-01-20 13:35 1297CSS 是现代网页设计的重要基石。Web 标准要求使用 CSS ... -
你必须知道的10个不常用的HTML标签
2009-09-10 21:31 970http://www.qianduan.net/you-hav ... -
wofoo表单模板下载
2009-09-10 21:01 876http://wufoo.com/gallery/ -
加个地址栏图标
2009-08-23 21:56 785<link rel="shortcut ico ... -
解决IE8兼容性问题的便捷方法
2009-08-20 09:19 1245微软告知我们:在目前兼容IE 7 的网站上只需添加一行代码(加 ... -
div垂直居中
2009-08-20 08:08 974position: absolute; width:880 ... -
标准化良构之路
2009-08-10 15:24 836专题:标准化良构之路 标准化走到今天,当CSS被我们充分的接 ... -
Blueprint CSS 框架学习笔记概述
2009-07-17 23:34 1585这个 CSS 框架将 html 标签设定为如下情况: 统一 ... -
CSS框架思维雏形与CSS文件精简
2009-07-17 23:31 913假如在你切完所有图之后,假如你切的网站是娱乐性的网站.(重复性 ... -
CSS BUG顺口溜
2009-07-16 22:23 922CSS BUG顺口溜 一、IE边框若显若无,须注意,定是高度 ... -
用CSS替换传统方法
2009-07-16 18:16 868下面的列表将帮助你用CSS替换传统方法: HTML属性以及相对 ... -
UL-LI 标签结合CSS的运用基础
2009-07-16 13:46 1529LI代码的格式化: A).运用CSS格式化列表符: ul l ... -
css相关工具
2009-07-16 13:45 1033附加 工具 http://www.ziuo.cn/box/c ... -
DIV+CSS 命名规范
2009-07-16 13:44 11531.CSS ID 的命名 外 套: wrap 主导航: m ... -
Css单词英汉对照
2009-07-16 13:44 1014margin:页边的空白, (湖、池等的)边缘, 极限, 利润 ... -
Web标准概念--摘抄《CSS布局实录》
2009-07-16 13:43 1069前言 对于日常的很多事情,我们并没有注意到这背后都有着一个隐藏 ... -
用CSS做一个最简单的导航栏
2009-07-16 13:41 1524导航栏是网页中常用的模块,有很多方法可以实现,下面是用css实 ... -
Iframe高度自适应
2009-07-16 13:41 880<iframe width="190" ... -
css背景渐变的技巧与方法
2009-07-16 13:40 2531用css实现网页背景渐变的代码如下: 一、从上往下渐变 ... -
网页布局中常用的列表元素ul ol li dl dt dd讲解
2009-07-16 13:39 2021DIV CSS网页布局中常用的列表元素ul ol li dl ...
相关推荐
【jQuery CSS3 图片网格布局】是一种常见的网页设计技术,用于在有限的页面空间内展示多张图片,并通过交互方式展现更多的内容。在这个项目中,"jquery css3图片网格布局点击显示更多内容.rar" 提供了一个实现这一...
在网页设计中,用户体验往往受到交互细节的...开发者可以根据项目需求,灵活组合和定制这些效果,为网页注入更多活力和个性。通过熟练掌握CSS3的这些特性,设计师可以创造出更加吸引人的用户界面,提升网站的整体品质。
本文将详细介绍15种利用CSS3实现的图片Hover悬停效果,帮助你为网站增添更多动态魅力。 1. 渐变变换 一种常见的Hover效果是通过CSS3的`transition`属性实现颜色渐变。例如,当鼠标悬停在图片上时,图片背景色可以从...
与知名的animate.css类似,Mimic.css以简洁易用的方式为网页增添动态元素,为设计师提供了更多创意表达的可能性。 ### CSS3动画基础知识 在深入探讨Mimic.css之前,我们需要了解一些CSS3动画的基础知识。CSS3动画...
《CSS3与HTML5绘制哆啦A梦:技术解析与应用》 在现代网页设计领域,HTML5和CSS3的应用已经越来越广泛,它们为开发者带来了更丰富的...在未来的网页开发中,HTML5和CSS3将会发挥更大的作用,带来更多令人惊叹的作品。
在网页中,图片加载动画能够为用户带来视觉上的趣味性,同时也可以掩盖图片加载时间过长的尴尬,提升网页的交互体验。CSS3中的关键帧动画(@keyframes)是实现这种效果的关键。通过定义动画的不同阶段,我们可以控制...
"jQuery html5 css3图片翻转特效_水平垂直360°"是一个综合运用现代Web技术实现的交互式图像展示方法,它结合了jQuery的事件处理和动画控制,HTML5的结构和数据存储,以及CSS3的强大样式和动画功能,为用户提供了一...
这种效果使得多张图片可以自动切换,形成一种平滑的视觉流动,既节省空间又增加视觉趣味性。 jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax交互。使用jQuery实现图片轮换,可以...
【CSS3悬停图片线条边框动画特效】是一种利用CSS3技术实现的交互式设计,主要应用于网页中的图片展示,当鼠标指针悬浮在图片上时,图片的边框会以线条的形式动态显现,为用户提供视觉上的反馈和交互体验。...
【纯CSS3表情图片旋转动画特效】是一种利用CSS3特性实现的动态视觉效果,它将卡通表情图片设计成可旋转的动画,为网页增添趣味性和互动性。在现代网页设计中,这种效果常用于吸引用户的注意力,提升用户体验,特别是...
在网页设计中,CSS3 Animation是一种强大的工具,用于创建丰富的动态效果,比如我们今天要讨论的"网页logo图片加载动画特效"。这个特效能够提升用户体验,使得网站在内容加载时更具吸引力,不再枯燥乏味。下面我们将...
此外,CSS3的`transform`属性配合`animation`可以实现图片的弹跳动画效果,使得用户交互更具趣味性和反馈感。 在实际应用中,为了实现图片预览,我们可以使用HTML5的File API,读取用户选择的图片文件,并利用`...
总的来说,Flyaway.css是一个创新且实用的CSS3库,它利用了CSS3的动画特性,为网页增加了趣味性和互动性,尤其适合需要视觉反馈的场景。通过深入理解和应用,开发者可以创建出更多独特且引人入胜的网页效果。
JavaScript 和 CSS 是网页开发中的两种关键技术,用于实现丰富的交互性和视觉效果。在这个“javascript+css图片轮换/旋转/相册...通过学习和实践这些代码,开发者可以提升自己的技能,为网站增加更多的互动性和趣味性。
每章都针对一个或多个CSS属性进行详细讲解,包括如何使用、最佳实践以及一些常见问题的解决方法。 ### 第三部分:高级CSS和替代媒体 #### 14. Advanced Selectors(高级选择器) 随着CSS版本的不断更新,引入了...
【CSS3趣味万圣节动画场景特效】是一个利用CSS3技术构建的互动式网页特效,旨在为用户带来独特的万圣节氛围。...通过分析和解构这个项目,开发者能够提升自己的CSS技能,为网页增添更多创新和有趣的视觉元素。
在网页设计中,CSS(Cascading Style Sheets)与HTML是构建页面布局和样式的基石。...如果你正在寻找一种方法来让自己的图片展示更加生动,这种“div css鼠标悬停图片细节说明代码”无疑是一个值得尝试的解决方案。
总的来说,CSS3鼠标经过图片上移特效是一种增强网页交互性和用户体验的实用技巧,通过`:hover`、`transform`和`transition`等CSS3特性,可以轻松实现这种动画效果,为网站增添一份生动与趣味。在实际开发中,结合...
你也可以调整动画参数,比如改变飞行速度、飞行方向,或者添加更多的关键帧以增加动画的复杂性。 此外,为了使动画更具互动性,可以结合JavaScript实现点击触发动画的功能。例如,当用户点击按钮时,飞机元素开始...
标签“JS特效-图片相册”表明这个示例可能与一个更复杂的图片展示应用有关,可能涉及JavaScript来控制多个图片的展示和动画效果。在实际项目中,可能还需要考虑到浏览器兼容性、性能优化以及用户体验等因素。 综上...