حاسوب iMac فلات بإستخدام Css

من أفضل المميزات في Css أنه يقلل من استخدام الصور في تصميم الويب ويتيح لك إنشاء أشكال مختلفة وعديدة ب Css فيمكنك 

الأن إنشاء أشكال متنوعة من حواسيب و شخصيات وحركات .. الشائعة التي تراها في الفوتوشوب والاليستريتور بإستخدام 

Css  فقط .

في تدوينة اليوم سأقدم لكم حسوب ماك بتصميم مسطح بأكواد چسس وأيضا سيتيح لكم معرفة بعض الأشياء من خلال چسس 

والتعامل معها في نفس الوقت فهو درس أيضا .

في المعاينة تم تغيير بعض الأشياء .. الأكواد هي غير معدلة والمثال بالصورة أعلاه

مثال حي

الأكواد الخاصة بــ Css

/* www.ar1web.com */
.pc{
    width: 330px;
    height: 200px;
    background-color: #4A4D56;
    border-radius: 5px;
    position: relative;
    z-index: 6;
}
 
.pc .camera{
    width: 3px;
    height: 3px;
    border-radius: 3px;
    margin: 0 auto;
    background-color: #B8BECE;
    position: relative;
    top: 4.5px;
}
 
.pc .screen{
    width: 308px;
    height: 176px;
    background-color: #FF685F;
    border-radius: 1px;
    margin: 0 auto;
    margin-top: 9px;
}
 
.pc .logo{
    width: 8px;
    height: 8px;
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 2px;
    background-color: #E4E5E9;
}

border-bottom: 35px solid #E8EBF0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 69px;
margin: 0 auto;
z-index: 5;
position: relative;

.base{
    z-index: 5;
    position: relative;
    top: -11.75px;
}
.base .stand-top{
    border-bottom: 35px solid #E8EBF0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    height: 0;
    width: 69px;
    margin: 0 auto;
    z-index: 5;
    position: relative;
}
 
.base .stand-top-shadow{
    border-bottom: 11.75px solid rgba(0,0,0,0.1);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    height: 0;
    width: 69px;
    margin: 0 auto;
    position: relative;
    top: 11.75px;
    z-index: 6;
}
 
.base .stand-bottom{
    border-bottom: 3px solid #E8EBF0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    height: 0;
    width: 87px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}
 
.base .stand-bottom-height{
    height: 3px;
    width: 105px;
    margin: 0 auto;
    background-color: #E8EBF0;
    z-index: 5;
    position: relative;
}
 
.base .stand-shadow{
    width: 140px;
    height: 10px;
    background-color: rgba(0,0,0,0.3);
    -moz-border-radius: 70px / 5px;
    -webkit-border-radius: 70px / 5px;
    border-radius: 70px / 5px;
    z-index: 4;
    margin: 0 auto;
    margin-top: -5px;
    position: relative;
}

.pc .chrome{
    width: 176px;
    height: 133px;
    background-color: #FFFDFE;
    position: relative;
    left: 66px;
    top: 21.5px;
    border-radius: 5px;
}
 
.pc .chrome .top-bar{
    height: 14px;
    width: 100%;
    background-color: #F4F5F9;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
 
.pc .chrome .red, .pc .chrome .orange, .pc .chrome .green, .pc .chrome .address-bar, .pc .chrome .go{
    float: left;
}
 
.pc .chrome .red, .pc .chrome .orange, .pc .chrome .green{
    width: 4px;
    height: 4px;
    border-radius: 4px;
    margin-left: 2.5px;
    margin-top: 5px;
}
 
.pc .chrome .red{
    background-color: #e74c3c;
    margin-left: 4px;
}
.pc .chrome .orange{
    background-color: #e67e22;
}
.pc .chrome .green{
    background-color: #2ecc71;
}
 
.pc .chrome .address-bar{
    width: 135px;
    height: 8px;
    background-color: #FFFDFE;
    margin-left: 4px;
    margin-top: 3px;
}
 
.pc .chrome .go{
    width: 10px;
    height: 10px;
    margin-top: 4px;
    font-size: 8px;
    color: #9e9e9e;
    margin-left: 4px;
}
 
.pc .chrome .wrapper{
    width: 90%;
    margin: 0 auto;
}
 
.pc .chrome .wrapper .box1{
    width: 100%;
    height: 10px;
    margin-top: 10px;
    background-color: #edeef4;
}
 
.pc .chrome .wrapper .box2{
    width: 100%;
    height: 25px;
    margin-top: 10px;
    background-color: #edeef4;
}
 
.pc .chrome .wrapper .box-wrapper{
    width: 100%;
    height: 25px;
    margin-top: 10px;
}
 
.pc .chrome .wrapper .box-wrapper .box{
    width: 30%;
    height: 25px;
    float: left;
    background-color: #edeef4;
}
 
.pc .chrome .wrapper .box-wrapper .box.margin{
    margin-left: 5%;
}
 
.pc .chrome .wrapper .box3{
    width: 100%;
    height: 10px;
    margin-top: 10px;
    background-color: #edeef4;
}
 
.pc .chrome-shadow{
    width: 170px;
    margin: 0 auto;
    height: 30px;
    margin-top: -5px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.2);
}

.keyboard{
    margin:0 auto;
    border-bottom: 28px solid #eaeef7;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    height: 0;
    width: 177px;
    margin-top: 25px;
    border-radius: 1px;
    position: relative;
    z-index: 5;
    -webkit-box-shadow: 0px 3px 0px 0px rgba(215, 221, 227, 1);
    -moz-box-shadow:    0px 3px 0px 0px rgba(215, 221, 227, 1);
    box-shadow:         0px 3px 0px 0px rgba(215, 221, 227, 1);
}
 
.keyboard .key-row{
    margin: 0 auto;
    border-bottom: 4px solid #F3F7FA;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    height: 0;
    margin-top: 2px;
    position: relative;
    top: 2px;
    left: -1px;
    border-radius: 1px;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(215, 221, 227, 1);
    -moz-box-shadow:    0px 1px 0px 0px rgba(215, 221, 227, 1);
    box-shadow:         0px 1px 0px 0px rgba(215, 221, 227, 1);
}
 
.keyboard .key-row.row1{
    width: 170px;
}
.keyboard .key-row.row2{
    width: 174px;
}
.keyboard .key-row.row3{
    width: 178px;
    margin-left: -1px;
}
.keyboard .key-row.row4{
    width: 182px;
    margin-left: -3px;
}
 
.keyboard-shadow{
    background-color: rgba(0,0,0,0.2);
    width: 170px;
    height: 10px;
    position: relative;
    top: -2.5px;
    margin: 0 auto;
    border-radius: 85 / 5;
    z-index: 4;
}

Htmlالأكواد الخاصة بــ 
















































<div class="mac">
<div class="pc">
<div class="camera"></div>
<div class="screen">
<div class="chrome">
<div class="top-bar">
<div class="red"></div>
<div class="orange"></div>
<div class="green"></div>
<div class="address-bar"></div>
<div class="go"><i class="fa fa-bars"></i></div>
</div>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box-wrapper">
<div class="box"></div>
<div class="box margin"></div>
<div class="box margin"></div>
</div>
<div class="box3"></div>
</div>
</div>
<div class="chrome-shadow"></div>
</div>
<div class="logo"></div>
</div>
<div class="base">
<div class="stand-top-shadow"></div>
<div class="stand-top"></div>
<div class="stand-bottom"></div>
<div class="stand-bottom-height"></div>
<div class="stand-shadow"></div>
</div>
<div class="keyboard">
<div class="key-row row1"></div>
<div class="key-row row2"></div>
<div class="key-row row3"></div>
<div class="key-row row4"></div>
</div>
<div class="keyboard-shadow"></div>