1. 选择类 1.1 /* 鼠标选中区域,改变背景/字体颜色 */ /*遍历写法*/ div::selection { background-color: red; color: #fff; /* font-size.font-weight等 设置不起作用 */ } /*全局写法*/ ::selection { background: #000; color: #fff; 2. 文字类 2.1 /* 伪元素选择器 */ /* 第一个字母/汉字 */ li::first-letter { colo…

首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective:用来实现一个3d的场景 写3D效果的第一步是要创建一个3D场景,即索要实现效果的模块.这里用到了 perspective 属性和 perspective-origin 属性. perspective:用来定义3d动画距离浏览器的距离,单位是(px). perspective-origin:效果渲染的…

1.rem简介   rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能. 2.rem兼容性 rem是CSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况.其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+.Ap…

基本形状 ▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC ◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 2605 ✦ 10022 2726 ☀ 9728 2600 ◆ 9670 25C6 ◈ 9672 25C8 ▣ 9635 25A3 标点,特殊符号 « 171 00AB » 187 00BB ‹ 139 008B › 155 009B “ 8220 201C ” 8221 201D ‘ 8216 2018…

这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的时候为了适配,如果用百分比,就得精确计算,而且如果有1px边框,计算会更加复杂难控制 2)如果有多列,要让所有列的高度一样,以前的话需要用各种计算或用子元素撑高等 3)上下居中,如果是在以前,那么用line-height或top绝对定位等计算 4)表单布局的时候,经常是左边和右边在一行上,以往是设置…

浏览器,作为一神器,帮我们打开了缤纷万千的网络世界窗口.而她发展到今天,也诞生了一个又一个的怀神版本,可能有人钟情于她的花哨,有人痴迷于她的速度……我们,作为重构工程师,必然要更关注他背后的技术革新,那就是css3的支持了!上次,加菲猫已经给我们演示了夸张的css3动画.而这次,我们从细节入手,看看css3遇到weibo,会给人什么期待 . 当然在这之前,得先了解下拜访weibo.com的各位大侠的神器占比: PS:(数据来自新浪微博“产品数据分析后台”的2012年1月份浏览器占比) 图标中可以…

'clip-path'是css3的一个强大属性,我们可以利用它来绘制各种各样的图形,当然不只是这些,接下来一起看看它的强大功能吧. 首先介绍的是clip-path里面的polygon功能,我们可以通过它来绘制多边形. 先来裁剪一个三角形. 代码如下: <style> div{ width:100px; height:100px; background-color:red; -webkit-clip-path:polygon(50% 0px,100% 100%,0px 100%); } <…

<Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您. HTML5 未来的 Web:九个不可思议的 WebGL 应用试验 Manifesto – HTML5 离线应用程序缓存校验工具 Popline:帅气的浮动 HTML5 文本…

早上在w3ctech上看到 中国第二届CSS Conf总结  的时候,真是开心极了: 自从去年在慕课网上看了第一届CSS conf 视频之后,整个人都震惊了,原来还有大会是专门用来讨论CSS的,而且分享的CSS知识真是让人眼界大开: 我在博客园写的第一篇博文<布局神器:Flexbox>便是受到第一届CSS Conf的启发; 所以,算是结下了不解之缘:如今看到第二届分享的视频和PPT时,虽然才看到 <重拾 css 的乐趣(上)> 这一部分内容,但却很受启发 今天文章的主题是用css3…

最近的工作内容大多是移动端网页的开发,百分比布局,Media Queries,Bootstrap等常规的响应式/自适应的开发技术皆一一试过,但觉以上都不够灵活,所以,一直再尝试寻求更加灵活的精确的移动端网页设计技术. 寻求的过程中知道了两个让我眼前一亮的解决方案:一个是Flexbox;另外一个是REM. 初次见到Flexbox的神奇用法,是在慕课网上看到<Flexbox,更优雅的布局>的视频教程:http://www.imooc.com/video/6048 让我眼前一亮的是如下的功能: 在线…