البحث في الموقع

تابعنا في الجزء الأول من هذا الدرس كيفية تجهيز مستند العمل ورسم الخلفية وشكل الكويكبات. الآن سنتابع التصميم وسنبدأ أولًا بتصميم شكل النجمة. اختر أداة الشكل البيضوي ثم انقر نقرة واحدة على لوح الرسم ثم ضع القيمة 5 بكسل للعرض والارتفاع للحصول على دائرة صغيرة جدّا. ضاعف شكل الدائرة بالاختصارات Ctrl+C و Ctrl+F ثم كبّر شكل الدائرة الجديد قليلًا. حدّد الدائرتين ثم انقر نقرة إضافية على أحدهما ثم استخدم أدوات المحاذاة الأفقية والعمودية من شريط الأدوات العلوي لتتم محاذاتها بشكل مثالي. حدّد الدائرة الكبيرة ثم انقر بالزر الأيمن عليها واختر القائمة Arrange > Send to Back ليتم إرسالها إلى أسفل شكل الدائرة الصغيرة. حدّد الدائرة الكبيرة واذهب إلى القائمة Effect > Blur > Gaussian Blur ثم ضع القيمة 2.5 بكسل لنصف القطر. حدّد الدائرتين معًا ثم انقر عليهما بالزر الأيمن واختر Group ليتم تجميعهما في مجموعة واحدة. وسيكون هذا الشكل هو شكل نجمة. اسحب النجمة إلى لوحة الرموز. ثم اسحب هذا الرمز مرّات عدّة إلى لوح الرسم ووزعها بشكل عشوائي. عدّل بأحجام النجوم بشكل عشوائي أيضًا. سنبدأ الآن برسم شكل المذنب. اسحب شكل السحابة ثم انقر عليها بالزر الأيمن واختر Break Link to Symbol. ضاعف الشكل واسحب النسخة للأسفل مرتين تمامًا كما فعلنا في بداية التصميم ثم وحّد الأشكال الثلاثة معًا من خلال Unite من لوحة Pathfinder. ارسم دائرة مثالية وضعها بشكل يغطّي الجزء الأيسر من شكل السحابة ثم عدّل بالحجم والموضع لتغطي الجزء الأيسر بشكل مثالي كما فعلنا في بداية التصميم. حدّد الدائرة وانقر عليها بالزر الأيمن واختر القائمة Arrange > Send to Back افتح لوحة الطبقات ثم اقفل شكل الدائرة. حدّد النقاط اليمنى من شكل السحابة باستخدام أداة التحديد المباشر ثم اسحبها لليمين مسافة بعيدة. حدّد دوائر رؤوس الجهة اليمين واسحبها أكثر لليمين لتبدو ممدودة أكثر. حدّد نقاط الجزء الأيسر من السحابة باستثناء النقطة العلوية والسفلية ثم اضغط على Delete لحذفها. من جديد حدّد النقطة العلوية ثم استمر بالضغط على Shift وانقر على النقطة السفلية ثم حاذِهما أفقيًا. باستخدام أداة التحديد المباشر طابق بين النقطتين العلوية والسفلية للجهة اليسرى من السحابة مع النقطتين العلوية والسفلية من الدائرة. ألغِ قفل شكل الدائرة ثم حدّد الشكلين واختر unite من لوحة Pathfinder لتوحيدهما معًا. هذا هو شكل نواة المذنب وسنرسم الهالة المحيطة به تاليًا. اسحب شكل السحابة واكسر ارتباطها أيضًا ثم ضاعف الشكل نحو الأسفل واجعل الشكل الجديد يغطي النصف السفلي من الشكل العلوي. ارسم دائرة وطابقها إلى النصف الأيسر من السحابة تمامًا كما فعلنا في الخطوات السابقة. عدّل بدوائر رؤوس السحابة من الجهة اليمنى بحيث تصبح عشوائية الطول. احذف نقاط السحابة اليسرى باستثناء العلوية والسفلية ثم حاذِهما أفقيًا ثم طابق النقطتين في يسار السحابة مع نقطتي الدائرة كما فعلنا في الخطوات السابقة ثم وحّد الشكلين معًا باستخدام لوحة Pathfinder. ضع شكل الهالة فوق شكل النواة وعدّل بالحجم لتكون أكبر قليلًا. حدّد النقاط اليمن من الهالة واسحبها بعيدًا نحو جهة اليمين. ارسم دائرة أكبر من دائرة الهالة وضعها بشكل يطابق مركز دائرة الهالة. ارسم مستطيلًا يمتد من يمين الهالة إلى منتصف الدائرة الكبيرة الجديدة. سيكون الشكل الجديد ذيل المذنب. وحّد الدائرة والمستطيل معًا ثم عدّل بالحجم ليكون متناسقًا مع الهالة والنواة. عدّل ألوان الأشكال الثلاثة المُكوّنة للمذنب إلى درجات الأزرق. دوّر المذنب بذات درجة دوران شكل الكويكبات. ضعه ضمن التصميم وصغّر حجمه ليكون ملائمًا للتصميم. حدّد النقطتين في نهاية الذيل واسحبهما بعيدًا خارج حدود التصميم. استخدم أداة النص لكتابة عنوان التصميم. استخدم خطًا مناسبًا لنوعية التصميم ولونًا رماديًا فاتحًا مائلًا قليلًا للأزرق. اجعل حجم الخط كبيرًا كفاية ليملأ مساحة التصميم. حدّد النص ثم اضغط على الاختصارات Ctrl+C و Ctrl+B لنسخ النص ولصقه أسفل النص الأساسي ثم اذهب إلى القائمة Effect > Blur > Gaussian Blur ضع القيمة 6.5 بكسل لنصف القطر. وبهذا نكون قد انتيهنا من تصميم ملصق فضائي مسطح بسيط وأنيق. استخدمنا بعضًا الأدوات والتقنيات والتأثيرات مرّات كثيرة أثناء عمل هذا التصميم ما يجعلنا نعتاد استخدامها لمشاريع مستقبلية بحيث نجدها مألوفة وسهلة. هل تستطيعون إنشاء تصاميم مشابهة، يمكنكم مشاركتها معنا في التعليقات في الأسفل.

انتشر هذا الأسلوب في التصميم مؤخرًا عبر مواقع التصميم العالمية وبات عدد من المصممين يستخدمونه في إنشاء تصاميم فضائية مميزة لإبراز مهاراتهم أو لاستخدامه في التصميم الإعلاني أو الطباعي على حد سواء لذلك نرى Nina Geometrieva قد استخدمته في تصميمها بعنوان Meteor. المصدر: Nina Geometrieva وكذلك Filip Benda الذي استخدم هذا الأسلوب لتصميم واجهة موقع معرض أعماله. المصدر: Filip Benda وأيضًا صمم Simonas Mačiulis تصميمًا بعنوان النظام الشمسي باستخدام الأسلوب ذاته المصدر: Simonas Mačiulis ولهذا سنتطرق في هذا الدرس لكيفية التصميم بهذا الأسلوب باستخدام برنامج أدوبي إليستريتور. ابدأ مستندًا جديدًا بحجم 700 في 600 بكسل قبل البدء سنحتاج إلى تفعيل الأدلّة الذكية لتسهيل مهمة التصميم حيث ستساعدك هذه الأدلّة على مطابقة الأشكال بسهولة أكبر. اذهب إلى القائمة View > Smart Guides تأكد من أنها مفعلة بوجود إشارة الصح بجانبها. وحتى تبدأ العمل كمصمم محترف يجب أن تحدد لوحة ألوان التصميم الذي ستعمل عليه، ويمكن القيام بهذه الخطوة قبل أو بعد التصميم، ولكنني سأبدأ بتجهيز لوحة ألوان التصميم هنا قبل البدء بالتصميم للحصول على نظام ألوان موحد للعمل ولهذا استخدم أداة المستطيلات وارسم مع الاستمرار بالضغط على مفتاح Shift مربعًا صغيرًا خارج لوح الرسم ثم ألغِ لون الحدود ولوّن المربع باللون الأحمر الداكن. الآن استخدم أداة التحديد ثم استمر بالنقر على مفتاح Alt أثناء سحب نسخة عن المربع إلى الجانب ومع الاستعانة بالأدلة الذكية ضع المربع الجديد بجانب القديم تمامًا. لوّن المربع الجديد بلون أحمر فاتح. ولتكرار العملية وإنشاء عدة نسخ جديدة بذات الطريقة المتّبعة اضغط على الاختصار Ctrl+D عدّ’ مرّات ليتم إنشاء مجموعة مربعات جديدة إلى نفس الاتجاه وبنفس المسافة والترتيب. أضف ألوانًا جديدة إلى هذه المربعات كما في الصورة. إذا أردت استخدام ذات الألوان فيمكنك نسخ هذه الصورة ولصقها ضمن المستند الذي تعمل عليه بجانب لوح الرسم. استخدم أداة المستطيلات من شريط الأدوات لرسم مستطيل بكامل حجم لوح الرسم ليكون خلفية التصميم. انقر مرة واحدة باستخدام هذه الأداة على لوح الرسم لتظهر لك نافذة تحديد حجم المستطيل المراد رسمه. ضع حجم العمل ذاته 700 في 600 بكسل. ثم اضغط OK. سينتج عن ذلك مستطيل بحجم العمل ولكنه لا يغطي مساحة العمل بشكل صحيح، لذلك استخدم أداة التحديد وبالاستعانة بالأدلة الذكية المفعّلة حرّك المستطيل ليغطي كامل مساحة العمل. ثم لوّنه بلون داكن وهو اللون الأخير من جهة اليسار في لوحة الألوان. تستطيع الحصول على اللون ذاته عبر استخدام أداة ماصة الألوان . افتح لوحة الطبقات بالاختصار F7 وقم بإنشاء طبقة جديدة من خلال النقر على أيقونة Create New Layer أسفل اللوحة ثم انقر بجانب الطبقة الأولى التي تحوي الخلفية ولوحة الألوان لإظهار رمز القفل وبذلك نكون قد أقفلنا الطبقة ولم نستطيع تعديلها أو تحريكها حتى نزيل إشارة القفل من جديد. والآن سنقوم بإنشاء الشكل المتموّج الذي بداخل الكويكبات. استخدم أداة المستطيلات لرسم مستطيل نحيف عرضيًا. ثم استخدم أداة التحديد مع الاستمرار بالضغط على مفتاح Alt لسحب نسخة عن المستطيل نحو الأسفل وبالاستعانة بالأدلة الذكية اجعل المستطيل الجديد ملاصق للقديم. اضغط على الاختصار Ctrl+D عدة مرات لتكرار عملية النسخ عدة مرات. حدّد المستطيل الثاني من الأعلى لنقوم بتغيير عرضه. في حال لم تظهر أدوات حدود المستطيل لتعديل الحجم اضغط على الاختصار Shift+Ctrl+B حتى تظهر لك تلك الأدوات المساعدة. والآن استمر بالضغط على مفتاح Alt أثناء النقر على المربع الصغير على أحد جانبي المستطيل وسحبه للداخل وذلك لتصغير عرض المستطيل بشكل متناظر. عدّل الآن على باقي المستطيلات بحيث تصبح متفاوتة في حجم العرض لكل منها. والآن حرّك بعضا المستطيلات إلى اليمين وأخرى إلى اليسار بحيث تكون غير متناسقة.استمر بالضغط على مفتاح Shift أثناء التحريك للمحافظة على ثبات المحور الأفقي. اضغط على الاختصار Shift+Ctrl+F9 لإظهار لوحة Pathfinder. حدّد جميع المستطيلات ثم انقر على الخيار Unite من لوحة Pathfinder لتوحيد جميع المستطيلات في شكل واحد. اختر أداة التحديد المباشر ثم حدّد الشكل ولاحظ ظهور أدوات تدوير الزوايا. انقر على أداة تدوير الزوايا الموجودة ضمن الشكل الجديد ثم اسحبها إلى أقصى درجة لتتحوّل الزوايا المضلعة للشكل إلى زوايا مستديرة. سنحتاج إلى هذا الشكل في تصميم العديد من العناصر ضمن هذا التصميم لذلك سنقوم بحفظه كرمز ضمن لوحة الرموز Symbols. افتح لوحة الرموز بالاختصار Shift+Ctrl+F11 ثم اسحب هذا الشكل إلى داخل لوحة الرموز لتظهر نافذة حفظ رمز جديد حيث يمكنك تسمية هذا الرمز وتحديد بعض من خصائصه، اترك كل شيء في النافذة على حاله وانقر OK. أصبح هذا الشكل (السحابة الفضائية) ضمن لوحة الرموز. احذف الشكل الأصلي ثم اسحب هذا الشكل إلى لوح الرسم. اختر أداة التحديد ثم استمر بالضغط على Alt+Shift أثناء سحب نسخة عنه للأسفل، استعن بالأدلة الذكية لجعل الشكل الجديد ملاصق للشكل الأساسي. كرّر العملية بسهولة عبر الضغط على الاختصار Ctrl+D وبذلك يتم إنشاء نسخة جديدة بذات الطريقة أسفل الشكل الأخير. حدّد جميع هذه الأشكال ثم انقر على الخيار Unite من لوحة Pathfinder لتوحيدها معًا في شكل واحد. اختر أداة التحديد المباشر ثم حدّد النقاط في الجهة اليسرى من الشكل باستثناء أعلى نقطة وأسفل نقطة في تلك الجهة. احذف هذه النقاط بالضغط على مفتاح Delete لتبقى الجهة اليسرى بخط مستقيم مشطوب. حدّد النقطة العلوية في الجهة اليسرى ثم استمر بالضغط على مفتاح Shift وانقر على النقطة السفلية من ذات الجهة ثم حاذِهما أفقيًا عبر النقر على خيار المحاذاة الأفقية في شريط الأدوات العلوي. حدّد نقاط دائرة رأس العلوية من الجهة اليمنى للشكل ثم اسحبها نحو اليمين مسافة طويلة. كرّر العملية ذاتها مع دائرة الرأس السفلية. استخدم أداة رسم الأشكال البيضوية لرسم دائرة تغطي الجزء الأيمن المتعرج من الشكل وذلك عبر الاستمرار بالضغط على Shift أثناء سحب الشكل لنحصل على دائرة مثالية. عدّل بحجم الدائرة وحرّكها لتغطي الجزء الأيمن من شكل السحابة مع مطابقة أعلى وأسفل نقطتين من الدائرة مع أعلى وأسفل نقطتين من السحابة (استعن بالأدلة الذكية). حدّد الشكلين ثم انقر على الخيار Divide من لوحة Pathfinder ليتم تقطيع الأشكال إلى أشكال أصغر بحسب تقاطع حدود الأشكال معًا. حدّد كل ماهو خارج إطار الدائرة ثم احذفه بالضغط على المفتاح Delete. حدّد الجانب الأيمن من الدائرة ثم استخدم أداة ماصة الألوان واختر لونًأ من لوحة الألوان الخاصة بالتصميم، أنا اخترت الأحمر الفاتح. ولوّن الجانب الأيسر بالأحمر الداكن بذات الطريقة. ارسم دائرة جديدة وحاذِها بواسطة أدوات المحاذاة في شريط الأدوات العلوي أفقيًا وعموديًا مع الدائرة القديمة واجعلها أكبر حجمًا بشكل طفيف جدًّا ثم لوّنها باللون الأبيض. حدّد الدائرة البيضاء الكبيرة واذهب إلى القائمة Effect > Blur > Gaussian Blur ضمع القيمة 10 لنصف القطر. وبذلك يكتمل لدينا شكل الكويكب مع تأثير الهالة المحيطة به. حدّد شكل الكويكب ثم ضع المؤشر بالقرب من أحد الزوايا ليتغير شكله إلى سهمين معقوفين وذلك استعدادًا لتدوير الشكل ثم دوّر الشكل لنحو 40 درجة. حدّد شكل الكويكب ثم اسحبه إلى لوحة الرموز ليصبح رمزًا نستطيع استخدامه فيما بعد. احذف شكل الكويكب ثم اسحب رمزه من لوحة الرموز عدة مرات لإنشاء مجموعة كويكبات (كواكب) ثم عدّل بأحجامها ومواضعها بشكل عشوائي. حدّد أحد الكويكبات ثم انقر بالزر الأيمن عليه واختر Break Link to Symbol. ثم أعد تلوين الكويكب بنسق ألوان جديدة من لوحة الألوان. بما أننا جعلنا اللون الفاتح إلى اليمين والداكن إلى اليسار في التصميم الأولي للكويكب الأول فمن الأفضل الاستمرار على ذات التنسيق لبقية الكويكبات حتى يظهر تناسق بالنسبة لمسألة الإضاءة والظلال. كرّر العملية السابقة بالضغط بالزر الأيمن على الكويكب التالي وعدّل ألوانها جميعًا. سنتابع في الجزء الثاني تصميم النجوم والمذنب والنص الرئيسي للتصميم. مصادر الأمثلة تصميم Meteor للمصممة Nina Geometrieva تصميم Space Portfolio Website | Hero للمصمم Filip Benda تصميم Solar System Illustration للمصمم Simonas Mačiulis

من أهم مميزات ‏CSS3‎‏ أنها تقلل من استخدام الصور في تصاميم الويب، وتسمح لك بإنشاء أشكال مختلفة ‏بواسطتها. فالأشكال الشائعة التي تراها عادة في ‏فوتوشوب أو ‏Illustrator‏ يمكنك عملها الآن بكل ‏سهولة مستخدمًا ‏CSS3‎‏. تقوم الخصائص الجديدة مثل ‏transform‏ و ‏border-radius‏ بإضافة تشكيلات ‏جديدة إلى الأشكال الأساسية بدلاً من رسمها وتصميمها على برامج الرسم والتصميم. ‏ في درسنا لهذا اليوم، دعنا ننشئ قائمة بالأشكال الأكثر شيوعًا، وذلك باستخدام ‏CSS3‎‏.‏ يمكنك تحميل الملفات المصدرية لهذا الدرس من هنا. الدائرة HTML‎لإنشاء دائرة في الـCSS، نحتاج أولاً إلى ‏div‏ واسمٍ للشكل ‏id‏. وهنا ستأخذ الدائرة هذا الإسم: ‎<div id="circle"></div>‎CSS‎ضع مقاسات العرض والارتفاع ‏width‏ و ‏height‏ بالـ‏CSS‏ واجعل قيمة ‏border-radius‏ ‏نصف قيمة العرض والارتفاع: ‏#‏circle‏ } ‏ ‏ width: 120px‏;‏ height: 120px;‏ ‏ ‏background: #7fee1d;‏ ‏ -moz-border-radius: 60px‏;‏ webkit-border-radius: 60px‏;‏‏ border-radius: 60px‏;‏‏ }المربع‏ HTML‎نحتاج إلى ‏div‏ مع وضع اسمٍ له، لإنشاء شكل مربع وربطه بالاسم: ‎<div id="square"></div>‎CSS‎اضبط مقاسات العرض والارتفاع بنفس القيمة، حتى يبدو واضحًا: #‏square‏ } ‏ ‏ width: 120px‏;‏‏ height: 120px‏;‏ background: #f447ff‏;‏‏ }المستطيل HTMLأنشئ ‏div‏ وضع اسمًا له، ويفضل أن يكون الاسم نفس نوع الشكل: ‎<div id="rectangle"></div>‎‎CSS‎نضبط العرض والارتفاع تمامًا مثل المربع؛ ولكن بزيادة قيمة العرض أكثر من الارتفاع: ‏#‏rectangle‏ } ‏ ‏ width: 220px‏;‏ height: 120px‏;‏ background: #4da1f7‎‏;‏‏ }الشكل البيضاوي HTMLلنقم بإنشاء ‏div‏ ونعطه اسم ‏oval‏: ‎<div id="oval"></div>‎CSS‎يشابه الشكلُ البيضاوي الدائرةَ إلى حد كبير؛ ومع ذلك، فإن الشكل البيضاوي هو مستطيل زواياه مستديرة بقيمة ‏نصف الارتفاع: #‏oval‏ } ‏ ‏ width: 200px‏;‏‏ height: 100px‏; background: #e9337c‏;-‏ webkit-border-radius: 100px / 50px‏;‏-‏ moz-border-radius: 100px / 50px‏;‏ border-radius: 100px / 50px‏;‏‏ } المثلث HTMLيحتاج المثلث إلى ‏div‏ باسم ‏triangle‏:‏ ‎<div id="triangle"></div>‎CSS‎لإنشاء مثلث بواسطة الـ‏CSS‏، نقوم بالتعديل في خاصية ‏border‏. سنقوم بتعديل عرض الـ‏border‏ ‏حتى يعطينا نتائج مغايرة في قياس الزاويا: #‏triangle‏ } ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏‏ border-bottom: 140px solid #fcf921‎‏;‏‏‏ border-left: 70px solid transparent‏;‏‏ border-right: 70px solid transparent‏;‏‏ }المثلث المقلوب HTMLقُم بإنشاء ‏div‏ وأعطه اسمًا‏: ‎<div id="triangle_down"></div>‎CSS‎نحتاج إلى تعديل خاصية الحدّ السفليّ، لينتُج لدينا مثلث معكوس: #‏triangle_down‏ } ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏‏ border-top: 140px solid #20a3bf‏;‏‏ border-left: 70px solid transparent‏;‏ border-right: 70px solid transparent‏; }مثلث متجه إلى اليسار HTMLيتطلب هذا الشكل وجود ‏div‏ مع اسمٍ للشكل وليكن ‏triangle_left‏‏: ‎<div id="triangle_left"></div>‎CSSنقوم بالتعديل في خاصية الحدّ الأيمن، حتى نحصلَ على مُثلث مُتَّجه لليسار: #‏triangle_left‏ } ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏ border-top: 70px solid transparent‎‏;‏ border-right: 140px solid #6bbf20‎;‏ ‏ ‏border-bottom: 70px solid transparent‏;‏ }مثلث متجه لليمين HTMLلنقم بإنشاء ‏div‏ ونعطه اسم ‏triangle_right‏: ‎<div id="triangle_right"></div>‎ CSSبعد ذلك نقوم بالتعديل على خاصية الحدّ الأيسر، ليصبح عندنا مثلثًا متجهًا إلى اليمين: #‏triangle_right‏ } ‏width: 0‎‏;‏‏ height: 0‎‏;‏ border-top: 70px solid transparent‏;‏ border-left: 140px solid #ff5a00‎‏;‏ border-bottom: 70px solid transparent‏;‏ }الشكل المعين (الماسة)‏ HTMLيحتاج المُعين إلى ‏div‏ باسم ‏diamond‏: ‎<div id="diamond"></div>‎CSS‎يُمكن عرض المُعيّن بعدة طرق، وذلك باستخدام خاصية ‏transform‏ مع ‏rotate‏. بهذا يصبح لديك مُثلثان ‏متقابلان ومتلاصقان ببعضهما: #‏diamond‏ } ‏ ‏ width: 120px‏;‏ height: 120px‏; background: #1eff00‎‏;‏ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); ‏ webkit-transform-origin: 0 100%‎‏;‏ moz-transform-origin: 0 100%‎‏;‏ -ms-transform-origin: 0 100%‎‏;‏‏ -o-transform-origin: 0 100%‎‏;‏ transform-origin: 0 100%‎‏;‏ margin: 60px 0 10px 310px‏;‏ }شبه المنحرف HTMLيتطلب هذا الشكل وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏trapezium‏‏: ‎<div id="trapezium"></div>‎CSS‎نقوم الآن بصناعة الشكل المطلوب، حيث نجعل الحدَّ الأيمن والأيسر متساويين مع الاحتفاظ بالحدّ السفليّ مُسَطّحًا: #‏trapezium‏ } ‏ ‏ height: 0‎;‏ ‏ ‏width: 120px‏;‏‏ border-bottom: 120px solid #ec3504‎‏;‏‏ border-left: 60px solid transparent‏;‏ border-right: 60px solid transparent‏;‏ }متوازي الأضلاع HTML‎قُم بإنشاء ‏div‏ وأعطه اسم ‏parallelogram‏‏: ‎<div id="parallelogram"></div>‎CSS‎ثم قم بضبط قيمة الانحراف ‏skew‏ لخاصية ‏transform‏ لحرفه بزاوية 30 درجة: #‏parallelogram‏ } ‏ ‏ width: 160px‏;‏ height: 100px‏;‏ background: #8734f7‎‏;‏ -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); transform: skew(30deg); }النجمة HTML‎يلزمنا ‏div‏ لإنشاء النجمة مع اسمٍ له وليكن ‏star‏‏: ‎<div id="star"></div>‎CSS‎يتطلب إنشاء النجمة بالـ‏CSS‏ تعديلات عجيبة في خصائص الحدود مع استعمال قيمة ‏rotate‏ لخاصية ‏‏‏transform‏، لاحظ ذلك في الكود‏: #‏star‏ } ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏ margin: 50px 0‎‏;‏ color: #fc2e5a‏;‏ position: relative‏;‏‏ display: block‏;‏ border-right: 100px solid transparent‏;‏ border-bottom: 70px solid #fc2e5a‏;‏ border-left: 100px solid transparent‏;‏ -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); ‏ } ‏#‏star:before‏ { height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); ‏} #‏star:after‏ { content: ''; width: 0; height: 0; position: absolute; display: block; top: 3px; left: -105px; color: #fc2e5a; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); ‏ }النجمة السداسية HTMLتتطلب النجمة السداسية وجود ‏div‏ مع اسمٍ للشكل، ولنطلق عليه اسم ‏parallelogram‏‏: ‎<div id="parallelogram"></div>‎CSSبخلاف النجمة السابقة، فإننا سنقوم بتعديل خصائص الحدود. سننشئ مجموعة من الأشكال ومن ثم نُلصقُها ببعضها ‏البعض لنحصل على الشكل المطلوب: #‏star_six_points‏} ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏‏ display: block;‏ ‏ ‏position: absolute‏;‏‏ border-left: 50px solid transparent‏;‏‏ border-right: 50px solid transparent‏;‏ border-bottom: 100px solid #de34f7‎‏;‏‏ margin: 10px auto‏;‏ } ‏#‏star_six_points:after‏ } ‏ ‏ content: '';‏ ‏ ‏width: 0‎‏;‏ height: 0‎‏;‏ position: absolute‏;‏ border-left: 50px solid transparent‏;‏‏ border-right: 50px solid transparent‏;‏‏ border-top: 100px solid #de34f7‎‏;‏‏ margin: 30px 0 0 -50px‎‏;‏‏ }‏ المضلع الخماسي HTML‎يتطلب المُضلعُ الخماسي وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏pentagon‏‏: ‎<div id="pentagon"></div>‎CSS‎نحتاج إلى عنصرين لإنشاء المضلع الخماسي. أول عنصر نقوم بإنشائه هو شكل شبه المنحرف والعنصر الثاني هو ‏المثلث حيث سيكون أعلى الشكل الأول: #‏pentagon‏ } ‏ ‏ width: 54px‏;‏ position: relative‏;‏ border-width: 50px 18px 0‎‏;‏‏ border-style: solid‏;‏ border-color: #277bab transparent‏;‏ } ‏#‏pentagon:before‏ } ‏ ‏ content: '';‏ ‏ ‏height: 0‎‏;‏‏ width: 0‎‏;‏‏ position: absolute‏;‏‏ top: -85px‎‏;‏ left: -18px‎‏;‏‏ border-width: 0 45px 35px‏;‏ border-style: solid‏;‏‏ border-color: transparent transparent #277bab‏;‏‏ }المضلع السداسي HTML‎ يلزمنا ‏div‏ لإنشاء المُضلع السداسي مع اسم له وليكن ‏hexagon‏‏: ‎<div id="hexagon"></div>‎ CSS‎هناك عدة طرق لإنشاء المُضلع السداسي. إحدى هذه الطرق مطابقة بشكل كبير لطريقة إنشاء المُضلع الخماسي. حيث ‏نقوم بإنشاء مستطيل في البداية ومن ثم نضيف أعلاه مُثلثين: #‏hexagon‏ } ‏ ‏ width: 100px‏;‏‏ height: 55px‏;‏ background: #fc5e5e‏;‏‏ position: relative‏;‏‏ margin: 10px auto‎‏;‏‏ } ‏#‏hexagon:before‏ } ‏ ‏ content: '';‏ ‏ ‏width: 0‎‏;‏‏ height: 0‎‏;‏ position: absolute‏;‏ top: -25px‎‏;‏ left: 0‎‏;‏‏ border-left: 50px solid transparent‏;‏ border-right: 50px solid transparent‏;‏‏ border-bottom: 25px solid #fc5e5e‏;‏‏ } ‏#‏hexagon:after‏ } ‏ ‏ content: '';‏ ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏ position: absolute‏;‏‏ bottom: -25px‎‏;‏ left: 0‎‏;‏‏ border-left: 50px solid transparent‏; border-right: 50px solid transparent‏;‏‏ border-top: 25px solid #fc5e5e‏;‏‏ }المضلع الثماني HTML قُم بإنشاء ‏div‏ وأعطه اسم ‏octagon‏‏: ‎<div id="octagon"></div>‎CSS‎يُمكن إنشاء هذا الشكل بطرق مُشابهة للشكل السابق. حيث نقوم بإنشاء شكلين شبه منحرفين ومن ثم نضع مُثلثين على ‏كل جانب منهما. على الرغم من وجود بعض الطرق الأخرى لعمل ذلك؛ إلا أن هذه هي أفضل طريقة لذلك: #‏octagon‏ } ‏ ‏ width: 100px‏;‏ height: 100px‏;‏‏ background: #ac60ec‏;‏‏ position: relative‏;‏‏ } ‏#‏octagon:before‏ } ‏ ‏ content: '';‏ ‏ ‏width: 42px‏;‏‏ height: 0‎‏;‏ position: absolute‏;‏ top: 0‎‏;‏‏ left: 0‎‏;‏ border-bottom: 29px solid #ac60ec‏; border-left: 29px solid #f4f4f4‎‏;‏‏ border-right: 29px solid #f4f4f4‎‏;‏‏ } ‏ #octagon:after‏ } ‏ ‏ content: '';‏ ‏ ‏ width: 42px‏;‏ height: 0‎‏;‏ position: absolute‏;‏ bottom: 0‎‏;‏‏ left: 0‎‏;‏ border-top: 29px solid #ac60ec‏;‏ border-left: 29px solid #f4f4f4‎‏;‏‏ border-right: 29px solid #f4f4f4‎‏;‏‏ }شكل القلب HTML يتطلب شكل القلب وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏heart‏‏: ‎<div id="heart"></div> ‎CSS‎يُمكن أن يكون إنشاءُ شكل القلب صعبًا بعض الشيء؛ ولكن نستطيع القيام بذلك عن طريق عمل استدارة للعناصر من ‏زوايا مختلفة وتغيير قيمة خاصية ‏transform-origin‏ حتى نتمكن من تغيير موضع العنصر المُحَدَّد: ‏#‏heart‏ } ‏ ‏ position: relative‏;‏ ‏ } ‏#heart:before, #heart:after‏ } ‏ ‏ content: '';‏ ‏ ‏ width: 70px‏;‏‏ height: 115px‏;‏ position: absolute‏;‏ background: red‏;‏ left: 70px‏;‏‏ top: 0‎‏;‏ -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; ‏{‏ #‏heart:after‏ { ‏ left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; ‏ }البيضة HTML يلزمنا ‏div‏ لإنشاء شكل البيضة مع اسمٍ له وليكن ‏egg‏‏: ‎<div id="egg"></div>‎CSS‎إنَّ شكل البيضة مطابق إلى حدٍّ ما للشكل البيضاوي؛ إلا أن ارتفاعها أكبر بقليل من عرضها. نقوم بضبط خاصية ‏الزوايا المستديرة بشكل دقيق حتى نحصل على مرادنا بالضبط: #‏egg‏ } ‏ ‏ width: 136px‏;‏ height: 190px‏;‏ background: #ffc000‎‏;‏‏ display: block‏;‏‏ -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px‏;‏‏ border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%‎‏;‏‏ } ‏شكل اللانهائية HTML قُم بإنشاء ‏div‏ وأعطه اسم ‏infinity‏‏: ‎<div id="infinity"></div>‎CSS‎يمكن الحصول على شكل اللانهائية بالضبط الدقيق لخصائص الحدود وزاويا الدائرة كما بالشكل السابق: #‏infinity‏ } ‏ ‏ width: 220px‏;‏ height: 100px‏;‏ position: relative‏;‏‏ } ‏#‏infinity:before, #infinity:after‏ } ‏ ‏ content: '';‏ ‏ ‏ width: 60px‏;‏ height: 60px‏;‏‏ position: absolute‏;‏‏ top: 0‎‏;‏ left: 0‎‏;‏ border: 20px solid #06c999; -moz-border-radius: 50px 50px 0; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } ‏#‏infinity:after‏ { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); ‏}بالون التعليقات HTML قُم بإنشاء ‏div‏ وأعطه اسم ‏comment_bubble‏‏: ‎<div id="comment_bubble"></div>‎CSS‎نقوم بصناعة هذا الشكل بواسطة إنشاء مستطيل ذي زوايا مستديرة، ثم ننشيء مُثلثًا ونضعه على الجانب الأيسر كما ‏بالصورة: #‏comment_bubble‏ } ‏ ‏ width: 140px‏;‏ height: 100px‏;‏ background: #088cb7‎‏;‏ position: relative‏;‏ -moz-border-radius: 12px; -webkit-border-radius: 12px; ‏ ‏border-radius: 12px‏;‏ } ‏#‏comment_bubble:before‏ } ‏ ‏ content: '';‏ ‏ ‏width: 0‎‏;‏ height: 0‎‏;‏ right: 100%‎‏;‏‏ top: 38px‏;‏‏ position: absolute‏;‏‏ border-top: 13px solid transparent‏;‏‏ border-right: 26px solid #088cb7‎‏;‏‏ border-bottom: 13px solid transparent‏;‏ }شكل باكمان (لعبة آكلة الجبنة)‏ HTMLيتطلب شكل الباكمان وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏pacman‏‏: ‎<div id="pacman"></div>‎CSS‎إنشاء شكل الباكمان غير صعب، فكل ما يحتاجه هو نفس خطوات إنشاء الدائرة مع تعديل بسيط في الحدود وخاصية ‏‏‏radius‏ لصنع فتحة على الجانب الأيسر من الدائرة‏: #‏pacman‏ } ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏‏ border-right: 70px solid transparent‏;‏ border-top: 70px solid #ffde00‎‏;‏‏ border-left: 70px solid #ffde00‎‏;‏‏ border-bottom: 70px solid #ffde00‎‏;‏ border-top-left-radius: 70px‏;‏‏ border-top-right-radius: 70px‏;‏‏ border-bottom-left-radius: 70px‏;‏ border-bottom-right-radius: 70px‏;‏‏ }في الختامتوجد هناك العديد من الميزات في استخدام الأشكال المصنوعة بالـ‏CSS‏، فهي أفضل بكثير من وضع صور ‏جاهزة على موقعك. فأنت تستطيع استخدامها الآن كجزء من تصاميم المواقع، على الرغم من أنها قد لا تعمل على ‏بعض المتصفحات مثل إنترنت إكسبلورر بإصداراته القديمة. ‏ الآن وقد انتهيت من درس اليوم، أتمنى أن تكون قد استمتعت فيه، وأنا على استعداد لتقبل أي تعليقات أو تساؤلات أو ‏اقتراحات في هذا المجال.‏ ترجمة وبتصرف للمقال: How to Create Different Shapes in CSS. حقوق الصورة البارزة: Designed by Freepik.