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

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

/* www.ar1web.com */
.pc{
    width: 330px;
    height: 200px;
    background-color: #4A4D56;
    border-radius: 5px;
    position: relative;
    z-index: 6;
    margin:-5px auto;
}
 
.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: 5px 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:5px;
    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>