حصرياتالمزيد

الثلاثاء، 7 نوفمبر 2017

احصل على هذة الاداة من هنا

اداة عرض اقوال وحكم شخصية معينة



السلام عليكم ورحمة
الله وبركاته
--
نعود لكم بتدوينة جديدة نقدم لكم فيها اداة عرض اقوال وحكم شخصية معينة بتقنية css3






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

    1. توجه الى القالب ثم تحرير html
    2. ضع الكود التالي في المكان الذي يناسبك
<div class="author-quote-wrap">
 <input class="toggle-quote" type="radio" id="AQ-1" name="quote" checked>
 <div class="author-quote">
  <div class="pull-left author-photo photo-a animated bounceInLeft">
   <div class="navigate">
    <label class="label left" for="AQ-5">&nbsp;</label>
    <label class="label right" for="AQ-2">&nbsp;</label>
   </div>
  </div>
  <div class="pull-right quote-content">
   <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span> 423</div></div>
   <div class="quote-text animated rotateInDownRight">الجنون هو
<br>أن تفعل ذات
<br>الشيء مرةً بعد
<br>أخرى وتتوقع 
<br>نتيجةً مختلفةً.
</div>
   <div class="quote-author animated lightSpeedIn">ألبرت اينشتاين</div>
  </div>
 </div>

 <input class="toggle-quote" type="radio" id="AQ-2" name="quote">
 <div class="author-quote">
  <div class="pull-left author-photo photo-b animated bounceInLeft">
   <div class="navigate">
    <label class="label left" for="AQ-1">&nbsp;</label>
    <label class="label right" for="AQ-3">&nbsp;</label>
   </div>
  </div>
  <div class="pull-right quote-content">
   <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span> 512</div></div>
   <div class="quote-text animated zoomInDown">أحب كثيرًا أن يتمكن
<br>المرء من دمج التصميم
<br>العظيم مع القدرات البسيطة لإنتاج
<br> شيء لا يكلف الكثير.
</div>
   <div class="quote-author animated lightSpeedIn">ستيف جوبز
</div>
  </div>
 </div>

 <input class="toggle-quote" type="radio" id="AQ-3" name="quote">
 <div class="author-quote">
  <div class="pull-left author-photo photo-c animated bounceInLeft">
   <div class="navigate">
    <label class="label left" for="AQ-2">&nbsp;</label>
    <label class="label right" for="AQ-4">&nbsp;</label>
   </div>
  </div>
  <div class="pull-right quote-content">
   <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span> 618</div></div>
   <div class="quote-text animated bounceInRight">انني القي
<br>بنفسي وسط المآزق،
<br>ثم أفكر
<br>بعد ذلك في
<br>ايجاد الحلول.
</div>
   <div class="quote-author animated lightSpeedIn">نابليون بونابرت
</div>
  </div>
 </div>
</div>
  

      1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي
    /* ISSAMWEEB */
    .pull-left{float:right}
    .pull-right{float:left}
    .clearfix:after,.clearfix:before{content:'';display:table}
    .clearfix:after{clear:both;display:block}
    
    .author-quote-wrap .author-quote,
    .author-quote-wrap .author-photo:before{
     top:0;
     left:0;
     right:0;
     bottom:0;
     position:absolute;
    }
    
    .author-quote-wrap{
     color:#fff;
     width:100%;
     overflow:hidden;
     max-width:560px;
     min-height:390px;
     margin:50px auto 0;
         background-image: linear-gradient( 135deg, #79F1A4 10%, #0E5CAD 100%);
     position:relative;
     box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21);
    }
    .author-quote-wrap .author-quote{
     display:none;
    }
    .author-quote-wrap .toggle-quote{
     display:none;
    }
    .author-quote-wrap .toggle-quote:checked + .author-quote{
     display:block;
    }
    .author-quote-wrap .author-quote a{
     color:inherit;
     text-decoration:none;
    }
    .author-quote-wrap .author-photo,
    .author-quote-wrap .quote-content{
     height:100%;
     position:relative;
    }
    .author-quote-wrap .author-photo{
     width:140px;
     background-size:cover;
     background-position:center;
     background-repeat:no-repeat;
     quotes:'\201C''\201D''\2018''\2019';
    }
    .author-quote-wrap .author-photo.photo-a{
     background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg);
    }
    .author-quote-wrap .author-photo.photo-b{
     background-image:url(https://www.3wallpapers.fr/wp-content/uploads/2015/10/steve-jobs-1-3Wallpapers-iPhone-Parallax.jpg);
    }
    .author-quote-wrap .author-photo.photo-c{
     background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Jacques-Louis_David_-_The_Emperor_Napoleon_in_His_Study_at_the_Tuileries_-_Google_Art_Project_2.jpg/220px-Jacques-Louis_David_-_The_Emperor_Napoleon_in_His_Study_at_the_Tuileries_-_Google_Art_Project_2.jpg);
    }
    .author-quote-wrap .author-photo:before{
     content:'';
     background:rgba(22,160,255,.5);
    }
    .author-quote-wrap .author-photo:after{
     top:15px;
     left:60px;
     font-size:72px;
     line-height:72px;
     position:absolute;
     font-family:serif;
     content:open-quote;
    }
    .author-quote-wrap .author-photo .navigate{
     left:15px;
     z-index:10;
     right:15px;
     bottom:15px;
     position:absolute;
     text-align:center;
    }
    .author-quote-wrap .author-photo .navigate .label{
     width:15px;
     height:30px;
     cursor:pointer;
     position:relative;
     display:inline-block;
    }
    .author-quote-wrap .author-photo .navigate .label.left{
     left:-30px;
    }
    .author-quote-wrap .author-photo .navigate .label.right{
     right:-30px;
    }
    .author-quote-wrap .author-photo .navigate .label.disabled{
     cursor:not-allowed;
    }
    .author-quote-wrap .author-photo .navigate .label:before,
    .author-quote-wrap .author-photo .navigate .label:after{
     content:'';
     height:2px;
     width:15px;
     background:#ccc;
     position:absolute;
    }
    .author-quote-wrap .author-photo .navigate .label:before{
     top:62%;
    }
    .author-quote-wrap .author-photo .navigate .label:after{
     bottom:62%;
    }
    .author-quote-wrap .author-photo .navigate .label.left:before,
    .author-quote-wrap .author-photo .navigate .label.right:after{
     transform:rotate(45deg);
    }
    .author-quote-wrap .author-photo .navigate .label.right:before,
    .author-quote-wrap .author-photo .navigate .label.left:after{
     transform:rotate(-45deg);
    }
    .author-quote-wrap .author-photo .navigate .label.left:before,
    .author-quote-wrap .author-photo .navigate .label.left:after{
     left:0;
    }
    .author-quote-wrap .author-photo .navigate .label.right:before,
    .author-quote-wrap .author-photo .navigate .label.right:after{
     right:0;
    }
    .author-quote-wrap .author-photo .navigate .label.disabled:before,
    .author-quote-wrap .author-photo .navigate .label.disabled:after,
    .author-quote-wrap .author-photo .navigate .label.disabled:hover:before,
    .author-quote-wrap .author-photo .navigate .label.disabled:hover:after{
     background:#bbb;
    }
    .author-quote-wrap .author-photo .navigate .label:hover:before,
    .author-quote-wrap .author-photo .navigate .label:hover:after{
     background:#fff;
    }
    
    .author-quote-wrap .quote-content{
     padding:15px;
     width:calc(560px - 140px);
    }
    .quote-content .quote-like{
      font-family: sans-serif;
     font-size:12px;
     font-weight:400;
     padding:4px 8px;
     border-radius:15px;
     display:inline-block;
     background:rgba(0,0,0,.2);
    }
    .quote-content .quote-like .love{
        width:18px;
        height:10px;
        position:relative;
     display:inline-block;
    }
    .quote-content .quote-like .love:before,
    .quote-content .quote-like .love:after {
        top:0;
        left:7px;
        content:'';
        width:7px;
        height:12px;
        background:#fff;
        position:absolute;
     transform:rotate(-45deg);
     transform-origin:0 100%;
        border-radius:20px 20px 0 0;
    }
    .quote-content .quote-like .love:after {
        left:0;
     transform:rotate(45deg);
     transform-origin :100% 100%;
    }
    
    .quote-content .quote-text,
    .quote-content .quote-author{
     text-transform:uppercase;
    }
    .quote-content .quote-text{
     font-size:40px;
     font-weight:900;
      text-align: right;
     line-height:55px;
    }
    .quote-content .quote-author{
     bottom:15px;
     font-size:14px;
     font-weight:500;
     position:absolute;
    }
    .quote-content .quote-author:before{
     content:'- ';
    }
    
    
    

      1. ثم ابحث عن <head> وضع الكود التالي اسفله
    <link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css' rel='stylesheet' type='text/css'/>
      1. غير ما يناسبك

      هناك تعليقان (2)

      1. ممكن ترسل لي صورة مقولات psd
        على البريد التالي: ihab.rifai94@gmail.com

        ردحذف


      EmoticonEmoticon