随笔分类 -  css3

css的用法,预处理器sass的总结等
八种创建等高列布局(转载)
摘要:高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了。但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么... 阅读全文

posted @ 2015-09-29 18:03 商清逸 阅读(265) 评论(0) 推荐(0)

一个完整的Flexbox指南(转载)
摘要:本文由大漠根据Chris Coyier的《A Complete Guide to Flexbox》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://css-tricks.com/snippets/css/a-guide-to... 阅读全文

posted @ 2015-09-29 18:01 商清逸 阅读(273) 评论(0) 推荐(0)

等高列布局、水平垂直居中与置顶页脚(转载)
摘要:等高列布局在《八种创建等高列布局》一文中详细介绍了八种创建等高列布局的不同方法。可以说这些方法足以满足你的业务需求,当然其中有一些方法略为繁琐,也有时转得人头晕。在今天这种技术环境之下,如果的业务对IE低版本依赖性不是非常强的情况之下,可以考虑一些新的方法来实现。接下来我与大家一起探讨几种新方法实现... 阅读全文

posted @ 2015-09-29 16:41 商清逸 阅读(312) 评论(0) 推荐(0)

Block formatting context & Inline formatting context(BFC&IFC)的区别(转载)
摘要:何为BFC与IFCbfc与ifc是针对页面正常流的两种环境,块级元素处于bfc环境中,行内元素处于ifc环境中。元素是块级元素or行内元素由其display属性决定:block, table, flex, grid, list-item 为块级inline, inline-block, inline... 阅读全文

posted @ 2015-09-29 16:11 商清逸 阅读(325) 评论(0) 推荐(0)

[转载]网页动画的十二原则
摘要:CSS的Animation是一个很有意思的东西,也是CSS中较为复杂也难设计的一部分。熟不知在Web的动画设计中有12个关键原则。在Animation 101将这十二原则剖析出来。今天特意转载@刘英滕翻译《Animation Principles for the Web》的中文。作为前端的设计师和工... 阅读全文

posted @ 2015-09-29 14:06 商清逸 阅读(185) 评论(0) 推荐(0)

前端精选文摘:css之GFC 神奇背后的原理(整理)
摘要:CSS3 Grid LayoutWeb页面的布局,我们常见的主要有“浮动布局(float)”、“定位布局(position)”、“行内块布局(inline-block)”、“CSS3的多栏布局(Columns)”、“伸缩布局(Flexbox)”以及“网格布局(Grids)”等,在众多布局方法中,大家... 阅读全文

posted @ 2015-09-29 14:03 商清逸 阅读(573) 评论(0) 推荐(0)

css3之BFC、IFC、GFC和FFC
摘要:CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。What's FC?一定不是KFC,FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用... 阅读全文

posted @ 2015-09-29 09:12 商清逸 阅读(4603) 评论(0) 推荐(1)

前端精选文摘:css之BFC 神奇背后的原理(转载)
摘要:一、BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Bo... 阅读全文

posted @ 2015-09-28 15:22 商清逸 阅读(199) 评论(0) 推荐(0)

css3动画机制原理和实战
摘要:http://www.w3cplus.com/css3/CSS3-animation.html http://www.i7758.com/archives/1585.html http://segmentfault.com/q/1010000000645415 css3动画讨论 阅读全文

posted @ 2015-09-25 17:48 商清逸 阅读(2683) 评论(0) 推荐(0)

css3背景渐变以及图片混合渲染模式(二)
摘要:http://avnpc.com/pages/photoshop-layer-blending-algorithmhttp://www.html5cn.org/forum.php?mod=viewthread&tid=83244 阅读全文

posted @ 2015-09-24 17:17 商清逸 阅读(197) 评论(0) 推荐(0)

css3背景渐变以及图片混合渲染模式(一)
摘要:一、CSS3渐变(Gradients):CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐... 阅读全文

posted @ 2015-09-23 16:42 商清逸 阅读(950) 评论(0) 推荐(0)

关于css3背景图片渐变的规则
摘要:1. Webkit引擎的CSS3径向渐变语法 Webkit引擎下的老版本语法:-webkit-gradient([],[ || ,]?[ ||,]?,[,]*); //Safari Chrome这两款浏览器支持的版本,浏览器Chrome4-9 和Safari4-5版本支持 Webkit引... 阅读全文

posted @ 2015-09-22 10:56 商清逸 阅读(889) 评论(0) 推荐(0)

inline-block 前世今生
摘要:http://www.iyunlu.com/view/css-xhtml/64.html(转) 阅读全文

posted @ 2015-09-18 10:44 商清逸 阅读(216) 评论(0) 推荐(0)

sass的用法小结(四)进阶篇
摘要:Sass 的数据类型Sass 既然有了类似编程语言的功能,自然也就有了简单的数据类型。这里简单的介绍一些 Sass 中的数据类型,因为在后面的讨论中要用到有关的内容。Sass 中主要有六种数据类型:数字型 (e.g. 1.2, 13, 10px)文本型,单引号、双引号或者不加都可以 (e.g. “f... 阅读全文

posted @ 2015-09-09 16:44 商清逸 阅读(523) 评论(0) 推荐(0)

sass的用法小结(三)
摘要:5. 混合器;如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂,你需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。混合器使用@mixin标识符定义... 阅读全文

posted @ 2015-09-09 14:59 商清逸 阅读(213) 评论(0) 推荐(0)

sass的用法小结(二)
摘要:3. 导入SASS文件;css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。sass也有一个@import规则,但不同的是,sass的@import规则在生成... 阅读全文

posted @ 2015-09-09 14:33 商清逸 阅读(369) 评论(0) 推荐(0)

sass的用法小结(一)
摘要:1. 使用变量;sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。sass使用$符号来标识变量(老版... 阅读全文

posted @ 2015-09-09 13:50 商清逸 阅读(549) 评论(0) 推荐(0)

导航