CSSとブログに関するliszworksのブックマーク (2)

  • おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ

    リンクを目立たせよう クリックして欲しいリンクがある時、ただ単にリンクを貼るのではなく枠で囲って目立たせてみましょう。 できる限りコードはシンプルに、コピペだけでできるようにしました。 枠がない場合はこんな感じですね。 必見!はてなブログのカスタマイズを一気に紹介する – SHIROMAG これを枠で囲って強調するようにカスタマイズします。 CSS まずはCSSにコードを追加していきます。以下の中から好きなコードを選んで、ダッシュボードの「デザイン」→「カスタマイズ」→「デザインCSS」に追加して下さい。 スマホで使う場合は、<style> ~ </style> で囲んでヘッダーのタイトル下にでもぶっこんでください。 シンプルなタイプ 必見!はてなブログのカスタマイズを一気に紹介する – SHIROMAG .entry-content .emphasize-link { position:

    おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ
    liszworks
    liszworks 2017/08/14
    リンクを枠で囲うヤツ これ入れたい
  • 動くCSSのためのメモ。

    CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ

    動くCSSのためのメモ。
    liszworks
    liszworks 2017/07/29
    サンプルから解説からボリュームまで素晴らしすぎる。大容量でロードが遅いけどその間出てくるウサギのアニメーションが可愛くて全然気にならない(笑)
  • 1