タグ

WEBデザインとcss3に関するnaskinのブックマーク (3)

  • リストに1pxのラインを追加するだけで、印象がぐっとよくなる

    #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord

    リストに1pxのラインを追加するだけで、印象がぐっとよくなる
  • CSSのテキストシャドウをカンタンにかけられる「Css Text Shadow」

    以前にブロック要素にCSSのドロップシャドウを付けるサービスをご紹介しましたが、CSSを使った高度なテクニックをカンタンにおこなえるオンラインサービスが増えていますよね。 今回は、テキストにシャドウなどのクールなエフェクトをCSSでかけられるサービスのご紹介です。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! CSSのテキストシャドウを作れる「Css Text Shadow」 「Css Text Shadow」は、テキストにドロップシャドウやネオン、炎などのエフェクトをかけるCSSを、プレビューで見ながら作成できるオンラインツール。 エフェクトは全部で12種類。ログイン不要で、必要なときに手軽に使えるようになっています。 炎のエフェクトのサンプル このように、テキストへエフェクトをかけることがで

    CSSのテキストシャドウをカンタンにかけられる「Css Text Shadow」
  • CSS3で画像のドロップシャドウを簡単に作成できる「CSS3 Drop Shadow Generator」

    画像にドロップシャドウを付けるには、Photoshopなどの画像編集ソフトで画像にエフェクトをかける必要がありますが、そのようなことをしなくても、CSSを使ってドロップシャドウの効果をつけることもできるようになりました。 ただ、できるとは言っても、自分のやりたいように0からその効果をつけるのは、なかなか至難の業。そこで今回は、ドロップシャドウを付けるCSSを簡単に生成してくれるサービスをご紹介します。 CSS3のドロップシャドウをカンタンに作れるジェネレータ 「Css3 drop shadow generator」は、スライダでドロップシャドウの効果を調整するだけで、HTMLタグとCSSを生成してくれるサービス。 影の付け方も全部で8種類と豊富で、この記事の冒頭にある画像のようなエフェクトを簡単にかけられるようになっています。 ドロップシャドウを簡単に設定

    CSS3で画像のドロップシャドウを簡単に作成できる「CSS3 Drop Shadow Generator」
  • 1