تقدم هذه المقالة 5 خصائص CSS مفيدة. يجب أن تكون على دراية به، ولكن من المحتمل أنك نادرًا ما تستخدمه. أنا لا أتحدث عن التطلع إلى خصائص CSS3 الجديدة، أنا أتحدث عن خصائص CSS2 القديمة مثل clip وmin-height وwhite-space وcurosr وdisplay التي تدعمها جميع المتصفحات على نطاق واسع. لذلك لا تفوت هذه المقالة حيث قد تجدها ذات فائدة كبيرة.
1. مقطع CSS
خاصية المقطع تشبه القناع. يسمح لك بإخفاء محتوى عناصر الصفحة باستخدام المستطيلات. لقص عنصر: يجب عليك تحديد خاصية الموضع الخاصة به على أنها مطلقة، ثم تحديد القيم العلوية واليمنى والسفلية واليسارية المتعلقة بالعنصر.
.gif)
مثال لقص الصور ( عرض توضيحي )
يوضح المثال التالي كيفية استخدام خاصية القصاصة لإخفاء صورة. أولاً، حدد العنصر <div> باعتباره الموضع: نسبي، ثم حدد العنصر <img> باعتباره الموضع: المطلق، وقم بتعيين قيمة المستقيم وفقًا للاحتياجات الفعلية.
.gif)
مقطع {
الموقف: نسبي؛
الارتفاع: 130 بكسل؛
العرض: 200 بكسل؛
الحدود: صلبة 1 بكسل #ccc؛
}
مقطع الصورة {
الموقف: مطلق؛
المقطع: مستطيل (30 بكسل 165 بكسل 100 بكسل 30 بكسل)؛
}
تغيير حجم الصورة وقصها ( عرض توضيحي )
في هذا المثال سأوضح لك كيفية تغيير حجم الصورة واقتصاصها. الصورة المخزنة مستطيلة وأريد تصغيرها إلى 50% من حجمها لإنشاء صورة مصغرة مربعة الشكل. لذلك استخدمت خصائص العرض والارتفاع لتغيير حجم الصورة، وخاصية المقطع لإخفائها. ثم استخدم السمة اليسرى لتحريك الصورة بمقدار 15 بكسل إلى اليسار.
.gif)
.
معرض لي {
تعويم: يسار؛
الهامش: 0 10 بكسل 0 0;
الموقف: نسبي؛
العرض: 70 بكسل؛
الارتفاع: 70 بكسل؛
الحدود: صلبة 1 بكسل #000؛
}
معرض الصور {
العرض: 100 بكسل؛
الارتفاع: 70 بكسل؛
الموقف: مطلق؛
المقطع: مستطيل (0 85 بكسل 70 بكسل 15 بكسل)؛
اليسار: -15 بكسل؛
}