الترميز الكونغ فو 35 الرسومات بنيت بحتة مع CSS3

انظر إلى الرسومات أدناه ، هل يعمل Photoshop رائع؟ ناه ، لقد تم إنشاؤها بواسطة CSS3. نعم، هم كذلك تماما “مسحوب” بواسطة CSS3! عندما رأينا عددًا كافيًا من الرسوم المتحركة لـ CSS3 ، اعتقدنا أن هذه جميعًا يمكن لـ CSS3 القيام بها كقاتل فلاش محتمل ، لكننا على خطأ. ربما لا يرضي المطورون متعة الرسوم المتحركة ، لذلك مرة أخرى ، يدفعون حدود CSS3 لتحدي عالم محرر الرسومات.

مع هذا المنشور يأتي 35 رسومات CSS3 وضعت بعناية والتي تشمل حتى شيء لن تتصل به مع CSS3 ابل اي فون, شخصية كرتونية عبقور, والمزيد من المفاجآت! هيك ، حتى يأتي بعضهم مع تعليمي مفصل يعلمك كيفية تحقيق ذلك! لذلك لا تفوت فرصة كبيرة لتعلم كيفية إنشاء رسومات باستخدام CSS3 وقليلًا من HTML ، دعنا نتعرف على CSS3!

يوصى بشدة بمشاهدة هذه العروض التوضيحية باستخدام أحدث إصدار من Safari أو إصدار Developer من Google Chrome. تدعم معظم العروض أحدث إصدار من Firefox و Google Chrome.

آر إس إس أيقونة

تم تصميم رمز تغذية RSS مع CSS3 ، حصريًا من هونجكيات! إلى جانب الرابط ، يأتي البرنامج التعليمي الذي يمكنك تعلمه بالفعل “رسم” أيقونة تغذية RSS دون استخدام حتى صورة واحدة. أنشئ معجزة CSS3 بيديك!

أبل إيماك

نعم عيني أيضا لا تصدق ذلك ، لكن هذا هو إيماك “تجميعها” بحتة مع CSS3.

لوحة مفاتيح أبل

انها لوحة المفاتيح أبل بنيت مع CSS3! هيك ، أزرار لوحة المفاتيح يمكن الضغط عليها.

ابل اي فون

أوه ، شيء آخر: iPhoneCSS3.

زهرة الكرز

الذهول الحقيقية لـ CSS3 هي أنه يمكن استخدامه لبناء أي شيء بما في ذلك النباتات والحيوانات!

فنجان قهوة

يوم متعب؟ دعنا نحصل على قهوة CSS3 ، أفضل خدمة مع Safari / Google Chrome.

عبقور

هذا عبقور يشتهر باختبار التوافق CSS3. جربه في برنامج Internet Explorer 8 أو الإصدارات التالية واستمتع بيوم جميل.

Meowww!

الآن أنت تنظر إلى قطة بنيت بالكامل مع رمز! سيئ للغاية ، لا يمكن لـ CSS3 إنشاء مؤثرات صوتية ، على الأقل في الوقت الحالي.

فطر ، تريفورس ، كرة بوكيه ، كيربي

“كونه الطالب الذي يذاكر كثيرا ، لقد صنعت بعض إبداعات نردي - فطر ماريو ، وتريفورس ، وكوكبول ، وكيربي. بالنسبة لأولئك الذين يستخدمون متصفحات الديناصورات ، هناك لقطة للشاشة من المفترض أن تبدو.”

نيان كات

“يحتوي على 81 عنصر DOM و 688 سطرًا من CSS الخالص ووظيفة JavaScript واحدة لتكرار الصوت. فشل اختبار CSS الخاص بي في CSSLint وأنا فخور جدًا بهذا.”

أنماط - رسم

تعد CSS3 كبيرة جدًا بحيث يمكن استخدامها أيضًا لبناء أصول أساسية لتصميم الويب ، مثل هذه الأنماط.

بون بون

BonBon عبارة عن أزرار CSS3 حلوة تم إنشاؤها مع وضع هدف في الاعتبار: أزرار جذابة ومرنة حقًا مع ترميز أضيق الحدود قدر الإمكان.

أيقونات iOS

رائعة حقا؟ نعم فعلا. تم بناء هذه الرموز بواسطة زوايا مدورة, الظلال, التدرجات, رغبا, عناصر-الزائفة, و التحويلات, بمساعدة أدوات معينة مثل أدوات westciv و Border Radius.

أيقونات وسائل التواصل الاجتماعي

من المستحيل على مطور الويب عدم إنشاء رموز وسائط اجتماعية إذا كان بإمكانهم إنشاء أجهزة iPhone و Doraemon باستخدام CSS3. وبنوا هذه الرموز بشكل جيد حقًا.

أيقونات وسائل التواصل الاجتماعي

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

غريب

“غريبة هي حزمة أيقونة مجانية مصنوعة فقط في CSS. تم إنشاؤه للمواقع وتطبيقات الويب التي تعتمد على عدد أقل من طلبات HTTP ممكن أو لا تحتاج إلى استخدام أي صورة على الإطلاق.”

أيقونات واجهة المستخدم الرسومية

84 رمزًا بسيطًا من واجهة المستخدم الرسومية باستخدام CSS و HTML الدلالي فقط. هذا لا يزال يعتبر “غير الإنتاج جاهزة” الرموز ، لكنها تبدو واعدة جدا.

ستيف جوبز

ستيف جوبز ليس فقط أيقونة العصر الرقمي ، ولكن أيضًا الزعيم الذي يروج بشكل كبير لـ HTML5.

التغريد فشل الحوت

لن تفشل حوت Twitter المدهش في مفاجأة لك ، إلا في Internet Explorer 8 أو ما دونه.

umbrUI

أصبحت عناصر واجهة المستخدم ممكنة مع CSS3 ، ويبدو أنيقًا للغاية!

أدوبي فوتوشوب الشعار

تحية لفوتوشوب دون استخدام فوتوشوب.

شعار أندرويد

يتكون Android من أشكال بسيطة إلى حد ما ، لكنه يفسر ميزة CSS3: يمكنك إنشاء أشياء بسيطة وتعديلها بالطريقة التي تريدها باستخدام الكود فقط وليس Photoshop.

شعار أبل

تم تقديم شعار Retro Apple باستخدام CSS3 ، ولا يزال رائعًا مثل الوقت الذي تم إنشاؤه فيه.

شعار أتاري

قبل سنوات ، من كان يظن أنه سيتم إعادة إنشاء شعار أتاري باستخدام CSS3.

شعار BP

يمكن جعل شعار بسيط بسهولة مع CSS3. أفضل شيء مع بعض هذه الشعارات المعروضة هنا هو أن هناك كود مقدم لك لتجربته!

سال لعابه الشعار

عرض شعار موقع Dribbble الشهير المشغل بواسطة المستخدم باستخدام CSS3.

شعار الماجنتو

ليس من الصعب رسم شعار Magento لكن النتيجة تبدو احترافية.

شعار ماكدونالد

أنا لوفين "CSS3!

تويتر الطيور

نسبة مثالية ، غيض قبعة إلى الخالق.

شعار ويندوز

شعار ويندوز! تبدو رائعة حقًا ، وهي سهلة الإنشاء!

شعار إنترنت إكسبلورر

خلق عظيم حقا! إنه يعمل في المتصفحات الرئيسية باستثناء Internet Explorer 8 أو ما دونه.

شعار جوجل كروم

لست متأكدًا من أنك تحب شعار Google Chrome الجديد أم لا ، ولكن يبدو شعار Google Chrome هذا رائعًا!

شعار الأوبرا

الآن ممارسة لك: ما هي الاختلافات بين قطعة CSS3 هذه والصفقة الحقيقية?

HTML5 الشعار

لا يمكن تألق HTML5 بدون CSS3!

شعار فولكس واجن

باستثناء نظام الألوان ، يبدو استنساخ CSS3 مطابقًا للنظام الأصلي.

انعكاس

مع ازدهار الشعارات والرسومات المصنوعة من CSS3 الخالصة ، تأتي المناقشات التي تناقش بشكل كبير حول قابلية استخدام الرسومات التي تنتجها CSS3 في بيئة الإنتاج في العالم الحقيقي.

عموما الرسم CSS3 على ما يرام ، لكنه قد تصبح مزعجة خاصةً عندما تحتاج إلى تغيير التصميم أو مجرد تغيير حجم الرسم, كما أن أكبر ألم هنا هو أن التكنولوجيا ليست مدعومة بالكامل من قبل بعض المتصفحات مثل Internet Explorer.

ماذا تعتقد؟ هل ستستخدم الرسم المصنوع من CSS3 في موقعك؟ هل لديك أي حل للعيوب الحالية؟ أخبرنا بفكرك ، وشاركه معنا إذا قمت للتو باختبار رسم CSS3!

أكثر من

على استعداد لفعل شيء في الواقع مع CSS3؟ لقد جئت إلى المكان المناسب! فيما يلي أدلة وبرامج تعليمية مكتوبة لمساعدتك بشكل كبير على طريقك لإتقان CSS3.

• CSS3: إنشاء قائمة التنقل Breadcrumb
• CSS3: إنشاء شعار موجز ويب لـ RSS
• CSS3: إنشاء مربع بحث
• CSS3: دليل المبتدئين
• CSS3 / HTML5: إنشاء صفحات الويب
• CSS3 / HTML5: إنشاء نموذج اتصال قائم على AJAX