箱猫日和

Author: gssxgss

  • 落書き – 水野亜美

  • sass – 2 colors gradient mixin with fallback

    // calculate the middle color for fallback @mixin middle-color($c1, $c2) background-color: rgb((red($c1) + red($c2)) / 2, (green($c1) + green($c2)) / 2, (blue($c1) + blue($c2)) / 2) // generate linear-gradient @mixin linear-gradient($angle, $c1, $c2, $fallback: “”) // background color fallback @if ($fallback !== “”) background-color: $fallback @else @include middle-color($c1, $c2) // webkit linear gradient fallback @if…

  • 谨记一次被非标准属性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已经是大势所趋了！

  • 落書き20130822 – 新发型

    被某人说好久没更新博客了……于是水了一个晚上终于挤出了一张…… 上周被晾在家里了……我爸去桂林一周，某人去了千岛湖…… 于是终于有时间去烫头发了！ 我敢保证，理发店的人肯定恨我，6月份我和他们说要去烫发，结果现在才去。 御用理发师不在，于是换了个人来烫，烫出来的风格也和以前差很大…… 个人觉得大概和泡面没什么太大的区别……orz 不过据说效果还好……那就还好吧…… 最近食完了《古书堂》，和文学少女比好像推理弱了点，但是很喜欢书中的氛围。 旧书店在国内见得比较少，也逛过几家，非常喜欢淘旧书的感觉~ 其实最初是有点想画翠星石的，但是没有灵感…… 我似乎是画不出同人图的人…… 最近因为物语系列有点喜欢上vofan的画，那种只用色块表达体积的方式很神奇~ 自己也瞎涂了一下，凑合凑合。

  • 落書き20130808

    ミク还没画完我就开新的坑了…… 其实这张我构思了很久，最初觉得只要画出我动森里的两个造型就行了…… 但结果变成了动森里两个造型穿着泳装玩水…… 这个月动森里又换造型了，为了配合每周末的花火大会~新造型是浴衣~\(≧▽≦)/~

  • 落書き20130806

    ミクの絵また施工中……

  • 落書き20130805

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

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

  • 落書き20130729