资讯频道 → Web前端
阅读更多

4顶
0踩

Web前端

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

2011-12-09 16:35 by 正式编辑 sherry617 评论(0) 有3461人浏览
CSS CSS3 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/
  • 大小: 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）、外边距...

  • 基于NSGA2与熵权TOPSIS的电力系统储能选址定容优化及Matpower潮流计算研究

    内容概要：本文详细探讨了利用NSGA2算法进行电力系统中储能系统的选址和定容优化，并结合熵权TOPSIS方法选择最优解。首先介绍了使用Matpower工具包进行潮流计算的基础步骤，随后深入讨论了储能系统引入后的复杂性和优化目标设定。文中展示了如何构建目标函数，包括储能的投资成本和系统电压偏差，并详细解释了NSGA2算法的具体实现，如种群初始化、交叉变异操作以及约束条件处理。最后，通过熵权法确定权重并应用TOPSIS方法对多个优化结果进行评估，选出综合性能最佳的储能配置方案。 适合人群：从事电力系统规划、优化算法研究的专业人士，尤其是对储能系统优化感兴趣的科研人员和技术开发者。 使用场景及目标：适用于需要解决电力系统中储能系统选址和定容问题的实际工程项目。主要目标是在满足系统稳定性要求的前提下，最小化储能系统的投资成本，提高系统的经济性和可靠性。 其他说明：文章提供了详细的代码片段和理论推导，帮助读者更好地理解和实施所提出的优化方法。此外，还提到了一些实际应用中的注意事项，如SOC约束处理、参数选择等，为后续的研究和应用提供了宝贵的实践经验。

  • 基于python+pyqt5实现视频自动化下载、剪辑和上传系统源码+项目说明.zip

    基于python+pyqt5实现视频自动化下载、剪辑和上传系统源码+项目说明.zip 该项目是用脚本实现部分视频网站视频内容的自动化下载、剪辑以及上传，其中界面是用PyQT做的。 使用的浏览器驱动是undetected_chromedriver，可以跳过tiktok的机器人检查 使用的浏览器是91，版本：Google_Chrome_(64bit)_v91.0.4472.77 【功能】 自动从各种视频网站下载视频 支持视频剪辑和合集制作 支持自动上传视频到视频网站 技术栈 Python PyQT undetected_chromedriver

  • 西门子S7-1200双套三坐标6轴联动控制系统的设计与实现

    内容概要：本文详细介绍了西门子S7-1200双套三坐标6轴联动控制系统的开发与调试经验。主要内容涵盖双PLC通信机制、轴控制逻辑、安全联锁设计以及触摸屏程序绑定等方面。文中通过具体代码示例展示了如何利用SCL语言实现高效稳定的多轴联动控制，并分享了实际项目中的最佳实践和技术难点解决方案。此外，还讨论了程序结构优化、报警代码设计、数据块管理等关键环节，强调了模块化设计思想的应用及其带来的效率提升。 适合人群：从事工业自动化领域的工程师，尤其是熟悉西门子PLC编程的专业人士。 使用场景及目标：适用于需要进行复杂运动控制的自动化生产线，如汽车制造、电子装配等行业。主要目标是提高生产效率，确保设备运行的安全性和稳定性。 其他说明：文中提到的许多技术和方法不仅限于特定型号的PLC，对于其他品牌的控制器也有一定的借鉴意义。同时，提供的代码片段可以直接应用于类似项目中，帮助开发者快速搭建可靠的控制系统。

  • NFC Tools Pro

    NFC Tools是一个应用程序，允许你在你的 NFC 标签和其他 RFID 兼容芯片上读取或写入或编程代码任务。NFC Tools PRO版本包括很多其他的附加功能，比如配置文件管理等。保存你的NFC标签或任务的配置文件，以便你以后重新使用它们。导出和导入很容易。NFC Tools PRO官方版允许你直接从现有的 NFC 标签导入你的记录或任务。 你可以很快编辑你的标签。此外还可以直接运行你的任务配置文件，不需要NFC 标签。

Global site tag (gtag.js) - Google Analytics