لقد أدخلت CSS3 إمكانيات لا تعد ولا تحصى لمصممي UX ، وأفضل شيء عنها هو أن الأجزاء الأروع في الواقع بسيطة التنفيذ.
سيعطيك مجرد سطرين من الشفرة تأثيرًا انتقاليًا رائعًا من شأنه إثارة المستخدمين وزيادة المشاركة وفي النهاية ، عند استخدامها جيدًا ، سيزيد من التحويلات. ما هو أكثر من ذلك ، هذه الأجهزة تسارعت ، وتحسين التدريجي الذي يمكنك استخدامه الآن.
إليك 8 تأثيرات بسيطة حقًا ستضيف حياتك إلى واجهة المستخدم وتبتسم إلى وجوه المستخدمين.
يتم التحكم في كل هذه التأثيرات (شريط واحد) مع خاصية النقل. حتى نتمكن من رؤية هذه التأثيرات تعمل ، سنقوم بإعداد div في صفحة HTML:
بعد القيام بذلك ، قم بتعيين العرض والارتفاع (بحيث يكون له أبعاد) ، ولون الخلفية الخاص به (حتى يمكننا رؤيته) وخصائص الانتقال الخاصة به.
تحتوي خاصية الانتقال على ثلاث قيم: خصائص الانتقال (في حالتنا كلها) سرعة الانتقال (في الحالة 0.3 ثانية) وقيمة ثالثة تسمح لك بتغيير كيفية حساب التسارع والتباطؤ ، لكننا ليرة لبنانية العصا مع الافتراضي عن طريق ترك هذا فارغة.
الآن كل ما نحتاجه هو تغيير الخصائص ، وسيعملون على تنشيطنا ...
إذا كنت ترغب في المتابعة معك قم بتنزيل الملفات التجريبية هنا.
وجود الأشياء تتلاشى هو طلب شائع إلى حد كبير من العملاء. إنها طريقة رائعة للتأكيد على الوظيفة أو لفت الانتباه إلى عبارة تحث المستخدم على اتخاذ إجراء.
يتم ترميز تأثيرات التلاشي في خطوتين: أولاً ، تقوم بتعيين الحالة الأولية ؛ بعد ذلك ، يمكنك تعيين التغيير ، على سبيل المثال عند التمرير:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(تأكد من ضبط فئة div على "التلاشي" لرؤية هذا العمل.)
لتنمية عنصر ، استخدمته في استخدام العرض والارتفاع ، أو الحشو الخاص به. ولكن الآن يمكننا استخدام تحويل CSS3 لتكبيرها.
قم بتعيين فئة div الخاصة بك على "grow" ثم أضف هذا الرمز إلى قالب النمط الخاص بك:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}تحتوي تحويلات CSS على عدد من الاستخدامات المختلفة ، وأحد أفضلها هو تحويل دوران العنصر. امنح "div" فئة "تدوير" وأضف ما يلي إلى CSS:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}تم إبداء ظلال ثلاثية الأبعاد لمدة عام أو أكثر ، لأنهم لم ينظر إليهم على أنهم متوافقين مع التصميم المسطح ، وهو بالطبع هراء ، ويعملون بشكل خيالي لإعطاء ردود فعل المستخدمين على تفاعلاتهم والعمل مع واجهات 3D مسطحة ، أو وهمية .
يتم تحقيق هذا التأثير بإضافة ظل مربع ، ثم نقل العنصر على المحور x باستخدام التحويل وترجمة الخصائص بحيث يبدو أنها تنمو خارج الشاشة.
قم بإعطائك الفئة "threed" ثم أضف الشفرة التالية إلى CSS:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}واحدة من أهم أنماط الأزرار في الوقت الحالي هي زر الشبح. زر بلا خلفية وحدود ثقيلة. يمكننا بالطبع إضافة حد لعنصر ببساطة ، لكن ذلك سيغير موضع العنصر. يمكننا حل هذه المشكلة باستخدام حجم الصندوق ، ولكن الحل الأبسط هو الانتقال في الحدود باستخدام ظل مربع داخلي.
امنح "div" فئة "الحد" وأضف CSS التالي إلى الأنماط:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}