هل سبق لك أن رأيت موقع ويب CSS خالصًا حيث يتم الانتهاء من كل عنصر من خلال CSS؟ تقوم CSS بأكثر من مجرد عناصر التصميم. تسمح أشكال CSS لمصممي الويب بإنشاء مسارات مخصصة مثل المثلث والدوائر والمضلعات والمزيد. بهذه الطريقة ، لم تعد مقيدًا بإدراج صورة عائمة بخلفية شفافة ، فقط لتشعر بخيبة أمل من مربع مستطيل حولها.
في هذه المقالة ، سنستخدم أشكال CSS وبعض القيم الوظيفية لتشفير الأشكال المختلفة.
رسم أشكال CSS الأساسية
لنبدأ بالأشكال الأساسية مثل المربع والمستطيل والمثلث والدائرة والقطع الناقص.
مربع ومستطيل
المربع والمستطيل هما أسهل الأشكال التي يمكن صنعها في CSS. كل ما عليك فعله هو إنشاء ملف ومنحها أ ارتفاع و أ العرض.
لغة البرمجة
CSS
.rec-sq {
عرض: فليكس ؛
فجوة: 2em ؛
الهامش: 2em ؛
}
.مربع {
العرض: 15 ريم ؛
الارتفاع: 15 ريم.
الخلفية: rgb (255 ، 123 ، 0) ؛
}
.مستطيل {
العرض: 24 ريم ؛
الارتفاع: 14 ريم ؛
الخلفية: RGB (0 ، 119 ، 128) ؛
}
انتاج:
الدائرة والقطع الناقص
تحتاج فقط إلى تعيين ملف نصف قطر الحد من 50٪ إلى مربع وستحصل على دائرة. افعل الشيء نفسه مع المستطيل للحصول على قطع ناقص.
لغة البرمجة
CSS
.circle {
العرض: 15 ريم ؛
الارتفاع: 15 ريم.
الخلفية: rgb (255 ، 123 ، 0) ؛
نصف قطر الحدود: 50٪ ؛
}
.الشكل البيضاوي {
العرض: 24 ريم ؛
الارتفاع: 14 ريم ؛
الخلفية: RGB (0 ، 119 ، 128) ؛
نصف قطر الحدود: 50٪ ؛
}
انتاج:
مثلثات
سنستخدم الحدود لإنشاء مثلثات. أتساءل كيف يعمل؟ كل ما عليك فعله هو ضبط ملف العرض و ارتفاع من المثلث إلى الصفر. هذا يعني ، المضي قدما ، العرض الفعلي العنصر سيكون عرض الحد. أيضًا ، قد تعلم بالفعل أن حواف الحدود بقطر 45 درجة لبعضها البعض. أعط ألوانًا مختلفة لكل حد واضبط أي ثلاثة منها على شفافة. في النهاية ، سيكون لديك مثلثك.
لغة البرمجة
CSS
// مشترك للجميع
هيئة {
عرض: فليكس ؛
فجوة: 5em ؛
الهامش: 15em ؛
}.عينة {
الارتفاع: 8.5em ؛
العرض: 8.5em ؛
أعلى الحد: 1em صلب # 9ee780 ؛
الحد الأيمن: 1em rgb صلبة (240 ، 241 ، 141) ؛
الحد السفلي: 1em rgb صلبة (145 ، 236 ، 252) ؛
يسار الحد: 1em rgb صلبة (248 ، 115 ، 106) ؛
} .triangle {
الارتفاع: 0؛
العرض: 0؛
أعلى الحد: 5em صلب # 9ee780 ؛
الحد الأيمن: 5em rgb صلبة (240 ، 241 ، 141) ؛
الحد السفلي: 5em rgb صلبة (145 ، 236 ، 252) ؛
يسار الحد: 5em rgb صلبة (248 ، 115 ، 106) ؛
}
انتاج:
يمكنك اللعب مع ارتفاع و لون الحدود للحصول على أنواع مختلفة من المثلثات. على سبيل المثال ، يمكنك إنشاء مثلث يشير إلى الاتجاه التصاعدي بإعطاء الحد السفلي لون خالص بينما يتم تعيين جميع الحدود الأخرى على شفاف. أيضًا ، يمكنك إنشاء مثلث يشير إلى الاتجاه الصحيح أو مثلث قائم الزاوية من خلال اللعب به عرض الحدود و لون الحدود.
لغة البرمجة
CSS
.triangle-up {
الارتفاع: 0؛
العرض: 0؛
أعلى الحدود: 5em شفافة صلبة ؛
يمين الحدود: 5em شفافة صلبة ؛
الحد السفلي: 5em rgb صلبة (145 ، 236 ، 252) ؛
يسار الحد: 5em شفافة صلبة ؛
}
.triangle-right {
العرض: 0؛
الارتفاع: 0؛
نمط الحدود: صلب ؛
عرض الحدود: 4em 0 4em 8em ؛
لون الحدود: rgb شفافة شفافة (245 ، 149 ، 221) ؛
}
.triangle-bottom-right {
العرض: 0؛
الارتفاع: 0؛
نمط الحدود: صلب ؛
عرض الحدود: 8em 0 0 8em ؛
لون الحدود: rgb شفافة شفافة (151 ، 235 ، 158) ؛
}
انتاج:
إنشاء أشكال متقدمة باستخدام CSS
يمكنك استخدام ::قبل و ::بعد، بعدماالعناصر الزائفة لإنشاء أشكال متقدمة. من خلال الاستخدام الذكي لخصائص الموضع والتحويل ، يمكنك بسهولة إنشاء أشكال معقدة باستخدام CSS خالص.
شكل نجمة (5 نقاط)
ستحتاج إلى معالجة الحدود باستخدام قيمة التدوير للتحويل. الفكرة هي إنشاء جانبين باستخدام ملف فئة = "نجمة"، على الجانبين الآخرين باستخدام ::بعد، بعدما العنصر ، والجانب الأخير باستخدام ::قبل عنصر.
لغة البرمجة
CSS
.star-Five {
الهامش: 3.125em 0 ؛
الموقف: نسبي ؛
العرض محجوب؛
العرض: 0em ؛
الارتفاع: 0em ؛
يمين الحد: 6.25em شفافة صلبة ؛
الحد السفلي: 4.3em rgb صلبة (255 ، 174 ، 81) ؛
يسار الحد: 6.25em شفافة صلبة ؛
تحويل: تدوير (35 درجة) ؛
}
.star-five: قبل {
الحد السفلي: 5em rgb صلبة (255 ، 174 ، 81) ؛
يسار الحد: 2em شفافة صلبة ؛
يمين الحد: 1.875em شفاف صلب ؛
الموقف: مطلق.
الارتفاع: 0؛
العرض: 0؛
أعلى: -45 بكسل ؛
اليسار: -65 بكسل ؛
العرض محجوب؛
المحتوى: ''؛
تحويل: تدوير (-35 درجة) ؛
}
.star-five: بعد {
الموقف: مطلق.
العرض محجوب؛
أعلى: 3 بكسل ؛
اليسار: -105 بكسل ؛
العرض: 0؛
الارتفاع: 0؛
يمين الحد: 6.25em شفافة صلبة ؛
الحد السفلي: 4.3em rgb صلبة (255 ، 174 ، 81) ؛
يسار الحد: 5.95em شفافة صلبة ؛
تحويل: تدوير (-70 درجة) ؛
المحتوى: ''؛
}
انتاج:
خماسي الاضلاع
يمكنك إنشاء خماسي عن طريق الجمع بين شبه منحرف ومثلث. يستخدم الحدود و خصائص الموقع تشكيلها وتجميعها.
لغة البرمجة
CSS
.خماسي الاضلاع {
الموقف: نسبي ؛
العرض: 10em ؛
تحجيم الصندوق: مربع المحتوى ؛
عرض الحدود: 10em 5em 0 ؛
نمط الحدود: صلب ؛
لون الحدود: rgb (7 ، 185 ، 255) شفاف ؛
أعلى الهامش: 20rem ؛
الهامش الأيسر: 10rem ؛
}
. البنتاغون: قبل {
المحتوى: ""؛
الموقف: مطلق.
الارتفاع: 0؛
العرض: 0؛
أعلى: -18em ؛
اليسار: -5em ؛
عرض الحدود: 0 10em 8em ؛
نمط الحدود: صلب ؛
لون الحدود: شفاف RGB (7 ، 185 ، 255) ؛
}
انتاج:
الماس
قم بتجميع المثلثين اللذين يشيران لأعلى ولأسفل باستخدام الموضع لإنشاء شكل ماسي. نعم ، سنستخدم ملف الحدود خصائص لإنشاء هذه المثلثات.
لغة البرمجة
CSS
.الماس {
العرض: 0؛
الارتفاع: 0؛
الموقف: نسبي ؛
أعلى: -3em ؛
الحدود: 3em شفافة صلبة ؛
لون الحد السفلي: rgb (129 ، 230 ، 255) ؛
}
.diamond: بعد {
المحتوى: ''؛
العرض: 0؛
الارتفاع: 0؛
الموقف: مطلق.
اليسار: -3em ؛
أعلى: 3em ؛
الحدود: 3em شفافة صلبة ؛
لون الحافة العلوية: rgb (129 ، 230 ، 255) ؛
}
انتاج:
يمكنك إنشاء شكل درع ماسي عن طريق تغيير ارتفاع المثلث العلوي كما هو موضح أدناه:
لغة البرمجة
CSS
.diamond-shield
{
العرض: 0؛
الارتفاع: 0؛
الحدود: 3em شفافة صلبة ؛
الحد السفلي: 1.25em rgb صلبة (71 ، 194 ، 231) ؛
الموقف: نسبي ؛
أعلى: -3em ؛
}
.diamond-cut: بعد {
المحتوى: ''؛
الموقف: مطلق.
اليسار: -3em ؛
أعلى: 1.25em ؛
العرض: 0؛
الارتفاع: 0؛
الحدود: 3em شفافة صلبة ؛
أعلى الحدود: 4.4em rgb صلبة (71 ، 194 ، 231) ؛
}
انتاج:
قلب
شكل القلب صعب بعض الشيء ولكن يمكنك القيام بذلك باستخدام ::قبل و ::بعد، بعدما العناصر الزائفة. يمكنك استخدام قيم مختلفة لـ تحول لتدويرها من زوايا مختلفة حتى تشكل شكل قلب بشكل مثالي. في النهاية ، يمكنك تعيين أصل التحويل لتعيين النقطة التي يتم حولها تطبيق التحويل.
لغة البرمجة
CSS
.قلب {
العرض: 6.25 ميكرومتر ؛
الارتفاع: 55 م ؛
الموقف: نسبي ؛
}
.heart: قبل ،
.heart: بعد {
المحتوى: ""؛
العرض: 3em ؛
الارتفاع: 5 م ؛
الموقف: مطلق.
اليسار: 3em ؛
أعلى: 0؛
الخلفية: أحمر ؛
نصف قطر الحدود: 3em 3em 0 0 ؛
تحويل: تدوير (-45 درجة) ؛
أصل التحويل: 0 100٪ ؛
}
.heart: بعد {
اليسار: 0؛
تحويل: تدوير (45 درجة) ؛
أصل التحويل: 100٪ 100٪ ؛
}
انتاج:
جرب أشكال CSS النقية
يجب أن تكون الآن على دراية بصور CSS نقية مختلفة يمكن إنشاؤها عن طريق كتابة بضعة أسطر من التعليمات البرمجية. لم يعد إنشاء موقع ويب فائق السرعة مهمة شاقة بعد الآن لأنك تعرف كيف تتلاعب بالشفرة. أفضل جزء هو أنه يمكنك أن يتردد صداها مع صوت العلامة التجارية من خلال التلاعب بالأشكال والألوان المختلفة وفقًا لمتطلباتك. لذلك ، استمر في التجربة واكتشف طرقًا جديدة لرسم أشكال رائعة بحتة بواسطة CSS.
استدعاء جميع مطوري الويب المبتدئين: سيمنحك هذا البرنامج التعليمي المهارات التي تحتاجها لإنشاء أشرطة التنقل الخاصة بك سريعة الاستجابة باستخدام HTML و CSS فقط!
اقرأ التالي
- برمجة
- CSS
- تصميم المواقع
- تطوير الشبكة
Naincy متخصصة في بناء مواقع ويب سريعة الاستجابة واستراتيجية محتوى فعالة إلى جانب نسخ الويب. إنها كاتبة تقنية مستقلة تراقب التقنيات الشائعة.
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك
