الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
من أفضل المميزات في Css أنه يقلل من استخدام الصور في تصميم الويب ويتيح لك إنشاء أشكال مختلفة وعديدة ب Css فيمكنك الأن إنشاء أشكال متنوعة من حواسيب و شخصيات وحركات .. الشائعة التي تراها في الفوتوشوب والاليستريتور بإستخدام Css فقط.
في تدوينة اليوم سأقدم لكم حسوب ماك بتصميم مسطح سيتيح لكم معرفة بعض الأشياء من خلال Css والتعامل معها في نفس الوقت فهو درس أيضا
أكواد Css
كود الـ HTML
في تدوينة اليوم سأقدم لكم حسوب ماك بتصميم مسطح سيتيح لكم معرفة بعض الأشياء من خلال 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;
}
<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>
ملحوظة:
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
بماذا تستخدم هذه الاكواد ممكن ؟!
ردحذفستايلات لتزيين فقط
حذفقصدي كيف استخدمها
حذف