[CSS] フォントのアンチエイリアス設定
CSS3のfont-smoothingプロパティを使用することで、フォントのアンチエイリアスを調節することができます。 ※Windowsはブラウザに関わらず対応していません Mac版のSafariやOpera、ChromeなどのWebkit系とFirefoxのみ、プレフィックス付きで独自実装しているみたいです。 WebkitとFirefoxで別のプレフィックスをつける必要があり、値も違ってくるので注意が必要です。 アンチエイリアス調節のデモ(効果が見えるのはMacのみ) Webkit用CSS Webkitには-webkit-を付与。 .example{ -webkit-font-smoothing: none; //ぎざぎざ -webkit-font-smoothing: antialiased; //なめらか -webkit-font-smoothing: subpixel-antial
![[CSS] フォントのアンチエイリアス設定](https://cdn-ak-scissors.b.st-hatena.com/image/square/89b5c655bcc1d733e1ff2562f2c5c34f36fa88c9/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F03%2Fsmoothing1.jpg)
[CSS] 傾斜したグローバルメニュー
斜めになった横並びメニュー Codepenに面白いカタチのメニューがあったので、試してみました。 CSS3のtransformプロパティを使用するため、対応ブラウザは各モダンブラウザとIE9+。 ※CSSは最低限必要なプロパティのみ記述しています デモはこちら HTML <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> </ul> ul{ transform: skew(-20deg); } まずはulにtransform: skew(-20deg);を指定。数値はお好みで。 li{ float: left; margin: 0 1px; background: #3397de; }
![[CSS] 傾斜したグローバルメニュー](https://cdn-ak-scissors.b.st-hatena.com/image/square/858b7cea52902aa4f80cb21cc43d9dbcce590014/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F03%2Ftilt.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
