css, tool

stylus

以前はSassを使っていたのですが、聞いたところStylusはSassとLessのいいところどりで豊富な機能を持っているらしいので早速使用する為の環境を構築してみました。

CSSプリプロセッサは、変数や配列、条件分岐などが ...

2016年6月18日css, WEB制作

Inspiration for Button Styles and Effects

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

2017年3月5日css

cssカテゴリのロゴ

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

2016年4月12日css, jQuery, WEB制作

jQuery

jQueryでCSSを操作してアニメーション効果を出す手法が、ちょっと前から流行っていまして、簡単に出来るテキストアニメーションを作ってみました。

概要としてはこんな感じです。

setIntervalを使い一定時間で ...

2016年4月12日css, WEB制作, wordpress

対話式の吹き出しの記事とか時々見かけるんですが、あれ面白いですよね。
Q&A式のものにも使われたりしているデザインで、こういったものは視認性がいいですね。

CSSで会話形式のフキダシデザインを作ってみる ̵ ...

css, WEB制作

cssでの見出しデザインを作ってみました。
ブログとかで使う見出しや小見出しなんかに使えると思います。
殆どのものを擬似要素を使って作ってみました。

中々センスある見出しデザインを作るのは難しいですね>< ...

css, WEB制作

css3 transitionの解説画像

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

2014年10月31日css, WEB制作

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

css, WEB制作

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

サ ...

PAGE TOP