タグ

2012年5月12日のブックマーク (5件)

  • CSS3のWeb Fontを使ってみたよ。 | Ginpen.com

    英語だけですが……、Google web fontsのリソースとGoogle Font APIを使うと、簡単にWeb Fontを使って、文字のまま装飾する事ができます。 Web Fontって? CSS3で追加される機能で、サーバーに置いたフォントを使ったデザインを作れるようになるものです。 今までもフォントを指定することはできましたが、利用者のマシンにそのフォントがインストールされていないと無意味でした。Web Fontは指定のフォントファイルをダウンロードさせる事になるので、誰が見ても同じフォントで表示されるようになります。 ファイルのダウンロードが必要ってのがネックですね。日語の場合は英語と違ってファイルサイズが膨大になりますから、使いどころは限られそうです……。 Web Fontの使い方 手順はふたつです。 @font-faceでフォントのURLを指定する。 font-family

    CSS3のWeb Fontを使ってみたよ。 | Ginpen.com
    kotaro-ono
    kotaro-ono 2012/05/12
    Web Font かっこいいフォントがつかえる。
  • Scott Robbin

    A web developer from Evanston, Illinois

    Scott Robbin
    kotaro-ono
    kotaro-ono 2012/05/12
    Backstretch
  • 横幅いっぱいに画像を表示してくれるjQueryプラグイン-bgStretcher | memocarilog

    ブラウザの横幅いっぱいに画像を表示してくれるjQueryプラグインbgStretcherを使ってみました。bgStretcherはブラウザのサイズを小さくしても画像のアスペクト比が維持されて表示されます。 このブログの背景は画像を横いっぱいに広げるのをCSSで表示しているのですが、iPhone等の横幅が小さい画面でみると画像が縦に伸びてしまって嫌だなぁと思っていたんです。丁度こちらの記事で”[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher | コリス”プラグインが紹介されていたので早速使ってみました。 サンプルも作りました。 Internet Explorer 6, 7, 8, 9、Firefox 2, 3, 4、Opera 9+、Safari、Chromeにも対応しているようです。幅広いブラウザに対応しているので実用的に使えそうです。

    横幅いっぱいに画像を表示してくれるjQueryプラグイン-bgStretcher | memocarilog
    kotaro-ono
    kotaro-ono 2012/05/12
    横いっぱいに画像を表示。bgStretcher。
  • index.php?search=flowers

    Also visit our sister site Templateswise.com and start creating presentations faster with free PowerPoint templates! Background Labs share a wide variety of free patterns, website backgrounds, vector graphics, textures and design resources for everyone. Browse colors and styles, we have fresh resources and inspirational art for all your needs!

    kotaro-ono
    kotaro-ono 2012/05/12
    フリーの背景画像
  • ブラウザに合わせて背景画像のサイズを自動で合わせてくれるスクリプト・jQuery Backstretch

    とても楽そうだったのでメモです。画面 のサイズに合わせて自動で背景画像 をリサイズしてくれるので背景画像を 固定できる、というもの。jQueryのプラ グインなので手軽でいいですね。ユー ザーがどんなモニタサイズでも同じ 背景画像を表示させることが出来ます。 以前、同じ機能のjQueryプラグインがPHPSPOTさんでも紹介されていましたが、複数覚えておいて損はないのでご紹介します。 ↑ これがデフォルト。 ↑ ご覧のようにサイズを変更しても背景画像は変わりません。 自動で背景画像をストレッチさせるので、環境の違いによる背景画像の表示の差が生じることも無い、というもの。 使い方は非常に単純で、jQuery Backstretchを読み込んでから画像を指定すればおkです。 <script type="text/javascript" src="/js/jquery.backstretch-1

    ブラウザに合わせて背景画像のサイズを自動で合わせてくれるスクリプト・jQuery Backstretch
    kotaro-ono
    kotaro-ono 2012/05/12
    背景画像のサイズを自動調整してくれる。backstretch。