قائمة طعام
مجاني
التسجيل
الصفحة الرئيسية  /  التثبيت والتكوين/ متوازي الأضلاع css3. أشكال CSS: دورة تمهيدية

متوازي الأضلاع css3. أشكال CSS: دورة تمهيدية

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

كما تعلم ، فهي الآن عصرية للغاية ، ولكنها تتكون أساسًا من المستطيلات ، والتي بدورها تحد إلى حد كبير من آفاق المصممين. ثم هناك أيضًا القدرة على التكيف .. وهو أمر مقيد جدًا للإبداع. ولكن هناك ميزة إضافية كبيرة - من الأسهل التدفق حول مستطيل ، ولكن كيفية جعل النص يتدفق حول الأشكال المستديرة أو غير المستوية أكثر صعوبة. لأن الصور لا يمكن أن تكون مستديرة.

في هذه الحالة ، تعمل الأرقام لمساعدتنا. نشر موقع W3C CSS الشهير أول توثيق للشكل. ها هو هذا المنشور باللغة الإنجليزية CSS Shapes Module المستوى 1. تم إصدار هذه الوحدة مؤخرًا في 20 يونيو. حتى الآن ، هذا إصدار تجريبي ، والذي يتضمن أشكالًا مثل المستطيل والمثلث والقطع الناقص والدائرة والمضلع.

الآن دعونا نلقي نظرة فاحصة على ما هي ميزة أشكال CSS على سبيل المثال.

لتبدأ ، لنأخذ ترميز HTML بسيطًا لها ، وذلك بفضل http://www.webdesignerdepot.com:

هذا نص مثال

بالنسبة للعناصر ذات المواضع المطلقة ، لا تحتاج إلى تحديد عرض وارتفاع صفري.

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

فاتورة غير مدفوعة. 1. الأنواع الممكنة من المثلثات
رأي أسلوب
الحدود: 20 بكسل شفافة صلبة ؛ أعلى الحد: 20 بكسل أخضر ثابت ؛
الحدود: 20 بكسل شفافة صلبة ؛ الحد الأيمن: 20 بكسل أخضر ثابت ؛
الحدود: 20 بكسل شفافة صلبة ؛ الحد السفلي: 20 بكسل أخضر ثابت ؛
الحدود: 20 بكسل شفافة صلبة ؛ يسار الحد: 20 بكسل أخضر ثابت ؛
الحدود: 20 بكسل شفافة صلبة ؛ أعلى الحد: 20 بكسل أخضر ثابت ؛ الحد الأيمن: 20 بكسل أخضر ثابت ؛
الحدود: 20 بكسل شفافة صلبة ؛ الحد الأيمن: 20 بكسل أخضر ثابت ؛ الحد السفلي: 20 بكسل أخضر ثابت ؛
الحدود: 20 بكسل شفافة صلبة ؛ الحد السفلي: 20 بكسل أخضر ثابت ؛ يسار الحد: 20 بكسل أخضر ثابت ؛
الحدود: 20 بكسل شفافة صلبة ؛ يسار الحد: 20 بكسل أخضر ثابت ؛ أعلى الحد: 20 بكسل أخضر ثابت ؛

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

يمكن عمل المثلث في شكل مختلف ، إذا قمت بتعيين سُمك مختلف للحدود. لذلك ، رمز إنشاء الكتلة الموضح في الشكل. 4 يظهر في المثال 2.

أرز. 4. المثلث الحاد

مثال 2. مثلث حاد

مثلث

بمساعدة الحدود نحصل على مثلثات ملونة صلبة لإنشاء الحدود الموضحة في الشكل. 5 عليك أن تذهب للخدعة وتضع عنصرًا واحدًا فوق الآخر مع إزاحة طفيفة. مرة أخرى ، ستساعدنا العناصر الزائفة قبل و: بعد (مثال 3).

أرز. 5. الإطار مع الزاوية

مثال 3. تراكب مثلثات

مثلث

أثار kuzdra shteko اللامع الجوانب ولف البوكرينكا.

نظرًا لحقيقة أننا نقوم بتراكب عنصر لون واحد فوق عنصر آخر ، فإن هذه الطريقة مناسبة فقط لتعبئة الألوان الصلبة وليست مناسبة للتدرجات أو الخلفيات.

استخدام التحول

بمساعدة التحويل ، يمكننا تدوير العنصر المربع بمقدار 45 درجة وإخراج المعين منه. هذا ليس مثلثًا على هذا النحو ، لذلك نترك الجزء البارز الذي نحتاجه على مرأى من الجميع ، ونخفي الباقي خلف عنصر آخر (مثال 4).

مثال 3. التحول

مثلث

أثار kuzdra shteko اللامع الجوانب ولف البوكرينكا.

تظهر نتيجة هذا المثال في الشكل. 6.

أرز. 6. مثلث مع الظل