كيفية انشاء تاثير ثلاثي الابعاد على النصوص ب CSS3

سنتحدث اليوم عن كيفية انشاء تأثير على النصوص , مستخدمين خاصية 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 


تحميل الكود النهائى وبعض امثلة مختلفة اخرى على دروب بوكس هنا

اتمنى ان تكون قد استفدت من المقالة ولاتنسى مشاركتها مع اصدقائك ليستفيد الجميع , وشكرًا .


شارك الموضوع

مواضيع ذات صلة