CSS3笔记和CSS实用技巧

CSS/CSS3在线手册:http://www.css119.com/book/css/

 

50个CSS代码片段必备http://blog.csdn.net/holandstone/article/details/17613089

 

CSS规范和常用模块代码段:http://nec.netease.com/

 

必须熟记的30类CSS选择器:http://bbs.html5cn.org/thread-85312-1-1.html

 

CSS制作水平垂直居中对齐所有办法:http://www.w3cplus.com/css/vertically-center-content-with-css

 

CSS之少用继承,多用组合:http://www.w3cfuns.com/blog-5459640-5403984.html

 

自适应之Margin负值布局之美:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

 

10条影响CSS渲染速度的写法与建议:http://bbs.html5cn.org/thread-2395-1-1.html

 

如果你想确保哪些属性还需要依赖于前缀来工作,可以通过CanIuse查询:http://caniuse.com/

检测浏览器对HTML5和CSS3的支持性:http://fmbip.com/litmus

 

条件样式替代CSS Hacks方案:http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

 

CSS3动画实用技巧教程:http://www.html5cn.org/article-7806-1.html

 

CSS clip-path裁剪各种形状:http://bennettfeely.com/clippy/

 

CSS3渐变效果:http://www.w3cplus.com/content/css3-gradient

 

CSS绘制基本图形代码:http://spion.blog.163.com/blog/static/187244272201272791123671/

 

CSS3 3D旋转效果:http://www.w3cplus.com/css3/css3-3d-transform.html

 

CSS3加载进度提示效果:http://www.html5cn.org/article-6458-1.html

 

CSS3动画库:http://ianlunn.github.io/Hover/

 

CSS3百叶窗图片切换:http://www.html5cn.org/article-6860-1.html

字体下载和转换:http://www.dafont.com/    http://www.fontsquirrel.com/tools/webfont-generator

 

CSS3 UI 库:http://css3lib.alloyteam.com/

 

判断浏览器是否支持css3的属性

var element = document_create Element (‘div‘);

if(‘text-overflow‘ in element.style){

element.style[‘text-overflow‘] = ‘ellipsis‘;

return element.style[‘text-overflow‘] === ‘ellipsis‘;

}

else{

return false;

}

background:rgba(0,0,0,0.5)  //前面三个数值分别代表R,G,B数值,最后一个数值代表透明度,它和opacity属性的区别是:父容器的opacity会影响子元素的透明度,而rgba不会影响。

完美兼容各浏览器的办法:http://www.cnblogs.com/PeunZhang/p/4089894.html

box-flex  //属性规定框的子元素是否可伸缩其尺寸。父元素添加display:box,定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素,则 #p1 的宽度是 100 像素,而 #p2 的宽度是 200 像素

border-radius(圆角):水平半径 垂直半径(如果要画圆,盒子必须宽度=高度,半径:宽度/2)

box-shadow(阴影):水平 垂直 半径(阴影扩散) 颜色

transform-style:preserve-3D(子元素将保留其3D位置)/flat(子元素将不保留3D位置);

perspective:1000px;//设置从何处查看一个元素的角度,即定义3D元素距眼睛的距离,以像素定义当为元素定义perspective属性时,其子元素获得透视效果,不是本身

backface-visibility:hidden;//当属性定义元素不面向屏幕时是否可见,即不显示元素背面

@keyframes 规则:from{}to{}//使 div 元素匀速向下移动,从哪到哪

animation:规则名称,运行时间,运行速度,运行次数,动画是否在下一周期逆向地播放,规定动画是否正在运行或暂停

@keyframes-selector{from{}to{}}//默认0-100%,from(与 0% 相同),to(与 100% 相同)

transition关注的是CSS属性的变化,animation作用于元素本身而不是样式属性。在Chrome下,使用过渡效果transition时有时会出现页面闪动,方法:

-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;

transform:scale(0.9);//缩放元素比例,1为默认

如果overflow-x和overflow-y的值不同,其中一个属性值被赋值为visible,而另一个属性值被赋值为auto、scroll、hidden,那么visible会被重置为auto,出现滚动条。

时间: 2024-11-05 14:44:05

CSS3笔记和CSS实用技巧的相关文章

响应式设计的5个css实用技巧

mongodb30%E6%AD%A3%E5%BC%8F%E7%89%88%E5%8F%91%E5%B8%83 http://www.zcool.com.cn/collection/ZMTY4ODk3MzI?20170922 http://www.zcool.com.cn/collection/ZMTY5OTE3MTY/ http://www.zcool.com.cn/collection/ZMTcwNTczNDQ/ http://www.zcool.com.cn/collection/ZMTY5

《CSS动画实用技巧》课程笔记

概述 这是我学习CSS动画实用技巧的课程笔记 常用动画属性--transition .change img{ display:block; width:300px; height:284px; opacity:0; -webkit-transform:translate(-100px,-100px); -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out; transition: opaci

Vim实用技巧读书笔记

第一章 首先提出了vim一个理念:如何提高复用--很方便的重复之前做过的操作. 另外,作者将vim的操作分为两个步骤: 一是移动,二是操作. 针对这两个方面,通过命令:":".","."n"."N"."."."u"来达到复用. 修改操作 命令模式的dd等都是修改操作,但是容易被人遗忘的是:从进入插入模式到按回到命令模式为止.这也算是一次修改操作. 组合命令 vim将一些命令组合成一个单独

《Vim实用技巧》笔记

Vim实用技巧 Table of Contents 1. Vim决问题的方式 2. 普通模式 3. 插入模式 4. 可视模式 5. 命令行模式 5.1. 操作文本的Ex命令 5.2. range服务说明 5.3. 补全 5.4. 命令行窗口–使用vim的编辑能力编辑Ex命令 5.5. 执行外部命令 6. 管理多个文件 6.1. 缓冲区列表管理 6.2. 参数列表 6.3. 窗口操作 6.4. 标签页操作 7. 打开及保存文件 7.1. 打开文件 7.2. 使用find查找文件 7.3. 使用ne

程序员在编程开发中的10个实用技巧

程序员在编程开发中的10个实用技巧,下面是我自己在工作中学到的一些简单的技巧和策略,希望能对各位有用.1.     橡皮鸭调试法不知道各位有没有这样的经历,当你正在给别人描述问题的时候,突然灵机一动想到了解决方案?这种情况的产生是有科学依据的.高谈阔论能让我们的大脑重新有条理地组织问题.在这种情况下,你的聊天对象就是“橡皮鸭”.团队中的每个人都应该积极主动乐意地成为彼此的“橡皮鸭”.有时候,如果你幸运的话,你的“橡皮鸭”搞不好还能给出有效的建议呢.2.     快速信息反馈一旦写好代码就要尽快得

【开发工具】vim编辑器实用技巧总结

总结一些我们在平时使用vim编辑器的一些实用功能,后续会一直更新. 1.  visual插件 visual插件其实相当于一个书签作用,比如我们在一篇很长的源代码文件中,我们可以标记一行,然后后来我们再想回到这一行时,只需要一个快捷键就能迅速定位到这一行,非常方便,不用不停地往上或往下翻. 1.1  常用命令 1.  mm标记一个标签: 2.  F2回到被标记的那一行: 3.  连续按两次mm就可以取消标签: 4.  shift+F2可以在几个标签来回切换: 2.  emmet.vim插件 emm

CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-coding-techniques-x2605-mozilla-hacks-8211-the-web-developer-blog-1244.html 最近,我发现许多人被CSS难倒,无论是新手还是有经验的开发者.自然地,他们就希望能有一种更好的语言来代替它,CSS预处理器就是从这种想法中诞生的.一些

IE和Firefox浏览器CSS兼容性技巧整理

转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 HTML5 兼容速查表 IE6/IE7/IE8三个版本的CSS兼容速查手册 CSS hack定义技巧浏览器兼容一览表 XHTML+CSS兼容性解决方案 CSS样式表对浏览器的兼容性问题有时让人很头疼,不过当我们了解了其中的原理与技巧,就会觉得轻松一些.本文收集整理了IE7,6与Fireofx的兼CSS

学好Web前端开发,必要了解的HTML+CSS的技巧有哪些

HTML+CSS的技巧有哪些?怎么学好Web前端开发?经过Web前端学习的一个过程,每个人都会对前端的认识逐渐由浅入深,由一开始僵硬地使用标签和标签属性进行简单网页布局,到最后能够对网页进行丰富的CSS渲染,逐渐不断成长起来.接下来给大家分享一下阶段学习技巧. 1.合理清晰的HTML文档结构有着重要的意义. 首先,这有利于自己写CSS时选择标签;其次,这方便别人阅读自己的代码;最后,合理的使用语义化标签,也能让方便各大搜索引擎的收录. 2.对标签添加浮动对网页横排有着非常重要的意义. 一开始接触