タグ

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

  • CSS3を使ってできる画像まわりのエフェクトやスタイリング18

    CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード(シャドウ編) 13. フェード(グラデーション編) 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません

    CSS3を使ってできる画像まわりのエフェクトやスタイリング18
    richard_raw
    richard_raw 2012/02/27
    こんなに色色出来たんか。
  • CSS3でPhotoshopで作ったようなキレイなガラス風ボタンを作るチュートリアル

    CSS3 の新しいプロパティーを総動員したら、Photoshopとかで作ったきれいなアクア風(ガラス風)ボタンにどこまで近づけるか? というのを実際にやってみました。 チュートリアル風に、ステップごとに分けて説明していますので、CSS3を使ったリアルな表現のためのテクニックとして、ポイントだけでも覚えておくと、いろんなところで応用できると思います! こんな感じになりました 何はともあれ↓が出来上がったものです。 今はやりの CSS3ジェネレータ には負けてないと自負しています... さて、これを作る手順です。 ※Chromeで表示して画像にしています。実際のものはこちらから見れます。 作成ステップ ステップ1 : ベースとなるHTMLを用意 まずは、こんなHTMLを用意しました。このHTMLをベースに、CSS3を総動員していきます。A タグの中に SPAN が入っていますが、こいつらには後

    CSS3でPhotoshopで作ったようなキレイなガラス風ボタンを作るチュートリアル
    richard_raw
    richard_raw 2012/02/05
    おおお、出来るんだ。
  • めんどうな作業がわずか数秒に!新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成

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

    めんどうな作業がわずか数秒に!新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
    richard_raw
    richard_raw 2011/12/11
    Excelで送られてくるんだ……。/そういえば前の職場で、Word形式の仕様書からテストシートを作れないかなーとぼんやり考えてました。
  • 1