标签 / CSS
CSS3景深、三维变换属性及旋转三维立方体的实现
三维立体效果我觉得是CSS3中最有意思的地方,不得不佩服那些开发者大神们,让我们能够通过几行CSS代码就能得到酷炫的视觉体验。浏览器坐标系在讲正式语法之前,首先需要了解浏览器坐标系,这需要我们把浏览器界面想象成一个立体的场景。这是网上流传很广的浏览器坐标系图片,从左到右的方向是浏览器x轴的正方向,从上到下的方向是浏览器y轴的正方向,而z轴正方向是面对于我们的,了解这个很重要,因为下面我们旋转元素需...  阅读全文 »
页面变灰
html{-webkit-filter: grayscale(100%);     -moz-filter: grayscale(100%);     -ms-filter: grayscale(100%);     -o-filter: ...  阅读全文 »
text-transform 字符转换
字符转换text-transform 属性处理文本的大小写。这个属性有 4 个值:noneuppercaselowercasecapitalize默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。作为一个属性,text-transform 可能...  阅读全文 »
fullpage.js 全屏滑动
简介如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:支持鼠...  阅读全文 »
iphone 6 plus 下 box-shadow 失效
iphone 6 plus ,ios8 下 box-shadow 失效如下面代码在ip6+ 下 是无法显示shadow的:box-shadow: 0 2px 6px 0 rgba(0,0,0,.2);而在iphone6 plus 以下的机型是正常的。解决方法也很简单,加个border-radius:1px;即可正常显示。完整代码box-shadow...  阅读全文 »
ul,li,如果做到宽度自适应
在移动端经常需要做左右滑动的效果,有些可以直接使用浏览器的滚动条来实现,这样便可以避免去计算ul的宽度或者写一个几百%的宽度。<div class="node-1">     <div class="node-2">      ...  阅读全文 »
移动端100%高度和100%宽度CSS最适用,最简单写法
position: absolute; left: 0; top: 0; right: 0; bottom: 0;...  阅读全文 »
9种CSS3炫酷图片预览展示动画特效
这是一组共9款CSS3炫酷图片预览展示动画特效插件。该效果开始时图片堆叠在一起,当鼠标滑过图片时,图片会以9种不同的方式展开,有扇形、平面展开等等非常酷的效果。在线演示9种CSS3炫酷图片预览展示动画特效.zipHTML结构下面来看看这个图片预览展示动画特效的HTML结构。整个结构使用一个div.albums作为包装容器。它的宽度被设置为1100像素。<div class="alb...  阅读全文 »
10条影响CSS渲染速度的写法与建议
1、*{} #zishu *{} 尽量避开由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签;*{margin:0; padding:0}建议的的解决办法:1)不要去使用生僻的标签,因为这些标签往往在不同...  阅读全文 »
10个非常不错的CSS技巧
在这里,巧妙的运用CSS的技巧,可以让你不用修改HTML就能得到很好的博客或者模板外观。我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷。设计模版和博客主题时,我经常“不断推敲和尝试CSS(Hit and Trial CSS ),我只看哪种配色方案和哪种CSS属性的结合能使页面的元素更完美。对了。之所以说是“不断推敲和尝试CSS”是因为在得到了满意的效果之前我会去尝试想尽一切方法。使用这些...  阅读全文 »