WWDC 2913が近づいてきて毎日その情報があふれていますね。会場にiOS7のロゴが現れたようなのでつくってみました。
今回のフォントは 「Helvetica Neue Ultra Light」 とのこと。
曲がり方とか線の微妙な太さの変化だとか再現しきれてなかったけど、こういうCSSを作るのもなかなか楽しいですな。
サンプル
構造
ボックスがこんな風に重なってます。アームがborder-top、ステムはbox-shadowで。
ソースコード
.ios7 {
margin: 0 auto;
width: 20em;
height: 30.3em;
overflow: hidden;
border-top: 1em solid #000000;
position: relative;
font-size: 10px;
}
.ios7:after {
content: "";
width: 120em;
height: 120em;
position: absolute;
top: -10.2em;
left: 5.8em;
border-top-left-radius: 42.1em;
box-shadow: -0.86em -0.6em 0 #000000;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="ios7"></div>
</body>
</html>
関連
何か一言あれば!!
質問とかツッコミとかお気軽にコメントしてください。がんばって返します。