css秘密花园一】的更多相关文章

picture元素 http://www.w3cplus.com/responsive/responsive-images-101-part-6-picture-element.htmlCHAPTER 1Introduction 1Web standards: friend or foe? 2Web 标准是友是敌?http://www.w3cplus.com/css3/css-secrets/web-standards-friend-or-foe.htmlCSS coding tipsCSS 编…
css秘密花园 1.透明边框 <style> div{ width: 120px; height: 60px; margin: 30px auto; background: pink; border: 10px solid hsla(0, 0%, 100%, .5) } </style> <body> <main> <div></div> </main> </body> 2.css多重边框 <style&…
浏览器兼容性有效性信息查询 : Can I Use? http://caniuse.com/ 自动为css添加浏览器厂商前缀 https://autoprefixer.github.io/ 在线编辑HTML/CSS/JavaScript与即时预览的工作台 https://jsfiddle.net/ http://codepen.io/pens/http://runjs.cn/ 简易的DOM获取工具函数 function $$(selector,context) { context = conte…
今天在查询CSS3动画相关资料时偶然发现这个,感觉有时还是挺方便的.原文链接:http://www.w3cplus.com/css3/css-secrets/multiple-borders.html. <CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密. 问题 Backgrounds & Borders Level 3 还是一份草案的时候,CSS WG 就在是否支持多重边框的问题进行了大量的探讨,就像是讨论多重背景图片一样.不幸的是,当时认…
记一次群友问题和回答: 下面这种效果,文字是动态的,不能使用图片的情况下,前端怎么实现? 一.插件实现: arctext.js 教程地址:实现文字平滑弯曲弧形效果的插件-arctext.js 二.原生css实现: <css揭秘>书籍中讲解 文章教程地址:CSS秘密花园: 环形文本…
前端易学易懂,随着移动互联网的日益兴起,it行业对于前端的需求也在不断的提高,那么从前端小白修炼成为前端大神的这个过程之中,一些必备的枕边书也是必不可少的. 第一本,入门<Head first HTML&CSS> 最好的入门书.看两遍就对HTML & CSS 有个大概印象了. 此时把w3cschool作为备查手册收藏起来 第二本<CSS权威指南(第三版)> 最权威的CSS书籍,除了阅读W3C的文档外的不二选择(就是翻译有点操蛋,遇到感到难理解的地方可能还是要求助于网…
随着 CSS 3 的广泛应用,很多新的 CSS 属性层出不穷,有很多陌生的 CSS 属性出现,所以经常需要去学习新的 CSS 属性.新的属性往往介绍文章不多,所以有时候就需要去看看官方文档,此时会发现官方文档有好几个版本,看下图: 当初学 flex-box 的时候就发现有好多种写法,还好官方文档开头有标明那些文档时最新的.不过此时我萌生了去了解 CSS 标准流程的想法,我想作为一个合格的 CSSER 也应该去了解吧.这里讲到的知识基本来自 CSS-tricks 上 CHRIS COYIER 的一…
整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用css设置为0.5. 平时用的比较多的也是使用transform了: div{ height:1px; background:#; -webkit-transform: scale…
css 秘密花园 http://dabblet.com/gist/d9f243ddd7dbffa341a4 场景,背景图片 + 毛玻璃遮盖 原理:利用background的cover特性,将毛玻璃的区域和大背景的区域一致,然后再加上  filter: blur(5px); 进行模糊,之后还得加上margin:-30px来兼容filter的特性, body, main::before { background: url("http://csssecrets.io/images/tiger.jpg&…
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会带来兼容各种设备工作量大.代码累赘.加载时间长的缺点,但它们跨平台和终端,能“一次设计,普遍适用”,可以根据屏幕分辨率自适应以及自动缩放图片.自动调整布局,它们不只是技术的实现,更多的是对于设计的全新思维模式. 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者…