linnou
11-01-2013, بتوقيت غرينيتش 04:09 PM
http://www.dzbatna.com/images/icons/icon20.gif ط¥ظ†ط´ط§ط، ظ…ط±ط¨ط¹ طھظپط§ط¹ظ„ظٹ ط¨ط¹ط¯ ظ…ط±ظˆط± ط§ظ„ظ…ط§ظˆط³ ط¹ظ„ظٹط© (http://www.dzbatna.com/t1965374/)
درس مفصل رهيييبhttp://www.dzbatna.com/images/smilies/strongly.gif
مربع تفاعلي بمؤثرات css3
طبعاً هذا مثال مباشر
المربع التفاعلي (http://www.mosta7ilansak.com/examples/Different-Transition/)
كيفية الإنشاء
بداية نحتاج فقط لملف واحد
ننشىء ملف html و نُضمن بداخلة خصائص الستايل style
رمز Code:
<style> * { margin: 0; padding: 0; } body { font: 14px Georgia, serif; } article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } #page-wrap { width: 960px; margin: 90px auto; text-align: center; } h1 { margin: 0 0 20px 0; } #button { margin: 60px auto; display: block; position: relative; width: 150px; padding: 70px 10px; color: white; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size: 24px; text-shadow: 1px 1px 1px hsla(0,100%,0%,0.5); text-decoration: none; border: 5px solid #aefbae; background-image: -moz-linear-gradient(top, #5be93a, #278312); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(1, #278312)); -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; -webkit-transform: rotate(720deg) rotateY(0); -webkit-transition: all 0.5s; -webkit-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1); -webkit-transition-delay: 0.5s; -moz-transform: rotate(720deg); -moz-transition: all 0.5s; -moz-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1); -moz-transition-delay: 0.5s; -o-transform: rotate(720deg); -o-transition: all 0.5s; -o-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1); -o-transition-delay: 0.5s; z-index: 1; -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.5); } #button:hover { -webkit-transition: padding 0.2s, top 0.2s; -webkit-transform: rotate(0deg) rotateY(0); -webkit-transition-delay: 0; -moz-transition: padding 0.2s, top 0.2s; -moz-transform: rotate(0deg); -moz-transition-delay: 0; -o-transition: padding 0.2s, top 0.2s; -o-transform: rotate(0deg); -o-transition-delay: 0; padding: 80px 20px; top: -10px; background-image: -moz-linear-gradient(top, #5be93a, #5be93a, #278312); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(0.2, #5be93a),color-stop(1, #278312)); } #button:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(noise.png) center center; z-index: -1; } #button:before { content: ""; position: absolute; top: -30px; left: -30px; bottom: -30px; right: -30px; -moz-border-radius: 35px; -webkit-border-radius: 35px; border-radius: 35px; z-index: -2; -webkit-transition: all 0.2s; -webkit-transform: rotate(0deg) rotateY(0); -webkit-transition-delay: 0; -moz-transition: all 0.2s; -moz-transform: rotate(0deg) rotateY(0); -moz-transition-delay: 0; -o-transition: all 0.2s; -o-transform: rotate(0deg) rotateY(0); -o-transition-delay: 0; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 0 100px rgba(0,0,0,0.1); box-shadow: inset 0 0 100px rgba(0,0,0,0.1); } #button:hover:before { -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 0 100px rgba(0,0,0,0.2); box-shadow: inset 0 0 100px rgba(0,0,0,0.2); top: -20px; left: -20px; bottom: -20px; right: -20px; } #button:active { -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.8); -moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.8); box-shadow: inset 0 0 30px rgba(0,0,0,0.8); } </style> <body> <div id="page-wrap"> <a id="button" href="#"> إشتر الآن </a> </div>
يمكنك تغيير درجة الدوران و طول و عرض المربع و تغيير البوردر و شفافيتة
كما يمكنك توظيف المربع في أي شيء تتخيلة
فمثلاً انا قمت بجعلة إطار لايقونات فيسبوك و جوجل GOOGLE بلس و يمكنك معاينة في اسفل الموضوع المربع التفاعلي | مدونة blog مستحيل (http://www.mosta7ilansak.com/2014/10/12/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%b1%d8%a8%d8%b9-%d8%aa%d9%81%d8%a7%d8%b9%d9%84%d9%8a-%d8%a8%d8%b9%d8%af-%d9%85%d8%b1%d9%88%d8%b1-%d8%a7%d9%84%d9%85%d8%a7%d9%88%d8%b3-%d8%b9%d9%84%d9%8a%d8%a9/)
لأي إستفسار انا حاضر
المصدر: مدونة blog مستحيل (http://www.mosta7ilansak.com)
ألعاب الأندرويد مجانا و حصريا (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)©
درس مفصل رهيييبhttp://www.dzbatna.com/images/smilies/strongly.gif
مربع تفاعلي بمؤثرات css3
طبعاً هذا مثال مباشر
المربع التفاعلي (http://www.mosta7ilansak.com/examples/Different-Transition/)
كيفية الإنشاء
بداية نحتاج فقط لملف واحد
ننشىء ملف html و نُضمن بداخلة خصائص الستايل style
رمز Code:
<style> * { margin: 0; padding: 0; } body { font: 14px Georgia, serif; } article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } #page-wrap { width: 960px; margin: 90px auto; text-align: center; } h1 { margin: 0 0 20px 0; } #button { margin: 60px auto; display: block; position: relative; width: 150px; padding: 70px 10px; color: white; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size: 24px; text-shadow: 1px 1px 1px hsla(0,100%,0%,0.5); text-decoration: none; border: 5px solid #aefbae; background-image: -moz-linear-gradient(top, #5be93a, #278312); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(1, #278312)); -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; -webkit-transform: rotate(720deg) rotateY(0); -webkit-transition: all 0.5s; -webkit-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1); -webkit-transition-delay: 0.5s; -moz-transform: rotate(720deg); -moz-transition: all 0.5s; -moz-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1); -moz-transition-delay: 0.5s; -o-transform: rotate(720deg); -o-transition: all 0.5s; -o-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1); -o-transition-delay: 0.5s; z-index: 1; -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.5); } #button:hover { -webkit-transition: padding 0.2s, top 0.2s; -webkit-transform: rotate(0deg) rotateY(0); -webkit-transition-delay: 0; -moz-transition: padding 0.2s, top 0.2s; -moz-transform: rotate(0deg); -moz-transition-delay: 0; -o-transition: padding 0.2s, top 0.2s; -o-transform: rotate(0deg); -o-transition-delay: 0; padding: 80px 20px; top: -10px; background-image: -moz-linear-gradient(top, #5be93a, #5be93a, #278312); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(0.2, #5be93a),color-stop(1, #278312)); } #button:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(noise.png) center center; z-index: -1; } #button:before { content: ""; position: absolute; top: -30px; left: -30px; bottom: -30px; right: -30px; -moz-border-radius: 35px; -webkit-border-radius: 35px; border-radius: 35px; z-index: -2; -webkit-transition: all 0.2s; -webkit-transform: rotate(0deg) rotateY(0); -webkit-transition-delay: 0; -moz-transition: all 0.2s; -moz-transform: rotate(0deg) rotateY(0); -moz-transition-delay: 0; -o-transition: all 0.2s; -o-transform: rotate(0deg) rotateY(0); -o-transition-delay: 0; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 0 100px rgba(0,0,0,0.1); box-shadow: inset 0 0 100px rgba(0,0,0,0.1); } #button:hover:before { -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 0 100px rgba(0,0,0,0.2); box-shadow: inset 0 0 100px rgba(0,0,0,0.2); top: -20px; left: -20px; bottom: -20px; right: -20px; } #button:active { -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.8); -moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.8); box-shadow: inset 0 0 30px rgba(0,0,0,0.8); } </style> <body> <div id="page-wrap"> <a id="button" href="#"> إشتر الآن </a> </div>
يمكنك تغيير درجة الدوران و طول و عرض المربع و تغيير البوردر و شفافيتة
كما يمكنك توظيف المربع في أي شيء تتخيلة
فمثلاً انا قمت بجعلة إطار لايقونات فيسبوك و جوجل GOOGLE بلس و يمكنك معاينة في اسفل الموضوع المربع التفاعلي | مدونة blog مستحيل (http://www.mosta7ilansak.com/2014/10/12/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%b1%d8%a8%d8%b9-%d8%aa%d9%81%d8%a7%d8%b9%d9%84%d9%8a-%d8%a8%d8%b9%d8%af-%d9%85%d8%b1%d9%88%d8%b1-%d8%a7%d9%84%d9%85%d8%a7%d9%88%d8%b3-%d8%b9%d9%84%d9%8a%d8%a9/)
لأي إستفسار انا حاضر
المصدر: مدونة blog مستحيل (http://www.mosta7ilansak.com)
ألعاب الأندرويد مجانا و حصريا (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)©
