12 مشهدًا طبيعيًا مبنية بالكامل باستخدام CSS و SVG

يمكنك القيام ببعض الأشياء المجنونة جدًا باستخدام SVGs. يمكن للمطورين كتابة التعليمات البرمجية للرسومات على صفحة بدون أي ملفات صور فقط باستخدام ميزة SVG & canvas.

هذا يؤدي إلى مشاريع رائعة حقًا مثل مناظر SVG النقية التي جمعتها هنا.

كل هذه المشاريع مجانية تمامًا للتعديل والاستخدام. إنهم يعملون على كود SVG جنبًا إلى جنب مع بعض CSS و JS الأساسيين لإنشاء رسوم متحركة وتشوهات وتأثيرات اختلاف المنظر.

خليج هوك

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

إنه تأثير شائع مع SVG و JavaScript ، لكن بالتأكيد ليس من السهل تطبيقه.

يستخدم لويس مكتبة TweenMax لإنشاء رسوم متحركة أنيقة من حيث الأسلوب والرمز.

إذا كنت ترغب في أي وقت مضى في البحث في كود SVG الخام ، فإن هذا المقتطف لديه الكثير لتتعلم منه.

المناظر الطبيعية المنخفضة بولي

إليك منظر طبيعي آخر تم تصميمه على غرار مظهر بولي المنخفض.

يأتي هذا من المطور Luke Reid ويضع تركيزًا أقوى على التأثيرات ثلاثية الأبعاد. يبدو التصميم بأكمله حقيقيًا جدًا ، وتدرج السماء المرشوشة بالنجوم يضفي الحياة على هذا التصميم.

إذا نظرت إلى كود JavaScript ، فسترى أن مواضع النجوم يتم إنشاؤها عشوائيًا. يعد هذا تأثيرًا رائعًا إذا كنت تقوم بتصميم خلفية SVG أو نمط رأس رئيسي.

SVG صور متحركة أفقية

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

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

ولكن يمكنك القيام بشيء مماثل باستخدام رموز SVG المخصصة على موقع ويب. هناك الكثير من البرامج التعليمية لمساعدتك في تصميم SVGs الأساسية ثم تحريكها باستخدام رمز من المقتطف أعلاه (يعمل أيضًا على TweenMax).

المناظر الطبيعية البحرية

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

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

تعد الرسوم المتحركة الحديثة CSS3 مفيدة للغاية في مواقع الويب التي تحتوي على رسوم متحركة UI / UX ولكن يمكنك استخدامها أيضًا للمناظر الطبيعية أو الرسوم التوضيحية. هذا نصف متعة كونك مطورًا.

المناظر الطبيعية في فصل الشتاء

هذا المشهد الشتوي هو تذكير بالثلج الأبيض الهش الذي نراه كل عام.

أنشأ Andrey Sorokin هذه الرسوم المتحركة الأساسية باستخدام رمز SVG وبعض JavaScript فقط. يمكن أن يكون تحريكه بطيئًا ، لذا قد تضطر إلى إعطائه دقيقة لرؤية التأثير الكامل.

أنا معجب جدًا بجودة تأثيرات التخفيف ومدى نجاح ذلك في المتصفح.

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

ناهيك عن الرسوم المتحركة للشمس الخارجة من الشجرة فهي مبهجة للغاية.

مشهد SVG

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

يتبع هذا المقتطف نفس النمط مع الحواف الصلبة للظلال والزوايا.

إنه مقتطف جميل وهو بالتأكيد أحد أسهل المناظر الطبيعية التي تستخدم SVG فقط للعمل معها. حتى إذا لم تستخدم كود SVG مطلقًا قبل أن يوفر هذا المقتطف الكثير للبحث فيه والكثير من سمات SVG / XML التي يمكنك البحث عنها على Google لمعرفة المزيد.

مساحات طبيعية

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

كل شيء يعمل على CSS خالص ويعمل مع بعض الرسوم المتحركة للإطارات الرئيسية لـ CSS.

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

أضواء المنظر

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

تم تصميم جميع العناصر بما في ذلك مصابيح الشوارع بأشكال SVG وتأثيرات CSS.

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

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

في مشهد SVG المحدث هذا ، ستجد عددًا كبيرًا من العناصر المخصصة التي ترتد إلى العرض.

يولي المنشئ Stef van Dijk اهتمامًا خاصًا لكل رسم متحرك من خلال إضافة تأثيرات تشبه الجاذبية والقفز مع كل قطعة. على سبيل المثال ، عندما تسقط الجبال في الرؤية ، ستلاحظ تأثير ارتداد من الأرض.

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

SVG & CSS

قم بإلقاء نظرة على هذا القلم للحصول على خلفية متحركة كبيرة الحجم. كل هذا يعمل على SVGs و CSS خالص بدون أي JavaScript.

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

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

عشب

في حين أن هذا المشهد بسيط للغاية ، أعتقد أيضًا أنه معلم رائع لمبرمجي الواجهة الأمامية الجدد.

قام Felix De Montis ببناء هذا المشروع من البداية بكمية صغيرة من رمز SVG للعشب والتلال والأشجار. من السهل تكرار ذلك وتغيير المواضع باستخدام CSS أيضًا.

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

صفحة المنظر

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

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

كل هذا يتطلب القليل جدًا من JavaScript لأنه يعمل على أقل من 20 سطرًا من jQuery. كل ما هو مثير للإعجاب بالنظر إلى مدى تفصيل ذلك.