提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
原创|使用教程|编辑:龚雪|2014-11-27 10:14:09.000|阅读 2097 次
概述:本文介绍10个非常有用的CSS代码片段,绝对不容忽视。包括在整个容器中垂直对齐、元素拉伸为全屏高度、跨浏览器图像灰度、动画背景等,使用平率高,经常无法完全达到想要效果。现在有了这10个CSS代码片段,我们可以将这些效果做得更好。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
在使用CSS的时候,你可能会出现疑问,我如何在容器中将文本或元素垂直对齐。现在使用CSS3 Transforms,我们可以更有效解决这问题,如下:
.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
使用这个技术,文本、段落等都可以垂直对齐,CSS3 Transform 支持Chrome 4, Opera 10, Safari 3, Firefox 3, Internet Explorer 9。
一般来说,你可能会想要把元素拉伸为全屏高度,问本元素调整只会调整容器的大小,因此元素跨越整个窗口高度就需要在html 、 body上做文章。
html, body { height: 100%; }
任何元素100%高度,如下:
div { height: 100%; }
有时候你可能需要将特定的链接以不同颜色展现出来,来让他更容易被区分。下面的CSS片段将会为文本、链接添加图标,如下:
a[href^="//"]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* emails */ a[href^="mailto:"]{ padding-right: 20px; background: url(email.png) no-repeat center right; } /* pdfs */ a[href$=".pdf"]{ padding-right: 20px; background: url(pdf.png) no-repeat center right; }
效果如下:
灰度可以为网站提供更深的基调使其看起来更优雅简约。这里我们使用SVG为图片添加一个慧都过滤器。
<svg xmlns="//www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg>
使用 filter属性跨浏览器:
img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ }
CSS最诱人的功能之一—添加动画效果。我们可以将背景颜色、透明度、大小等做成动画效果。但是梯度效果却不行。现在我们可以使用以下代码来实现。
button { background-image: linear-gradient(#5187c4, #1c2f45); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s; } button:hover { background-position: 0 0; }
效果:
表格调整列宽时间麻烦的事情。不过也可以轻松解决,在td元素中使用white-space: nowrap:
td { white-space: nowrap; }
效果:
<iframe width="100%" height="300" src="//jsfiddle.net/agusesetiyono/1uotj8wv/3/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
想要添加阴影,那就试试这个代码吧,可以在任意边添加阴影。要完成此项,首相,确定盒子的长宽,使用:after 伪元素,放置到正确位置,代码如下:
.box-shadow { background-color: #FF8020; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; } .box-shadow:after { content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000; }
效果:
如果你的文本内容比容器还长,那下面这个代码就对你很有帮助了。
使用CSS适应容器宽度:
pre { white-space: pre-line; word-wrap: break-word; }
效果
想让文本有模糊效果?就这两步: color transparent、添加text-shadow :
.blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
在加载的时候来个动画效果如何?
.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026"; /* ascii code for the ellipsis character */ } @keyframes ellipsis { from { width: 2px; } to { width: 15px; } }
效果:
英文:
转载请注明:文章转载自:慧都控件网
原文地址:10个不可忽视的CSS代码片段
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢