CSS3でiOS7の7っぽいの作ってみた

WWDC 2913が近づいてきて毎日その情報があふれていますね。会場にiOS7のロゴが現れたようなのでつくってみました。 今回のフォントは ｢Helvetica Neue Ultra Light｣ とのこと。 曲がり方とか線の微妙な太さの変化だとか再現しきれてなかったけど、こういうCSSを作るのもなかなか楽しいですな。

サンプル

構造

ボックスがこんな風に重なってます。アームがborder-top、ステムはbox-shadowで。
figure

ソースコード

.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>

この記事につけられたタグ

気になんのコレ

何か一言あれば！！

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。