استفاده از تصاویر حاشیه

خط مرزی پیش فرضی که HTML5 در اطراف اشیا قرار می دهد بسیار کسل کننده است. چگونه در مورد اضافه کردن مرزهای دقیق تر به اطراف اشیا؟ شما می توانید، به لطف یک ویژگی جالب دیگر به CSS3 اضافه شده است. قابلیت استفاده از تصاویر را برای مرز اطراف عناصر به جای یک خط. این ویژگی به شما امکان استفاده از هر نوع تصویری برای ایجاد شکوفایی در اطراف عناصر خود می دهد.

با افزودن ویژگی border-image، یک تصویر حاشیه را به یک عنصر اعمال می کنید:

border-image: url(file) slice repeat تابع url() مکان فایل تصویری مورد استفاده برای حاشیه را مشخص می کند. مسیر می تواند یک مقدار مطلق باشد که مستقیماً به فایل تصویر اشاره می کند یا یک نسبی مسیر (نسبت به محل اسکریپت CSS). مقدار slice مشخص می کند که از چه قسمت هایی از تصویر حاشیه برای حاشیه استفاده شود. این بخش می تواند تا حدودی پیچیده شود. به طور پیش فرض، مرورگر مرز را برش می دهد تصویر به 9 بخش، است. تصویر نه حاشیه بخش ها هستند

»» چهار قطعه گوشه (بالا چپ، بالا سمت راست، پایین سمت راست و پایین سمت چپ)

»»چهار تکه لبه (بالا، راست، پایین و چپ)

»»بخش میانی برای مقدار برش، اندازه تکه های تصویر را برای استفاده برای فرد مشخص می کنید.

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

»»یک مقدار: اندازه یکسان تصویر را برای چهار گوشه و چهار لبه

»» دو مقدار: یک اندازه برای بالا و پایین و اندازه دیگر برای سمت چپ و سمت راست

»»چهار مقدار: هر کدام یک اندازه برای بالا، سمت راست، پایین و سمت چپ پارامتر تکرار تعیین می‌کند که مرورگر چگونه باید تصویر را متناسب با فضای مورد نیاز برای ایجاد لبه‌های حاشیه قرار دهد. چهار راه برای انجام آن وجود دارد:

»»repeat: تصویر را تکرار می کند تا تمام لبه پر شود

»»round: تصویر را تکرار می کند، اما اگر تصویر به عنوان تعداد تکرار کامل با منطقه مطابقت نداشته باشد، تصویر را تغییر مقیاس می دهد تا متناسب شود.

»»space: تصویر را تکرار می کند، اما اگر تصویر با کل منطقه مطابقت نداشته باشد

تعداد تکرار، فاصله بین تصاویر را اضافه می کند تا جا بیفتد.

»»stretch: تصویر را کشیده تا لبه پر شود بنابراین، برای مثال، برای تعریف یک تصویر حاشیه ای که از برش های 10 پیکسلی از همه موارد استفاده می کند. کناره‌ها، و آنها را به تناسب ناحیه مرزی بکشید، می‌توانید از موارد زیر استفاده کنید:

border-image: url(“myimage.jpg”) 10 stretch;

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

مقداری را که تصویر فراتر از ناحیه جعبه حاشیه معمولی گسترش می یابد را مشخص می کند   =   border-image-outset

نحوه گسترش تصویر را مشخص می‌کند تا با کل ناحیه مرزی مطابقت داشته باشد   =   border-image-repeat

مشخص می کند که چه قطعه ای از تصویر به عنوان حاشیه استفاده شود   =    border-image-slice

مسیر تصویر مورد استفاده برای حاشیه را مشخص می کند   =   border-image-source

عرض دو طرف تصویر حاشیه را مشخص می کند   =   border-image-width

Background_and_Borders/Border-image_generator. با این ابزار می توانید یک تصویر را آپلود کنید یا از یکی از تصاویر استاندارد آنها استفاده کنید، و ابزار به طور خودکار انجام می شود کد CSS3 لازم برای استخراج ویژگی های تصویر حاشیه را ایجاد کنید.

نگاهی به رنگ های CSS3 را سه فرمت استاندارد CSS را در مقالات آینده به شما نشان می دهیم برای تنظیم رنگ ها در صفحه وب تعریف می کند:

»»استفاده از نام رنگ

»» استفاده از مقدار هگزادسیمال RGB

»» استفاده از تابع rgb() با مقادیر اعشاری

استاندارد CSS3 گزینه هایی را که برای تعریف رنگ ها در دسترس دارید گسترش می دهد

با افزودن روش رنگ، اشباع و روشنایی  HSLروش HSL از تعریف رنگ ها از سه مقدار استفاده می کند

»»Hue: درجه رنگ در چرخه رنگ.

مفهوم چرخ رنگ از اوایل دهه 1800 در دنیای هنر وجود داشته است. رنگ‌ها را در اطراف دایره‌ای قرار می‌دهد که رنگ‌های اصلی – قرمز، زرد و آبی – روی آن قرار دارند چرخ به ترتیب در 0، 60 و 240 درجه. رنگ های ثانویه – نارنجی، سبز و بنفش – بین رنگ‌های اصلی و در مکان‌هایی قرار می‌گیرند بر اساس سایه های آنها به ترتیب در 30، 120 و 260 درجه. از آنجا، سایه های مختلف ترکیب رنگ ها به طور مناسب روی چرخ چیده شده اند. برای تعیین یک رنگ جداگانه، باید محل آن را در چرخه رنگ بدانید. خوشبختانه نمودارهای آنلاین زیادی برای کمک به این موضوع وجود دارد.

»»اشباع: درصد رنگ استفاده شده.

مقدار اشباع درصدی است که سایه خاکستری رنگ را از 0 درصد برای بدون رنگ (تمام خاکستری) تا 100 درصد برای اشباع کامل رنگ.

»» روشنایی: درصد روشنایی اضافه شده به رنگ.

مقدار روشنایی درصدی است که میزان تاریکی (0 درصد) یا روشن (100 درصد) را مشخص می کند. رنگ باید باشد مقدار 50 درصد رنگ را در سایه معمولی خود ایجاد می کند. درصدهای بزرگتر سایه های تیره تری از رنگ ایجاد می کنند، در حالی که کمتر درصدها سایه های روشن تری از رنگ ایجاد کنید.

برای استفاده از روش HSL برای تعیین رنگ، از فرمت hsl() استفاده کنید. به عنوان مثال ویژگی زیر رنگ قرمز را در موقعیت 0 چرخه رنگ که نشان داده شده است مشخص می کند.

در 100 درصد اشباع، با 50 درصد سبکی:

رنگ: hsl (0، 100، 50%)؛

استاندارد CSS3 همچنین ویژگی opacity را به HSL اضافه می کند و رنگ HSLA را ایجاد می کند روش. با HSLA، پارامتر چهارم را اضافه می‌کنید تا شفافیت رنگ را از 0 تا 1 مشخص کنید. مثال زیر از رنگ قرمز استفاده می‌کند، اما در 50 درصد

شفافیت:

رنگ: hsla (0، 100٪، 50٪، 0.5)

زیبایی استفاده از مقادیر HSL زمانی به وجود می آید که شما یک طرح رنگی را انتخاب می کنید برای وب سایت شما اگر می خواهید از یک رنگ برای طرح وب سایت استفاده کنید، می توانید سطوح اشباع و روشنایی را برای ایجاد سایه های مختلف رنگ تغییر دهید. اگر اگر می خواهید یک طرح دو رنگ ایجاد کنید، ممکن است بخواهید رنگ هایی را انتخاب کنید که 180 باشند

درجاتی از هم فاصله دارند – آنها مکمل در نظر گرفته می شوند. برای طرح سه رنگ، رنگ هایی که 120 درجه از هم فاصله دارند یک سه گانه ایجاد می کنند. در یک طرح چهار رنگ، رنگ ها را انتخاب کنید که 90 درجه از هم فاصله دارند تا یک آفست خوب ایجاد کنند. با چسبیدن به چرخ رنگ قوانین، تقریباً هر کسی می تواند یک طرح رنگی خوش سلیقه برای یک وب سایت ایجاد کند.