CSSのみでかわいいiMacを作ってみました!

公開: 2013-03-17 22:43
更新: 2016-04-29 06:02
こんにちは♪

最近1日1食をはじめ、
すこぶる調子が良いあっきぃさんです。
お金がないわけではありません。誰かご飯をおごってください。ぐぅ

たまにはプログラミングの話があったほうが、
あっきぃの個人的な感覚でうれしいので、今回はCSSで簡単なiMacを描いてみます。
欲しい...
とりあえずまずは表示領域となる四角を描きます。
この表示領域に対して相対的にサイズが変わると嬉しいですね♪
iMacの形(本体のみキーボードなし)が横 × 縦が、
6:5くらいな気がするので表示領域は240px × 200pxにしました。

ディスプレイを描いていきます。
画像ではなくCSSです。RGBA()を使っているので、IE8以下をお使いの方はアップデートしてください。
最後にソースを載せますので途中経過がいらない方は一番下の方までどうぞ♪
真ん中の2本のdiv要素を設置し、内側に少し回転させます。
この部分がディスプレイを支える首の部分になります。
お使いのブラウザによっては回転していないかも...
とりあえず、GoogleChrome、Firefox、Safari、IE9では確認してますが。
台をつけて...
だいぶ見えてきましたね。
重なりの順番と色の調節とoverflowをhiddenにしてはみ出した部分をカット、あと角を丸くしていきます。
なんどでも言いますがIE8以下をお使いの方はアップデートして下さい。そろそろいい加減殴ります。
ちなみに右クリで途中のCSS見てもstyleにべた書きしてるのでカオスです♪
もうほとんどiMacに見えてきましたね。(ね?
おそらくiMacがそこそこ好きな方100人に「これは何ですか?」と
聞けば83人くらいが「iMacじゃん?」と答えるレベルでしょう。ふふん。

あとは、微調整。
ディスプレイ部分の角丸下部分に黒色が若干出てしまったとこ、
ちょっと台が大きいかなぁってとこ、首が細いかなぁってなとこを直しまして...
うん。かわいいカモ。
とりあえずこれで完成で♪
ソースコード載せておきます♪MITライセンスです。

HTML
<!- width:height = 6:5がいい感じです ->
<div class="as-imac" style="width: 240px; height: 200px;">
        <div class="as-imac-neck1"></div>
        <div class="as-imac-neck2"></div>
        <div class="as-imac-body">
                <div class="as-imac-frame1"></div>
                <div class="as-imac-content">
                        <!- ここに表示させたいもの ->
                </div>
                <div class="as-imac-frame2"></div>
        </div>
        <div class="as-imac-stand"></div>
</div>
CSS
.as-imac {
        width: 240px;
        height: 200px;
        position: relative;
        overflow: hidden;
}
.as-imac .as-imac-neck1,
.as-imac .as-imac-neck2 {
        position: absolute;
        bottom: 0px;
        width: 14%;
        height: 80%;
        background: #bdbdbf;
}
.as-imac .as-imac-neck1 {
        left: 50%;
        margin-left: -7%;
        transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
}
.as-imac .as-imac-neck2 {
        right: 50%;
        margin-right: -7%;
        transform: rotate(-5deg);
        -moz-transform : rotate(-5deg);
        -webkit-transform : rotate(-5deg);
        -o-transform : rotate(-5deg);
        -ms-transform: rotate(-5deg);
}
.as-imac .as-imac-body {
        position: relative;
        height: 84%;
        border-radius: 4% 4% 4% 4% / 6% 6% 6% 6%;
        overflow: hidden;
}
.as-imac .as-imac-body .as-imac-frame1 {
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 12%;
        background: #333;
}
.as-imac .as-imac-body .as-imac-frame2 {
        position: absolute;
        top: 88%;
        right: 0%;
        bottom: 0%;
        left: 0%;
        background: #cdced2;
}
.as-imac .as-imac-body .as-imac-content {
        position: absolute;
        top: 6%;
        right: 4%;
        bottom: 18%;
        left: 4%;
        background: #365771;
        overflow: hidden;
}
.as-imac .as-imac-stand {
        width: 24%;
        height: 3%;
        background: #c5c5c7;
        position: absolute;
        left: 50%;
        bottom: 0px;
        margin-left: -12%;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;        
}
一番外枠の大きさに相対的なサイズになるように作ったので、どんな大きさでも表示することができます。
(width: 240px; height: 200px; の部分を変えてみてください♪)
画像を入れたり、
グラデーションを入れたり、
JSでアニメーションを入れるともっと面白くなると思います♪
(改造してこんなの作ったよ!的なのがあればご連絡くださいませませ♪)
こんどはiPhoneでも作ろうかしら。

この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。