jQueryとCSS3で作るページの上までスクロールするボタン
wordpressはプラグインがたくさんあって便利です。しかし、個人的には安易にプラグインを使うのではなく、自作できるものは自作できるよう心がけています。 今回紹介するのは前からよく使われている方法ですが、プラグインで実装している人も多いようなので紹介します。自分で作った方が自由ですし、無駄に大きなファイルにならないのでいいかと思います。 今回はボタンが現れるパターンを3種類作ってみました。定番のフェードインして現れるものと、CSS3を使ったものがあります。まずはサンプルをご覧ください。 HTMLは全て同じです。 <a href="#" id="page-top1">上に戻る</a> 非常にシンプルです。 では、CSSとiQueryを1つずつ解説します。 1. フェードイン まずはとても有名なやつです。ある程度スクロールするとフェードインして現れます。CSSは次のようになります。サンプルは
Photoshopいらずでオシャレな加工ができるCSSフィルターのサンプルコード12選
Web用の画像を加工する際にPhotoshopを使っている方も多くいらっしゃいますが、簡単な画像加工なら、CSSのfilterプロパティ（CSS Filter）を使うのがオススメです。 CSSフィルターを使えば、Photoshopでもおなじみの彩度、明るさ、ぼかしといった様々な画像加工が手軽にできます。しかも、数行のコードを書くだけで、動画にも使えるので便利です。 今回は、codepenに公開されているCSSフィルターのサンプルをまとめてご紹介します。 今すぐ活用できるものばかりですので、ぜひこれからの作業に取り入れてみてください。 画像加工が手軽にできるCSSフィルターサンプル 1.Grayscale Filter http://codepen.io/grayghostvisuals/pen/cgFGm モノクロ加工として画像編集ではおなじみのグレースケール（Grayscale）も、CS
CSS を使って長文最後を「･･･」で省略する方法（複数行対応） - Qiita
単行だと簡単にかけたり、-webkit対応だと簡単にかけたりするのだが、 色々なブラウザでの複数行だとちょっと面倒だったのでメモ。 対応方法 htmlに長文を用意 .cut_txt { position: relative; overflow: hidden; /** 行数設定 **/ height: 3em; line-height: 1.5; } .cut_txt:before, .cut_txt:after { position: absolute; /** 塗りつぶし背景色 **/ background: #f7f6ec; } .cut_txt:before { /** 語尾文字 **/ content: "･･･"; bottom: 0; right: 0; } .cut_txt:after { content: ""; width: 100%; height: 100%; }
待ち時間をもっと楽しく！コピペできるCSSローディングアニメーション38個まとめ
開いているウェブページが読み込み中であることを、分かりやすく伝えるローディングアニメーション。これまではGIFなどで作成されることもしばしばでしたが、CSSの進化によって自由でカスタマイズ性の高いローディングアニメーションがたくさん登場しています。 今回はコピペで利用できるCSSローディングアニメーションを、コミュニティサイト Codepen よりピックアップしご紹介します。 よりオリジナル性の高いデザインを作成することができ、待ち時間が楽しみになるようなエフェクトを中心に揃えています。どうしてもファイルサイズが大きくなってしまうページなどに活用してみてはいかがでしょう。 詳細は以下から。 待ち時間が楽しくなる、CSSコピペで実装できるローディングアニメーションまとめ #22 – Loader with Pure CSS 動きに合わせて、背景のグラデーションカラーが美しく変化するローディン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
