CSS3 أخرى

في هذا الدليل، سنتعلم المزيد من الخصائص المثيرة للاهتمام لـ CSS3.

استخدام CSS3 لتوسيع واجهة المستخدم

في هذا الفصل، سنناقش بعض الخصائص المثيرة للاهتمام المتعلقة بالواجهة المستخدمة CSS3resize،outline-offsetوغيرها، يمكنك استخدامها لتحسين موقع الويب الخاص بك.

تغيير حجم العنصر

يمكنك استخدام خاصية resize CSS3 لتحويل العناصر بشكل أفقي، أو عمودي، أو كلاهما. ولكن، عادة ما يتم استخدام هذه الخاصية لمنع<textarea>إزالة السلوك القياسي القابل للتوسع في عناصر نماذج النصوص.

p,　div,　textarea　{
　　　　width:　300px;
　　　　min-height:　100px;
　　　　overflow:　auto;
　　　　border:　1px　solid　black;
}
p　{
　　　resize:　horizontal;　
}
div　{
　　　　resize:　both;
}
textarea　{
　　　　resize:　none;
}

تعيين تفاف الهوامش

في الدرس السابق، تعلمت كيفية تعيين خصائص مختلفة للهوامش، مثل العرض، والألوان والأنماط. ولكن، يقدم CSS3 خصائص أخرى، outline-offset لتحديد المسافة بين الهوامش والحدود الخارجية للعنصر. يمكن أن تأخذ هذه الخاصية قيم سلبية، مما يعني أنه يمكنك أيضًا وضع هوامش داخل العنصر.

p,　div　{
　　　　margin:　50px;
　　　　height:　100px;
　　　　background:　#000;
　　　　outline:　2px　solid　red;
}
p　{
　　　　outline-offset:　10px;
}
div　{
　　　　outline-offset:　-15px;
}