原文http://lea.verou.me/2016/09/autoprefixing-with-css-variables/最近，当我在制作markapp.io这个小网站的时候，我想出一个巧妙的技巧用在CSS变量上，我们可以天然地使用它们的动态本质。让我们看一下当你想使用一个属性，但是这个属性有不同的版本，一个无前缀的标准版和一个或多个有前缀的版本的情形。在这里我举一个例子，比如我们使用clip-path，目前需要同时使用无前缀的版本和一个-webkit-前缀的版本，我的这个方法可以适用于这种情况，不管这个CSS属性是什么，有多少种前缀，只要它不论什么前缀的值都是同样的就可以。第一步是在所有元素上定义一个--c...

阅读全文 »

在写网页的时候经常会有需要限制某段文字不能超过多少行的需求, 尤其是在列表中。例如一般标题不应该超过一行、图文混排的区域文本一般不应超过图片的高度(如 5 行)等。关于只限制一行, 多出来部分显示成省略号的方式可以参考 {% post_link css-text-overflow CSS使行内多出的文字显示成省略号 %}。 这里的主题是 -webkit-line-clamp, 可以限制文本为指定的行数, 超出部分显示为省略号。先看下效果:-webkit-line-clamp 目前仍然是一个不规范的属性, 它并没有出现在 CSS 规范草案中。作用是限制一个块级元素显示的文本行数。为了实现此效果还需要和其它的 CSS...

阅读全文 »

看了国外一个网站使用一个DIV绘制图形的例子，想到也试着用一个DIV画一面中国国旗吧，于是便动手试了下。当然因为文字投影没办法旋转的原因，四颗小星星不能做到指向中心的大星星，还是有些BUG的。以下是实现效果： 下面是使用的HTML代码，外层的DIV仅仅是后面的背景，请无视。<divid="flag"><div></div></div>CSS代码：#flag{width:600px;height:400px;background:#898989;margin:0auto;position:relative;}#flagdiv{position:absolut...

阅读全文 »

以前或许我们在做前端效果时都是在使用JS来，如JQuery的animate，而如今在前端效果中，CSS3占据越来越重要的作用，如何检测一个CSS3的动画是否结束并在结束后执行下一个动画呢？用jQuery的时候可能是这样：$('.element').animate({left:'100px'},function(){alert('动画执行结束');});下面以一个简单的例子演示下使用CSS3的动画如何响应这种操作：/*一个简单的CSS3动画（这里不再写-webkit-之类的前缀了*/@keyframesfade{from{left:0;}to{left:200px;}}.animate-fade{animation...

阅读全文 »

做前端的应该都会知道LESS，使用LESS书写CSS样式可以在很大程序上降低工作量以及由拼写造成的错误，但对新手来说除了LESS的语法外，如何在自己的工作环境上用上LESS可能也是个问题。个人认为，使用LESS最简单的方法就是实时编译：即对LESS文件做的修改可以在不额外加任何操作（编译）的情况下应用在测试环境甚至生产环境，毕竟对LESS文件每做一点小修改都要重新编译一次也太麻烦了些，而且很慢。实时编译有两种方法：一是在HTML中引入less.js文件，并且设置工作环境是“development”，这样在网页每次载入时都会重新编译LESS文件；二是使用某些编辑器，如SublimeText，SublimeText有...

阅读全文 »

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)任意浏览器的默认字体高都是16px。所有未经调整的浏览器...

阅读全文 »

做网站都知道IE9以下是不支持CSS3的MediaQuery的，也就意味着响应式布局在低版本IE中无法实现，这样一来响应式设计的页面在IE下就可能会出现各种排版错误或横向滚动条，十分影响美观。而解决方法除了写CSS的时候以一个默认尺寸（一般为1024或1366）为基础来进行CSSQuery，这样当IE识别不了Query的内容时就可以以默认尺寸展示。当然，在这里提供另一个解决方案：使用JS替代的实现MediaQuery。这一类的JS有很多，我今天要介绍的是一款叫Respond.js的软件。Respond.js是一个快速、轻量的polyfill，用于为IE6-8以及其它不支持CSS3MediaQueries的浏览器提...

阅读全文 »

这两天没事的时候在做个小Tab页面玩玩，纯粹是做着玩，用来做为自己的主页方便打开各个自己常用的页面。在写HTML/CSS的时候遇到的最大的一个问题就是如何令图片在其父元素内垂直居中，因为父元素的高度固定宽度自适应，而且图片的宽高全部未知，max-width和max-height是90%，在网上找了好多资料，包括Display成table和table-cell都不能完美实现，最后只能尝试着使用JQuery动态来解决了。思路很简单，就是在网页加载完成后去判断图片的高度和其父容器的高度，用父容器的高度减去图片高度再除以2得到其Top值（需要提前把图片的position设为relative），再用JQ的CSS方法设置To...

阅读全文 »

在页面的头部调用独立的样式表一、最大宽度MaxWidth<linkrel="stylesheet"media="screenand(max-width:600px)"href="small.css"type="text/css"/>上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。二、最小宽度MinWidth<linkrel="stylesheet"media="screenand(min-width:900px)"href="big.css"type="text/css"/>上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染...

阅读全文 »

在使用HTML+CSS排版的时候经常出遇到一个问题：某一行内容的长度无法确定，而网页上留的空间就那么大，如果字符过多就会影响排版；单纯的使用overflow:hidden来截断字符串又会给人一种段落（或标题）已经结束的错觉。最好的方法就是如上图那样，在将要超出区域的前几个字符变成省略号，后面的全隐藏了。下面就说一下用CSS的实现方法，只需要三行，上代码：p{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}其中，wite-space:nowrap规定当文本内容一行显示不完时不换行；text-overflow:ellipsis规定当文本超出时显示省...

阅读全文 »