阅读更多

4顶
0踩

Web前端

翻译新闻 10 个实验性的 JS/CSS3 编程技术

2011-12-09 16:35 by 正式编辑 sherry617 评论(0) 有3366人浏览
本文所介绍的编程技术,可以有效地改善用户体验和设计师的工作流程,替代原先在IE6上使用的旧的解决办法。需要注意的是,下面列出的大部分技术还在实验阶段,而且有些不是纯CSS技术(一些使用jQuery或其它JavaScript库)。但本文还是非常值得一看。

1.  告别overflow:hidden

让我告别overflow:hidden的决定性因素是CSS3,具体而言是box-shadow。因为使用overflow:hidden首先会对box-shadow造成负面影响。当父元素使用overflow:hidden 属性时,box-shadow会被裁剪。另外,text-shadow和transform也有可能被裁减掉。所以我更倾向于使用clearfix,感觉这种一体化的东西更靠谱一些。



2.  使用CSS3样式的圆角

随着CSS3越来越接近主流设计的标准,精心设计圆角背景图片已经成为过去,这意味着我们将节省在每个浏览器上花费的时间和精力了。



3. 让CSS3圆角HTML元素支持每个浏览器

这是一个适用于IE的behavior htc文件,目的是让所有浏览器都支持border-radius元素。因为目前除了IE,其他的主流浏览器均可呈现圆角效果,只需加入4行CSS代码。



4. IE CSS3伪选择器

可以使IE识别CSS3伪类选择器,并渲染它们所定义的所有样式规则。你只需将这些脚本添加到你的页面中,就可以在你的样式表中使用这些选择器了。



5. 更简洁的CSS3选择器代码

在本教程中,我们来看看一些前期的和使用CSS3简化后期的代码,并通过实现的视觉效果来进行比较。



6. CSS3 + 渐进增强 = 智能设计

渐进增强(Progressive Enhancement)和CSS3都是很好的技术,但CSS3更胜一筹。若将两者合并使用,就能使设计者创建出简洁的网站,且比以往更快、更容易。



7. 用CSS Text-shadow创建一个凸版效果

凸版效果在网页设计中十分受欢迎,一些主流浏览器也支持CSS3的Text-shadow属性,用纯CSS创建这个效果也很简单。这绝对不是PS出来的!



8. CSS3 HSL & HSLA

这个教程是关于如何用HSL & HSLA 和quick+/- 向导制作出目前浏览器支持的效果。



9. CSS3渐变:无图透明按钮

在Mac OS X发布的时候,有无数的网上教程教授如何用Photoshop制作透明按钮,现在,试试用CSS创建吧!



10. 更多3D CSS变换

教程中有各种各样的3D CSS变换。




英文原文:http://www.jquery4u.com/dynamic-css-2/10-brilliant-jscss3-coding-techniques/
  • 大小: 74.2 KB
  • 大小: 62.2 KB
  • 大小: 84.9 KB
  • 大小: 88.3 KB
  • 大小: 131.4 KB
  • 大小: 78.3 KB
  • 大小: 70.9 KB
  • 大小: 71.4 KB
  • 大小: 75.4 KB
  • 大小: 72.3 KB
4
0
评论 共 0 条 请登录后发表评论

发表评论

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

相关推荐

  • kicss:CSS自定义变量实验

    无论您使用CSS-in-JS技术还是CSS模块或预处理器语言都无关紧要。 但是,这可能会减少您对这些工具的需求。 KICSS代表“ Keep It CSS”,它指的是寻找在CSS中保持动态样式的方法。 命名灵感来自著名的编程座右铭...

  • html/js/css_10种实验性JS / CSS3编码技术

    html/js/css 正如我们所承诺的,这是另一组CSS3 /...请注意,以下介绍的大多数技术都是实验性的,而且其中许多不是纯CSS3技术,因为有些确实使用jQuery或其他JavaScript库。 值得一看... 相关文章: 10种JavaSc...

  • HTML5和CSS3 WEB技术开发

    B站视频参考:https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-... HTML 不是一种编程语言(C、Java、python、R等),而是一种标记语言 (markup

  • 网页编程课程大作业实验报告HTML5 、CSS5 、JavaScript

    网页编程课程大作业实验报告 课程名称 网页编程 实验成绩 计算机学院制 一、实验内容与要求 利用HTML5 、CSS5 、JavaScript等知识,按照特定的主题制作一个完整的网站。 二、网站名称以及主要内容介绍 我的网站名称...

  • 编程笔记 html5&css&js 031 HTML视频

    该属性可以禁用 video 元素的画中画特性,右键菜单中的“画中画”选项会被禁用 disableRemotePlayback 实验性 布尔属性,用于在使用有线(HDMI、DVI 等)和无线技术(Miracast、Chromecast、DLNA、AirPlay 等)连接...

  • 革命性创新,CSS 动画杀手锏 @scroll-timeline

    关注公众号前端开发博客,领27本电子书回复加群,自助秒进前端群在 CSS 规范 Scroll-linked Animations[1] 中,推出了一个划时代的 CSS 功能。也就是 --...

  • html5实验教程,html5+css3+js开发APP实例教程1 -- 文字列表

    不多说直接先上实例。所有实例在后续成品将会用到。如果有需要讲添加具体文字说明。许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中...Pure CSS3 Page F...

  • 01-HTML+CSS+JS【常用总结+案例练习】

    文章目录HTML第一部分第二部分第三部分总结CSS选择器常用样式总结JavaScriptECMA Script基本语法JS对象BOM浏览器对象模型DOM文档对象模型事件案例:案例1-注册表单校验案例2-5秒后跳转到百度官网案例3-全选和全不选...

  • Web前端开发技术实验与实践(第3版)储久良编著实训3

    实训3 超链接与多媒体文件应用 项目10 设计简易灯箱画廊 项目11 设计支持音频、视频播放的网页 项目12 设计简易导航网站 项目13 设计专业课程导航

  • 制作一个简单HTML静态网页(HTML+CSS)

    ️ 这个首页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的...

  • HTTP协议相关概念介绍(端口号/HTML/HTTP/CSS/JS/MIME/URI/URN/URL/HTTP工作机制/HTTP报文语法格式)

    HTTP协议相关概念介绍(端口号/HTML/HTTP/CSS/JS/MIME/URI/URN/URL/HTTP工作机制)

  • 详解16个CSS新特性(2021最新版-上)

    2021 CSS 的新特性和之前两年的相比有相似也有不同,本文就带大家看看今年的 CSS 到底说了什么。简介如果您有关注过这两年的 CSS 发展状态报告(2019年和2020年)的话,不...

  • html+css+javascript知识点总结

    html+css+javascript知识点总结

  • IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略

    前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/数据可视化/工程体系/国际化/跨端技术/互动技术/...

  • 前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs)

    前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型 是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content)、内边距(padding)、边框(border)、外边距...

  • Linux操作系统学习笔记整理.docx

    linux操作系统

  • pyinstaller-6.4.0-py3-none-win_amd64.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • 智慧账务报账服务平台解决方案ppt.zip

    在当今数字化时代,企业财务管理正经历着一场革命性的变革。"智慧账务报账服务平台解决方案ppt.zip"便是这一变革的先锋代表,它不仅仅是一个文档或PPT,而是一套完整的、智能化的企业财务解决方案。该平台利用最新的云计算技术、大数据分析、人工智能以及机器学习算法,为企业提供了一个高效、精准、便捷的报账和财务管理体系。这套解决方案专为满足现代企业复杂多变的财务需求而设计,其核心在于自动化和智能化。通过自动识别票据信息、智能审核报账单据、实时监控财务流程等功能,极大地减少了人工操作,降低了错误率,提高了工作效率。同时,平台的数据分析功能能够为企业提供深入的财务洞察,帮助企业制定更为科学的财务决策。此外,该解决方案还具备强大的可扩展性和安全性,能够适应不同规模和类型的企业需求,确保财务数据的安全和隐私。无论是在招投标过程中展示企业的创新能力,还是在日常运营中提升财务管理水平,"智慧账务报账服务平台解决方案ppt.zip"都是企业数字化转型不可或缺的伙伴。综上所述,这个解决方案不仅仅是一个智慧财务的工具,更是企业向数字化管理转型的桥梁,它能够帮助企业实现财务管理的现代化,提升竞争力,迎接未来挑战

  • 使用Koopman算子理论对Chemostat模型进行数据驱动建模matlab代码.zip

    1.版本:matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

Global site tag (gtag.js) - Google Analytics