CSSを使って描かれたオリンピックの輪 Olympic rings

CSSを使って描かれたオリンピックの輪 Olympic rings
このエントリーをはてなブックマークに追加
PR

Olympic rings

http://codepen.io/MattSmith/pen/cHjIC

今の時期らいしいものですね
オリンピックの五輪の輪をCSSで作成したものです

あのリングとリングの重なりを表現しているのかちょっと不思議でした
なぜ重なっている箇所をあのようにできるかと考えていて、boder-radiusを解除してみると一気にわかりやすくなります

丸だとどうやって一部だけ?
って思ってしまうのですが、四角にすると、青色のリングでは右のborderのところだけを上書きして表示することでリングが重なっているように見せているのですね

コードを読み解くのは本当いい勉強になります。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)