ملخص اساسيات لغة CSS3

CSS3 هي الإصدار الأخير من لغة ال CSS وتحتوي على مجموعة هائلة من الأوامر لتنسيق صفحة الويب HTML مثل الحدود المستديره والظل والانيميشن واوامر متقدمة للتحكم بالخلفيات ، كما يحتوي على محددات دقيقة ومتقدمة  سنقدم لكم في هذا المقال شرح للأوامر الأساسية في ال css3 وسيتم استكمال الأوامر المتقدمة في مقالات منفردة.

1- الحدود المستديرة border radius

تتمثل الحدود المستديره او الزوايا الدائرية للعنصر بالخاصية border-radius  ويتمثل بالأوامر التالية:

<style> .border-cornerd{ border-top-left-radius: 20px; //استدارة جهة اليسار من اعلى border-top-right-radius: 15px; //استدارة جهة اليمين من اعلى border-bottom-right-radius: 10px; //استدارة جهة اليمين من اسفل border-bottom-left-radius: 5px; //استدارة جهة اليسار من اسفل } </style> <div class="border-cornerd"> //Your Content </div>

والكود المختصر كالتالي

border-radius:20px 15px 10px 5px;

2- تعيين صور للحدود border-image

لتعيين حدود العنصر بصورة بدلا عن الألوان كالتالي:

border:10px solid transparent; /* يجب تحديد الحد العادي */
        border-image-source: url("image.jpg"); /* تحديد عنوان الصورة */
        border-image-slice: 20%; /*  تحديد تقطيع الصورة او كامل مع fill */
        border-image-width: 10px;  /* تحديد عرض الصورة */
        border-image-outset:20px; /* تحديد مدى امتداد الصورة من الخارج */
        border-image-repeat: round; /* تحديد تكرار الصورة وتأتي مع القيم round,stretch */

والكود المختصر كالتالي

border-image: url(image.jpg) 30% round;