随笔分类 -  css

摘要：说明：请使用chrome浏览器打开See the Pen pvyjGV by lilyH (@lilyH) on CodePen.如上图所示，我们你要实现的效果就是，（1）在一行中显示两块元素；（2）每块元素的长度根据它里面的文字变化还是先看代码吧：HTML 1234567 2 2 1111... 阅读全文

摘要：需求：一段文字，当收起的时候，显示4行，并且多余4行的部分用省略号表示，关键是在省略号前面留有空白部分来放一些图标等东西；展开的时候，全部显示。例如下面的示例图：收起的时候：展开的时候：在不用JS的情况下，如何能只用CSS就做到呢？(一)先看下html结构天空为什么是蓝色×××(二)再看下神奇的cs... 阅读全文

摘要：说明：因为在移动上主要利用CSS来做动画，所以没有考虑其他浏览器的兼容性，只有-webkit这个前缀，如果需要其他浏览器，请自行补齐。首先解释一下什么是无缝滚动动画，例如下面的例子See the Pen css实现上下循环滚动效果 by lilyH (@lilyH) on CodePen.-----... 阅读全文

摘要：原文：http://css-tricks.com/snippets/css/a-guide-to-flexbox/弹性布局（弹性盒子，现今仍是w3c的候选推荐），目标在于，对于一个容器中的各个项目块之间能够有效地放置空白的区域，并且不管空白区域是不定宽的、动态的。弹性布局背后的思想就是 使得容器中的... 阅读全文

摘要：说明（1）原文：http://css-tricks.com/line-clampin/（2）非直译需求: 当文字长度超过N行时，文字后面自动用省略号补齐。比如，你有如下的HTML代码： Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam eges. 阅读全文

摘要：原文链接：文章1：http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html(此文非直译)因为文章2：http://www.mobify.com/blog/beginners-guide-to-perceived-performance/这篇文章提供了四种方法，让你的移动web提升“感知性能”，看起来更像是原生app。这四种方法中第一种是给button增加触摸状态，“为了让你的网站看起来更快，你需要让你的button在用户触摸以后立即反应，这样会让用户觉得发生了什么，而不是在等 阅读全文

摘要：问题:总是有这样的需求，就是页面上某部分要位于页面的最底部，此“最底部”要求：（1）当页面上内容不足一屏的时候，在最底部显示（2）当页面上内容不止一屏的时候，也就是有垂直滚动条的时候，要在内容的最后显示最容易想到的定位方法：（1）position:absolute position:absolute;bottom:0;left:0此种方法只能把该元素定位到第一屏的最底部，它并不会随着滚动条的出现跑到内容的最后面去。满足（1）不满足（2）（2）position:relative此种方法只能满足（2），不能满足（1），当然要满足（1）的话，可以配合使用js, 思路是利用JS计算屏幕高度，减去底部高 阅读全文

摘要：小伙伴们是不是经常在手机上见到“转场"的情况，手机上的页面转换已经不像pc上整体的页面跳转，很多都是利用动画平滑地在页面之间的切换。那么如何来做页面之间的转换呢？首先要明确的是,所谓的页面之间的切换其实是单页里面元素的切换。比如如 下图所示，中间center部分就是当前在视口区域的，也就是我们能看到的，而两边的就是我们现在看不到，但是随时待命的区域。切换的思路很简单:就是利用CSS的动画效果，左右切换元素，让用户只能看到中间可视区域的内容。所以思路就是：（1）把需要切换到可视区域的部分放在动画的起始位置（2）利用CSS3的动画，开始滑动（3）滑动到指定的位置当然在实现中，开启利用CS 阅读全文

摘要：程序员其实也是做PPT的。。。。（不知道在哪个图上看过）帅气的PPT是每个人都想要的。原文介绍了6款用HTML5/CSS3 来实现的展现框架。忍不住弄下来看了看。太帅气了。ps: 标题是源项目连接（尽量用源项目），download是我整理的连接（没有更新，只是用来学习用的）。1、html5 Slides google的工程师提供的，很简单实用。一个html搞定。download2、Impress.js 这款偶觉得太帅气了。利用了CSS3的transform和transition的功能，当然是要用在高级浏览器中，灵感来至于prezi.com.download 3、HTML5 Rocks ... 阅读全文

摘要：一直以为filter属性是IE独有的，实际上也确实是，设置filter属性也只有在IE中才有效。由于对于不同的浏览器需要设置不同的css的属性，所以难免会用到条件来检测浏览器是否有filter属性，看到有一段代码是这样检测的/*! * Copyright (c) 2009 Simo Kinnunen. * Licensed under the MIT license. */var HAS_FILTER = (function() { return document.createElement('span').style.filter !== undefined;})();09年 阅读全文

摘要：在高级浏览器里面可以利用css3实现图片的旋转，可是对于IE来讲，需要利用filter属性。。利用filter进行旋转：（1）如果只用旋转90度，那么可以直接用BasicImage(rotation=参数)来实现，其中参数为： 0：不旋转；1：90度 ;2：180度；3：270度 例子，旋转-90度，那么代码如下： IE：filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 支持CSS3的：-webkit-transform:rotate(-90deg);-moz-transform:rotat... 阅读全文