资讯频道 → 编程语言
阅读更多

7顶
0踩

编程语言

转载新闻 用CSS3实现未来的Web

2009-01-15 09:52 by 副主编 zly06 评论(4) 有6004人浏览
Web

COMSHARP CMS写道：CSS 3 + HTML 5 是未来的 Web，它们都还没有正式到来，虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧，可以帮你实现未来的 Web，不过，这些技术不应该用在正式的客户项目，它们更适合你的个人博客站点，Web 设计社区，或者不会有客户向你投诉的场合。

1. 圆角效果

 

CSS3 新功能中最常用的一项是圆角效果，标准 HTML 方块对象是90度方角的，CSS3 可以帮你实现圆角。

  1. -moz-border-radius: 20px;  
  2. -webkit-border-radius: 20px;  
  3. border-radius: 20px;  

甚至单个角也可以实现圆角，不过 Mozilla 和 Webkit 的语法稍有不同。

  1. -moz-border-radius-topleft: 20px;  
  2. -moz-border-radius-topright: 20px;  
  3. -moz-border-radius-bottomleft: 10px;  
  4. -moz-border-radius-bottomright: 10px;  
  5. -webkit-border-top-rightright-radius: 20px;  
  6. -webkit-border-top-left-radius: 20px;  
  7. -webkit-border-bottom-left-radius: 10px;  
  8. -webkit-border-bottom-rightright-radius: 10px; 

所支持的浏览器：Firefox, Safari , Chrome
用例: Twitter. 

请参阅:

 

 

  2. 图形化边界


 

顾名思义，图形化边界就是允许使用图片作为对象的边界，语法如下:

  1. border: 5px solid #cccccc;  
  2. -webkit-border-image: url(/images/border-image.png) 5 repeat;  
  3. -moz-border-image: url(/images/border-image.png) 5 repeat;  
  4. border-image: url(/images/border-image.png) 5 repeat; 

这里，border: 5px   设定了边界的宽度，然后，每个边界的图片定义告诉浏览器，使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置：

  1. border-bottom-rightright-image  
  2. border-bottom-image  
  3. border-bottom-left-image  
  4. border-left-image  
  5.    border-top-left-image  
  6.    border-top-image  
  7.    border-top-rightright-image  
  8.    border-right-image  

支持的浏览器： Firefox 3.1, Safari , Chrome.
用例: Blog.SpoonGraphics.

请参考:

 3. 块阴影与文字阴影

 

阴影效果曾让 Web 设计师既爱又恨，现在，有了 CSS3，你不再需要 Photoshop，已经有网站在使用这个功能了，如 24 Ways website.

  1. -webkit-box-shadow: 10px 10px 25px #ccc;  
  2. -moz-box-shadow: 10px 10px 25px #ccc;  
  3. box-shadow: 10px 10px 25px #ccc; 

前两个属性设置阴影的 X / Y 位移，这里分别是 10px，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。文字阴影也可以这样设置：

  1. text-shadow: 2px 2px 5px #ccc; 

支持的浏览器：Firefox 3.1, Safari, Chrome (只支持 Box 阴影) ，Opera (只支持文字阴影).前3个数字表示红绿蓝三色的值，最后一个值代表透明度，另外，我们还可以使用 opacity 实现透明度（目前的灯箱效果多使用该技巧 - 译者）

用例: 24 Ways.

请参考:

 

4. 使用 RGBA 实现透明效果

 

目前，Web 设计中的透明效果主要靠 PNG 图片实现（但在 IE 浏览器支持得并不好 - 译者），在 CSS3，可以直接实现透明效果。

  1. rgba(200, 54, 54, 0.5);  
  2. background: rgba(200, 54, 54, 0.5);  
  3. color: rgba(200, 54, 54, 0.5); 

 

  1. color: #000;  
  2. opacity: 0.5; 

支持的浏览器： Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes).
用例: 24 Ways (RGBA).

请参考:

5. 使用 @Font-Face 实现定制字体

 

Web 设计中有几种字体是比较安全的，如 Arial,Helvetica, Verdana, Georgia, Comic Sans （中文的，一般来说宋体是唯一安全的 - 译者），现在，使用 CSS3 的 @font-face 可以自己指定字体，不过因为牵扯到版权问题，实际能用的字体也是有限的 (另外，体积庞大的中文字体也是一个不好解决的问题 - 译者)。

语法如下:

  1. @font-face {  
  2. font-family:'Anivers';  
  3. src: url('/images/Anivers.otf') format('opentype');  
  4. } 

支持的浏览器： Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折，如果你不怕麻烦，可以在 IE 实现这个功能，请参考： make font-face work in IE )

 

用例: TapTapTap.

请参阅：

虽然 CSS3 尚在开发中，上面提到的这些功能已经可以在部分浏览器中使用了，尤其是 Safari。不幸的是，Safari 并非主流浏览器。

 

Firefox 目前拥有大量用户基础，另外，即将推出的 Firefox 3.1 支持不少 CSS3 效果，因为 Firefox 用户的升级积极性很高，因此，会有不少用户可以提前体验 CSS3 的新功能。

 

Google Chrome 今年刚刚发布，它基于 Webkit 引擎，因此和 Safari 很相似，因为 Safari 主要用于 Mac 市场，Chrome 可以正好弥补 Windows 市场的空缺。

 

根据统计数据，2008 年11月止，44.2% 的用户使用 Firefox, 3.1% 使用 Chrome, 2.7% 使用 Safari，意味着 CSS3 的部分功能已经可以支持近半 Internet 用户，而在 Web 设计圈子，这个比例可能更高，大约有 73.6% （Blog.SpoonGraphics 提供的数据）

6. 负面因素

上面讲述的这些 CSS3 功能会给你的网站带来出色的效果，但仍有一些负面的因素必须考虑：

  • Internet Explorer: 46% 的 Internet 无法看到这些效果，因此不要将这些东西用于重要的设计。同时保证，在这些效果不起作用的地方，有替代设计可用。
  • CSS 验证问题: 这些 CSS3 功能并非最终版本，目前不同的浏览器使用不同标签实现这些功能，可能为你的 Style Sheet 带来验证上的问题。
  • 臃肿代码: 因为不同浏览器要使用不同定义语法，最终将导致你的 CSS 代码十分臃肿。
  • 不当的使用: 对这些效果的不当使用，可能带来一些不良后果，阴影效果尤其如此。

英文原文：Push Your Web Design Into The Future With CSS3

  • 大小: 26.4 KB
  • 大小: 56.9 KB
  • 大小: 50.6 KB
  • 大小: 46 KB
  • 大小: 46.2 KB
来自: comsharp
7
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 wjjcml1982 2009-01-23 15:43
[/color][color=orange][color=green][/color]
3 楼 hscartoon 2009-01-16 11:45
IE彻底没救了
2 楼 fanlei77 2009-01-16 09:17
IE6彻底SB了
1 楼 javascripteye 2009-01-15 23:12
难道IE真的吃屎了？

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 用 css3 实现未来的 Web.rar

    CSS 3 HTML 5 是未来的 Web，它们都还...本文介绍了 5 个 CSS3 技巧，可以帮你实现未来的 Web，不过，这些技术不应该用在正式的客户项目，它们更适合你的个人博客站点，Web 设计社区，或者不会有客户向你投诉的场合。

  • html5css3web设计,CSS3+HTML5 实现未来Web设计

    本文介绍了5个CSS3技巧，可以帮你实现未来的Web，不过，这些技术不应该用在正式的客户项目，它们更适合你的个人博客站点，Web 设计社区，或者不会有客户向你投诉的场合。1. 圆角效果CSS3 新功能中最常用的一项是圆角...

  • 用 CSS3 实现未来的 Web

    本文介绍了 5 个 CSS3 技巧，可以帮你实现未来的 Web，不过，这些技术不应该用在正式的客户项目，它们更适合你的个人博客站点，Web 设计社区，或者不会有客户向你投诉的场合。 1. 圆角效果 CSS3 新功能中最常用...

  • 纯CSS3纸张卷边风格演示实例

    摘要:脚本资源,CSS特效,...　利用CSS3生成纸张的卷边效果，当你把鼠标移到右边纸张右下角的时候，纸张就会卷边，并出现阴影，在卷边和阴影效果的配合下，本效果更加逼真，CSS3的功能真的好棒，个人认为是未来的方向。

  • css3实现图片的自动轮播特效-前端教程

    本文在介绍如何使用css3实现图片的轮播特效的基础上，重点探讨了其具体步骤，本文内容紧凑，希望大家可以有所收获。 大家在浏览网页的过程中，会遇见一种名叫图片轮播的特殊效果：在同样的位置不同的图片会根据时间...

  • 前端html5 css3 教案,Web前端开发（HTML5+CSS3）

    HTML5和CSS3(简称H5技术)是Web前端开发的最新技术， H5技术可以实现多方面的跨界：PC端/移动端，Android/iOS。应用领域包含传统互联应用、移动开发和云计算等。市场上对Web前端人才的需求量很大， Web前端工程师的...

  • css3动态画廊,11个非常棒的CSS3实现的图片画廊

    CSS3给WEB开发带来了革命性的影响，以前很多需要javascript实现的复杂效果，现在使用简单的CSS3就能实现。下面这些绚丽的图片 画廊效果就是用CSS3实现的。还有件非常有趣的事就是很多人都在使用宝丽来效果。(提示：...

  • 基于HTML5+CSS3的网页设计与实现

    摘要：随着互联网技术的不断发展，电子设备的广泛应用和高普及度，网页作为互联网信息的重要载体，其网页设计技术将面临新的挑战...文章以介绍XX主题网站首页页面为对象，实现基于HTML5+CSS3的网页页面设计与优化。...

  • HTML5和CSS3 WEB技术开发

    **视频 HTML5和CSS3 WEB技术开发** 课程目标： 使用HTML5进行网站布局 使用CSS3进行网站美化 开发精美的商业网站 第一章 HTML5基础 概念： ​ 网页 ：互联网的基础，网络页面,网页：文字、图片、声音、视频、VR虚幻...

  • 期刊Web前端开发技术HTML5与CSS3的融合及未来发展趋势_江涛1

    （1） 实现低成本开发 （2） 简化代码编写功能 （3） 支持多设备和跨平台使用 （4） 即时更新功能 （5） 实现自适应网页效果

  • 【原创作品】html5+css3+js+bootstrap实现响应式Web前端科技商城网站(包含多个页面)

    学着学着渐入偏锋，专业的缘故，入坑了后端，已经很久没有这样纯写前端静态网页了，这个是我大二写的静态页面，实现的是一个科技企业网站，包含主页及二级页面多个页面，登录注册用了点php+mysql实现，UI页面效果图...

  • 西门子S7-200SMART与V20变频器基于Modbus通讯的稳定控制及应用

    内容概要：本文详细介绍了西门子S7-200SMART PLC与V20变频器通过Modbus RTU协议进行通信的具体方法和技术要点。首先阐述了硬件连接方式，强调了正确的接线和参数设置对于稳定通信的重要性。接着深入讲解了PLC程序的设计，包括Modbus主站初始化、启停控制、频率设定以及断电自恢复等功能模块的实现。此外还分享了一些实用的经验技巧，如避免通讯冲突、处理浮点数转换等问题。最后提到该方案已在实际生产环境中成功应用，表现出良好的稳定性和可靠性。 适合人群：从事自动化控制系统集成的技术人员，特别是熟悉西门子PLC和变频器产品的工程师。 使用场景及目标：适用于需要将旧型号PLC与变频器进行高效集成的企业，在不影响原有设备的基础上提升系统的智能化水平，减少人工干预，提高生产效率。 其他说明：文中提供了大量具体的编程实例和参数配置指南，有助于读者快速掌握相关技能并应用于实际工作中。同时提醒读者注意一些常见的错误及其解决方案，帮助规避潜在的风险。

  • 西门子PLC电机控制程序：封装好的功能块助力高效工业自动化

    内容概要：本文详细介绍了西门子PLC中用于电机控制的封装功能块，涵盖正转、反转、变频控制等多种功能。通过简化底层代码，提高编程效率和系统可靠性。文章展示了如何使用功能块实现正转、反转、变频控制、模拟量处理、故障处理等功能，并结合用户自定义数据类型（UDT）和多重背景技术，实现对大量电机的高效管理。此外，还提供了具体的代码示例，帮助读者更好地理解和应用这些功能块。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是那些需要频繁处理电机控制任务的人群。 使用场景及目标：适用于需要简化电机控制编程、提高系统可靠性和可维护性的工业环境。主要目标是减少重复编码的工作量，提升开发效率，确保系统稳定运行。 其他说明：文中提供的代码示例和方法不仅有助于初学者快速入门，也为有经验的工程师提供了优化现有系统的思路。通过使用这些功能块，可以在短时间内完成复杂电机控制系统的搭建和调试。

  • 腐败感知指数（CPI）数据和各种治理指标数据集

    全球腐败感知数据（2000-2023）——3000行 33个指标 关于数据集 该数据集包含3000行和33列，涵盖了2000年至2023年的腐败感知指数（CPI）数据和各种治理指标。它包括国家排名、分数和其他指标，如公共部门腐败、司法腐败、贿赂指数、商业道德、民主指数、法治、政府效率、经济指标和人类发展指数。 这些数据可用于： 腐败趋势分析 腐败对GDP、人类发展指数和治理的影响 跨国比较 数据可视化和机器学习模型 该数据集对研究人员、数据分析师、政策制定者和对研究全球腐败趋势非常有用。

  • 朔州市-平鲁区-街道行政区划_140603_Shp数据-wgs84坐标系.rar

    街道级行政区划shp矢量数据，wgs84坐标系，下载直接使用

  • 脑机接口基于贝叶斯优化的FBCCA参数自动调优系统设计与实现：EEG数据处理及优化流程详解

    内容概要：本文档详细介绍了将贝叶斯优化应用于FBCCA（滤波器组公共空间模式）参数调整的完整解决方案，包括代码实现和优化流程。首先，通过MNE库加载并预处理EEG数据，进行7-30Hz的预滤波处理，提取相关事件片段。接着，定义了FBCABayesianOptimizer类，该类包含创建动态滤波器组、获取模型参数以及定义优化目标函数的方法。其中，参数空间由离散和连续参数组成，涵盖了滤波器数量、CSP组件数、起始频率、带宽、交叠率等，并通过Optuna库进行多维搜索。优化过程中采用5折交叉验证机制，同时引入智能早停策略以提高效率。最后，提供了优化结果的可视化工具，如优化轨迹图、参数重要性图和滤波器组配置图，帮助用户更好地理解和分析优化过程。 适合人群：具有一定编程基础，尤其是对机器学习、脑电数据分析及贝叶斯优化感兴趣的科研人员和技术开发者。 使用场景及目标：①通过动态滤波器组生成算法，捕捉频段间的过渡特征；②利用混合参数空间设计，探索不同参数组合的效果；③借助高效交叉验证机制和智能早停策略，提高优化效率；④通过可视化工具，直观展示优化过程和结果。 阅读建议：此资源不仅展示了完整的代码实现，还深入探讨了FBCCA参数调整的理论基础和实际应用。建议读者在学习过程中结合理论知识与代码实践，逐步理解每个步骤的原理，并尝试调整参数以观察不同设置对优化效果的影响。同时，可根据自身硬件条件，考虑扩展建议中的GPU加速、分布式优化和在线学习等高级特性。

  • 临汾市-古县-街道行政区划_141025_Shp数据-wgs84坐标系.rar

    街道级行政区划shp矢量数据，wgs84坐标系，下载直接使用

Global site tag (gtag.js) - Google Analytics