CSSでフリップアニメーション実装してみます。 Demo CSS/HTMLそれぞれのソースは以下のような感じです。 参考Create a CSS Flipping Animation

多くのブラウザがCSS3に対応したことで、これまでPhotoshopやIllustratorなどのデザインソフトでしか表現できなかったテキストエフェクトが、CSSスタイリングのみでも実現できるようになりました。 海外デザインブログDesign Your Wayで、CSSでデザインされたクリエイティブなテキストエフェクトをまとめたエントリー「Yes, You Can Actually Make These Text Effects in CSS」が公開されていたので、今回はご紹介します。 詳細は以下から。 CSSでスタイリングした、すごいテキストエフェクトまとめ Elastic Stroke CSS + SVG SVGファイルを利用することで、テキストラインをアニメーション付きでカラフルに表現します。 See the Pen Elastic stroke CSS + SVG by yokse

ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま

CSSで表現できる、ユニークなボタンデザインをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。 コードを見ながらサンプルを確認することができるので、先日まとめたテキストエフェクトを含む、アニメーションを得意とした最先端のデザインテクニックを、今後のウェブデザイン制作に活かしてみてはいかがでしょう。 詳細は以下から。 CSS3の新しい可能性！美しいテキストエフェクト用コードスニペット24個まとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 Collection of Button Hover Effects CSS3で表現された、実践的に使えるボタンデザイン5つを収録していま

ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・

On the modern web there are numerous techniques that can be used to create interesting interactions, but the simplest and most elegant is usually CSS, and specifically the additions that came with CSS3. Back in the old days, we had to rely on JavaScript for this kind of effect, but thanks to ever-increasing support for CSS3 across browsers, it’s now possible to set up effects like these without an

var z = document.getElementById('zoom'); z.onclick = function() { if( z.className == 'zoomin' ) { z.className = 'zoomout'; } else if( z.className == 'zoomout' ) { z.className = 'zoomin'; } else { z.className = 'zoomout'; } } @-webkit-keyframes zi { 0% { -webkit-transform: scale(0.5); } 100% { -webkit-transform: scale(1); } } @-webkit-keyframes zo { 0% { -webkit-transform: scale(1); } 100% { -webki

ちょっと凝った動きをつけたいけど、Canvasでガリガリ書くのはちょっと・・ という方に是非お勧めしたいのがSVGアニメーション！ SVGはXMLをベースとした2次元ベクターイメージなので拡大縮小が自由というのも魅力の一つ。 このTipsNoteのロゴで弊社のキャラクターTAMくんが動いているのもSVGアニメーションによるものです。 今回はそんなSVGで、マスクした画像のフチをぷるぷる動かすサンプルを作ってみたいと思います。 完成デモ ＞＞ 素材を作成 まずはIllustratorでぐねぐねした枠(A)を書きます。 続いて(A)を複製し、パスの数は変えずに枠の凹み具合などを変えた(B)を作成します。 これだけでも枠を動かすことは可能ですが、2つだけだと動きが単調になってしまうので 今回は4パターンの異なる枠(A〜D)を用意しました。 用意ができればそれらをSVG形式に保存して準備完了です！

まだすべてのモジュールが勧告には至っていませんが、CSS3でアニメーションが使えるようになって数年たち、複雑ではないちょっとした動きなら、クライアントからCSSでの実装を依頼されることが増えてきました。 CSS3アニメーションを使う際のネックになっていた、IE8、IE10のサポートも終了したことで、ますます使う機会が増えるのではないかと思います。（VistaのIE9は生き残っていますが…） 配布されているソースを貼るだけで普通に動いてくれるので、どのプロパティが何を指定するものなのか、漠然としかわからないまま使っていましたが、使ってみたら、意外と理解できていないことが多かったので、調べました。 CSS3のアニメーションには「animation」と「transition」がありますが、まずはその違いから。 ■animation ループできる 自動再生できる keyframesで、動きを細かく

今回は、HTML5, CSS3 を使ってウェブサイトをつくる際の助けになる JavaScript ライブラリ Modernizr をご紹介します。 HTML5, CSS3 では便利な機能が多数追加されましたが、ブラウザによって対応状況はまちまちです。 Modernizr を使うとブラウザの HTML5, CSS3 対応状況を簡単に調べることができるので、個々の状況にあわせたコードを比較的容易に書けるようになります。 バージョンの古い Internet Explorer 等に対応する際、コンディショナルコメントやいわゆる CSS セレクターハックを使用することがありますが、それらと同様のものと考えると分かりやすいかもしれません。 それではごくごく簡単ではありますが、以下に基本的な使い方をご紹介します。（バージョン等は記事執筆時点のものです。変更になっている場合があります。） 1. moder

TransitionsプロパティはCSS3で追加されたアニメーション機能です。 使ってみたら簡単に実装できたので、今回はTransitionsについて書いてみました。 :hoverでdiv要素を徐々に灰色の背景に変化させる記述例です。 ■css記述例 #demo { transition: all 5s linear; -o-transition: all 5s linear; -moz-transition: all 5s linear; -webkit-transition: all 5s linear; } #demo:hover { background: #CCCCCC; } ■HTML記述例 <div id="demo"> 色が変わります。 </div> デモページはこちら 今回のサンプル例の値を細かく見てみましょう。 transition: all 5s linear; al

2016年1月12日 (米国時間) で、 マイクロソフトによる旧バージョンの IE のサポートが終了し、 Windows 7、8.1 では IE 11 のみがサポート対象 となります。 （一部 Windows Vista などでは IE9 もサポート継続されますが、 IE8 は完全にサポートやセキュリティ・アップデートが終了します。） ［参照］ Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/ 今まで IE7、8 対応の案件を多く担当していたため、 正直、新しい CSS について把握しきれていません。 そこで、新規案件でバリバリ使いたい IE11 以降で使える CSS の一部をまとめてみました。 記事の後半では、Window

行頭記号やリストマークなどの装飾を、画像なしで実現する方法で普段よく使うものをリストアップしてみました。 今回は、 先頭に何かしら装飾をつける 2行目以降の先頭を1行目と揃える 以上の2点をリストアップの条件にしました。 サンプルはこちらです。 sample1 装飾文字を直接記述（全角のみ対応） サンプルはこちら まずはシンプルに、直接HTML上で行頭に「※」を挿入する方法。 2行目以降の先頭が1行目と揃うように、text-indentで「※」の1字分下げてやります。 そのままだと行の先頭が1字分左に寄ってしまうので、その分左マージンを取って調整します。 p { text-indent: -1em; margin-left: 1em; } ※ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト sample2 装飾文字を直接記述（全角・半角どち

今回は、jQueryのanimate()に比べて高速で高機能なプラグイン「Velocity.js」から、 前回の記事で取り上げられなかった項目について調べてみました。 ■Velocity.js（公式/記事作成時最新バージョン 1.2.3） http://julian.com/research/velocity/ ■GitHub https://github.com/julianshapiro/velocity 前回の記事でも触れましたが、 Velocity.jsの基本的な書式は下記のようになっています。 .velocity( properties, options ) .velocity( properties [, duration ] [, easing ] [, complete ] ) これは jQueryの animate() の書式と同じですが、 Velocity.jsでは、上

2016.07.13 【JSいらず】CSS3 のFlexbox を使った、イマドキの上下中央配置レイアウト Flexboxは実戦投入していますか？ この便利なボックスレイアウトを使えば散々制作者の頭を悩ませた横並びレイアウトが簡単に出来ます。 プロパティが多くて「アレをするにはどうするんだったっけ・・・？」となることも多々ありますが・・・。 See the Pen Basic Flexbox by Chiaki (@mellowchanter) on CodePen. 基本的には、上のソースコードのように display:flex; を指定すれば、子要素がキレイに横並びになります。 子要素の幅を変えたいときは、子要素に flex-basis: サイズ; を指定しましょう。 もっと詳しくFlexboxの使い方を知りたい方は、下記のURLを参考にしてみてください。 フレックスボックスでカラムレ

2016.05.30 【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法 CSSの擬似要素::beforeや::afterを使って、文字列や画像等を挿入することありますよね。挿入したい内容は、下記のように、contentプロパティの値に指定しておけば、要素の直前か直後にCSSだけで擬似的に挿入できます。 要素名::before{ content: 値; } 要素名::after{ content: 値; } このcontentプロパティの値を動的に変更したい時、jQueryを使用するのであれば、セレクタで、疑似要素::beforeまたは::afterを指定してアクセスすればいいのでは…？と思ってしまいますが、疑似要素はセレクタで直接指定することができません。そもそも擬似要素は非DOMであるため、JavaScriptから操作すること

ちょっとした動きをJavaSciptなしで実装できないかと思い、 CSSのみで吹き出しの表示・非表示を作成しました。 ブラウザはChrome、Firefox、IE9以上で確認しています。 サンプル 罫線で囲まれた「ここをマウスオーバーすると・・・」をマウスオーバーすると右上に吹き出しが表示されます。 See the Pen aNgEOj by yuri nagamatsu (@nagamatsu) on CodePen. マウスオーバーの動きは隣接セレクタで指定する 罫線で囲まれたエリア(p.text)と吹き出し(p.fukidashi)を隣接させます。 隣接クラスタは、同じ階層の要素で直後にあるものにCSSを適用し、プラス記号 (+) で記述します。 ページを読み込んだ時は吹き出しをdisplay: none;で非表示にしており、 罫線内をhoverでdisplay: block;になり

サイズや比率がバラバラの画像を、CSSで同じサイズにトリミング（はみ出た部分をカットして表示）する方法を紹介します。 運用案件やCMSなど、更新の度にサイズ・比率がバラバラの画像がアップロードされてしまい、レイアウトが崩れると困りますよね。また、更新を担当する人がWebに詳しくないクライアント様であったり、担当者のスキルによっては画像を加工することが難しい場合もあると思います。 CSSで調整するようにしておくと、画像サイズがバラバラでもある程度レイアウトを揃えることができます。 やり方 HTML構造は、トリミングの枠になる要素で、画像を囲む必要があります。 例では<div>を使っていますが、<p>や<li>でも問題ありません。外側の枠はブロック要素が良いようですので、もしインライン要素を使う場合はdisplay: block;にしておくと良いと思います。 CSSのトリミングは、パターンによ

突然ですが、transformプロパティのskew使っていますか？ skewを使えばX軸、Y軸へのゆがみを表現できるのでちょっとした動きを作る際にとても便利です。 今回はそんなskewを使って、化粧品のクリームがぷるぷる揺れるデモを作っていきたいと思います！ 完成デモを見る 素材を用意してHTMLに配置する 下記の写真を利用して、青色にしている真ん中のクリーム部分だけを動かしていきましょう。 用意した素材は、下記の3枚で、重なり合うようにHTMLに配置していきます。 ）一番下にオリジナル写真。 ）二番目に動かしたい箇所だけを切り抜いた「クリーム」画像。 ）一番上にクリーム部分を切り抜いたマスク画像。 ※二番目のクリーム画像を動かした際に、不自然な隙間ができてしまうことがあるので 念の為背景にオリジナル写真を配置しています。 skewについて skewを使えばX・Y軸の傾斜角度をそれぞれ個別