タグ

maskに関するsometkのブックマーク (4)

  • CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ

    前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー(colorプロパティ)にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体

    CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ
  • 超リアルお面リアルフェイス

    日々進化する3Dプリント技術、しかしその技術は未だ人の顔を物と見間違える程、リアルに高精細に再現する事ができません。 REAL-fは、最新の3Dプリント技術で形を作り、高精細の2Dプリント技術で彩色する独自のハイブリッド技術を開発しました。 この技術を駆使し、肌のキメや眼球の毛細血管まで再現した、高精度且つスーパーリアルな人の顔のお面「リアルフェイス」をオーダーメイドします。 活用例 ・顔認証システム等、顔に関する研究・開発の検証・テストに ・アーティストさんのコンサート・ライブ等の演出に ・タレントさんの顔や全身を複製し、宣伝・広告に ・TV、映画、web等の映像コンテンツの演出に ・個人の方の趣味や、思い出をカタチに 制作方法・費用 1.3Dスキャン撮影 (モデルさんの3D撮影を行い、制作させて頂く方法) 最もリアルで、精度の高い方法。撮影時間は約5分。 納期は2~3週間。製作費は1

  • 画像を使わずCSS3だけで尖ったBack・Nextボタンを作る方法

    CSS3だけで、iOS風のBackやNextの尖ったナビゲーションボタン作る方法ないかな〜と探していたところ、良記事があったので紹介します。Androidで確認してませんが、webkit向けなのでたぶんAndroidでも大丈夫だと思います。Androidはひと工夫必要そうです。 CSS3 Wizardry -Back and Next Buttons Revisited- CSS3 Wizardry -Subpixel Rendering- Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。 ポイントとなるHTML ボタンを構成する要素はこれだけ。 <!--ボタン要素--> <div class="button bordered back"> <span class="label">Back</s

  • 顔面を一分のスキなく防寒しているのに人相が丸わかりな目出しニット帽

    スキーやスノーボードをする際に着用する目出し帽は、防寒が目的ではありますが、人相が分からなくなるためちょっと怪しい人物に見えてしまうのが玉にキズ。 そんな不便を解決すべく、自分の人相を編み込んだ目出し帽を作った人物が現れました。これを着用していれば顔の部分を防寒しつつも、知り合いにちゃんと自分を認識してもらえるかもしれません。 人相の分かる目出し帽の製作風景は以下から。andrewsalomone.com >> Blog Archive >> Machine Knit Identity-Preserving Balaclava 顔の部分は顔を360度ぐるりと見た画像をフォトショップで加工し、1枚のビットマップ画像にして、それを元に編んでいったとのこと。ちなみに、帽子を編むのには「Brother KH-930e」という自動編み物機で好きな柄を編めるようハッキングしたというBecky Ster

    顔面を一分のスキなく防寒しているのに人相が丸わかりな目出しニット帽
  • 1