بلا شك واحدة من ألمع اتجاهات 2012قيد التطوير CCS3، HTML5. اليوم نقدم لمحة كبيرة ومفيدة للغاية من الأمثلة " 20+: دروس إبداعية ومفيدة في CSS3"عرضت على سبيكي بوي. جميع الأمثلة مصنوعة على نظيفة بدون جافا سكريبت، تحتوي الدروس المقدمة على عروض توضيحية و ملفات جاهزة CSS3 للتحميل.

نحن على يقين من أن هذه التقنيات ستكون مفيدة لمطوري الويب!

دروس CSS3 :

1. معارض الصور CSS3، والمنزلقات، وتأثيرات الصور

1.1.Slider على CSS3

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

1.2. خلفية لموقع ويب بملء الشاشة مع تأثير شريط التمرير باستخدام CSS3

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

1.3. العرض المبسط على CSS3

باستخدام هذا البرنامج التعليمي، يمكنك تعلم كيفية إنشاء Lightbox مع مجموعة متنوعة من التأثيرات باستخدام CSS خالصًا.

1.4. خصائص الصورة في CSS3

يوضح هذا البرنامج التعليمي الميزات الجديدة في CSS3 لخصائص الصورة، مثل الزوايا الدائرية والظلال والتأثيرات الأخرى.

1.5. بنر متحرك باستخدام CSS3

1.6 تحميل اللوحة في CSS3

1.7. شريط ثلاثي الأبعاد مع CSS3

عرض العرض التوضيحي أو تنزيل ملفات كود CSS3 →

2. قوائم CSS3 والملاحة والأزرار

2.1. قائمة Apple.com في CSS3

برنامج تعليمي لإنشاء قائمة Apple.com الشهيرة في CSS3.

2.2. القائمة الأفقية المتحركة في CSS3

برنامج تعليمي بسيط يوضح كيفية إنشاء قائمة متحركة في CSS3 بتأثيرات مختلفة.

2.3. القائمة العمودية المتحركة مع CSS3

2.4. أزرار متحركة مع CSS3

برنامج تعليمي رائع يحتوي على 7 أمثلة للأزرار الإبداعية المتحركة.

2.5. قائمة متحركة إبداعية تحتوي على صور باستخدام CSS3

في هذا الدرس، الأمثلة العشرة المقدمة هي ببساطة لافتة للنظر. تم إنشاء مثل هذه القوائم الإبداعية المعقدة حصريًا باستخدام JS. بديع!

2.6. تأثير التنقل الدائري باستخدام CSS3

تأثير غير معتاد عند التمرير فوق عنصر تنقل محدد على شكل دائرة بها صورة. خذ ملاحظة!

2.7. القائمة المنسدلة في CSS3

برنامج تعليمي لتنفيذ قائمة منسدلة بسيطة تحتوي على مستويات فرعية في CSS3.

2.8. التنقل في CSS3 مع التحولات المتحركة

3. تأثيرات مختلفة على CSS3

3.1. تلميح أدوات متحرك في CSS3 بدون jQuery

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

يوفر CSS3 نطاقًا واسعًا من الإمكانيات، ما عليك سوى استخدامها بشكل صحيح. على سبيل المثال، أود تقديم روابط لأعمالي السابقة "الشخصيات في Pure CSS":

أولاً، أريد أن أقدم أمثلة على لافتات CSS الخاصة بي. ربما تكون قد شاهدتها بالفعل على الموقع، لكنك لا تعرف حتى ما هي وكيف تم إنشاؤها.

حول العرض التوضيحي:كل مثال (بانر) له مدة بالثواني في الأسفل، بالإضافة إلى زر "تحديث"، الذي يبدأ في عرض البانر من البداية.

الشعار رقم 1 — "تدريب فردي على بناء المواقع":

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

لقد قمت بإنشاء هذا الشعار في 2-2.5 ساعة حرفيًا. الشيء الوحيد الذي أدى إلى إبطاء عملية الإنشاء هنا هو اختيار الرموز. لأنه كان لا بد من اختيارهم بالقرب من موضوع اللافتة.

يمتد هذا الشعار أيضًا اعتمادًا على عرض حاوية الكتلة التي يوجد بها. استغرق إنشاءه حوالي 1.5 ساعة.

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

مزايا وعيوب لافتات CSS:

كيفية إنشاء شعار CSS؟

1 فكرة

أولاً، عليك أن تعرف بالضبط ما هي الرسوم المتحركة التي يجب أن تحتوي عليها اللافتة (ماذا وأين ومن أين يجب أن تتحرك وأين يجب أن تظهر). يمكنك أخذ ورقة مقاس A4 ورسم المكان الذي سيتحرك فيه كل عنصر وما يجب أن يكون على اللافتة.

بعد كل شيء، لا يمكنك البدء في إنشاء لافتة إذا كنت لا تعرف ما ينبغي أن تكون عليه وكيف تعمل.

2 هيكل HTML

الخطوة التالية هي إنشاء علامة HTML بحيث يمكن نقل العناصر (وإنشاء رسوم متحركة لها). أي أنه لا يمكنك فعل كل شيء بصورة واحدة ستنتقل من اليمين أو اليسار ثم تنتهي الرسوم المتحركة.

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

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

الخطوة الأخيرة هي إنشاء رسوم متحركة للكتل، بالإضافة إلى كتابة أنماط لها، لأن بعض أجزاء الرسوم المتحركة تكون مخفية افتراضيًا.

لإنشاء شعار خاص بك، يجب أن يكون لديك فهم جيد لأساسيات CSS وHTML.

تعلم الرسوم المتحركة الأساسية لـ CSS من خلال هذا البرنامج التعليمي - .

خاتمة

تدعم جميع المتصفحات الحديثة خصائص CSS3، مما يعني أنه سيتم عرض الشعارات بشكل صحيح في مثل هذه المتصفحات. ولكن بمساعدة مكونات JS الإضافية، يمكنك إنشاء شعارات CSS للمتصفحات الأقدم. من خلال تعلم أساسيات الرسوم المتحركة CSS، ستفهم عملية إنشاء الشعار وستقوم قريبًا بإنشاء أول شعار CSS خالص لك! 😉

لنقم بإنشاء لافتة إعلانية باستخدام CSS3. حاليا يتم دعم الرسوم المتحركة CSS3 فقط بشكل كامل متصفحات فايرفوكسو ويب كيت. ولكن من السهل جدًا جعل اللافتة تعمل في المتصفحات الأخرى. ومع ذلك، لا تتوقع أداءً رائعًا في كل مكان (خاصة في IE 7 والإصدارات الأقدم) عند تجربة أحدث تقنيات CSS.

ملحوظة:لتوفير مساحة على الصفحة، تم حذف جميع بادئات الشركة المصنعة للمتصفح. انظر الكود في المصادر.

ترميز HTML

أولاً، دعونا نلقي نظرة على بنية الشعار في HTML. في هذه المرحلة علينا أن نتخيل كيف ستعمل الرسوم المتحركة:

للحصول على فهم أعمق لبنية العلامات، دعونا نركز على القارب:

تحدث ثلاث رسوم متحركة مع القارب:

انزلاق القارب على اليسار. ينطبق على قائمة غير مرتبة (مجموعة).

تقليد قارب هزاز على الماء. ينطبق على عنصر القائمة (القارب).

ظهور علامة استفهام. ينطبق على عنصر div (علامة الاستفهام).

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

لذلك، يمكننا أن نستنتج أن العناصر الفرعية تتلقى رسومًا متحركة من والديها بالإضافة إلى أفعالها الخاصة. الآن كل ما تبقى هو إدراج بنيات الأصل/الفرع.

CSS

قبل أن تبدأ في تحليل إنشاء الرسوم المتحركة، عليك التأكد متوافق مع الإصدارات السابقةمع المتصفحات القديمة.

التوافق مع الإصدارات السابقة

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

على سبيل المثال: ماذا لو كنت تستخدم CSS؟ مشابه لما هو موضح أدناه، ستكون هناك مشاكل:

/* خطأ! */ @keyframe Our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* هذا div مخفي بشكل افتراضي - عفوًا! */ Animation: لدينا -fade-in-animation 1s 1 )

إذا كان المتصفح لا يدعم الرسوم المتحركة، فسيظل عنصر div غير مرئي للمستخدم.

وهذه هي الطريقة التي سنضمن بها التوافق مع المتصفحات القديمة:

/* TRUE */ @keyframe Our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* يكون هذا div مرئيًا بشكل افتراضي */ Animation: لدينا -fade-in-animation 1s 1 )

سيتم الآن عرض عنصر div حتى في حالة فشل بدء الرسوم المتحركة. وفي المتصفحات الحديثةسيتم إخفاء div أولاً أثناء الرسوم المتحركة.

الاعوجاج

الآن نحن نعرف كيفية ضمان التوافق مع الإصدارات السابقة (مما سيساعد على تجنب المشاكل عند العمل مع المشاريع الحقيقية). لقد حان الوقت لإنشاء قاعدة كود CSS الخاص بنا.

عليك أن تتذكر 3 نقاط:

نظرًا لأنه سيتم استخدام الشعار في مواقع مختلفة، سنبذل قصارى جهدنا محددات CSSخاص.ستبدأ جميعها بالمعرف #ad-1. بهذه الطريقة سنحاول تجنب التداخل بين الكود الخاص بنا ورمز الموقع.

نحن نتجاهل عمدا تأخير الرسوم المتحركةفي المنشآت. إذا استخدمت تأخير الرسوم المتحركة عند تعيين الأنماط مع الرؤية الافتراضية للعناصر، فسيتم تعطيل بنية الشعار بسبب الاختفاء المفاجئ أو ظهور أجزاء من الصورة بعد اكتمال الرسوم المتحركة. تتم محاكاة تأخير الرسوم المتحركة من خلال مدة الإطارات وإعداداتها.

كلما كان ذلك ممكنا نستخدم رسمًا متحركًا واحدًا لعدة عناصر.بهذه الطريقة نوفر الوقت ونخفض حجم الكود.

لذلك دعونا ننشئ الأساس لشعارنا. لنقم بتعيين موضع نسبي لها حتى يمكن وضع العناصر الداخلية بشكل صحيح. سيتم أيضًا إخفاء أي شيء خارج نطاق العنصر:

#ad-1 ( العرض: 720 بكسل؛ الارتفاع: 300 بكسل؛ تعويم: يسار؛ الهامش: 40 بكسل تلقائي 0؛ صورة الخلفية: url(../images/ad-1/background.png)؛ موضع الخلفية: المركز؛ الخلفية - التكرار: عدم التكرار؛ التجاوز: مخفي؛ ظل الصندوق النسبي: 0px 0px 6px #000;

ثم نقوم بتعيين أنماط لحقول النص والإدخال. استدعاء الرسوم المتحركة المناسبة. تحتاج أيضًا إلى التأكد من أن المحتوى يحتوي على أعلى مؤشر z للأجزاء المتحركة حتى لا تتداخل:

#ad-1 #content ( العرض: 325 بكسل; التعويم: يمين; الهامش: 40 بكسل; محاذاة النص: المركز; فهرس z: 4; الموضع: نسبي; الفائض: مرئي; ) #ad-1 h2 ( عائلة الخط: "Alfa Slab One"، اللون: #137dd5؛ ارتفاع الخط: 50 بكسل؛ ظل النص: 0px 0px 4px #fff؛ الرسوم المتحركة: رسوم متحركة مؤجلة 7s 1 سهلة الخروج؛ تأخير */ ) #ad-1 h3 ( عائلة الخط: "Boogaloo"، مخطوطة؛ اللون: #202224؛ حجم الخط: 31 بكسل؛ ارتفاع الخط: 31 بكسل؛ ظل النص: 0px 0px 4px #fff؛ الرسوم المتحركة: متأخر -fade-animation 10s 1 easy-in-out; /* ظهور h3 مع محاكاة تأخير */ ) #ad-1 نموذج ( الهامش: 30px 0 0 6px; الموضع: نسبي; الرسوم المتحركة: رسم متحرك للنموذج 12s 1 easy-in -out /* سحب النموذج لإدخال عنوان بريد إلكتروني مع محاكاة تأخير */ ) #ad-1 #email ( width: 158px; height: 48px; float: left; padding: 0 20px; Font-size: 16px; عائلة الخط: "Lucida Grande"، بدون serif text-shadow: 1px 1px 0px #a2917d;

الحدود: 1 بكسل الصلبة #a2917d؛

#ad-1 ul#water( /* إذا كنت بحاجة إلى رسم متحرك آخر للمياه، يمكنك إضافته هنا */ ) #ad-1 li#water-back ( width: 1200px; height: 84px; image-background: url( .. /images/ad-1/water-back.png); تكرار الخلفية: z-index: 1; الموضع: اليسار المطلق: -20px; #ad-1 li#water-front ( العرض: 1200 بكسل; الارتفاع: 158 بكسل; صورة الخلفية: url(../images/ad-1/water-front .png); تكرار الخلفية: z-index: 3; Bottom: -70px; Animation: Water-front-animation 2s سهولة لا نهائية في محاكاة تناثر الأمواج، وسيتم تنفيذ الرسوم المتحركة بشكل أسرع قليلاً لإنشاء تأثير منظور.

دعونا نحدد أنماط القارب وعناصره. نسمي أيضًا الرسوم المتحركة المقابلة:

#ad-1 ul#boat (العرض: 249 بكسل; الارتفاع: 215 بكسل; مؤشر z: 2; الموضع: مطلق; الأسفل: 25 بكسل; اليسار: 20 بكسل; الفائض: مرئي; الرسوم المتحركة: قارب داخل الرسوم المتحركة 3s 1 سهولة الخروج ; /* إدخال المجموعة عند بدء الإعلان */ ) #ad-1 ul#boat li ( width: 249px; height: 215px;background-image: url(../images/ad-1/boat.png); الموضع: مطلق؛ القاع: 0px؛ الفائض: مرئي؛ الرسوم المتحركة: حركة القارب 2s سهلة الاستخدام /* محاكاة تمايل القارب على الماء - مشابه للرسوم المتحركة المستخدمة بالفعل على الماء نفسه */ ) #. إعلان-1 #علامة الاستفهام ( العرض: 24 بكسل; الارتفاع: 50 بكسل; صورة الخلفية: url(../images/ad-1/question-mark.png); الموضع: مطلق; اليمين: 34 بكسل; الأعلى: -30 بكسل ;

الآن دعونا ننشئ أنماطًا للسحب. بالنسبة لهم سوف نستخدم الرسوم المتحركة مع تأثير الحركة التي لا نهاية لها. يوضح الرسم التوضيحي جوهر الفكرة:

وهنا كود CSS:

#ad-1 #clouds ( الموضع: مطلق؛ الأعلى: 0px؛ مؤشر z: 0؛ الرسوم المتحركة: رسوم متحركة سحابية 30 ثانية خطية لا نهائية؛ /* قم بتمرير السحب إلى اليسار، وإعادة التعيين والتكرار */ ) #ad-1 # مجموعة السحابة -1 ( العرض: 720 بكسل; الموضع: مطلق; اليسار: 0 بكسل; ) #ad-1 #cloud-group-2 ( العرض: 720 بكسل; الموضع: مطلق; اليسار: 720 بكسل; ) #ad-1 .cloud- 1 ( العرض : 172 بكسل; الارتفاع: 121 بكسل; url(../images/ad-1/cloud-1.png); الموضع: القمة المطلقة: 40 بكسل; ( العرض: 121 بكسل; الارتفاع: 75 بكسل; صورة الخلفية: url( ../images/ad-1/cloud-2.png)؛ الموضع: مطلق؛ الأعلى: -25 بكسل؛ اليسار: 300 بكسل؛ : url(../images/ad-1/cloud-3.png);

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

تذكير:من الآن فصاعدا، لا يوجد شيء متحرك في الواقع. إذا نظرت إلى شعارنا الآن، سترى صورة ثابتة. هذا هو المكان الذي يتم فيه إنشاء الرسوم المتحركة واستدعائها في الكود أعلاه.

الآن دعونا نبث الحياة في صورتنا الثابتة الجميلة:

/* يتم استخدام الرسوم المتحركة المؤجلة المحاكاة لعرض عناصر متعددة. يتم تنفيذ محاكاة التأخير عن طريق بدء العملية مع استمرار 80% من الرسوم المتحركة (وليس على الفور). بهذه الطريقة يمكنك محاكاة أي تأخير: */ @keyframes late-fade-animation ( 0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;) ) /* رسوم متحركة لعرض نموذج مع عنوان بريد إلكتروني وزر. يتم أيضًا استخدام تقليد التأخير */ @keyframes form-animation ( 0% (العتامة: 0; اليمين: -400 بكسل;) 90% (العتامة: 0; اليمين: -400 بكسل;) 95% (العتامة: 0.5; اليمين: 20 بكسل ;) 100% (التعتيم: 1; اليمين: 0px;) ) /* يتم استخدام هذه الرسوم المتحركة لإبعاد القارب عن الشاشة في بداية الفيديو: */ @keyframes boat-in-animation ( 0% (يسار: -200 بكسل;) 100% (يسار : 20 بكسل;) ) /* رسوم متحركة للسحب. تبدأ المجموعة الأولى من السحب في التحرك من المركز، والثانية - إلى يمين الشاشة. تتم إزالة المجموعة الأولى ببطء من الشاشة، وتظهر الثانية على اليمين. بمجرد إخفاء المجموعة اليسرى تمامًا، تعود السحب بسرعة كبيرة إلى موضعها الأصلي: */ @keyframes cloud-animation ( 0% (left: 0px;) 99.9999% (left: -720px;) 100% (left: 0px;) ) ) / * الرسوم المتحركة الثلاث الأخيرة هي نفسها تقريبًا - يكمن الاختلاف في موضع العناصر. إنها تحاكي تناثر أمواج المحيط: */ @keyframes boat-animation ( 0% (أسفل: 0px; يسار: 0px;) 25% (أسفل: -2px; يسار: -2px;) 70% (أسفل: 2px; يسار) : - 4 بكسل;) 100% (أسفل: -1 بكسل; يسار: 0 بكسل;)) @keyframes water-back-animation ( 0% (أسفل: 10 بكسل; يسار: -20 بكسل;) 25% (أسفل: 8 بكسل; يسار: - 22 بكسل; ) 70% (أسفل: 12 بكسل; يسار: -24 بكسل;) 100% (أسفل: 9 بكسل; يسار: -20 بكسل;)) @keyframes رسوم متحركة للواجهة المائية ( 0% (أسفل: -70 بكسل; يسار: -30 بكسل) ;) 25% (أسفل: -68 بكسل; يسار: -32 بكسل;) 70% (أسفل: -72 بكسل; يسار: -34 بكسل;) 100% (أسفل: -69 بكسل; يسار: -30 بكسل;))

خاتمة

تعلمنا في هذا الدرس عدة مفاهيم أساسية:

1. تتلقى عناصر الوريث الرسوم المتحركة الخاصة بوالديهم بالإضافة إلى الرسوم المتحركة الخاصة بهم.
2. عند إنشاء لافتة، يجب أن تسعى جاهدة لاستخدام معرف فريد لتجنب تداخل التعليمات البرمجية مع مشروع CSS موجود.
3. يجب اختيار موضع العناصر ونمطها كما لو كانت الرسوم المتحركة غير متوفرة لضمان التوافق مع الإصدارات السابقة.
4. إذا كان ذلك ممكنا، يجب عليك استخدام رسم متحرك واحد لعدة عناصر.

اليوم سنقوم بإنشاء لافتة باستخدام الرسوم المتحركة CSS3.

في الوقت الحالي، تدعم متصفحات Firefox وWebKit فقط الرسوم المتحركة لـ CSS، لكننا سننظر في كيفية جعل هذه الشعارات تعمل في متصفحات أخرى (والتي أسميها متصفحات القرن الثامن عشر) أيضًا. ومع ذلك، لا ينبغي أن تتوقع دعمًا كبيرًا في جميع المتصفحات (خاصة IE 7 وما دونه) عند تجربة تقنيات CSS الحديثة.

لذلك دعونا ننشئ لافتات متحركة!

يرجى ملاحظة: لتوفير المساحة، تمت إزالة جميع بادئات المتصفح. سم. ملفات المصدرلرؤية كافة رموز CSS. إذا لم تكن على دراية بالرسوم المتحركة CSS، فإنني أوصي بها بشدةأولاًاقرأ هذا.

ترميز HTML

أولاً، سنقوم بإنشاء هيكل الشعار باستخدام HTML. في هذه المرحلة نحتاج إلى التفكير في الطريقة التي نريد أن تعمل بها الرسوم المتحركة لدينا - وكيف ستؤثر على العناصر الفرعية والأصلية في بنية الترميز الخاص بنا (سأشرح ذلك أدناه):