السبت، 10 أغسطس 2013

اضافه تأثيرات جذابه الى صورك فى مدونتك

السلام عليكم ورحمه الله وبركاته
اليوم أريد ان اشارككم موضوع تعبت جدااا لحد ما عملته ويارب يعجبكم هو كيف تضفى على صورك بعض الجمال لتجعلها جذابه وممتعه وتجعلها فريده من نوعها وتزيد من جمالها وقد صنعت لكم اكواد تضيف تأثيرات على الصور التى تعرضونها فى مدونتكم وهذه الاكواد بلغه CSS3 وتعمل هذه الاكواد على عمليه فلتره للصور لتعطى لها لمسه جماليه عن باقى صور المدونات الاخرى التقليديه لأنى شخصيا أكره التقليد والروتين فقمت بتصميمهم وأريد ان اشاركها معكم فأتمنى ان تعجبكم .

ولتطبيق الكود بشكل صحيح تضع الكود الذى يعجبك فوق هذا الكود ]]></b:skin> فى قالبك :]
سوف أعرض عليكم نموج من الصور وبها التأثيرات وتحتها الكود الخاص بها فأذا اعجبك التأثير تأخذ الكود الذى تحته ثم تضعه فوق هذا الكود ]]></b:skin> فى قالبك عندما تحرره.


عيش التجربه

    
img {
    -webkit-filter:grayscale(1);
}
img:hover {
    -webkit-filter:grayscale(0);
}


           
img {
    -webkit-filter:saturate(4);
}
img:hover {
    -webkit-filter:saturate(1);
}



        
img {
    -webkit-filter:sepia(1);
}
img:hover {
    -webkit-filter:sepia(0);
}


        
img:hover {
    -webkit-filter:hue-rotate(360deg);
}



          
img {
    -webkit-filter:invert(1);
}
img:hover {
    -webkit-filter:invert(0);
}


          
img {
    -webkit-filter:contrast(0.3);
}
img:hover {
    -webkit-filter:contrast(1);
}


                 
img {
    -webkit-filter:blur(2px);
}
img:hover {
    -webkit-filter:blur(0);
}


          
@-webkit-keyframes hue {
    100% { -webkit-filter:hue-rotate(360deg); }
}
img:hover {
    -webkit-animation:hue 1s linear infinite;
}



          
img { 
    -webkit-filter:grayscale(1) blur(2px); 
}
img:hover {
    -webkit-transform:scale(1.3);
    -webkit-filter:grayscale(0) blur(0);
}


أتمنى ان يكون أعجبكم الموضوع :]
واذا حدث أى شىء خطأ اكتب تعليق وانا أرد عليك وأصحح الخطأ :]

MOHAMED TAHSEEN

محمد تحسين طالب فى كليه تجاره. أهتم بعالم المعرفه والتكنولوجيا الحديثه والمتطوره وأمل ان اكون ذات يوما من المبرمجين والمسوقين الالكترونين فى مجال الانترنت ونحاول جاهدين فى مدونه وسيله ان نقدم كل ما يخص المعرفه والتكنولوجيا فتابعونا على المواقع الاجتماعيه ليصلكم كل تحديثاتنا

0 التعليقات :

إرسال تعليق

 
: POWERED BY Powered By Blogger Built with jQuery Built with CSS3
Re-Designed by Mohamed Tahseen