10 个实验性的 JS/CSS3 编程技术

简介: 本文所介绍的编程技术,可以有效地改善用户体验和设计师的工作流程,替代原先在IE6上使用的旧的解决办法。需要注意的是,下面列出的大部分技术还在实验阶段,而且有些不是纯CSS技术(一些使用jQuery或其它JavaScript库)。

本文所介绍的编程技术,可以有效地改善用户体验和设计师的工作流程,替代原先在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/

目录
相关文章
|
14天前
|
前端开发 JavaScript 开发者
css和js
【4月更文挑战第22天】css和js
19 6
|
15天前
|
前端开发 JavaScript
结合CSS和JavaScript创建动态网页
【4月更文挑战第21天】结合CSS和JavaScript创建动态网页
19 4
|
28天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
11天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
22 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
11天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
27 0
|
13天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
13 0
|
20天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
19 0
|
28天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
Web App开发 前端开发 JavaScript
|
JavaScript 前端开发 容器