4辺が違う色のボーダーにborder-radius:50%を加えると…
タイトルのままですが、4辺が違う色のボーダーにborder-radius:50%を加えてサークル状にするとどうなるか知っていますか？私は先日知ったので紹介します。 border-radius:50%を加えてサークル状にするとこんな感じになります。border-radiusはIE8以下非対応ですので、下のは画像にしています。 かなり印象は変わります。当たり前といえば当たり前な気もしますが。で、transitionで回すと面白いです。 ということでサンプルを作ってみました。最近なぜかIEが起動しないのでIEの動作確認はしていません。。 せっかくなのでコードも載せておきます。 <a href="#" id="circle1">CSS<span></span></a> ボーダーだけを回すためspan要素を入れてボーダーを指定しています。ちょっとかっこ悪い気もしますが、他に方法が思いつかなかったので
デザインをちょっと素敵にするサンプル 8
先日 HTML5 + CSS3 で書かれた、素敵な雑誌の表紙みたいな Webサイトを見つけました。それ以来、CSS3 だったらコレもできそう ... アレもできるかも ... なんてことを、雑誌のデザインなどを見ながらひとり盛り上がってます w まだまだ IE では CSS3 が使えないけれど、今回はいくつか CSS3 のサンプル作りに挑戦してみました。 まるで雑誌の表紙のようなデザインで、とっても感動してしまいました。HTML5 と CSS3 で書かれていて、ブロック要素、内包するテキストも斜めにレイアウトされています。細いテキストを斜めにすると、とても読みにくくなってしまうんですけどフォントも工夫されてて判読性も十分です。 もちろん IE では斜めではなくて水平に表示されてしまうんですけど、それでも閲覧するのに困らないようなハイブリットなデザインで、またまた感動！ これから近い将来、C
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ
