لوحة المتصدرين

في هذا المقال القصير سوف نصنع تنبيها مؤقتا بسيطا عبر CSS animations. ما سنفعله بالتحديد هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفائها. وسوف سنعمل شريط تقدم (progress bar) لنعرف كم تبقى من الوقت ليختفي التنبيه. ستكون تنبيهات هذا الدرس من الشكل التالي: بالنسبة للهيكلة فسوف نستخدم div يحتوي على الرسالة وبداخله div آخر من أجل شريط التقدم: <div class="tn-box tn-box-color-1"> <p>Your settings have been saved successfully!</p> <div class="tn-progress"></div> </div>سيملك التنبيه tn-box. و tn-box-color-1. من أجل تحديد اللون، سوف نثبت الصندوق أسفل النافذة حتى يرتفع عندما يظهر: .tn-box { width: 360px; position: fixed; bottom: 20px; left: 20px; padding: 25px 15px; text-align: right; border-radius: 5px; box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6); opacity: 0; cursor: default; display: none; transform: translateY(30px) } .tn-box-color-1{ background: #ffe691; border: 1px solid #f6db7b; }أما بالنسبة لشريط التقدم فسنعطيه التالي: .tn-progress { width: 0; height: 4px; background: rgba(255,255,255,0.3); position: absolute; bottom: 5px; right: 2%; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.05), 0 -1px 0 rgba(255,255,255,0.6); }في البداية، سيكون عرض شريط التقدم 0. في هذا المثال، أنا أستخدم checkbox من أجل إطلاق animation عندما يتم الضغط عليه: <input type="checkbox" class="fire-check"> <section> <div class="tn-box tn-box-color-1"> <p>شريط التقدم الجميل!</p> <div class="tn-progress"></div> </div> </section>الزر يسبق صندوق التنبيهات لذا نستطيع استخدام محدد ~ من أجل تحديد العنصر الذي يأتي بعده. وإذا أردت أن تتحكم بالأمر عبر جافاسكربت (عبر إضافة tn-box-active. )، فاستخدم التالي: .tn-box.tn-box-active { display: block; animation: fadeOut 5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .tn-box.tn-box-active .tn-progress { animation: runProgress 4s linear forwards 0.5s; }أما بالنسبة للحركية (animation) فهي كالتالي: @keyframes fadeOut { 0% { opacity: 0; } 10% { opacity: 1; transform: translateY(0px);} 90% { opacity: 1; transform: translateY(0px);} 99% { opacity: 0; transform: translateY(30px);} 100% { opacity: 0; } } @keyframes runProgress { 0% { width: 0%; background: rgba(255,255,255,0.3); } 100% { width: 96%; background: rgba(255,255,255,1); } }ما ستقوم به الـحركية (animation) هو إظهار الصندوق (عبر رفعه ورفع درجة الشفافية) ثم تكبير عرض شريط التقدم. حددنا عرض شريط التقدم إلى 96% (لأنه يبعد عن يمين الصندوق بـ 2% لذا نريده أن يتوقف قبل 2% من اليسار أيضا). مثال حيSee the Pen ZbzMWQ by Hsoub Academy (@HsoubAcademy) on CodePen. ملاحظة: شيء إضافي وجدت أنه من الجميل إضافته هو إيقاف animation عند تمرير المؤشر على الصندوق. ولكن للأسف، الأمر لم ينجح في chrome بينما نجح في فيرفكس. .tn-box:hover, .tn-box:hover .tn-progress{ animation-play-state: paused; }ترجمة -وبتصرف- للمقال: Timed Notifications with CSS Animations لصاحبه Mary Lou. حقوق الصورة البارزة: Designed by Freepik.

في الدرس السابق قمنا باستخدام برنامج فوتوشوب لتصميم واجهة موقع لغابة افتراضية باسم "Pinewood Forest". أمّا في هذا الدرس فسوف نقوم بتكويد ذلك التصميم باستخدام لغتي HTML وCSS وتحويله إلى صفحة ويب كاملة. كما سنقوم أيضًا باستخراج الصور الموجودة في التصميم لاستعمالها في الموقع. في حال أنك لم تقرأ الدرس السابق، أنظر إلى الصورة في الأعلى لترى التصميم الذي سوف نقوم بتكويده. يحتوي الموقع على صورة خلفية كبيرة وثابتة لتسمح لمحتوى الموقع بالتمرير(scroll) فوقها، والمحتوى نفسه مجزأ إلى عدة أجزاء، وتم استخدام مجموعة من الصور لجذب انتباه الزائر. استخراج الصور الموجودة في التصميم ستكون الخطوة الأولى قبل البدء بتكويد التصميم هي استخراج الصور من التصميم. بعض أجزاء التصميم يمكن عملها باستخدام CSS فقط ولكن أجزاء أخرى من التصميم سنحتاج فيها إلى الصور. يحتوي الجزء الرئيسي للموقع على صورة خلفية كبيرة، وسوف نحتاج إلى ضغط هذه الصورة لتقليل حجمها الكبير وذلك عن طريق اللجوء إلى خيار Save for web. كما قلنا سابقًا، سيحتوي الموقع على خلفية ثابتة وسوف يظهر المحتوى فوق هذه الصورة، وبالتالي فإن العناصر مثل الشّعار سنحتاج إلى استخراجها بصيغة PNG-24 لأن هذه الصيغة تدعم الشفافية (transparency). ستكون خلفية المحتوى الرئيسي للموقع ذات طابع شفاف أيضًا وبالتالي سوف نحتاج إلى استخراجها بصيغة PNG، وهذه الخلفية سيتم تقسمها إلى ثلاثة أقسام؛ قسم علوي وقسم سفلي وقسم مكرر في المنتصف. المجموعة النهائية للصور سوف تحتوي على صور بصيغة PNG وأخرى بصيغة JPEG. بعض الصور ستكون بحجم صغير، وهذه الصور سيتم تكريرها (باستخدام CSS) لإنشاء خلفيات مزخرفة، أمّا الصور الأخرى فسوف تكون صورًا بديلة عن النصوص لاستخدامها كعناوين. بنية ملف HTML <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Visit Pinewood Forest</title> <link href="styles.css" rel="stylesheet" /> </head> <body> <div id="container"> </div> </body> </html> سيحتوي الملف الرئيسي (index file) على أكواد HTML. يُستخدم <doctype html!> لتعريف المتصفح بإصدار HTML المُستخدم ويعتبر أيضًا من الممارسات الجيدة في عالم تصميم الويب، لذلك احرص على أن يكون موجودًا في كل موقع تقوم بتصميمه. يتبع ذلك وسم <head> ويحتوي هذا الوسم على عنوان الصفحة وعلى رابط لملف CSS. وأخيرًا يوجد وسم <div> وسيحتوي هذا الوسم على بقية عناصر/وسوم الصفحة. <body> <div id="container"> <div id="header"> <p id="logo"> <a href="#" title="Return to the homepage"> <img src="images/pinewood-forest-logo.png" alt="Pinewood Forest logo" /> </a> </p> <ul> <li><a href="#">Visit</a></li> <li><a href="#">Discover</a></li> <li><a href="#">Trails</a></li> <li><a href="#">Maps</a></li> </ul> </div> </div> </body> </html> يبدأ التصميم بوسم div مع إعطائه id بقيمة "header" وسيحتوي هذا الوسم على الشّعار وعلى عناصر القائمة الرئيسية (navigation items)، وسيكون الشعار عبارة عن صورة داخل وسم <img> موضوعة في وسم <a>. تُستخدم title الموجودة في وسم <a> لتعريف المستخدم بالوجهة التي سيصل إليها حال نقره على الرابط، أمّا alt في وسم <img> فإنها تُستخدم لإعطاء المستخدم وصفًا عن الصورة في حالة عدم ظهور الصورة. يُعتبر وسم <ul> هو الوسم الشائع عند عمل القوائم الرئيسية لأنّه يُصوّر لنا وبدقة تلك القائمة على هيئة HTML حتى لو لم يكن هناك تنسيقات CSS. وبالرجوع إلى التصميم يمكنك ملاحظة أن الشعار موجود في الوسط بين قوائم العناصر الرئيسية، ولكننا سنبقي كلا العنصرين (الشعار والقائمة الرئيسية) مفصولين عن بعضهما حتى نحصل على هئية وملف HTML نظيف ومُرتّب، وسنلجأ لاحقًا إلى استخدام CSS لتحريك تلك العناصر حتى نحصل على نتيجة مرضية ومطابقة للتصميم. <div id="content"> <div id="feature"> <div id="feature-content"> <h1>Explore the forest</h1> <p>Find everything you need to explore and discover the mysteries of the forest, from maps and trail guides to must see attractions</p> <p class="btn"><a href="#">Begin your journey</a></p> </div> </div> </div> بعد الترويسة (header) تأتي منطقة المحتوى الرئيسي (main content)، ولجعل هيكل ملف HTML نظيفًا فسوف يتم وضع جميع العناصر في وسم <div> واحد، كما وستظهر منطقة الـfeature في بداية الصفحة وداخل وسم <div> ليتم تموضعها بشكل دقيق ومناسب. أمّا بالنسبة للعنوان الرئيسي في الصفحة (الذي يحتوي على النص "Explore the forest") فسوف يتم وضعه داخل وسم <h1>. لاحظ أيضًا أنه تم إضافة "class="btn إلى العنصر <p> ليمكننا تحويل هذا العنصر إلى زر باستخدام CSS. المستوى الثاني من العناوين سيكون موجودًا داخل وسم <h2>، وسيكون المحتوى الرئيسي منقسمًا إلى عمودين، بحيث يكون العمود الأكبر عبارة عن div مع id بقيمة "main" وبداخل هذا العمود توجد النصوص (عناصر <p>). لا تنسى تحويل الروابط إلى عناصر <a> وأي رموز خاصة (characters) إلى ما يقابلها من HTML entities (مثل رمز "&" يتم تحويله إلى "&"). وفي الأسفل من نفس العمود يوجد قسم "upcoming events"، ويمكننا استخدام عناصر <dl> ،<dt> و<dd> (اختصار للكلمات "Definition List"، "Definition Term" و"Definition Description" على التوالي) بحيث تحتوي عناصر dt على تاريخ الحدث وعناصر <dd> على وصف بسيط للحدث. لاحظ أننا استعملنا وسوم <span> داخل عناصر <dt> وذلك لإعطائها تنسيقات مميزة باستخدام CSS. <div id="side"> <div class="aside"> <a href="#"><img src="images/tracks-and-trails.jpg" alt="Tracks and Trails" /></a> <p>Pinewood Forest has a vast selection of walking and hiking trails to suit every visitor<a href="#">Find out more</a></p> </div> <div class="aside"> <a href="#"><img src="images/mountain-biking.jpg" alt="Mountain Biking" /></a> <p>Pinewood Forest is home to some of the most demanding XC and Freeride Mountain Biking routes<a href="#">Find out more</a></p> </div> <div class="aside"> <a href="#"><img src="images/christmas-events.jpg" alt="Christmas Events" /></a> <p>Pinewood Forest has a vast selection of walking and hiking trails to suit every visitor<a href="#">Find out more</a></p> </div> </div> </div> <div id="footer"> <p id="back-to-top"><a href="#">Back to top</a></p> </div> </div> بالنسبة للعمود الأصغر فسوف يكون موجودًا داخل عنصر div آخر مع id بقيمة "side". تتكون القائمة الجانبية (sidebar) من ثلاثة أقسام رئيسية وكل قسم يحتوي عنوان على شكل صورة وعلى وصف بسيط لكل قسم، ولأن كل صورة تحتوي على نص بداخلها فقد قمنا باستخدام alt لكل صورة حتى نحافظ على ما يسمى بالـaccessibility. وفي نهائية الصفحة قمنا بإغلاق وسم <div> الخاص بالمحتوى وتحتها يوجد div خاص بالـfooter وبادخله نص "Back to top" ليأخذنا إلى أعلى الصفحة عند الضغط عليه. انتهينا إلى الآن من هيكلة ملف HTML ويمكنك إلقاء نظرة إلى الصورة في الأعلى لترى كيف يجب أن يظهر بدون CSS. لاحظ أنه يمكن قراءة الملف حتى بدون تنسيق الملف باستخدام CSS. تنسيق الصفحة باستخدام CSS body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { font: 14px/26px Georgia, Serif; color: #444a54; background: #2d3237 url(images/bg-photo.jpg) center top no-repeat fixed; } #container { width: 960px; margin: 50px auto; } لنبدأ الآن بتنسيق الموقع باستخدام CSS. يُستخدم السطر الأول من أجل إزالة أي تنسيقات افتراضية للمتصفحات (يسمى هذا "CSS reset")، وبعد ذلك يوجد داخل المحدد body الخصائص العامة للخطوط في الموقع وصورة خلفية، ولأننا نريد هذه الصورة أن تكون ثابتة لا تتحرك مع باقي الصفحة عند التمرير(scrolling) فقد قمنا بإعطائها القيم "fixed" ،"top" و"center". وقد قمنا بإضافة لون أزرق (2d3237) حتى تظهر الخلفية بشكل أفضل لمن لا يمكنه رؤية الصورة لسبب أو لآخر وكذلك لمن يمتلك شاشات بدقة وأبعاد ضخمة. أمّا بالنسبة للحاوي الرئيسي (main container) فقد تم إعطاؤه عرض ثابت بقيمة 960px وتم توسيطه باستخدام الطريقة الشائعة margin: 0 auto. header { background: url(images/content-top.jpg) center bottom no-repeat; overflow: hidden; } header p#logo { position: relative; width: 295px; margin: 0 auto -74px auto; } header ul { width: 916px; margin: 0 auto 110px auto; overflow: hidden; list-style: none; } header li { float: left; } header li:nth-child(1) { margin: 0 70px 0 0; } header li:nth-child(2) { margin: 0 325px 0 0; } header li:nth-child(3), header li:nth-child(4) { margin: 0 0 0 70px; } header li a { font-size: 16px; letter-spacing: 9px; color: #4e5761; text-decoration: none; } header li a:hover { color: #7c8896; } يمكنك ملاحظة أنه تم إضافة صورة كخلفية للقسم العلوي من جزء المحتوى إلى الأسفل من الترويسة. ولموضعة الشعار وعناصر القائمة الرئيسية كما هو موجود في التصميم، فقد استخدمنا الخاصية margin بقيم سالبة. ولأن عناصر القائمة موجودة في كلا الجانبين من الشعار فقد تم استخدام nth-child لتحديد كل عنصر من العناصر الأربعة وإعطائه قيمة margin مناسبة، وعن طريق استخدام letter-spacing استطعنا تنفيذ التباعد بين الحروف(tracking) الموجود في التصميم. content { padding: 0 52px; overflow: hidden; background: url(images/content-repeat.png) center top repeat-y; } content #feature { width: 916px; height: 420px; position: relative; margin: 0 0 30px -30px; background: url(images/feature-bg.jpg); } content #feature #feature-content { position: relative; width: 384px; top: 92px; left: 460px; } content #feature #feature-content h1 { widht: 384px; height: 91px; margin: 0 0 5px 0; background: url(images/explore-the-forest.png); text-indent: -9999px; } content #feature #feature-content p { color: #fff; margin: 0 0 15px 8px; } content #feature #feature-content p.btn a { display: block; widows: 163px; height: 39px; background: url(images/begin-your-journey.png); text-indent: -9999px; } content #feature #feature-content p.btn a:hover { margin: -1px 0 0 0; } بما أنّ ارتفاع div الخاص بالمحتوى سيختلف من صفحة لأخرى، فقد قمنا باستخدام صورة ليتم تكريرها حتى نسمح لجزء المحتوى أن يتمدد بدون قيود، واستخدمنا padding على اليمين واليسار حتى نُبعد محتوى الصفحة عن الحواف. ولأنّ منطقة المحتوى ستحتوي على عمودين وكل منهما يحتوي على الخاصية float، فسوف نحتاج إلى استخدام overflow: hidden حتى يظهر كل شيء بشكل جيد. إعطاء قسم الـfeature الخاصية position: relative سيسمح للمحتوى بالتحرك في مكانه، كما أنّ القيمة السالبة للخاصية margin ستعوّض عن قيمة padding التي تم إعطاؤها لـdiv المحتوى وذلك لنسمح لذلك القسم بالتمدد إلى أقصى أطراف الصفحة. كما أنه تمّ استخدام صورة في وسم h1، ولكن تم تنسيق الفقرة باستخدام خصائص font في CSS. وبالنسبة للزر، فقد تم استخدام صورة وإعطائه بعض التنسيقات حتى يظهر بشكل جيد. content #main { width: 536px; float: left; margin: 0 20px 0 0; } content h2 { font-size: 20px; font-weight: normal; margin: 0 0 20px 0; } content p { margin: 0 0 20px 0; } content a { color: #3f6489; } content a:hover { color: #0d3965; } content dl { } content dt { float: left; width: 40px; height: 50px; margin: 0 15px 0 0; background: #a1a3a5 url(images/date-bg.png); font-size: 30px; color: #fff; text-align: center; } content dt span { display: block; font-size: 12px; font-weight: bold; text-transform: uppercase; } content dd { float: left; width: 480px; } content dd h3 { float: left; font-size: 20px; font-weight: normal; } content dd span { float: left; margin: 4px 0 0 10px; visibility: hidden; } content dd p { clear: left; } content dd:hover span { visibility: visible; } سيكون الـdiv الرئيسي هو الأعرض بين العمودين؛ بعرض 536px. وسيكون العرض لكل من main وside بالإضافة إلى الـmargin بينهما هو العرض الخاص بـdiv الأب منقوصًا منه قيمة padding اليسار واليمين. تم تحويل عناصر dt إلى أيقونة التاريخ عن طريق إعطائها عرض وطول ولون خلفية رمادي. وباستخدام تنسيقات font مناسبة أمكننا جعل نص التاريخ كبيرًا وبلون أبيض، كما أنّه تم جعل الخط الخاص بالعنصر span أصغر بقليل حتى يظهر الشهر أسفل رقم اليوم بشكل جميل. وحتى تظهر عناصر dt وdd بجانب بعضها فقد تم إعطاؤها الخاصية float: left. لاحظ أننا استخدمنا visibility: hidden على العنصر span وذلك حتى نخفيه عن أنظار الزائر إلى أن يضع مؤشر الفأرة فوق عنصر dd لنقوم عندها بإظهار رابط "View more info". content #side { width: 300px; float: left; } content .aside { padding: 17px 0 0 17px; margin: 0 0 30px 0; background: url(images/aside-bg.png) center top no-repeat; } content .aside img { margin: 0 0 15px 0; } footer { padding: 70px 22px; background: url(images/content-bottom.png) center top no-repeat; } footer p#back-to-top { float: right; font-size: 11px; } footer p#back-to-top a { color: #fff; text-decoration: none; } footer p#back-to-top a:hover { color: #d7d9d8; } كل عنصر aside. تم إعطاؤه خلفية مزخرفة، وبالنسبة للخطوط فإنها ستأخد التنسيقات الخاصة بـ div المحتوى بسبب ما يسمى بالتوريث (inheritance). أمّا بالنسبة لرابط "back to top" فسوف نضطر إلى إعطائه تنسيقات جديدة لأنه موجود خارج div المحتوى، ولأنّ هذا الرابط موجود ضمن خلفية داكنة وخارج المحتوى الرئيسي فإننا سنحتاج لتعديل الألوان وجعلها مختلفة عن البقية الموجودة في باقي الصفحة. بقي شيء واحد قبل أن ننتهي من هذا الدرس وهو أنّه يجب عليك أن تعرف أن خاصية nth-child غير مدعومة في بعض إصدارات متصفح Internet Explorer، لذلك إذا أردت أن تدعم تلك المتصفحات فيجب عليك استخدام jQuery: $(document).ready(fucntion() { $("#header ul li:nth-child(1)").css("margin-right", "70px"); $("#header ul li:nth-child(2)").css("margin-right", "325px"); $("#header ul li:nth-child(3)").css("margin-left", "70px"); $("#header ul li:nth-child(4)").css("margin-left", "70px"); }); إلى هنا نكون قد أنهينا درسنا وحصلنا على صفحة كاملة وجاهزة. يمكنك أيضًا تصفح الموقع بشكله النهائي إذا أحببت ذلك. أو تصفح الملفات المصدرية. ترجمة -وبتصرف- للمقال: Design a Textured Outdoors Website in Photoshop لصاحبه: Iggy.

من أهم مميزات ‏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.