CSSのgradientを使ってノートみたいな罫線を描く : おち研 技術部
これはノート風に罫線を付けたスタイルです。 段落と段落の間は1行あける設定にしています。ついでに、一般的な書式にしたがって各段落の1文字目を字下げする設定にもしてみました。<br /> ちなみに、途中で改行すると次の行は文頭から始まります。DIVの高さは可変なので、テキストが長くなると自然に全体が伸びていきます。 Pタグに border-bottom を引くと短い行の時に罫線が途切れてしまうのですが、これは外側のボックスに罫線を引いて、それに併せてテキストを表示しているので端から端まで罫線が入ります。 ただしグラデーションを使って描画しているので、 boder のように点線を使った装飾は出来ません。 HTML 【HTML】 <div id="note"> <p>なんちゃらなんちゃら</p> <p>ほにゃららほにゃらら</p> <p>とってんぱらりのぷぅ</p> </div> divの内側に
jQuery Easing Plugin
Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). All done with a straight animate call, no need to specify the animation type at all. Select easing types for the demo first one for down, second one for up. Then click the clicker. Updates 12/11/07 1.3 jQuery easing now supports a de
FacebookのPage Pluginをリサイズに対応させる ｜ Tips Note by TAM
ブラウザ幅を変更した時に動的にPage Pluginを再読み込みさせる方法を紹介します。 通常の埋め込み方の紹介は省略します。公式ドキュメントを見てください。 ページプラグイン - ソーシャルプラグイン css .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe[style]{ width: 100% !important; } html 取得してきたコードを#pagepluginの中に入れる。 <div id="pageplugin"> <!-- 取得してきたコード --> <div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="500" data-tabs="timeline" data-small-h
CSSとテキストで実装するローディングアニメーションのサンプルコード - NxWorld
CSSとテキストで実装したローディングアニメーションのサンプルです。 サイズ・カラー・フォントといった見栄えについてはもちろん、アニメーションタイプやスピードを調整したい場合もすべてCSSで変更できるようになっていますし、表示させるテキストもHTMLを書き換えるだけで変更可能なので、手っ取り早くローディングを用意したいときなどに便利です。 ここではアニメーションGIFでの見栄えと実装コードを紹介しているので、実際の表示は以下デモで確認してください。 また、デモではSCSSを利用したコードで実装しているので普段からSCSSで用いてる人はこちらでコードを確認してください。 CODE #1 先頭の「L」からひと文字ずつフェードアウトしていき、末尾の「G」までいったら次は先頭からひと文字ずつフェードインしてくるタイプのもので、フェードイン・アウトの見栄えはopacityを利用しています。 実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの確認に使いやすくてかなり便利！要素検証、アセット抽出ができるChromeの機能拡張 -CSSPeeper