10 个实验性的 JS/CSS3 编程技术
本文所介绍的编程技术,可以有效地改善用户体验和设计师的工作流程,替代原先在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/
转载于:https://www.cnblogs.com/chu888chu888/archive/2011/12/09/2282505.html
10 个实验性的 JS/CSS3 编程技术相关推荐
- 10个实用的但偏执的Java编程技术
在沉浸于编码一段时间以后(比如说我已经投入近20年左右的时间在程序上了),你会渐渐对这些东西习以为常.因为,你知道的-- 任何事情有可能出错,没错,的确如此. 这就是为什么我们要采用"防御性 ...
- 10个实用的但偏执的Java编程技术-扣丁学堂
10个实用的但偏执的Java编程技术 在沉浸于编码一段时间以后(比如说我已经投入近20年左右的时间在程序上了),你会渐渐对这些东西习以为常.因为,你知道的-- 任何事情有可能出错,没错,的确如此. 这 ...
- promise 浏览器实现的源码_【大前端01-01】函数式编程与JS异步编程、手写Promise...
[简答题]一.谈谈你是如何理解JS异步编程的,EventLoop.消息队列都是做什么的,什么是宏任务.什么是微任务? 如何理解JS异步编程 众所周知JavaScript语言执行环境是"单线程 ...
- JS 异步编程及常考面试题
JS 异步编程及常考面试题 并发(concurrency)和并行(parallelism)区别 涉及面试题:并发与并行的区别? 异步和这小节的知识点其实并不是一个概念,但是这两个名词确实是很多人都常会 ...
- HTML5 CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版
HTML和CSS是构建网页所需要了解的两种核心编程语言,拉尔森编著的这本<HTML5&CSS3编程入门经典>详细介绍了这两种语言. <HTML5&CSS3编程入门经典 ...
- 程序员编程技术迅速提高终极攻略
你是否觉得自己从学校毕业的时候只做过小玩具一样的程序?走入职场后哪怕没有什么经验也可以把以下这些课外练习走一遍(朋友的抱怨:学校课程总是从理论出发,作业项目都看不出有什么实际作用,不如从工作中的需求出 ...
- 从图形到像素:前端图形编程技术概览
\n 图形是人与人之间传递信息的媒介,直观性远胜于口头语言和书面语言.4000多年前,古巴比伦人在石块上绘制建筑物的平面图:2000多年前,古希腊人用图形表达建筑思想,而与其相关的数学直到文艺复兴时期 ...
- 学习(Java Web)编程技术要点及方向; 完成项目的要决
本文亮点: 传统学习编程技术落后,应跟著潮流,要对业务聚焦处理. 要Jar, 不要War:以小为主,以简为宝,集堆而成. 去繁取简 Spring Boot,明日之春. 集堆综合技术如 jHipster ...
- JNI_编程技术__网文整理
Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 Chap 3:javah命令帮助信息... 16 Chap 4:用javah产生一个.h文件... 17 Chap5:j ...
最新文章
- 使用阿里云镜像maven管理配置开发环境
- 【人脸表情识别】不得不读的重要论文推荐(2019-2020篇)
- 全球及中国自媒体行业营销模式及应用规模前景分析报告2021-2027年
- JVM性能调优监控工具专题二:VisualVM基本篇之监控JVM内存,CPU,线程
- AcWing 164. 可达性统计
- Android之ExpandableListView的各种效果(默认展开不合闭,自定义父栏目及箭头控制)
- imageview不显示图片
- PHP 实现中文截取无乱码的方法
- npm run build 报错 versionRequirement: packageConfig.engines.node 'node' of undefined
- 61.新的开始(最小生成树)
- boot2源码-事务
- 免杀需要的基本汇编知识
- VS2005下配置OGRE
- 惠普台式电脑引导不了系统_惠普电脑进入bios设置引导模式操作步骤图文
- Java 编码规范8(编程规约-注释规约与其它)
- Oracle创建表的语法
- 漫谈手游商业游戏前端框架
- mac使用vscode
- 01背包问题——大背包:
- python的布尔运算
热门文章
- Android---53---多线程下载
- updatedb命令
- linux如何卸载内核模块_如何加载或卸载Linux内核模块
- 项目中最困难的部分_微服务最难的部分是什么? 您的资料
- 前端:JS/27/HTML DOM简介和新特性,HTML DOM访问HTML元素的方法,元素对象的属性(标准属性),noscroll事件,实例:书讯快递
- 修复IE下列表 li 的阶梯Bug
- es6 for...of 循环
- 视觉SLAM笔记(13) 空间变换
- hive python脚本,Hive调用Python脚本错误
- mysql 如何磁阵_Raid教程 全程图解手把手教你做RAID