[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック | コリス

2014/11/26 187 users コリス box-shadow div single class

三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ！ 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要あり... 続きを読む

keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG

2014/08/20 72 users Sass くさ 朽木 animationプロパティ イケ

こんにちは！　フロントエンドエンジニアのせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実... 続きを読む

[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js | コリス

2013/09/08 74 users コリス jQuery スクリプト CSSアニメーション 複数

CSSアニメーションを組み合わせて利用する際、keyframesを使うよりももっと簡単に利用できるjQueryのプラグインを紹介します。 animo.js animo.js -GitHub animo.jsのデモ animo.jsの使い方 animo.jsのデモ デモはCSS3アニメーション対応ブラウザでご覧ください。 デモ デモはシンプルなアニメーションから、いくつかのアニメーションを組み合わせ... 続きを読む