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

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: &quot;&quot;;
    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;
}

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

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

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

サンプル

構造

ソースコード

関連

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

気になんのコレ

何か一言あれば！！

コメントを残すコメントをキャンセル

サンプル

構造

ソースコード

関連

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

気になんのコレ

何か一言あれば！！

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル