CSS フォームとかで使えるステップバー作ってみた。

CSS Design HTML

フォームのイマココ！とか表示できるシンプルなステップバーをCSSだけで作ってみた。当然のようにIE8とかは無視してます。ご了承下さい。 SAMPLE See the Pen SIMPLE FORM STEP BAR by Chaika (@chaika-design) on CodePen. SIMPLE FORM STEP BAR HTML <ol class="stepBar step3"> <li class="step current">STE</li></ol>…

2015-03-02

compass 部分的に角丸(border-radius)りたい。

compass (Sass) CSS

compassで角丸(border-radius)にしたい時は @include border-radius(5px); みたいな感じでできますが、右上だけ角丸にしたいんじゃー！みたいな時の書き方をしょっちゅう忘れるのでメモ。 top・bottom / left・right で指定 @include border-corner-radius($…

2015-01-28

Stylus インデントをミスすると危険があぶない！

stylus CSS

Stylusのインデントをミスすると意図せずセレクタの親指定が吹っ飛んでしまう場合があるっぽい！ p color: #444 #main .heading color: #0a9b94 p color: #f2a620 インデントはスペース2つで統一しているつもりが。間違えて.headingのインデントがスペース4…

2015-01-22

Stylus mixinの引数を値の文字列に入れたい

stylus CSS

例えばCSSで指定してある画像を言語毎に切り替えたい。言語のごとに各言語のprefixがついた画像にbackground-imageを変更したいようなケース。 .myLabel { background-image: url('/assets/images/label.png'); } .lang-ja { .myLabel { background-image: …

2014-08-18

jQueryでimportantのcssを付けたい。

jQuery CSS

CSSの!importantは極力使いたくないのですが使わざるを得ないケースが有ります。jQueryでimportant付きのcssを付けたい時 // javascript $('#hoge').css('width', '900px !important'); の様に記述してもスタイルそのものが付きませんでした。どうやら // …

2014-08-01

めも。CSS

CSS HTML

TRYしたいCSS プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック | コムテブログ [CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック | コリスメモウェブサイトで珍しい形を取り…

2014-07-16

めも。CSSやデザイン関連。

Design CSS note

CSS 頭のいい人のSASSテクニック集。 | SAITEI no CHINJUU!!!（最低の珍獣） SCSSに限らずstylsとか最初にテンプレートとして作っておいて、プロジェクトのたびに読み込ませるようにすると便利そうアイコンフォントからSVGへ！より手軽にベクター画像を表示…

2014-07-13

CSS floatしてるコンテンツの幅が無くなる時は

CSS

久しぶりにCSSを書いていて色々と忘れてしまっていてfloatでハマることになるとは...bootstrapBootstrap などのフレームワークを使ってレイアウトを組む事も多いと思います。例えば下の様なページ遷移するパーツをこんな感じでマークアップしたとします。 <div class="row"> <div class="span4"></div></div>…