Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
![最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/26b887886b1f50ec2386f452745d8f228954add5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017021501.png)
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
RefineSlide 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」。 スライドのアニメーション自体が美しいのもさることながら、個人的に言及したいのはキャプション部分で、次のように、元画像に半透明に重なって実に美しいではありませんか。 もともとそういう画像を作っていたんじゃないの?と一昔前の人なら思ってしまうはずです 右上に出したキャプション。文字の選択もできます。 右下にキャプションを出してみた例。う〜んやっぱりこのデザインはいいですね CSS3を使ってこれだけ出来るっていうのはいいですね。将来的には、画像は必要最小限で、CSS3でエフェクトをかけて主に使うっていう使い方が結構増えてそうです しかもIE7以降サポートです 関連エントリ 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」 レ
私自身はあまり馴染みはなかったのですが、最近はどこのサイトも当たり前のようにjQueryが導入されており、使用する機会が増えてきました。 これを機に色々試しつつ勉強せねば、ということで、シンプルなスライダーのプラグインを作成してみました。 サンプル サンプル-ダウンロード 使い方 HTML+JavaScript <div id="slider00"> <ul> <li style="background-color:#FFF;">ああああああ</li> <li style="background-color:#EEE;">いいいいいい</li> <li style="background-color:#DDD;">うううううう</li> <li style="background-color:#CCC;">ええええええ</li> <li style="background-color:#B
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く