クリック率急上昇間違いなし！男性なら絶対にクリックしてしまうボタンを発明した
どうも。平成の発明王、おつぱ（ @OZPA ）です。 この間ネット巡回してたらすごくかっこいいボタンスタイルを発見したのですが、それを弄くっているうちにとんでもないボタンを発明してしまいました。 題して、「男性なら絶対にクリックしてしまうボタン」 その全貌を、とくとご覧下さい。 かっこいいボタンスタイル まずは、発明のきっかけとなりましたかっこいいボタンスタイルからご紹介。 それが↑こちら。 まるでゴムを押し込んでいるようなテクスチャで、非常に綺麗ですね！ コードは→Quite realistic buttons – CodePenをご覧下さい。 改造した さて。 これを見ていた私は思いました。 このスタイルをもっともっと魅力的にすることは出来ないだろうか？と。 なんかもう、クリックせざるを得ないようなボタンにすることは出来ないだろうか？と。 そして、構想1日・実作業4時間にも渡る大手術の
画像を一切使わずCSSで描かれた「けいおん！」の澪がマジですごい！
今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん！」の秋山 澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。 「けいおん！」（K-ON!）は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動を行っていくストーリーで人気のかきふらい氏による4コマ漫画作品です。2年前にアニメ化、今月12月より映画が公開されている人気作品ですね。秋山 澪はその作品に登場するキャラクターです。その秋山 澪をまったくの画像なしで、html+CSSのコードだけで表現しています。 私も以前にCSSでドラえもんなど様々な作品を描いたりしましたが、はっきりいってhtml+CSSのコードだけで絵を描くのはとても大変です
css3のtext-shadowだけでモナリザを描いてみた - Cherenkovの暗中模索にっき
はいー、できましたー。text-shadowを1ピクセルごと配置してモナリザを表現しています。 これまでいくつか「cssだけで◯◯」を見てきましたがあんなのはハッタリです。タグ使いまくりで全然cssだけじゃありません。この手法を使えばテキストとcssがあれば再現できます！ ジェネレータも作ったので、よかったら遊んでみてください。windowsのChrome6 devとFirefox3.6.6で動作確認していますが、Chromeはtext-shadowの描画が遅いので、Firefox推奨です。 Mona Lisa de text-shadow (CSS) - gallery 注意: Firebugなどでcssを見ると応答なしになったり場合によってはクラッシュするのでしっかりと準備して自己責任でお願いします。 モナリザの原理 text-shadowはテキストの影を演出するものです。構文は以下の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLとCSSでカメラを書いたよ
Oak Studios
画像もJSも使わず、CSSのみでTwitterやApple、マクドナルドなどのロゴを作成、コードを公開しているサイト
SASSIENCE ～ 世界が嫉妬するCSSへ
