درس رهيييب:strongly:
مربع تفاعلي بمؤثرات css3
طبعاً هذا مثال مباشر
ط§ظ„ظ…ط±ط¨ط¹ ط§ظ„ط?ظپط§ط¹ظ„ظ?
كيفية الإنشاء
بداية نحتاج فقط لملف واحد
ننشىء ملف html و نُضمن بداخلة خصائص الستايل
رمز Code:
* { 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);
}
إشتر الآن
يمكنك تغيير درجة الدوران و طول و عرض المربع و تغيير البوردر و شفافيتة
كما يمكنك توظيف المربع في أي شيء تتخيلة
فمثلاً انا قمت بجعلة إطار لايقونات فيسبوك و جوجل بلس و يمكنك معاينة في اسفل الموضوع المربع التفاعلي | مدونة مستحيل
لأي إستفسار انا حاضر
المصدر: مدونة مستحيل
مربع تفاعلي بمؤثرات css3
طبعاً هذا مثال مباشر
ط§ظ„ظ…ط±ط¨ط¹ ط§ظ„ط?ظپط§ط¹ظ„ظ?
كيفية الإنشاء
بداية نحتاج فقط لملف واحد
ننشىء ملف html و نُضمن بداخلة خصائص الستايل
رمز Code:
* { 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);
}
إشتر الآن
يمكنك تغيير درجة الدوران و طول و عرض المربع و تغيير البوردر و شفافيتة
كما يمكنك توظيف المربع في أي شيء تتخيلة
فمثلاً انا قمت بجعلة إطار لايقونات فيسبوك و جوجل بلس و يمكنك معاينة في اسفل الموضوع المربع التفاعلي | مدونة مستحيل
لأي إستفسار انا حاضر
المصدر: مدونة مستحيل
