آموزش رابط کاربری در CSS3

saber

5 سال پیش

امتیاز دهید post

آموزش رابط کاربری در CSS3

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش رابط کاربری در CSS3 خواهیم پرداخت.

ویژگی رابط کاربری به شما امکان می دهد هر عنصر را به یکی از چندین عنصر استاندارد رابط کاربر تغییر دهید.

برخی از خصوصیات مشترکی که در رابط کاربری css3 استفاده می شود.

appearance

مورد استفاده قرار می گیرد تا کاربر بتواند عناصر را به عنوان عناصر رابط کاربر ایجاد کند.

box-sizing

به کاربران اجازه می دهد تا عناصر موجود در منطقه را به روش واضح ثابت کنند.

icon

برای تهیه آیکون استفاده می شود.

resize

برای تغییر اندازه عناصر موجود در منطقه استفاده می شود.

outline-offset

برای ترسیم پشت رئوس مطالب استفاده می شود.

outline-offset

هنگامی که دکمه پیکان رو به پایین را در صفحه کلید فشار دهید ، برای حرکت به پایین استفاده می شود.

nav-left

هنگامی که دکمه پیکان چپ را در صفحه کلید فشار دهید ، برای حرکت به سمت چپ استفاده می شود.

nav-right

هنگامی که دکمه پیکان راست را در صفحه کلید فشار دهید ، برای حرکت درست استفاده می شود.

nav-up

هنگامی که دکمه پیکان رو به بالا را در صفحه کلید فشار دهید ، برای حرکت به بالا استفاده می شود.

مثالی از ویژگی تغییر اندازه

اندازه تصویر دارای سه مقدار مشترک است که در زیر نشان داده شده است –

افقی
عمودی
هر دو

استفاده از هر دو مقدار در تغییر اندازه ویژگی در رابط کاربری css3 –

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         div {
            border: 2px solid;
            padding: 20px; 
            width: 300px;
            resize: both;
            overflow: auto;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div&gt;TutorialsPoint.com&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

div {

border: 2px solid;

padding: 20px;

width: 300px;

resize: both;

overflow: auto;

}

</style>

</head>

<body>

<div>TutorialsPoint.com</div>

</body>

</html>

خط خارجی در CSS3

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         div {
            margin: 20px;
            padding: 10px;
            width: 300px; 
            height: 100px;
            border: 5px solid pink;
            outline: 5px solid green;
            outline-offset: 15px;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div&gt;TutorialsPoint&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

div {

margin: 20px;

padding: 10px;

width: 300px;

height: 100px;

border: 5px solid pink;

outline: 5px solid green;

outline-offset: 15px;

}

</style>

</head>

<body>

<div>TutorialsPoint</div>

</body>

</html>

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش رابط کاربری در CSS3

آموزش رابط کاربری در CSS3

مثالی از ویژگی تغییر اندازه

خط خارجی در CSS3

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش رابط کاربری در CSS3

مثالی از ویژگی تغییر اندازه

خط خارجی در CSS3

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه