[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
HTML5を中心とした「Web標準」がどれだけあるのか、図にしてみると……
急速に立ち上がろうとしている「プラットフォームとしてのWeb」。そのために現在たくさんのWeb標準が提唱され、標準化作業が行われています。 その全体像を1枚の図として示したのは、Mozilla Japanのdynamis（でゅなみす）氏こと浅井智也氏。先週行われたオープンソースカンファレンス2012京都で行った講演のスライドから許可を得て引用します。 HTML5を中心に、円の色は標準化団体の色を示しています。青ならW3C/WHATWG、黄色はIETF、茶色はECMA、赤はKhronos。また、円の外側はまだまだこれからの技術という位置づけになっているそうです。 こうして1枚の図にして見ると、実にたくさんの技術がWebで実現されようとしていることに驚かされます。 このすべての技術を使いこなす必要はないかもしれませんが、Webをプラットフォームとするアプリケーションの構築には、HTML5のマー
[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル
画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.css-lecture.com/log/css3/css3-gradient.html
