Skip to content

Instantly share code, notes, and snippets.

View hiloki's full-sized avatar

Hiroki Tani hiloki

View GitHub Profile
<!--
see http://www.modernizr.com/docs/#backgroundsize
-->
<script src="modernizr-1.7.min.js"></script>
@hiloki
hiloki / _mixin_linear-gradient.scss
Created May 15, 2011 07:20 — forked from yomotsu/_mixin_linear-gradient.scss
sass @Minxin linear-gradient() including SVG code for IE9
@mixin linear-gradient($angle, $color1, $offset1, $color2 ,$offset2:100, $color3:null, $offset3:100, $color4:null, $offset4:100, $color5:null, $offset5:100){
$angle_webkit:'left top, left bottom';
$angle_svg:'%20x2%3d%220%25%22%20y2%3d%22100%25%22';
$color-stop1_css:'#'#{$color1}' '#{$offset1}'%';
$color-stop2_css:',#'#{$color2}' '#{$offset2}'%';
$color-stop3_css:'';
$color-stop4_css:'';
$color-stop5_css:'';
$color-stop1_svg:'%3cstop%20style%3d%22stop%2dcolor%3a%23'#{$color1}'%22%20offset%3d%22'#{$offset1}'%25%22%2f%3e';
$color-stop2_svg:'%3cstop%20style%3d%22stop%2dcolor%3a%23'#{$color2}'%22%20offset%3d%22'#{$offset2}'%25%22%2f%3e';
@hiloki
hiloki / under_development.css
Created March 14, 2012 16:05
Under Development box
.UD {
position: relative;
opacity: 0.3;
&:before {
display: inline-block;
*display: inline;
*zoom: 1;
content: "Under Development";
position: absolute;
top: 0;
@hiloki
hiloki / Short Mediaqueries.scss
Created October 29, 2012 04:49
mq()の引数に指定したキーワードにあわせた値がメディアクエリの条件として適用される。
/*
# Short Mediaqueries
mq()の引数に指定したキーワードにあわせた値がメディアクエリの条件として適用される。
- handheld = min-width: 480px
- tablet = min-width: 768px
- desktop = min-width: 960px
上記に該当しない条件を適用したい場合には、引数に任意の条件を記述する。
@hiloki
hiloki / camblet-icon.scss
Created November 15, 2012 09:12
CambletのアイコンをSass mixinでライブラリー化
// Camblet http://cambelt.co/
// 高解像度向け対応
@mixin cam-icon($width:16,$height:16,$type:avatar) {
display: inline-block;
width: $width + px;
height: $height + px;
background-image: url("http://cambelt.co/icon/" + $type + "/" + $width * 2 + "x" + $height * 2);
-webkit-background-size: 100% auto;
background-size: 100% auto;
@hiloki
hiloki / dabblet.css
Created January 9, 2013 17:10
Untitled
@color: #4D926F;
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
# @gf3’s Sexy Bash Prompt, inspired by “Extravagant Zsh Prompt”
# Shamelessly copied from https://github.com/gf3/dotfiles
if [[ $COLORTERM = gnome-* && $TERM = xterm ]] && infocmp gnome-256color >/dev/null 2>&1; then
export TERM=gnome-256color
elif infocmp xterm-256color >/dev/null 2>&1; then
export TERM=xterm-256color
fi
if tput setaf 1 &> /dev/null; then
@hiloki
hiloki / gist:5458807
Created April 25, 2013 10:17
Conference Boilerplate by Docpad
# http://docpad.org/docs/skeletons
# Docpadをインストール
$ sudo npm install -g docpad
# ディレクトリをつくって、その中にDocpadをセットアップ
$ mkdir conderence
$ cd conderence/
# 'docpad run'でセットアップ開始、スケルトンを選べるので 13 を選ぶ
@hiloki
hiloki / file0.css
Last active December 18, 2015 07:08
立体的(立体風)なボタン表現のパターン ref: http://qiita.com/items/1b97c9c0c13adc8f4ca7
btn {
box-shadow: 0 6px 0 #369;
}
@hiloki
hiloki / SassMeister-input.scss
Created February 15, 2014 08:20
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// ----
@mixin trbl($width: null, $height: null, $parent: null) {
position: absolute;
top: 0;
bottom: 0;
left: 0;