چگونه با استفاده از CSS برای Border گرادیانت ایجاد کنیم؟

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

روش اول در روش اول ما گرادیانت CSS3 را با به کار بردن از Pseudo-Elements ایجاد می کنیم. در واقع Pseudo-Elements در CSS3 کدهایی هستند که بخشی از یک عنصر صفحه را استایل دهی می کنند. مثلاً با استفاده از این کدها می توانید به حرف اول هر پاراگراف استایل متفاوتی بدهید یا به اول یا آخر هر پاراگراف یک نوشته اضافه کنید.

شیب رنگ عمودی: در ابتدا با یک مثال راحت یعنی گرادیانت از بالا به پایین شروع می کنیم:

در ابتدا Border بالایی و پایینی را به رنگ شروع و پایان گرادیانت تغییر می دهیم. سپس Border های کناری را با استفاده از قابلیت Background-Image ایجاد می کنیم به این صورت که ابتدا موقعیت Background را با استفاده از Background-Position تعریف می کنیم و با background-repeat کاری می کنیم که Background در کل شکلی تکرار نشود. سپس اندازه Background (که عرض آن 20 پیکسل و طول آن به اندازه طول شکل) را تعریف می کنیم و در انتها نیز Background-Image را با شیب رنگ تعریف می کنیم. توجه داشته باشید که برای هر مرورگر باید کد مخصوص به آن را استفاده کنید.

گرادیانت افقی: حالا به سراغ ایجاد گرادیانت افقی (یعنی از راست به چپ) می رویم. در واقع اساس این روش همان روش قبلی است. البته با این تفاوت که این بار به جای تعریف کردن Border های بالایی و پایینی با رنگ ثابت، Border سمت راست و چپ را با رنگ ثابت ایجاد کرده و شیب رنگ Border های بالایی و پایینی را با استفاده از روش قبلی یعنی Background-Image تعریف می کنیم:

گرادیانت مورب: ایجاد شیب رنگ مورب هم دقیقاً به همان روش بالایی شکل می گیرد که البته این روش کمی پیچیده تر است. در این مدل گرادیانت هم ما نیاز به دو pseudo-element تحت عناوین before و after داریم. به هر حال این بار از دو linear-gradient داخل pseudo-element ها استفاده می‌کنیم و این در حالی است که گرادیانت ها در جهت مخالف یکیدگر امتداد پیدا می کنند.

روش دوم: در روش دوم از قابلیت Border-Image در CSS3 استفاده می شود. در این قابلیت به ما این امکان داده می شود تا در CSS3 با استفاده از یک تصویر Border را به خوبی روش قبلی ایجاد کنیم (این نکته را در نظر بگیرید که منظور از تصویر در این قسمت می تواند حتی شیب رنگ ساخته شده با خود CSS3 باشد). پشتیبانی مرورگرها از Border-Image خیلی عالی است. کروم، اینترنت اکسپلورر 11، سافاری و اپرا توانایی اجرای کدهای Border-Image را دارند. به این نکته توجه کنید که این قابلیت فقط روی اشکال دارای زاویه قائمه قابل اجرا است. یعنی شما همزمان با این کد نمی توانید Border-Rudius را استفاده کنید. نمونه کد استفاده از Border-Image بصورت زیر است. در این حالت شیب رنگ عمودی ایجاد می شود:

در این قسمت به جای استفاده از URL یک تصویر در کد Border-Image از کد شیب رنگ CSS استفاده می کنیم. اگر عرض Border را برابر صفر قرار دهیم border-image نشان داده نخواهد شد. همان طور که می بینید ما عرض را 20px همراه با پس زمینه شفاف قرار داده ایم. همچنین با استفاده از کد Border-Image-Slice مبدا داخلی شیب رنگ یا همان Border-Image را مشخص می کنیم. مقدار دادن به این ویژگی الزامی است چرا که شیب رنگ باید در تمام Border بطور یکنواخت پخش شود. با استفاده از این روش انعطاف پذیری بیشتری به شکل خود می توانید بدهید و می توانید حتی شیب را در هر درجه ای قرار دهید.

0







از طریق این فرم، می توانید بدون ثبت نام نظر دهید و یا اگر قبلا ثبت نام کرده اید، با ورود ناحیه ی کاربری می توانید علاوه بر ثبت نظر، به مدیریت نظرات خود نیز بپردازید.
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)