Caihong - caihong.cc - WEB前端开发
General Information:
Latest News:
css绘图，实现一些特殊形状 8 Jun 2013 | 02:04 pm
还是和前面的tips一样，多用after和before，能省俩标签！俩！比如这一堆的形状 提示：您可以先修改部分 代码再运行
css属性transparent有时候并不是透明的 8 May 2013 | 02:11 pm
两天前我发了个求助，今天终于在朋友的帮助下找到了答案，关于transparent以及rgba(0,0,0,0)，在webkit与没有抗锯齿的浏览器下对border渲染正常，但是在有抗锯齿渲染的浏览器下（ff，ie9）明显就不正常(winXP)。 首先看一个例子 提示：您可以先修改部分 代码再运行 这个例子在webkit下两条透明的表框表现是没任何问题的，但是在FF下面，border与bor...
border的transparent与rgba（0）的区别是什么？ 6 May 2013 | 05:38 pm
在用after和before做一个小的tips箭头的时候，发现一个很蛋疼的问题，boeder写成transparent和写成rgb（x,x,x,0），在webkit下无区别，在moz下表现明显不同，transparent颜色会深很多，困惑中，有答案的兄弟麻烦给个答案…..下面是实例 1.transparent 提示：您可以先修改部分 代码再运行 2.rgba 提示：您可以先修改部分 代...
伪类以及伪对象的一些使用小技巧 26 Mar 2013 | 07:29 am
在浏览器版本越来越高的情况下，很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用到的一些小技巧，算是笔记。 1.focus，chenked伪类的使用。 其实道理都是一样的，利用chenked或者focus的状态，通过css来定义样式，比如用图片替代checkbox框，原理就是隐藏checkbox之后，通过label...
响应式布局入门 10 Jan 2013 | 06:04 pm
最近研究响应式设计框架的时候，发现网上很多相关的属性介绍，却很少有系统的入门级使用的文章，我自己整理了一篇入门知识，并没有什么高深的理论，也不牵扯到框架。 目前已经越来越多的站点以及wap站点使用响应式设计，因为大屏幕的移动设备越来越普及。而自适应布局已经无法胜任各种浏览需求。响应式设计的目的是尽可能以最好的布局显示您的数据，以实现用户友好的 Web 页面。 css2的时期有一个不是很常用的m...
CSS 3D动画概述菜鸟级解读之一 30 Oct 2012 | 05:26 am
无论你是前端还是设计师，相信你在网页二维空间上的操作早已经得心应手，JS处理时间线的动画也早已经烂熟于胸。从今天开始，我跟大家分享一些“新”的东西，网页的第三个维度，以及纯CSS实现的动画。限于篇幅，从初级到比较复杂的3D动画大概会说个三四个回合，我们就从最初级的东西开始说，由于这些知识大部分都是我个人根据文档所理解的，主要是当笔记。所以，也许会跟不少同学所理解的不太一样，甚至相悖，我希望大家可以...
CSS3绘图实战-Nut团队标志 19 Sep 2012 | 06:25 am
css每一代都会有革命性的更新，尽管目前还有一部分浏览器没有支持CSS3，就算支持也是部分支持。但是她那强大的能力依然还是让我兴奋，一些早期不敢想象的东西，如今都可以用CSS来实现，比如，变型，渐变，动画等等。 这次我就拿CSS3的一些新功能来画出我们Nut前端团队的标志，实物如下图： 版权所有，NUT团队，如有雷同，算我们倒霉！ 不说废话，直接开始。这个logo整体来说可以分为几个色块，几...
IE下如果包含锚点并且包含Flash元素title会被追加锚点的问题 26 Mar 2012 | 09:53 pm
在IE下，如果页面的URL包含锚点（#abc），并且页面包含Flash元素（现在大多数页面都会有）。 当Flash加载的时候，会把页面的title（document.title）给改变，变成 “原title#锚点”。如果有多个Flash就会变成“原title#锚点#锚点#锚点#锚点”。 找了半天解决办法，需要在每次Flash加载后都重设title，这个肯定不行，页面那么多元素，不能挨个控制。 ...
当inline-block和text-indent遇到IE6,IE7 21 Mar 2012 | 03:59 pm
在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如： <a href="#" class="btn">Button</a> css我习惯写成这样 .btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-imag...
A Simple Scene Animated with CSS3 9 Dec 2011 | 05:15 pm
A Simple Scene Animated with CSS3 (requires Chrome, Safari, Firefox 5+, or IE10 PP3) Use the button above to start and reset the animation. Use the tabs at top right to view the code for each elemen...
