最近のWebサイトやアプリで見かけるアニメーションを使った操作が気持ちいいUIエレメントを実装するスタイルシートを紹介します。 デモではHTMLやCSSのコードが掲載されているので、コピペで簡単に利用できます。 ※一部JavaScriptも必要最小限で使用しています。
CSSのすごいアイデアから実用的なテクニックまで！スタイルシートの最新テクニックのまとめ
最近のWebサイトやアプリで見かけるアニメーションを使った操作が気持ちいいUIエレメントを実装するスタイルシートを紹介します。 デモではHTMLやCSSのコードが掲載されているので、コピペで簡単に利用できます。 ※一部JavaScriptも必要最小限で使用しています。
[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ
<hr class="style**"> <style> hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted #8c8b8b; } hr.style5 { background-color: #fff; border-top: 2px dashed #8c8b8b; } hr.style6 { background-color: #fff; border-top: 2px dotted #8c8b8b; } </style>
![[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2cf8d2fa440a82f4d989af711914223cad329f6/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015121100.png)
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
プリロードやローディング画面を簡単に実装できるjQuery.ImgLoaderの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです。 今回は簡単にプリロードやローディング画面を実装できるjQuery.ImgLoaderの使い方をご紹介したいと思います。 jQuery.ImgLoaderとは 多くの画像やWebフォントを使うサイトを作成する場合、ロードにかかる時間が長くなり、デザインが反映される前の状態をユーザに見られてしまうことがあります。 デザインは綺麗な状態を見てもらいたいですよね。 そんなときはローディング処理を簡単に実装できるjQuery.ImgLoaderを使って、ローディング画面を作ってあげましょう。jQuery.ImgLoaderは画像のプリロードを行うライブラリなのですが、ローディング画面も実装することができます。 準備 まずはImgLoaderを使うための準備をします。 下記URLからダウンロードしてみましょう。 https://github.com/Takazudo/j
[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ
大きな写真画像の背景やMaterial Designなどのフラットなスタイルに合うソリッドなラインでデザインされたゴーストボタンを実装するチュートリアルをまとめました。 シンプルなものから、かわいいアニメーションや一味違ったアニメーションなど、さまざまなものが揃っています。
![[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e899eb8da8739d23bb0715fe273fb5e1d72d6be1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011500.gif)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
