サイト内検索:

CSSだけで描いたMacBook Pro

こういうMacBook Proの絵なんですが、

Single Element Pure CSS MacBook Pro · CodePen

CSSだけで描いているそうです。

そのCSSはこんな感じ。

.macbook {
    background-color: #082746;
    background-image: linear-gradient(20deg, transparent 67%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,100%,.025)),
                      linear-gradient(#ddd 11px, transparent 11px),
                      linear-gradient(#132d4e, #4f7d90);
    border-radius: 8px 8px 0 0;
    box-shadow: inset 0 1px 1px 1px #000,
                inset 0 0 0 9px #111,
                0 0 0 1px #ccc,
                0 0 1px 2px hsla(0,0%,0%,.4),
                0 0 50px hsla(0,0%,0%,.3);
    height: 100px;
    display: block;
    left: 50%;
    margin: -50px -75px;
    position: absolute;
    top: 50%;
    width: 150px;
}
.macbook:after {
    background-color: #ddd;
    background-image: linear-gradient(left, hsla(0,0%,0%,.3), hsla(0,0%,100%,.4) 2%, hsla(0,0%,100%,.1) 5%, hsla(0,0%,0%,.2) 95%, hsla(0,0%,100%,.2) 98%, hsla(0,0%,0%,.4));
    border-bottom: 3px solid hsla(0,0%,40%,.75);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 3px 7px hsla(0,0%,0%,.1);
    content: '';
    height: 7px;
    left: -22px;
    position: absolute;
    right: -22px;
    top: 100%;
}
.macbook:before {
    background-color: #222;
    border-radius: 100%;
    box-shadow: inset 1px 1px 0 hsla(0,0%,100%,.1),
                -13px 96px 0 -1px #888,
                -13px 97px 0 -1px #888,
                -11px 97px 0 #888,
                -9px 97px 0 #888,
                -7px 97px 0 #888,
                -5px 97px 0 #888,
                -3px 97px 0 #888,
                -1px 97px 0 #888,
                1px 97px 0 #888,
                3px 97px 0 #888,
                5px 97px 0 #888,
                7px 97px 0 #888,
                9px 97px 0 #888,
                11px 97px 0 #888,
                13px 97px 0 -1px #888,
                13px 96px 0 -1px #888,
                80px 99px 0 -1px #666,
                81px 99px 0 -1px #666,
                82px 99px 0 -1px #666,
                83px 99px 0 -1px #666,
                84px 99px 0 -1px #666,
                85px 99px 0 -1px #666;
    content: '';
    height: 3px;
    left: 50%;
    margin-left: -2px;
    position: absolute;
    top: 3px;
    width: 3px;
    z-index: 1;
}​

興味のある人は解析してみてください。

Single Element Pure CSS MacBook Pro · CodePen

blog comments powered by Disqus

2011年アルファブロガー受賞

新着DVD

モバイル

Powered by Movable Type 6.1.2

ブログ内検索

BlogPeople ReviewMe!

このサイトのレビューとか応援コメントを書いてもらえると励みになります。

Affi☆List for Amazon

バナー広告

このブログ記事について

このページは、nagasawaが2012年8月15日 19:45に書いたブログ記事です。

ひとつ前のブログ記事は「トップアーティストのライブを無料で-アップル「iTunes Festival 2012」公式アプリ」です。

次のブログ記事は「スマホやタブレット、そしてノートPCのカメラのレンズのところに挟んで利用できる広角/マクロ/フィッシュアイ用レンズ「Mobi-Lens」」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。