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

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

يوجد الآن مشاهدة التعليقات : 3

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

من أفضل المميزات في 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>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 3 تعليقات:

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

    ردحذف
    الردود
    1. ستايلات لتزيين فقط

      حذف
    2. قصدي كيف استخدمها

      حذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم