タグ

ブックマーク / webrocketsmagazine.com (2)

  • CSS3で線(border)をグラデーションさせるテクニック

    Illustrator とかでよくやる「塗りとパスのオフセットを使って実現する線のグラデーション」を、CSS3で実験してみました。 ↓とりあえず、border を使った場合と、線をグラデーションさせた場合の作例です。CSS だけで作っています。モダンブラウザで見てください。 微妙な違いかもしれませんが、線にグラデーションを適用した方、よりリアルで繊細な印象になります。 作り方 border は使いません。替わりに、ネストしたボックスを作り、親ボックスをグラデーションさせることで、線がグラデーションしているように見せます。 HTML 内側に span を入れ込んで「重ねた塗り」を実現します。 <a href="#" class="button"><span>ボタン</span></a> 外側のボックス (a) の padding が線幅になります。内側のボックス (span) は、白で塗りつ

    CSS3で線(border)をグラデーションさせるテクニック
    MIZ
    MIZ 2015/04/06
  • めんどうな作業がわずか数秒に!新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成

    お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた!そろそろ手がが疲れてきていませんか? そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります! Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います! DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)

    めんどうな作業がわずか数秒に!新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
    MIZ
    MIZ 2011/12/09
    こういう事自体はよくやるけど、最後メモ帳てw
  • 1