css, tool

stylus
以前はSassを使っていたのですが、聞いたところStylusはSassとLessのいいところどりで豊富な機能を持っているらしいので早速使用する為の環境を構築してみました。 CSSプリプロセッサは、変数や配列、条件分岐などが使えるので、記法を ...

css, WEB制作

Inspiration for Button Styles and Effects

CSSアニメーションエフェクトを使った表現のメニューや、ボタンを作るときに参考にさせてもらっているサイトのご紹介。WEBデザインでメニューやボタン、画像のキャプション表示等のエフェクトに悩んだ時に見て欲しいDEMOの紹介です。 フラットデザ ...

css

cssカテゴリのロゴ

最近ちらほらと見かけることのおおくなったSVGで描画されたアイコンや画像。 たまぁ~にアニメーションもするSVGも見ることがあり、そろそろSVGとCSS3の普及率も上がってきたことだし、挑戦してみようかなと思い作ってみました。 サンプル 下 ...

css, jQuery, WEB制作

jQuery

jQueryでCSSを操作してアニメーション効果を出す手法が、ちょっと前から流行っていまして、簡単に出来るテキストアニメーションを作ってみました。 概要としてはこんな感じです。 setIntervalを使い一定時間で動作させる。 jQuer ...

css, WEB制作, wordpress

20150102191127

対話式の吹き出しの記事とか時々見かけるんですが、あれ面白いですよね。 Q&A式のものにも使われたりしているデザインで、こういったものは視認性がいいですね。 CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2 ...

css, WEB制作

20141225173746
cssでの見出しデザインを作ってみました。 ブログとかで使う見出しや小見出しなんかに使えると思います。 殆どのものを擬似要素を使って作ってみました。 中々センスある見出しデザインを作るのは難しいですね>< ご参考になれば幸いです。 サンプル ...

css, WEB制作

css3 transitionの解説画像
動的な表現をWEBページで実現させるには、javascriptライブラリのjQuery等を使えば手っ取り早く出来ていいのですが、最近ではcss3でのtransitionやanimateを使って実装するケースが増えてきていますね。 実際触って ...

css, WEB制作

css3で作るクリスタルチックな3Dメニュー   CreativeTips

css3のtransformを使ってクリスタルチックなメニューを作ってみました。 一番綺麗に表示できるのはwebkit系のブラウザで、firefoxではクリスタルっぽさがなくなってしまいました。 残念ながらIEは非対応です。 2014/10 ...

css, WEB制作

demo
ページレイアウトをする時にちょくちょく躓きそうな、要素の縦横中央配置のcss Tipsです。 IE7含むIE7以下では動作しませんが、化石ブラウザ使っている人はほぼ淘汰されてきているので、この方法でも大丈夫でしょう。 サンプルとサンプルコー ...