تأثيرات CSS3 للصور والمدونة

في هذه المقالة سوف اقوم بتعليمك 7 تأثيرات للصور باستخدام CSS و يمكنك استخدامهم كل شيء فى مدونت ك فى بلوجر أولا فى كل التأثي...

في هذه المقالة سوف اقوم بتعليمك 7 تأثيرات للصور باستخدام CSS ويمكنك استخدامهم كل شيء فى مدونتك فى بلوجر

أولا فى كل التأثيرات عند إضافة CSS / HTML فى المدونة هى طريقة واحدة بالنسبة لكل التأثيرات لنبدأ

بها اولا 

 كيفية اضافة كود CSS:

 اذهب الى بلوجر <القالب<تعديل القالب<قم باضافة كود CSS  فوق الوسوم التالى

]]></b:skin>

 كيفية اضافة كود HTML:

 يمكنك اضافة كود HTML فى الصفحات او القالب او الموضوعات او اضافات بلوجر

الان مع كل اكواد التأثيرات HTML و CSS

التأثير الاول. التلاشى: 

 HTML :

<div id="fade">Place mouse on  me i will fade!</div>

 CSS :

    #fade{opacity: 1;-webkit-transition: opacity 1s linear;}
    #fade{opacity: 1;-moz-transition: opacity 1s linear;}
    #fade{opacity: 1;-o-transition: opacity 1s linear;}
    #fade:hover{opacity: 0;}

التأثير الثانى. النبض: 

 HTML :

<div id="pulsate">Place mouse on  me i will pulsate!</div>

 CSS :

    #pulsate:hover {-webkit-animation-name: pulsate;-webkit-animation-duration: 20s;-webkit-animation-timing-function: ease-in-out;}
     @-webkit-keyframes pulsate {
     0% { width:140px; }
     5% { width:190px; left:-25px; }
     10% { width:140px; left:0px; }
     15% { width:190px; left:-25px; }
     20% { width:140px; left:0px; }
     40% { width:140px; }
     45% { width:190px; left:-25px; }
     50% { width:140px; left:0px;}
     55% { width:190px; left:-25px;}
     60% { width:140px; left:0px;}
     80% { width:140px; }
     100% { width:140px;  }
     }

    #pulsate:hover {-moz-animation-name: pulsate;-moz-animation-duration: 20s;-moz-animation-timing-function: ease-in-out;}
    @-moz-keyframes pulsate {
     0% { width:140px; }
     5% { width:190px; left:-25px; }
     10% { width:140px; left:0px; }
     15% { width:190px; left:-25px; }
     20% { width:140px; left:0px; }
     40% { width:140px; }
     45% { width:190px; left:-25px; }
     50% { width:140px; left:0px;}
     55% { width:190px; left:-25px;}
     60% { width:140px; left:0px;}
     80% { width:140px; }
     100% { width:140px;  }
     }

    #pulsate:hover {-o-animation-name: pulsate;-o-animation-duration: 20s;-o-animation-timing-function: ease-in-out;}
    @-o-keyframes pulsate {
     0% { width:140px; }
     5% { width:190px; left:-25px; }
     10% { width:140px; left:0px; }
     15% { width:190px; left:-25px; }
     20% { width:140px; left:0px; }
     40% { width:140px; }
     45% { width:190px; left:-25px; }
     50% { width:140px; left:0px;}
     55% { width:190px; left:-25px;}
     60% { width:140px; left:0px;}
     80% { width:140px; }
     100% { width:140px;  }
     }

التأثير الثالث. الدفع:  

 HTML :

<div id="nudge">Place mouse on  me my text will shift!</div>

 CSS :

    #nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms}
    #nudge{-moz-transition-property:color,background-color,padding-left;-moz-transition-duration:500ms,500ms,500ms}
    #nudge{-o-transition-property:color,background-color,padding-left;-o-transition-duration:500ms,500ms,500ms}
    #nudge:hover{background-color:#efefef;color:#333;padding-left:50px}

التأثير الرابع. الارتداد: 

 HTML :

<div id="bounce">Place mouse on  me i will bounce!</div>

 CSS :

    #bounce:hover {-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-iteration-count:2;-webkit-animation-direction:alternate}
     @-webkit-keyframes bounce{from{margin-left:0px;}
      to{margin-left:250px;}
      }

    #bounce:hover {-moz-animation-name:bounce;-moz-animation-duration:1s;-moz-animation-iteration-count:2;-moz-animation-direction:alternate}
     @-moz-keyframes bounce{from{margin-left:0px;}
      to{margin-left:250px;}
      }

    #bounce:hover {-o-animation-name:bounce;-o-animation-duration:1s;-o-animation-iteration-count:2;-o-animation-direction:alternate}
     @-o-keyframes bounce{from{margin-left:0px;}
      to{margin-left:250px;}
      }

التأثير الخامس. الدوران: 

 HTML :

<div id="spin">Place mouse on  me i will spin</div>

 CSS :

    #spin{-webkit-transition: -webkit-transform 3s ease-in;}
    #spin:hover{-webkit-transform:rotate(360deg)}

    #spin{-moz-transition: -moz-transform 3s ease-in;}
    #spin:hover{-moz-transform:rotate(360deg)}

    #spin{-o-transition: -o-transform 3s ease-in;}
    #spin:hover{-o-transform:rotate(360deg)}

 نتمنى ان تحسن اختيارك لما تراه ملائم لمدونتك