29‏/08‏/2014

من أفضل المميزات في 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>
من أفضل المميزات في 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>
3 Blogger تعليقات
Disqus
3 التعليقات
المشرف
avatar

بماذا تستخدم هذه الاكواد ممكن ؟!

المشرف
avatar

ستايلات لتزيين فقط

المشرف
avatar

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة