كيفية إضافة تأثير الظل على الصندوق وبعدة أشكال مختلفة

السلام عليكم ورحمة الله وبركاته .

اليوم سوف نتعرف على طريقة إضافة تأثير الظل على الصندوق وبعدة أشكال مختلفة ، والكثير من المدونين يستخدمون مثل هذه الصناديق ونحن بدورنا طورنا هذه الإضافة وأضفنا عليها لمسة جمالية أحترافية .

المشاهدة المباشرة

هوم بلوجر
الشكل-1

هوم بلوجر
الشكل-2

هوم بلوجر
الشكل-3

هوم بلوجر
الشكل-4

هوم بلوجر
الشكل-5

هوم بلوجر
الشكل-6

هوم بلوجر
الشكل-7

هوم بلوجر
الشكل-8

طريقة التركيب :


1- ادخل إلى مدونتك ، ثم اختر لوحة التحكم

2-من لوحة التحكم اختر -> قالب -> تحرير قالب HTML

3- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

4- اضف الكود التالي فوقه .

 <link href='https://googledrive.com/host/0BxFbqjck0GDdWE9RNmxBT3p4MjA ' rel='stylesheet'/> 

5- بعد ذلك استخدم الصندوق الذي يعجبك بوضعية HTML ، نحن وضعنا لكم ثمانية صناديق بتأثيرات مختلفة .

 <div class="css_image_shadows">
<!-- 1 -->
    <div class="drop-shadow lifted" style="width:240px;height:70px;">
      <p>هوم بلوجر<br /><small>الشكل-1</small></p>
    </div>
<!-- 2 -->
    <div class="drop-shadow curled" style="width:240px;height:70px;">
      <p>هوم بلوجر<br /><small>الشكل-2</small></p>
    </div>
<!-- 3 -->
    <div class="drop-shadow perspective" style="width:240px;height:70px;">
      <p>هوم بلوجر<br /><small>الشكل-3</small></p>
    </div>
<!-- 4 -->
    <div class="drop-shadow raised" style="width:240px;height:70px;">
      <p>هوم بلوجر<br /><small>الشكل-4</small></p>
    </div>
<!-- 5 -->
    <div class="drop-shadow curved curved-vt-1" style="width:240px;height:70px;">
      <p>هوم بلوجر<br /><small>الشكل-5</small></p>
    </div>
<!-- 6 -->
    <div class="drop-shadow curved curved-vt-2" style="width:240px;height:70px;">
      <p>هوم بلوجر<br /><small>الشكل-6</small></p>
    </div>
<!-- 7 -->
    <div class="drop-shadow curved curved-hz-1" style="width:240px;height:70px;">
      <p>هوم بلوجر<br /><small>الشكل-7</small></p>
    </div>
<!-- 8 -->
    <div class="drop-shadow curved curved-hz-2" style="width:240px;height:70px;">
      <p>هوم بلوجر<br /><small>الشكل-8</small></p>
    </div>
  </div>