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

 
سنتحدث اليوم عن كيفية انشاء تأثير على النصوص , مستخدمين خاصية text-shadow فى CSS3 وهو تاثير جميل ومميز يضيف ابداعية لتصاميمك , التصميم النهائى كما بالصورة

 

اللغات المستخدمة : HTML , CSS3
الصعوبة : متوسط
 

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

 
الخاصية الاساسية المستخدمة اليوم هى text-shadw لنتحدث قليلًا عنها :

مثال

من المثال السابق 
 

 

الخواص من اليسار إلى اليمين بالترتيب هى : ازاحة الظل فى الافقى => ازاحة الظل فى الرأسي => انتشار الظل => لون الظل .
 
يمكن عمل اكثر من ظل للعنصر الواحد
 
مثال 

من المثال السابق 
 
نلاحظ مدى مرونة هذه الخاصية فى عمل اشكال رائع ووضع اكثر من ظل , عن طريق اضافة المزيد من الظلال مع علامة ‘,’ .
 
إلى عمل تاثيرنا
 
كود التأثير

 

See the Pen 3d text effect without transition by amrelarabi (@amrelarabi) on CodePen.0

 

نلاحظ من الكود السابق 
 
انه نقوم بجمع بجمع الظل اكثر من مرة وفكل مرة نزيد الازاحة فى الافقى والرأسى بمقدار 1px هذه يجعل الظل عميق وله بعد ثالث لاحظ الفرق بين هذا وبين استخدام الكود بهذه الطريقة التالية التى لاتؤدى إلى التأثير , ظل واحد ولها نفس مجموع الازاحة للكود السابق
 

See the Pen no prefect 3d text transition by amrelarabi (@amrelarabi) on CodePen.0

 
لاحظ ان الظل فى الحالة السابقة يتفتقر إلى البعد الثالث و لا يبدو ان النص ثلاثى الابعاد ابدًا
 
الان لنضيف بعض Transition وهو مفيد فى الانتقال من حالة إلى حالة اخرى بنعومة وسهولة 
 
الخاصية Transition تاخد القيم الاتية من اليسار إلى اليمين : اولًا اسم الخاصية المراد تطبيق الانتقال عليها => زمن الانتقال => نوع الانتقال
 
إليك الكود النهائى بعد اضافة Transition 
 

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

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


شاركه مع اصدقائك

كتب بواسطة admin

مؤسس مطور

التعليقات

اترك تعليقك

شاركنا بتعليقاتك حول الموضوع

*

Comments