سنتحدث اليوم عن كيفية انشاء تأثير على النصوص , مستخدمين خاصية text-shadow فى CSS3 وهو تاثير جميل ومميز يضيف ابداعية لتصاميمك , التصميم النهائى كما بالصورة
اللغات المستخدمة : HTML , CSS3
الصعوبة : متوسط
كيفية انشاء تاثير ثلاثي الابعاد على النصوص ب CSS3 رائع
الخاصية الاساسية المستخدمة اليوم هى text-shadw لنتحدث قليلًا عنها :
مثال
h1 { text-shadow: 2px 2px 8px #FF0000; }
من المثال السابق
الخواص من اليسار إلى اليمين بالترتيب هى : ازاحة الظل فى الافقى => ازاحة الظل فى الرأسي => انتشار الظل => لون الظل .
يمكن عمل اكثر من ظل للعنصر الواحد
مثال
.shadow { text-shadow: 1px 1px 0 black, 2px 2px 0 black; }
من المثال السابق
نلاحظ مدى مرونة هذه الخاصية فى عمل اشكال رائع ووضع اكثر من ظل , عن طريق اضافة المزيد من الظلال مع علامة ‘,’ .
إلى عمل تاثيرنا
كود التأثير
See the Pen 3d text effect without transition by amrelarabi (@amrelarabi) on CodePen.
1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
نلاحظ من الكود السابق
انه نقوم بجمع بجمع الظل اكثر من مرة وفكل مرة نزيد الازاحة فى الافقى والرأسى بمقدار 1px هذه يجعل الظل عميق وله بعد ثالث لاحظ الفرق بين هذا وبين استخدام الكود بهذه الطريقة التالية التى لاتؤدى إلى التأثير , ظل واحد ولها نفس مجموع الازاحة للكود السابق
6px 6px #fe4902
See the Pen no prefect 3d text transition by amrelarabi (@amrelarabi) on CodePen.
لاحظ ان الظل فى الحالة السابقة يتفتقر إلى البعد الثالث و لا يبدو ان النص ثلاثى الابعاد ابدًا
الان لنضيف بعض Transition وهو مفيد فى الانتقال من حالة إلى حالة اخرى بنعومة وسهولة
الخاصية Transition تاخد القيم الاتية من اليسار إلى اليمين : اولًا اسم الخاصية المراد تطبيق الانتقال عليها => زمن الانتقال => نوع الانتقال
إليك الكود النهائى بعد اضافة Transition
See the Pen 3d text effect without transition with transition by amrelarabi (@amrelarabi) on CodePen.
تحميل الكود النهائى وبعض امثلة مختلفة اخرى على دروب بوكس هنا
اتمنى ان تكون قد استفدت من المقالة ولاتنسى مشاركتها مع اصدقائك ليستفيد الجميع , وشكرًا.
