آموزش CSS – بخش آخر (متفرقه)

در بخش نهایی سری آموزش CSS از پایه تا پیشرفته می خواهیم در مورد چند ویژگی جالب دیگر از CSS3 را یاد بگیریم.

گسترش رابط کاربری (UI) با CSS3

در این بخش بیشتر در مورد بعضی موارد جالب مربوط به UI از ویژگی های CSS3 مثل resize, outline-offset و غیره صحبت کنیم که برای بهبود صفحه وب خود می توانید استفاده کنید.

تغییر اندازه المان ها (Resizing)

شما می توانید قابلیت تغییر اندازه را بصورت افقی یا عمودی یا هر دو جهت را با ویژگی 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;
}

p, div, textarea {

width: 300px;

min-height: 100px;

overflow: auto;

border: 1px solid black;

}

p {

resize: horizontal;

}

div {

resize: both;

}

textarea {

resize: none;

}

تنظیم Outline Offset

در بخش بعدی شما در مورد ست کردن ویژگی های مختلفی مثل width, color, style برای outline ها را یاد گرفتید.

به هر حال CSS3 یک ویژگی بیشتر به نام outline-offset برای برای تنظیم فاصله بین یک outline و لبه border المان معرفی کرده است.

این ویژگی می تواند مقادیر منفی را بپذیرد که به این معناست که می توانید outline را داخل المان قرار بدید.

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

p, div {

margin: 50px;

height: 100px;

background: #000;

outline: 2px solid red;

}

p {

outline-offset: 10px;

}

div {

outline-offset: -15px;

}

امیدوارم از سری آموزش های CSS نهایت استفاده را برده باشید. و بتوانید با تمرین خود را به سطح بیشتری از مهارت و تسلط روی طراحی صفحات وب زیبا و کاربردی بدست آوردی

اگر علاقه مند به تمرین بیشتر و تسلط به مهارت های آموخته با انجام یک پروژه کاربردی را دارید می توانید از آموزش های بخش پروژه فروشگاهی دوره طراحی وب نت پارادیس استفاده کنید تا از تجربیات و تکنیک های طراحی صفحات وب بیشتر آشنا بشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.