Tag: CSS

  • 写个login form

    随手写个login form,其实没什么inspiration。 顺便学习下jade,练习下transform。 [codepen_embed height=”423″ theme_id=”5731″ slug_hash=”qpahd” default_tab=”result”]See the Pen <a href=’http://codepen.io/gsshcl/pen/qpahd/’>login form</a> by GSSxGSS (<a href=’http://codepen.io/gsshcl’>@gsshcl</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed] 话说sass支持@function了,好强大,强大的无法直视。 说不定哪天就能直接在sass里写ruby了,233。

  • 谨记一次被非标准属性background-position-y坑的过程

    公司网站的背景是从早到晚渐变的,所以用了一张1px×13000px的图,每天根据时间不同,php那边算个bg-position中y的偏移值。 因为是php那边处理,当时php那边的人就顺手写了个inline style在某个module的layout的标签里: style=”background-position-y: {{ app.bg_position }}px” 后来我只是考虑到要把这个挪到全局layout里去,加个分号。 另加当时我脑残了一下css的平铺方向错写成了repeat-y,所以改好css,把style挪到正确的template里,我就没多想。 顺带确认了下repeat方向是x没错,bg-position位移方向是y没错,chrome下没错,IE下没错。 这便是一个悲剧的开始。 直到今天被人发现在firefox下白天显示着夜晚的深紫色渐变背景,只好开Inspector, 发现虽然body里有写样式,但inline element里却没有读到样式。 google之,才知道background-position-y/background-position-x是IE创造出的非标准属性,但是Chrome竟然支持了,但Firefox没有。 firefox没有…… =。=) 再高级的浏览器也是不可信的。

  • 教程:做套自己的icon font

    Part 1: Why Icon Fonts? Just because Icon Fonts are Awesome! 来谈个历史问题—— 做兼容移动设备的网页时,retina屏幕的存在导致了我们经常要为一个logo做两套图: 一套原始尺寸,另一套两倍尺寸,并且还要进行media query。 如果此时我们的logo可以随意放大缩小并且轮廓清晰的话就好了。 当然我们也可以用canvas或svg画个logo上去,但如果页面上有很多这类icon的话,这么做会累死人的…… 随着扁平化设计的流行,我们的logo、icon似乎不需要设计的那么立体化了:没有渐变没有阴影,只是单纯的纯色图形。 还记得以前在MS Word里用Wingdings字体打小图形的日子吗? ——纯色的、可缩放、轮廓清晰。 ——没错,从很早以前开始,字体就可以满足我们这个需求了。 其实Github去年就开始用icon font来做网站的icon了。 并且,github也公开了他们的octicons,供大家使用。 bootstrap开发到3.0时,也把所有的图片icon换成了icon font。 再到国内,技术龙头阿里巴巴下的一淘也公开了内部的UX图标字体库。 再根据我对淘宝的观察,他们确实也有一套自己的icon font,但是至今没有公开。 所以说,Icon Fonts已经是大势所趋了!

  • 国内双核浏览器兼容模式和极速模式

    最近正在进行的新项目中,正好可以重新构建站点的前端。 旧项目的layout本想采用boilerplate,后来因为有人提出在双核浏览器“兼容模式”下, IE hack class无效,便修正了IE hack class的位置,从<html>移到了<body>里。

  • IE10 bug hack: box-shadow remains if box size changed

    前按: 這是個我不想fix的bug,因為這bug和IE對css3的支持沒有任何關係,fix的方式也非常流氓。 Environment: IE10(10.0.9200.16384), Win8. Screenshot: Bug: 可以很明顯的從圖上看到,當內容通過ajax載入后,div高度一改變,box-shadow留下了殘影。

  • 读书笔记 – 高性能网站建设进阶指南(2)简化CSS选择符

    css selectors 性能消耗从低到高: ID selectors #modal { overflow: hidden; } class selectors .container { margin: 0 atuo; } type selectors a { color: #999; } adjacent sibling selectors input + label { display: inline; } child selectors label > input { display: none; } descendant selectors .foo a { text-decoration: none; } universal selectors *…

  • jQuery slideDown snap back issue

    这个问题得用视频才能演示出来……视频之后更新。 标题用的是stackoverflow上的。 我碰到的情况是,div.to-slide里有float元素。 div.to-slide在触发slideDown()动画后,会先down到超过div本身应该的高度,再反跳回原来的高度。 排查了很久都没找到原因。终于最后在stackoverflow上找到了一篇解释这问题的。 原来这个问题并不限定于内部有float的slidedown元素。float只是其中一种情况。 在div.to-slide没有展开情况下,jquery算出的高度有误,所以才会出现高度差反跳。 触发这个bug的原因很多,比如:无宽度,自适应或继承父元素宽度(我的问题就是这个)。 详见 slidedown animation jump revisited