iOS 7のロゴをCSSで表現してみた（borderにグラデーションをかける方法）

jsdo.itでiOS 7のロゴをCSSで表現してみました。iOS7という作品をforkしてグラデーションなどを加えています。borderにはグラデーションをかけることができないため、paddingを用いて線を表現してみました。

プレビュー

HTML

borderを使わずに線を表現するのには
同じ大きさのボックスを2つ作って（例：class名ios7とios7-inner）、

• 外側のボックス（class名ios7）：bacgroundに色をつけたりグラデーションさせ、線の太さをpaddingで設定する。
• 内側のボックス（class名ios7-inner）：bacgroundを背景色にする

これでborderを使わずに線を表現することができます。

<div class="board">
<div class='ios7'>
    <div class='ios7-inner'></div> 
    <div class='ios7-height'>
        <div class='ios7-height-inner'></div> 
    </div>
</div>
</div>

CSS

メディアクエリを使って960px以上のときは
幅が960pxに固定するよう設定しています。

body {
    background:url(http://jsrun.it/assets/d/G/i/J/dGiJe.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    background-attachment: fixed;
    margin: 100px auto 0;
}

.board {
    background: url(http://jsrun.it/assets/o/4/E/4/o4E4L.png);
    width:100%;
    padding:20px 0;  
}
.ios7 {
    margin: 0 auto;
    width: 15em;
    height: 22.725em;
    overflow: hidden;
    position: relative;
    font-size: 10px;
    background: -webkit-gradient(linear, left top, right bottom, 
        from(rgb(0, 255, 255)), 
        color-stop(0.1, rgb(0, 164, 255)), 
        color-stop(0.15, rgb(0, 142, 255)), 
        color-stop(0.25, rgb(0, 98, 255)), 
        to(rgb(0, 84, 255)));
    padding:0.86em 0 0; 
}

.ios7-inner {
    padding:10px;  
    background: url(http://jsrun.it/assets/o/4/E/4/o4E4L.png);
    height:100%;
}

.ios7-height {
    content: "";
    width: 90em;
    height: 90em;
    position: absolute;
    top: -8.55em;
    left: 4.35em;
    border-top-left-radius: 31.575em;
    background: -webkit-gradient(linear, left top, left bottom, 
        from(rgb(0, 84, 255)), 
        color-stop(0.1, rgb(0, 84, 255)),
        color-stop(0.2, rgb(0, 124, 255)), 
        color-stop(0.30, rgb(214, 39, 92)), 
        to(rgb(255, 6, 35)));
    padding: 0.76em;
   
}

.ios7-height-inner {
    background: url(http://jsrun.it/assets/o/4/E/4/o4E4L.png);
    height:100%;
    border-radius: 31.575em;
}

@media screen and (min-width: 960px) {
	.board {
        width:960px;
        margin: 100px auto 0;
    }
}