سلايد شو جد مميزة بــ css 3

بسم الله الرحمان الرحيم 

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

اليوم بحول الله سنقدم حيل من حيل تقنية css3 اللغة القادمة بقوى في مجال تصميم الويب.

كما نعرف لغة css هي اختصار  Cascading Style Sheets هي لغة تنسيق لللصفحة تتهتم بشكل وتصميم المواقع، صممت خصيصا لعزل التنسيق(الألوان - الخطوط....) عن محتوى المستند المكتوب(بلغة مثلا html) وينطبق ذلك على الألوان والخطوط والصور والخلفيات التي تستخدم في الصفحات، بمرونة وسهولة تامه.

نعود الان الى موضوعنا 

صورة للإضافة : 

للمشاهدة الحية : 

نأتي الان الى كيفية اضافته سواء لمنصة بلوجر او موقع عادي 

نضيف الكود الموالي قبل اغلاق وسم head tag 

<!-- http://www.3alymni.info -->
<style> 
  .slide-up-boxes a { 
   display: block; 
   margin: 0 0 20px 0; 
   background: rgba(215, 215, 215, 0.5); 
   border: 1px solid #ccc; 
   height: 85px; 
   overflow: hidden; 
  }
  
  .slide-up-boxes h5 { 
   color: #333; 
   text-align: center;
   height: 65px; 
   font: italic 18px/65px Georgia, Serif;    /* Vertically center text by making line height equal to height */
    opacity: 1;
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear;
  }
  
  .slide-up-boxes a:hover h5 { 
   margin-top: -65px; 
   opacity: 0; 
  }
  
  .slide-up-boxes div { 
   position: relative; 
   color: white; 
   font: 12px/15px Georgia, Serif;
   height: 65px; 
   padding: 10px; 
   opacity: 0; 
   -webkit-transform: rotate(6deg); 
   -webkit-transition: all 0.4s linear; 
   -moz-transform: rotate(6deg); 
   -moz-transition: all 0.4s linear; 
   -o-transform: rotate(6deg); 
   -o-transition: all 0.4s linear; 
  }
  .slide-up-boxes a:hover div { 
   opacity: 1; 
   -webkit-transform: rotate(0); 
   -moz-transform: rotate(0); 
   -o-transform: rotate(0); 
  }
  .slide-up-boxes a:nth-child(1) div { background: #c73b1b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikR_TcDpwW2nytG8_Nh9bOg39buliO4Rf1wl1mE7jMYb3QHUqAF_oThbkoKmYI1u2sDKcDIt2P4CDl9MYTZ8b1ZFjqVfrDoKPI4lu6WAIQbLlW3a08La5snEj87SJt266TOB-NmFjkFpLN/s1600/wufoo.png) 17px 17px no-repeat; padding-left: 120px; }
  .slide-up-boxes a:nth-child(2) div { background: #367db2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNRo9cv-lSFdNWMLCkrV0IzlufOoQBd1m9DgPUPp_pLtcOYcnKj7zaNc0WILF4MSTL9QSEUxZx0dAAyKN6XabQZfuUdUlIYcgZLln_bQGNEKFxDjwR3lXA9B0i5l2-A9Jx1jGnJiQzIIz/s1600/diw.png) 21px 10px no-repeat; padding-left: 90px; }
  .slide-up-boxes a:nth-child(3) div { background: #393838 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx9wCVkozzTTi8KOBQG8klub2Pur5YkYpXZ7XW6UzaR_AhCt9bHT4K-_Hk2pvlEKFoHfMR1QRcI3EsGWHbRtGdtpCcHNMwvHzK97ROC4k11beRifs4HKj_j7oaJpsfPxVqosJrnbmumn1y/s1600/qod.png) 14px 16px no-repeat; padding-left: 133px; }
 </style>
<!-- http://www.3alymni.info -->

ثم نضيف الكود التالي في اي مكان نحدده تصميم الموقع حسب حجياتنا

<!-- http://www.3alymni.info -->
<div id="page-wrap"> 
 
  <section class="slide-up-boxes"> 
 
   <a href="http://********.com"> 
    <h5>هنا العنوان </h5> 
    <div>Wufoo is an online form builder that makes building even the most complex forms so easy, it's fun!</div>    
   </a> 
    
   <a href="http://********.com"> 
    <h5>هنا العنوان</h5> 
    <div>Digging Into WordPress is a book and blog I co-author with Jeff Starr about the world's #1 publishing platform.</div>    
   </a> 
   
   <a href="http://**********.com"> 
    <h5>هنا العنوان</h5> 
    <div>Quotes on Design is a collection of design related quotes. With an API for your integration ideas!</div>    
   </a> 
 
  </section> 
   
 </div>

<!-- http://www.3alymni.info -->

تم بحمد الله