albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

Create Not Loaded Image Pure Css

– تعلم كيفية انشاء Avater ( عدم تحميل الصوره ) فى خطوات بسيطة وسهلة.

 

الفكرة بسيطة جدا والسيناريو كالتالى:-

  1. انشاء الاطار الخاص بالصوره.
  2. انشاء محتوى الصوره المكون من جبلين ودائره.

 

الخطوات:

 

1- كتابة كود HTML 

 

file: index.html

<html>
  <head>
    <meta charset="utf-8" />
    <title>Create Not Loaded Image</title>
  </head>
  <body>
    <div class="placehoderImage-content">
      <div class="mountainOne"></div>
      <div class="mountainTwo"></div>
      <div class="square-sun"></div>
    </div><!-- .placehoderImage-content -->
  </body>
</html>

 

2- انشاء محتوى اطار الصوره 

 

 

file: style.css

/* Step 1 "Create frame Container" */
.placehoderImage-content {
  position: relative;
  display: inline-block;
  width: 350px;
  height: 210px;
  border: 8px solid #ccc;
  overflow: hidden;
}

 

3- انشاء الجبل الأول

 

 

file: style.css

/* Step 2 "Create The MountaineOne" */
.placehoderImage-content .mountainOne {
  position: absolute;
  bottom: -140px;
  left: -20px;
  width: 200px;
  height: 200px;
  background: #ccc;
  display: inline-block;
  border-radius: 30px;
  transform: rotateZ(40deg);
}

 

4- انشاء الجبل الثانى

 

 

file: style.css

* Step 3 "Create The MountaineTwo" */
.placehoderImage-content .mountainTwo {
  display: inline-block;
  position: absolute;
  bottom: -100px;
  right: -20px;
  width: 200px;
  height: 200px;
  background: #ccc;
  border-radius: 30px;
  transform: rotateZ(45deg);
}

 

5- انشاء الدائرة

 

 

file: style.css

/* Step 4 "Create The Square-Sun" */
.placehoderImage-content .square-sun {
  display: inline-block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: #ccc;
  border-radius: 30px;
  transform: rotateZ(45deg);
  top: 30px;
  left: 40px
}

 

بعد كتابة جميع الاكواد السابقة الشكل النهائى مثل ما هو موجود فى الصوره التاليه :-

 

 

Quote This  Article:-

“Talk is cheap, Show me the code.”
― Linus Torvalds

الإبلاغ عن خطأ

الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements