前端规范

发表于 css3 分类,标签:
浏览器特效支持规范为了页面性能考虑,如果浏览器不支持CSS3相关属性的,则该浏览器的某些特效将不再支持,属性的支持情况如下表所示:圆角阴影动画文字阴影透明背景渐变空间变换Chrome5+YYYYYYYFirefox4+YYYYYYYSafari5+YYYYYYYOperaYYYYYNYIE9+YYNNYNYChrome5-NNYYYYYFirefox4-NNNYYNNSafari5-NYYYYNYIE8NNNNNNNIE7NNNNNNNIE6NNNNNNN[说明]Y为支持,N为不支持。 文件相关规范1、文件名必须由小写字母、数字、中划线-组成2、文件必须用utf-8编码3、文件引入可通过外联或内联方式引入:3.1外联方式:<linkrel=”stylesheet”href=”…”/>(类型声明type=”text/css”可以忽略)3.2内联方式:&...

前端组件收集

发表于 css3 分类,标签:
https://connoratherton.com/loaders   css3loading动画...

网站特殊字体处理

发表于 css3 分类,标签:
转载自: http://blog.csdn.net/xiaolongtotop/article/details/8482955在网站开发过程中,经常会遇到一些特殊字体,这些特殊字体在客户端未安装该字体时会无法正常显示,一般情况下,如果一个网站使用的特殊字体较少,而且都是静态的话,可以直接切为图片,当网站中用到的特殊字体较多,而且许多是动态的话,切图片的方法显然不可行,下面介绍几种处理网站特殊字体的方法.一.使用GoogleWebFontsGoogle字体库里也有很多时尚和个性化的字体供你选择,并且由于是开源字库,所以不管是商业或者个人,GoogleFontAPI都适用。GoogleFontAPI并不依赖于JavaScript,因此即使用户禁用了JavaScript,Google字体依然可以显示。Google字体在CSS3中的表现同样出色,任何额外的样式都可以被添加,...

web字体格式及几种在线格式转换工具介绍

发表于 css3 分类,标签:
转载自:http://blog.csdn.net/xiaolongtotop/article/details/8316554目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及字体格式转换。Web字体格式介绍TrueType(.ttf)Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。同时,这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。EOT–EmbeddedOpenType(.eot)嵌入字体格式(EOT)是微软开发的一种技术...

Respond.js让IE6-8支持CSS3 Media Query

发表于 css3 分类,标签:
Respond.js让IE6-8支持CSS3MediaQueryootstrap里面就引入了这个JS文件,从名字看出来是自适应的兼容。打开IE看了一下,效果挺好的,自适应的效果挺好的。Respond.js让不支持css3 MediaQuery的浏览器包括IE6-IE8等其他浏览器支持查询。使用方式官方demo地址:http://scottjehl.github.com/Respond/test/test.html1.在css中正常用min/max-widthmediaqueries    @media screen and (min-width: 480px){        ...styles ...

CSS3 clip-path polygon图形构建与动画变换二三事

发表于 css3 分类,标签:
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4732一、温故关于CSS3 clip-path,去年圣诞节前前前夕写了篇名为“CSS3/SVGclip-path路径剪裁遮罩属性简介”文章介绍了。不过是简介,很多内容是一笔带过。CSS3中的clip-path可以遮罩很多图形,例如矩形rectangle,圆circle,椭圆ellipse,多边形polygon,以及inset剪裁。其中,polygon多边形构建频频出现了我的视野中,不知是贪图我的美色还是其他什么原因,总之,它成功了,成功引起了我关注。于是,按照虐心剧剧本一贯的尿性,男主和X主发生了很多情感上的纠葛。这里特意呈现给大家,满足大家八卦的天性。二、成形c...

全兼容渐变色写法

发表于 css3 分类,标签:
<!DOCTYPEhtml><html><headlang="en">  <metacharset="UTF-8">  <title>全兼容渐变色</title>  <style>    body{      background-color:blue;    }    a{      color:#...

CSSOM视图模式(CSSOM View Module)相关整理

发表于 css3 分类,标签:
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1907就在8月份,也就是上次gf大姨妈来的时候,W3C出炉了CSSOM视图模块(CSSObjectModelView)草案。CSSOM视图模块(CSSOMViewModule)定义了一些API,Web开发人员使用这些API可以进行检查,也可以以编程方式更改文档及其内容的视觉属性,包括布局框定位、视区宽度和元素滚动。以下就是一些API属性的相关内容,包括兼容性,使用,测试等。一、Window视图属性这些属性可以hold住整个浏览器窗体大小。微软则将这些API称为“Screenview接口”。包括:innerWidth 属性和 innerHeight...

高性能 CSS3 动画

发表于 css3 分类,标签:
注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览。请尊重版权,转载请注明来源,多谢~~高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点:流量、功耗与流畅度。在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况。关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画。JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案。而在移动端,我们选择性能更优浏览器原生实现方案:CSS3动画。然而,CSS3动画在移动多终端设备场景下,相比PC会面对更多的性能问题,主要体现在动画的卡顿与闪烁。目前对提升移动端CSS3动画体验的主要方法有几点:尽可能多的利用硬件能力,如使用3D...

CSS3教程:pointer-events属性值详解

发表于 css3 分类,标签:
破洛洛文章简介:CSS3pointer-events介绍.其实早知道这个属性,但是一直没有去研究过。今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下。嗯,其实这是个比较简单的CSS3属性。在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作。。。然后正好在Googlemap见到了类似的问题,拿来当例子来说:Googlemap中左上角的操作区域占位是挺大的,如红色框区域,然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。但是悲剧的是,操作区...