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

في هذه المقالة، سوف نتحدث عن خمسه تقنيات تفاعليه والتي يمكنك أن تستخدمه الأن:

1. تأثيرات النص المتحرك.
2. الصور المتحركه بدون gif.
3. قوائم منسدله جديده.
4. عارض صور خيالي.
5. أزرار متحركه ومدهشه.

سوف نتحدث عن مجموعة متنوعة من CSS مفيدة وبعض الحيل التي يمكنك الاستفادة منها عند إنشاء التقنيات التفاعلية الخاصة. الحلول المقدمة هنا بالتأكيد ليست مثالية،لذلك لابد أن يكون هناك أفكار واقتراحات حول كيفية حل هذه المشاكل للوصول الي تصميم غاية في الروعه.

دعونا نبدأ الان

تأثير النص المنبثق:

اضغط علي هذا الموقع ديفيد DeSandro فهو يستخدم النص المقذوف بمجرد مرور الماوس علي النص ينتعش وينبثق.

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

انقر هنا لمشاهده التنفيذ

دعونا أولا نضيف بعض النصوص :

[html] <span>Extrude Me</span>

[/html]

ونضيف بعض التأثيرات علي هذا الكود في ملف الستايل:

[html] body {
background-color: #444;
text-align: center;
}
.extruded
{
color: #888;
font-family: proxima-nova-1, proxima-nova-2, ‘Helvetica Neue’, Arial, sans-serif;
font-size: 48px;
font-weight: bold;
text-shadow: #000 3px 3px;
}

[/html]

طبقنا هنا بعض الانماط الأساسيه . لكن هذا النص لا يبدو الظل ثلاثي الأبعاد، ولعمل ذلك سنحتاج إلى إضافة المزيد من النص الظلال :

[html] text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px;

[/html]

لقد قمنا بإضافة ظلال مكدسة فوق بعضها لعمل تأثير الظلال

إضافة ظلال وتأثيرات أكثر:

[html] .extruded:hover {
color: #FFF;
text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
}
[/html]

قمنا بإضافة ثلاثة ظلال للنص لعمل تأثير أعمق لكن هذا التأثير وحده يظل مسطحا جدا، ونحن نريد أن يبدو النص وكأنه خرج من الصفحه. لذا، لابد ان نزيد طول النص :

[html] .extruded {
position: relative;
}

.extruded:hover {
color: #FFF;
text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
left: -6px;
top: -6px;
}
[/html]

يصعد النص لأعلي بمسافه مساويه للمسافه التي يتحركها أسفل.

إنتقالية الحركه

ننتقل الأن الي css3 لعمل انتقال للنص وحركه لجعله متحركا

[html] <pre>.extruded {
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
}</pre>
[/html]

هذا يتسبب في حركة سلسة للتغييرات المختلفة على موقعنا.

[html] body {
background-color: #444;
text-align: center;
}

.extruded {
color: #888;
font-family: proxima-nova-1, proxima-nova-2, ‘Helvetica Neue’, Arial, sans-serif; /* the original site doesn’t use the @font-face attribute */
font-size: 48px;
font-weight: bold;
text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px;
position: relative;
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
}

.extruded:hover {
color: #FFF;
text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
left: -6px;
top: -6px;
}
[/html]

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