タグ

ブックマーク / design.kayac.com (4)

  • 意外と知らない?アイコンはWebフォントでつくるとこんなに便利!

    Webフォントでアイコンをつくろう! ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 (以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。) jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ! 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C

    mrmt
    mrmt 2012/02/29
  • どう考えても無茶な「CSSプログラミング」が話題に

    CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itCSSプログラミングが流行中! ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。

    mrmt
    mrmt 2011/06/22
  • 地獄のミサワがCSS3の勉強に最適と話題に

    CSS3に興味はあるけど、きっかけが無いなあと思っている方へ こんにちわ、jsdo.it担当のふちがみです。 最近jsdo.itで地獄のミサワをイジりながらCSS3やcanvas、javascriptを学ぶ動きが活発なんです。 「それ2年ぐらい前に見たわー」という方も続きからどうぞ! 一瞬でわかるまとめ フロントエンジニアたちが地獄のミサワに夢中 - togetter canvasで描かれたミサワ

    mrmt
    mrmt 2011/02/16
  • metaタグを追加してFacebookに対応する方法とハマりやすいポイント

    Facebook使ってますか? こんにちわ、ME課の渕上です。 ミーハーなぼくはもうすっかりFacebook中毒です。 Facebookといえば、「いいね!」や「シェア」といった仕組みで、面白いものを友達に共有できる仕組みが特徴的です。 この仕組をうまく使えば、プロモーションやキャンペーンに有効活用できそうですね。 今回は、いつものhtmlに一手間加えて「いいね!」や「シェア」で効果的に露出できるような方法をまとめてみたいと思います。 それでは続きからどうぞ! 「いいね!」「シェア」をするとFacebook上に何がどう表示されるのか 「いいね!」や「シェア」をすると自分の掲示板やニュースフィードにアクティビティが表示されます。 自分の掲示板 「いいね!」したものは「最近のアクティビティ」という項目にまとめられて表示されます。 よくよく見てみると、記事のタイトルだけのものと、サイト名が入って

    mrmt
    mrmt 2010/10/28
  • 1