-->

شرائح سلايد بالصور بتأثيريين

­ ­






التأثير الأول التأثير الثاني

شرح طريقة التركيب


1 .نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  <head/>

3. ضع الكود التالي قبله [ فوقه ]


 

 <script src='https://ar1web-com.googlecode.com/svn/trunk/slide-img.js'/>


5. ابحث عن : <b:skin/><[[

3. ضع الكود التالي قبله [ فوقه ]


التأثير الأول

/* www.ar1web.com */
.grid {
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center;
overflow: hidden;
}
.grid li {
display: inline-block;
width: 300px;
margin: 0 0 10px 10px;
text-align: left;
position: relative;
background: #FFF;
padding: 10px;
box-shadow: 0 0 3px #C9C6C6;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
left: 0px;
padding: 10px;
background: #1F4977;
color: #fff;
}
.grid figcaption h3 {
margin: 20px 0 0;
padding: 0;
color: #FFF;
font: normal 17px ges,tahoma;
text-align: center;
display: block;
}
.cs-style-4 figcaption a:hover {
background: #fff;
color: #ED4E6E;
}
.grid figcaption a {
text-align: center;
padding: 11px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}

.cs-style-4 li {
    perspective: 1700px;
    perspective-origin: 0 50%;
}
.cs-style-4 figure {
    transform-style: preserve-3d;
}
.cs-style-4 figure > div {
    overflow: hidden;
}
.cs-style-4 figure img {
    transition: transform 0.4s;
}
 
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
    transform: translateX(25%);
}
.cs-style-4 figcaption {
    height: 88.5%;
    width: 50%;
    opacity: 0;
    backface-visibility: hidden;
    transform-origin: 0 0;
    transform: rotateY(-90deg);
    transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
    opacity: 1;
    transform: rotateY(0deg);
    transition: transform 0.4s, opacity 0.1s;
}
.cs-style-4 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

5. يتبقى فقط كود HTML ويمكنك وضعه بالمكان المناسب لك في القالب أو حتى في التخطيط عبر إضافة Html/Javascript


 
<ul class='grid cs-style-4'>
         <li>
     <figure>
                    <div><img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2e7Ct-n03o6iQNyEr794jrR1q4FE5ovaJuKzVbPOkcSicDub2aNICTVPeo69c3g7WwVqAcDoU485Ho8k_RHje1mnJ1NC7z8cVouFuFZGFtF_pbq2hU8hNlTngsvlGS-MpjAvqpEvpgU/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>Soon</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
         <li>
     <figure>
                    <div><img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2e7Ct-n03o6iQNyEr794jrR1q4FE5ovaJuKzVbPOkcSicDub2aNICTVPeo69c3g7WwVqAcDoU485Ho8k_RHje1mnJ1NC7z8cVouFuFZGFtF_pbq2hU8hNlTngsvlGS-MpjAvqpEvpgU/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>SooN</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
         <li>
     <figure>
                    <div><img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2e7Ct-n03o6iQNyEr794jrR1q4FE5ovaJuKzVbPOkcSicDub2aNICTVPeo69c3g7WwVqAcDoU485Ho8k_RHje1mnJ1NC7z8cVouFuFZGFtF_pbq2hU8hNlTngsvlGS-MpjAvqpEvpgU/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>SooN</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
         <li>
     <figure>
                    <div><img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2e7Ct-n03o6iQNyEr794jrR1q4FE5ovaJuKzVbPOkcSicDub2aNICTVPeo69c3g7WwVqAcDoU485Ho8k_RHje1mnJ1NC7z8cVouFuFZGFtF_pbq2hU8hNlTngsvlGS-MpjAvqpEvpgU/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>SooN</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
        </ul>


6. غير الكلمات وروابط الصور بخاصتك


 التأثير الثاني


1. ابحث عن : <b:skin/><[[

2. ضع الكود التالي قبله [ فوقه ]



/* www.ar1web.com */
.grid {
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center;
overflow: hidden;
}
.grid li {
display: inline-block;
width: 300px;
margin: 0 0 10px 10px;
text-align: right;
position: relative;
background: #FFF;
padding: 10px;
box-shadow: 0 0 3px #C9C6C6;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
right: 0;
padding: 10px;
background: #1F4977;
color: #33F55B;
}
.grid figcaption h3 {
margin: 20px 0 0;
padding: 0;
color: #FFF;
font: normal 17px ges,tahoma;
text-align: center;
display: block;
}
.grid figcaption span:before {
content: '$';
}
.grid figcaption a {
text-align: center;
padding: 11px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}
/* www.ar1web.com */
.cs-style-3 figure {
overflow: hidden;
}
.cs-style-3 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img {
-webkit-transform: translateY(-130px);
-moz-transform: translateY(-130px);
-ms-transform: translateY(-130px);
transform: translateY(-130px);
}
.cs-style-3 figcaption {
width: 93.3%;
top: auto;
height: 92%;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.cs-style-3 figcaption a {
position: absolute;
bottom: 45px;
left: 75px;
border-radius: 3px;
}
figcaption span {
font: normal 16px tahoma;
position: relative;
padding: 0 21px 0;
top: 0;
}
.cs-style-3 figcaption a:hover {
background:#fff;
color:#ED4E6E;
}


3. كود HTML  نفس الطريقة 


 <ul class='grid cs-style-3'>
          <li>
            <figure>
              <img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4EnLvfewWlc-UKRa6FpLdURGsU6h-Q7P03CnWGTG36qiE7QMTqrJpLV3WHYU32tqfkgaMSkYQsfEwrEJeJHmFfmu3rwTGFXG8VnU7fIwux82j1BawBNRvDVEjzqCOZkpjGnAcRsk4nl3u/s1600/1.png'/>
              <figcaption>
                <h3>
                 تحويل صورتك الشخصية إلى كرتون 
                </h3>
                <span>
                  10
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img01' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7b9UkVA9vw0hSfkU_RwL9ky26p5IUzeByQM9yl6map-CDWzySZ3py-JaVygFeq9l3ol2wMd8seFiudl3dUAsl9CRhFEfRipDgAdd4v8PURayrILJ2Dit7khFpidAwyw5dg0EszflXuJQc/s1600/2.png'/>
              <figcaption>
                <h3>
                تصميم احترافي لصورتك الشخصية
                </h3>
                <span>
                  5
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img02' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH3L-pNTjtnVWu9NDS2IUDvxPlKxvpTYs-PqghwgV_Rac3ndsFlMtyG90PpsdUw2LJ8R3J7sZFJmH0wVGC4aqgaVW5VfCxF3PW1fBiEJ2aTnxhIA3oM2MhBy2ruTo9uE59M-eaJgZ3pT9u/s1600/3.png'/>
              <figcaption>
                <h3>
تصميم صور احترفية لعرض خدماتك في خمسات 
                </h3>
                <span>
                  5
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img05' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLiMWmJ5QAiHIvW7JYyiJGTS7uhwiaxN8AmsI8hziiyvOdDiM9VSSrpzU6Jxjb7uRIQPwIsWpXf3Yk8Lub7QeH53lUY73BhSLpHTZKUiwavTBzVTkEM9uQ_03t11iRNw_Ial9JBHzjWEOz/s1600/1.png'/>
              <figcaption>
                <h3>
واجهة &quot;معرض حسام&quot;
                </h3>
                <span>
                  5
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
        </ul>


4. لا تنسى تغيير الروابط والكلمات + الصور .. بخاصتك تكون بنفس المقاس

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

إرسال تعليق

=a= =b= =c= =d= =e= =f= =g= =h= =j= =k= =l= =m= =n= =o= =p= =q= =w= =x= =y= =z=

الاشتراك في: تعليقات الرسالة ( Atom )