Thu, March 23, 2017

CSS3で実装した角丸を少しでも滑らかにするテクニック

「sitepoint」から、CSS3で実装した角丸を少しでも滑らかにするテクニックをご紹介します。
コリスさんで詳しく解説されてます。

CSS3の角丸のジャギり具合は気になってたのですが、このテクニックを使えば実案件レベルでも使えそうですね。

デモページ

この現象は特定のカラーの組み合わせで生じるもので、特にオフホワイトの背景に対して明るいボーダーと暗いバックグランドを指定した際に見られるようです。

■HTMLサンプルコード(テクニック使用前)
<div class="before" id="before10">
<p>10px before</p>
</div>
■CSSサンプルコード(テクニック使用前)
.before{
	border:1px solid #89a;
	background:#369;
	color:#def;
}
#before10{
	moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}
■HTMLサンプルコード(テクニック使用後、HTMLの変更はなし)
<div class="after" id="after10">
<p>10px after</p>
</div>
■CSSサンプルコード(テクニック使用後)
.after{
	border:1px solid #89a;
}
.after p{
	background:#369;
	color:#def;
}
#after10{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}
#after10 p{
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;
}

外側のエレメントにborderとborder-radiusを指定し、内側のエレメントにbackgroungのカラーと外側より一回り小さい border-radiusを指定。

 

情報元:コリス
情報元:sitepoint

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree