Blogブログ

apple風のハンバーガーアイコン製作メモ。 svgは使ってませんが、それっぽく実装するために。 アニメーションはCSS3で制御しています。 クラスに応じて角度を変えたりしているだけですね。 ハンバーガーアイコン以外にも、応用効きそうです。 参考：http://www.elijahmanor.com/css-animated-hamburger-icon/ Thanks!!

フォント指定する際に調べたことの備忘録。 CSSでフォント指定をする際に、.ttc拡張子のファイルを読み込ませたのですが、正しくフォントが表示されていませんでした。※win7 chrome 例:Doesn’t work @font-face { font-family: ‘Cochin’; src: url(‘./font/cochin.ttc’) format(“truetype”); } h1{ font-family : “Chochin”; } 理由を調べたところ、どうやらttcは複数フォントを固めたzipのようなもので、通常使うものとは違うと。 そこで下のサイトでttfに変換して、読み込ませたところ、正常に動作しました。 http://www.files-conversion.com/font-converter.php @font-face { font-family: ‘Cochin’; src: url(‘./font/cochin.ttc’) format(“truetype”); } h1{ font-family : “Chochin”; }   フォントの形式について 調べていると、様々なフォントの形式があるようです。 .ttf (trutype形式) winやmacで使う一般的な形式 .ttf, .otf (opentype形式) adobeとmicrosoftが共同開発したフォントの形式。OSや機種の違いを問わず表示される .woff (woff形式) web open font format という、その名の通りwebに特化した形式。 データが軽いらしい。 .svg (svg形式) svgを利用した形式 […]

吹き出しデザインをCSSのみで実装。 吹き出しの出てる部分をbefore, after擬似要素で実装。 Chrome, FF, safari, IE8,9,10で確認。 こっちは吹き出しに影をつけたもの。 出てる部分はbefore, after擬似要素で実装しているが、影をつけるためroteteで2d transformしている。 Chrome, FF, IE9,10で確認。FFではあんまりキレイじゃない。

オーバーレイを出すときにオブジェクトを上から表示させて、消すときに下にやりたかったのでそのデモ。 オブジェクトを真ん中に持っていく時に、absoluteで指定したのがこれ。 調べていくうちにtransitというプラグインの事を知ったので、それを使ってみたのがこれ。 http://ricostacruz.com/jquery.transit/