タグ

CSSとwebdesignに関するMukeのブックマーク (5)

  • 日本語Webフォントの革命 - 3846masa's memo

    語Webフォントに革命がおきた. 詳しくは続きを読んでくれ. ちょっと大きく出てみた. 実装についての記事はこちら この記事で言いたいこと 動的に日フォントのサブセットを作成してくれるOSSを作りました. サンプルページはこちら 臨時のサンプルページはこちら 追記 herokuが落ちてる,メモリ不足だな.早い所Dockerfileつくろう. 追追記 herokuで運用は再検討したほうがよさそう.「こういうこともできます」の事例ということでひとつ. (やっぱり普通のサーバで動かす分には大丈夫そうな気がする.どうだろう) そんなわけで,どうぞご利用ください。 (ちなみに粗い作りなので,pull-requestやissue投稿をしてくださると嬉しいです.) 何が革命なんだ 革命が起きたというけど,どこが革命なの? 僕には革命が起きたようには思えないけど そんなこと言わんといて,泣くわ.

    日本語Webフォントの革命 - 3846masa's memo
    Muke
    Muke 2015/04/08
    おぉーすごい
  • CSSの content プロパティーを使いこなそう!

    CSSの content プロパティーを使いこなそう!CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…!?」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 content プロパティーって何?content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTML などの文書には記述されていない要素を CSS によって新たに作り出された架空の要素です。Web クリエイターボックスでも、過去記事「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」や「経歴や会社の沿革ページに!簡単な CSS

    CSSの content プロパティーを使いこなそう!
  • マークアップエンジニア だからうれしい Fireworksの使い方あれこれ

    Sass/Compassを「触って覚える」を目的とした講習会スライド。 実習で使用するファイルは以下からダウンロード頂けます。 http://webnaut.jp/download/markup_140204/sass.zip 目次: 1. Sassとは/機能紹介 2. Sassを触ってみよう 3. Sass開発環境の設定 4. [Work1]ネストとインポート※ 5. Compassとは/機能紹介 6. Compassの設定 7. [Work2]Compassを使ったCSS Sprite実践※ 8. [Work3]納品時の作業※ 9. 書籍、参考サイト紹介 10. [Work4]追加課題※ =========================== 紹介記事 http://webnaut.jp/markup/663.html ===========================

    マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
  • 物事をシンプルにするます

    ヘッダが主張しすぎな感じとかがちょっと飽きてきたので、ちょっとだけリニューアルした。ロゴとヘッダ変えただけ。緑ももうやめようかな……とは考えたが面倒になったのでそのままで……。Ctrl+F5! ロゴ 手持ちのフォントで"h"だけを打ち出して良さそうなのを選んだだけという。使ったフォントはJandlesで、MyFontsから無料で手に入る。ベベルるかグラデるか迷った末グラデった。もうアルファチャンネル付きのPNGファイルでいいよね? いいよね! ロゴの配置はちょっと悩んだ。マージンに負の値を入れてfloatさせればいけそうな気がしたが、それではコンテンツとかぶさるように配置するのは無理な感じだった。また、コンテンツの左右のマージンが一定ではないので、absoluteでも正確に配置できない。とりあえず親要素をrelative、ロゴ部分をabsoluteにしてやって、親要素を基準にしてロゴを絶対

  • たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

    IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

  • 1