5 تأثيرات CSS3 رائعة سترى المزيد منها

الإعلانات

يتم دعم CSS3 (إلى جانب قوة HTML5) بسرعة من قبل جميع المتصفحات الرئيسية (اقرأ - أي شيء ما عدا Internet Explorer) ، لذلك يعتقد الآن أنه سيكون الوقت المناسب لرؤية بعض تأثيرات CSS الرائعة التي يمكننا تحقيقها باستخدام قوة المتصفح الخاص بك ورمز CSS الصغير. من المفترض أن تتمكن من رؤية جميع التأثيرات الموضحة في هذه المقالة إذا كنت تستخدم أحدث متصفح Chrome أو Safari أو Firefox.

أولاً - ما هو CSS؟

إذا كنت تقرأ هذه المقالة لأنك مفتون ولكن ليس لديك فكرة عما تعنيه CSS ، دعني أشرح بسرعة. CSS هي لغة الترميز المستخدمة لتزيين صفحات الويب. إنها ترمز إلى جتصاعدي ستيل س، ويضيف ببساطة الأسلوب والذوق إلى الموقع. من المؤكد أن المواقع الإلكترونية قابلة للقراءة بدون CSS ، ولكنها بشعة تمامًا مثلما كانت جميع مواقع الويب في عام 1995. بينما تصف ملفات HTML بنية الصفحة ومحتواها النصي ، فإن CSS تجعلها تعرض بطريقة المصمم المقصود ، وتحديد كل شيء من تخطيط الصفحة وحجم النص والألوان ، والآن عدد من التأثيرات الرائعة مع المقدمة من CSS3.

في الماضي ، كان تحقيق نفس النوع من التأثيرات مثل تلك الموصوفة في هذه المقالة يعني تنزيل CSS كبير الحجم أو حتى رسومات أكبر. الآن ، يمكن لـ CSS فقط أن تصف لمتصفحك كيف تريد أن تبدو الصفحة ، وسيتعامل المتصفح مع المعالجة. إنني أعرض عليك خططًا لبناء منزلك الخاص بدلاً من بيعك لكامل المنزل - إنه أرخص بكثير!

زوايا مدورة

رمز الزوايا المستديرة سهل حقًا:

.box_round {-moz-border-radius: 20px؛ / * FF1 + * / -webkit-border-radius: 20px؛ / * Saf3-4 ، iOS 1+ ، Android 1.5+ * / border-radius: 20px ؛ / * Opera 10.5 و IE9 و Saf5 و Chrome و FF4 * /}

ظل النص

إليك رمز بعض الظلال النصية:

.box_tcriptshadow {text-shadow: 1px 1px 3px # 888؛ / * FF3.5 + ، Opera 9+ ، Saf1 + ، Chrome * / }

التدرجات

إليك رمز تدرجات CSS:

.box_gradient {background-color: # 3f9fe3؛ صورة الخلفية: -moz-linear-gradient (top، # 3f9fe3، #white) ؛ / * FF3.6 * / الخلفية: -moz-linear-gradient (top، # 1E5799 0٪، # 207cca 26٪، # 2989D8 39٪، #FFFFFF 100٪)؛ / * firefox * / background-image: -ms-linear-gradient (top، # 3f9fe3، #white)؛ / * IE10 * / background-image: -o-linear-gradient (top، # 3f9fe3، #white)؛ / * Opera 11.10+ * / background-image: -webkit-gradient (الخطي ، أعلى اليسار ، أسفل اليسار ، من (# 3f9fe3) ، إلى (#white)) ؛ / * Saf4 + ، Chrome * / background-image: -webkit-linear-gradient (top، # 3f9fe3، #white) ؛ / * Chrome 10+ و Saf5.1 + * / background-image: linear-gradient (top، # 3f9fe3، #white) ؛ عامل التصفية: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3'، EndColorStr = '# white') ؛ / * IE6 – IE9 * / }

دوران

هنا رمز لتدوير شيء:

.box_rotate {-moz-transform: rotate (7.5deg)؛ / * FF3.5 + * / -o-convert: تدوير (7.5 درجة) ؛ / * Opera 10.5 * / -webkit-convert: rotate (7.5deg)؛ / * Saf3.1 + ، Chrome * / -ms-convert: rotate (7.5deg) ؛ / * IE9 * / convert: rotate (7.5deg)؛ عامل التصفية: progid: DXImageTransform. مايكروسوفت. المصفوفة (/ * IE6 – IE9 * / M11 = 0.9914448613738104، M12 = -0.13052619222005157، M21 = 0.13052619222005157، M22 = 0.9914448613738104، sizingMethod = 'auto expand')؛ تكبير: 1 ؛ }

الرسوم المتحركة

ستحتاج إلى رمز الانتقال مثل هذا إلى أي عنصر تريد تغييره. ستحتاج أيضًا إلى استخدام بعض فئات CSS الزائفة (مثل: التمرير لتغيير أي خصائص تريد تحريكها ، مثل اللون أو الحجم أو التدوير)

.box_transition {-moz-الانتقالية: سهولة 0.5 جميع ؛ / * FF4 + * / -o-الانتقالية: جميع 0.5s خففت ؛ / * Opera 10.5+ * / -webkit-transfer: سهولة جميع 0.5 ثانية ؛ / * Saf3.2 + ، Chrome * / -ms-transfer: سهولة جميع 0.5 ثانية ؛ / * IE10؟ * / الانتقال: جميع 0.5s خففت ؛ } 

عدم التوافق عبر المتصفح

على الرغم من أن معظم المتصفحات الحديثة تدعم جميع CSS3 من بعض النواحي ، إلا أن بعضها لا يزال يتطلب بعض الشفرات أو الاختراقات المختلفة قليلاً لجعلها تعمل مع تنفيذها الخاص للمعيار. في الشفرة أعلاه على سبيل المثال ، سترى العديد من حالات -moz- أو -webkit- التي تسبق بعض خصائص CSS ، والتي تتعلق إما بمتصفحات Mozilla أو Webkit. كتابة هذه الخطوط الزائدة يمكن أن تكون مؤلمة بالرغم من ذلك راجع مولد CSS3 لكتابتها لك.

خاتمة

سيصبح الويب أكثر إثارة مع ملحقات CSS3 و HTML5 الجديدة. من المؤكد أننا سنشهد طفرة أخرى من النص الوامض ونسبة عالية من الانفجار السريع إلى المحتوى الحقيقي (تمامًا كما فعلنا عندما تم "اكتشاف" صور GIF المتحركة أولاً) ولكن على المدى الطويل سنتعلم كيفية استخدام أدوات CSS3 لجعل الويب أكثر إثارة للاهتمام واجهات. مهلا ، يمكنك دائما إيقاف تشغيل كل شيء!

إذا كنت مصممًا أو مطور ويب بنفسك ، فتذكر فقط أن CSS3 يجب ألا يكون الخيار الوحيد أبدًا. إذا لم يعمل موقعك بدون CSS3 ، فأنت لم تستخدمه بشكل صحيح. يجب استخدام CSS لتحسين التجربة ، وليس وظيفة البرنامج.