loulou ange
11-01-2013, بتوقيت غرينيتش 04:09 PM
http://www.dzbatna.com/images/icons/icon18.gif ط¨ط²ظˆط؛ ط§ظ„ظ‚ظ…ط± - CSS3 - (ط¥ظ†طھط¨ط© ط´ط¹ط± ط±ط§ط³ظƒ ظ„ط§ ظٹظˆظ‚ظپ) (http://www.dzbatna.com/t1964173/)
هل تخيلت يوما ما من خلال متابعتك لتطور الـcss3 انها ستكون أشبة ما يكون بالرسوم المتحركة؟!
تعودنا على css3 انها تفاعليه عند مرور الماوس على رابط او صورة
لكن أنها تتحرك من دون ان تمر بماوسك على شيء …. هذا جداً مذهل
درس مفصلنا هذا اليوم بإستخدام الدالة animation
و سنقوم بتصوير منظر لبزوغ القمر
أي انتهاء النهار و بداية الليل حيث ستكون الخلفية مائلة للأزرق
و عند بزوغ القمر و إختفاء بريقة شيأً فشيء تتحول للأسود
بالطبع لوحة فينة إحترافية يصعب عليك تصوريها بالـcss إن لم تشاهد إمكانيات الدالة animation من قبل !
في هذا الدرس مفصل لا نحتاج الإ لملف واحد فقط لا غير هل تتصور ذلك؟!
بالعادة في مثل هذة الدورس تحتاج من 3 الى اربع ملفات
لكن انت هنا في مدونة blog مستحيل حيث لا معنى للمستحيل
نحتاج فقط لإنشاء ملف HTML و سنقوم بتضمين ملف الستايل style بداخل ملف HTML
أولاً ملف CSS سيكون على النحو التالي
رمز Code:
body { background: #133d48; -webkit-animation: sky-to-black 5s ease forwards; -moz-animation: sky-to-black 5s ease forwards; -ms-animation: sky-to-black 5s ease forwards; } .ground { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; background: black; -webkit-animation: ground-to-black 5s ease forwards; -moz-animation: ground-to-black 5s ease forwards; -ms-animation: ground-to-black 5s ease forwards; } .moon { width: 100px; height: 100px; position: absolute; background: white; border-radius: 50px; box-shadow: 0 0 20px white; left: 50%; top: 80%; margin: 0 -50px; -webkit-animation: rising-sun 5s ease forwards; -moz-animation: rising-sun 5s ease forwards; -ms-animation: rising-sun 5s ease forwards; } .ground, .moon { text-indent: -9999px; overflow: hidden; } @-moz-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-webkit-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-ms-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-moz-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-moz-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } } @-webkit-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-webkit-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } } @-ms-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-ms-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } }
لتسهل المهمة سأقوم بتضمين ملف CSS داخل ملف HTML عن طريق الدالة
رمز Code:
<style> في هذا الفراغ سنكتب أكواد ملف الستايل style </style>
بذلك يتكون لنا ملف الـHTML و سيكون كالتالي
رمز Code:
<html><head> <style> body { background: #133d48; -webkit-animation: sky-to-black 5s ease forwards; -moz-animation: sky-to-black 5s ease forwards; -ms-animation: sky-to-black 5s ease forwards; } .ground { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; background: black; -webkit-animation: ground-to-black 5s ease forwards; -moz-animation: ground-to-black 5s ease forwards; -ms-animation: ground-to-black 5s ease forwards; } .moon { width: 100px; height: 100px; position: absolute; background: white; border-radius: 50px; box-shadow: 0 0 20px white; left: 50%; top: 80%; margin: 0 -50px; -webkit-animation: rising-sun 5s ease forwards; -moz-animation: rising-sun 5s ease forwards; -ms-animation: rising-sun 5s ease forwards; } .ground, .moon { text-indent: -9999px; overflow: hidden; } @-moz-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-webkit-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-ms-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-moz-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-moz-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } } @-webkit-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-webkit-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } } @-ms-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-ms-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } } </style> <body> <div class="moon"> I see a bad moon rising I see trouble on the way </div> <div class="ground"> I see earthquakes and lightnin’ I see bad times today </div> </body></html>
بعد التطبيق هذة هي النتيجة (http://www.mosta7ilansak.com/examples/Semantic%20Animation/)
مصدر الموضوع من مدونتي و لا احلل ان احد ينقلة من دون ذكر المصدر
درس مفصل بزوغ القمر بالـCSS3 | مدونة blog مستحيل (http://www.mosta7ilansak.com/2014/10/10/%d8%af%d8%b1%d8%b3-%d8%a8%d8%b2%d9%88%d8%ba-%d8%a7%d9%84%d9%82%d9%85%d8%b1-%d8%a8%d8%a7%d9%84%d9%80css3/)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
هل تخيلت يوما ما من خلال متابعتك لتطور الـcss3 انها ستكون أشبة ما يكون بالرسوم المتحركة؟!
تعودنا على css3 انها تفاعليه عند مرور الماوس على رابط او صورة
لكن أنها تتحرك من دون ان تمر بماوسك على شيء …. هذا جداً مذهل
درس مفصلنا هذا اليوم بإستخدام الدالة animation
و سنقوم بتصوير منظر لبزوغ القمر
أي انتهاء النهار و بداية الليل حيث ستكون الخلفية مائلة للأزرق
و عند بزوغ القمر و إختفاء بريقة شيأً فشيء تتحول للأسود
بالطبع لوحة فينة إحترافية يصعب عليك تصوريها بالـcss إن لم تشاهد إمكانيات الدالة animation من قبل !
في هذا الدرس مفصل لا نحتاج الإ لملف واحد فقط لا غير هل تتصور ذلك؟!
بالعادة في مثل هذة الدورس تحتاج من 3 الى اربع ملفات
لكن انت هنا في مدونة blog مستحيل حيث لا معنى للمستحيل
نحتاج فقط لإنشاء ملف HTML و سنقوم بتضمين ملف الستايل style بداخل ملف HTML
أولاً ملف CSS سيكون على النحو التالي
رمز Code:
body { background: #133d48; -webkit-animation: sky-to-black 5s ease forwards; -moz-animation: sky-to-black 5s ease forwards; -ms-animation: sky-to-black 5s ease forwards; } .ground { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; background: black; -webkit-animation: ground-to-black 5s ease forwards; -moz-animation: ground-to-black 5s ease forwards; -ms-animation: ground-to-black 5s ease forwards; } .moon { width: 100px; height: 100px; position: absolute; background: white; border-radius: 50px; box-shadow: 0 0 20px white; left: 50%; top: 80%; margin: 0 -50px; -webkit-animation: rising-sun 5s ease forwards; -moz-animation: rising-sun 5s ease forwards; -ms-animation: rising-sun 5s ease forwards; } .ground, .moon { text-indent: -9999px; overflow: hidden; } @-moz-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-webkit-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-ms-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-moz-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-moz-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } } @-webkit-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-webkit-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } } @-ms-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-ms-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } }
لتسهل المهمة سأقوم بتضمين ملف CSS داخل ملف HTML عن طريق الدالة
رمز Code:
<style> في هذا الفراغ سنكتب أكواد ملف الستايل style </style>
بذلك يتكون لنا ملف الـHTML و سيكون كالتالي
رمز Code:
<html><head> <style> body { background: #133d48; -webkit-animation: sky-to-black 5s ease forwards; -moz-animation: sky-to-black 5s ease forwards; -ms-animation: sky-to-black 5s ease forwards; } .ground { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; background: black; -webkit-animation: ground-to-black 5s ease forwards; -moz-animation: ground-to-black 5s ease forwards; -ms-animation: ground-to-black 5s ease forwards; } .moon { width: 100px; height: 100px; position: absolute; background: white; border-radius: 50px; box-shadow: 0 0 20px white; left: 50%; top: 80%; margin: 0 -50px; -webkit-animation: rising-sun 5s ease forwards; -moz-animation: rising-sun 5s ease forwards; -ms-animation: rising-sun 5s ease forwards; } .ground, .moon { text-indent: -9999px; overflow: hidden; } @-moz-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-webkit-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-ms-keyframes rising-sun { 0% { top: 80%; box-shadow: 0 0 20px 100px white; } 100% { top: 15%; box-shadow: 0 0 150px 20px white; } } @-moz-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-moz-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } } @-webkit-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-webkit-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } } @-ms-keyframes sky-to-black { 0% { background-color: #133d48; } 100% { background-color: black; } } @-ms-keyframes ground-to-black { 0% { background-color: #211d11 } 100% { background-color: black; } } </style> <body> <div class="moon"> I see a bad moon rising I see trouble on the way </div> <div class="ground"> I see earthquakes and lightnin’ I see bad times today </div> </body></html>
بعد التطبيق هذة هي النتيجة (http://www.mosta7ilansak.com/examples/Semantic%20Animation/)
مصدر الموضوع من مدونتي و لا احلل ان احد ينقلة من دون ذكر المصدر
درس مفصل بزوغ القمر بالـCSS3 | مدونة blog مستحيل (http://www.mosta7ilansak.com/2014/10/10/%d8%af%d8%b1%d8%b3-%d8%a8%d8%b2%d9%88%d8%ba-%d8%a7%d9%84%d9%82%d9%85%d8%b1-%d8%a8%d8%a7%d9%84%d9%80css3/)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
