إضافة تأثير للكتابة فقط بـCSS3

السلام عليكم أحبابي في الله

لغة الـCSS لغة التنسيق و جعل الموقع أكثر جمالية، دون هذه اللغة فلن تتمكن من وضع ستايل لموقعك، يعني إضافة له تأثيرات، ألوان،... و غير ذالك، قد تعرف أن لغة الــCSS تكمنك من إضافة الـFont-Family و اللون فقط... إلى الكتابة التي تريدها على موقعك، الـCSS في وقتنا الحالي و في العديد من المواقع فهو يعوض الفوتوشوب الذي كان سابقا أساسي لجعل الموقع حي، يعني كلما أردت أن تجعل شيء ما، كالكتابة مثلا، جعلها متحركة أو وضع لها تأثير جميل فعليك عمله على الفوتوشوب، ثم حفظه بصيغة معينة، ثم رفعه على موقع... يعني عمل جد متعب، لهذا لغة الـCSS جعلت لنا كل هذا أكثر من سهل، يكفي كتابة سطور من الاكواد و لديك نفس الصورة كما لو أنك عملتها على الفوتوشوب، بل أكثر جمالية، في هذا الدرس إن شاء الله سوف أريكم كيف نقوم بوضع ستايل و تأثير جد رائع للكتابة. تابع معي.

أولا سنكتب كود الـHTML (أساسي) :

< h1  class = " Zimwar " > CLIP TEXT</ h1 >

و الان نقوم بإضافة كود الـCSS يعني الستايل :

الان نضيف ستايل عادي : 

.Zimwar {    background:url('http://goo.gl/C1Bqq7');
    background-repeat:repeat-x;
    background-position:0 0;
    font-size:200px;
    text-transform:uppercase;
    text-align:center;
    font-family:'Luckiest Guy';
    color:transparent;
    -webkit-font-smoothing:antialiased;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:0;

و الان سنضيف كود ستايل الذي سيضيف تأثير على الكتابة 

-webkit-animation:BackgroundAnimated 15s linear infinite;
    -moz-animation:BackgroundAnimated 15s linear infinite;
    -ms-animation:BackgroundAnimated 15s linear infinite;
    -o-animation:BackgroundAnimated 15s linear infinite;
    animation:BackgroundAnimated 15s linear infinite;
}
    @keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-webkit-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-ms-keyframes BackgroundAnimated {<     from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-moz-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}

مثال حي من [هنا]

ملاحظة فقط : العيب الوحيد هو أن ليس كل الاصدرات من المتصفحات تتحمل هذه الاكواد (CSS3)، مثلا بعض إصدرات القديمة من IE و Firefox لا تتحمل هذه الاكواد.
إذا أعجبك الدرس، شاركه مع أصدقائك، لايك لصفحتنا على الفيسبوك، و الاشتراك على قناتنا على اليوتوب، لاتنسى إذا أردت المزيد من التأثيرات ضع تعليق أسفله.