ط¥ظ†ط´ط§ط، ظ…ط±ط¨ط¹ طھظپط§ط¹ظ„ظٹ ط¨ط¹ط¯ ظ…ط±ظˆط± ط§ظ„ظ…ط§ظˆط³ ط¹ظ„ظٹط©


درس مفصل رهيييب

مربع تفاعلي بمؤثرات css3

طبعاً هذا مثال مباشر

المربع التفاعلي


كيفية الإنشاء

بداية نحتاج فقط لملف واحد

ننشىء ملف 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: &quot;HelveticaNeue-Light&quot;, &quot;Helvetica Neue Light&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, 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: &quot;&quot;; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(noise.png) center center; z-index: -1; } #button:before { content: &quot;&quot;; 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=&quot;page-wrap&quot;> <a id=&quot;button&quot; href=&quot;#&quot;> إشتر الآن </a> </div>

يمكنك تغيير درجة الدوران و طول و عرض المربع و تغيير البوردر و شفافيتة

كما يمكنك توظيف المربع في أي شيء تتخيلة




فمثلاً انا قمت بجعلة إطار لايقونات فيسبوك و جوجل GOOGLE بلس و يمكنك معاينة في اسفل الموضوع المربع التفاعلي | مدونة blog مستحيل



لأي إستفسار انا حاضر


المصدر: مدونة blog مستحيل









©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©