[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック
三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ！ 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要ありません。 ※利用する際は、ベンダープレフィックスを加えてください。 参考：面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free .hoja { color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -90px; width: 180px
![[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bef7bf928dc917611c060c7f63ae5b39c925d844/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112601.png)
ぷるるんと動くアニメーションが気持ちいい！新感覚のナビゲーション -Gooey pagination
コンテンツスライダーや縦長ページのナビゲーションでよく見かけるビュレットタイプのナビゲーションをかわいいアニメーションで実装するテクニックを紹介します。 アニメーションの操作が気持ちいいので、コンテンツより楽しんでしまうかも。 実際の操作は、下記ページでお楽しみください。 ※Chrome, Safari, Firefox, IEは11では動作しました。 Page scroll concept こっちの方はアニメーションが更に流体になっています。 実装はけっこうシンプルです。 HTML 各ビュレットはリスト要素で実装されています。 5つ点の上を「.select」が移動する感じです。 <ul class="dots"> <li class="select"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></l
[CSS]簡単な記述でアコーディオンコンテンツを実装するフレキシブルボックスを使ったテクニック
2番目にホバーすると、2番目が広くなります 実装のヒントになったのは「Outdated Browser」のメインUIで、このflexboxを使ったUIだけでなく他にも面白い仕掛けが施されています。 Outdated Browser 実装はこんな感じです。 HTML HTMLは非常にシンプルで、各カラムはリスト要素で実装しています。 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> CSS CSSも非常にシンプル、「display: flex;」で各カラムを設定し、通常時に「flex: 1;」、ホバー時に「flex: 3;」になるようにします。 ※flexboxのブラウザのサポート状況 下記のコードは、各カラムにカラーを設定するだけでそのままコピペで使えます。 body { colo
[CSS]このホバーエフェクトかわいい！蝶番を軸にぷら〜んと開くCSS3アニメーション
Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。 パタリと開いた後、ぷら〜んとするのいいですね。 Hinged Twitter Button 実装は、こんな感じです。 HTML TwitterのアイコンにはFont Awesomeが使われており、アイコン、アカウント、蝶番をそれぞれspan要素で配置しています。 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <a href="http://twitter.com/jonitrythall"> <span class="button"> <i class="fa fa-twitter"></i> </span> <span cl
[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation
Vibrant Villages サークルのアニメーションは、ここではjQueryとちょっと複雑なHTMLが使用されています。 HTML: 参考 <div class="big-circle"> <div class="text-block"> <h6>Welcome to</h6> <h4>Vibrant Villages</h4> <h6>New Hampshire</h6> <h1>inform<br/>inspire<br/>implement</h1> </div> <ul class="circle"> <li><span class="orange"><span class="blue"></span></span></li> </ul> </div> CSS3 Circle Animationでは、HTMLをシンプルし、さらにCSSのみで実装してみようとしたソリューションで
[CSS]アイデアが面白い！画像に美しいインタラクションを加えるスタイルシート
風景写真など、普通の画像の上にグリッドを描き、各マス目をホバーした際に尾ヒレのようにフェードで追従させるエフェクトが美しいスタイルシートを紹介します。 便利になるとかそういった類いのものではありませんが、ちょっとした何かに使ってみたいですね。 JavaScript無しというのはポイント高いです。 デモのアニメーション 実際の動作は下記ページで確認できます。 デモはCSS3対応ブラウザでご覧ください、Chromeが一番美しくエフェクトを描画します。 LeTrailing Effect 実装はシンプルで、あえて難点をあげれば空divを数多く使うことでしょうか。 HTML 画像はbodyの背景で表示されているので、HTMLはグリッドを描くdivだけです。 <body> <div class="div"></div> <div class="div"></div> ... ... <div cla
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
