css

no image

StylusでサクサクCSSコーディング【環境構築編】

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

WEB制作のアイキャッチ画像

CSS3アニメーションを使ったメニューやボタンのサンプル紹介【289種類+α】

CSSアニメーションエフェクトを使った表現のメニューや、ボタンを作るときに参考にさせてもらっているサイトのご紹介。WEBデザインでメニューやボタン、画像のキャプション表示等のエフェクトに悩んだ時に見て欲しいDEMOの紹介です。フラットデザインやマテリアルデザインにも調和するので、デザインに悩んだ時にどうぞ。CSS3初心者はまずこちらをどうぞCSS3をまだ勉

no image

CSS3とSVGでテキストアニメーションを作る

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

no image

【javascript】jQueryでクラスを切り替え、CSS3でアニメーションさせるテキストロゴ

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

css3 初心者の為のtransitionについてのまとめ

動的な表現をWEBページで実現させるには、javascriptライブラリのjQuery等を使えば手っ取り早く出来ていいのですが、最近ではcss3でのtransitionやanimateを使って実装するケースが増えてきていますね。実際触ってみても楽しいので、もっとcssでアニメーションすればいいと思うよ。cssセレクタとの兼ね合いでハマッた事もあるので、まとめてみた。cs

no image

[CSS]もっとも簡単なテキストや画像等の縦横中央配置

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