چطور از فانکشن های ccs استفاده کنیم؟ + ویدئو

[short_link]

css functions چه چیزی هستند و چه کاربردی دارند ؟

همانطور که همه ما می دانیم کدهای css  برای ایجاد استایل و تعیین شکل نمایش صفحات وب به کار می روند.  با استفاده از فانکشن های  سی اس اس (css functions)  می توانیم کدهای استایل پویا و داینامیک طراحی کنیم.

مثلا همین متنی که شما در حال خواندن آن هستید ، توسط css  مشخص شده است که با چه فونتی، چه رنگی برای شما نمایش داده شود.

همینطور شکل  و نمای کلی وب سایت، رنگ ها و  شکل نمایش آیکن ها توسط css تعریف شدند.

به مرور زمان و در طی گذشت سال ها ، طراحی های وب مدرن تر شدند و نیاز به تغییرات و کدهای جدید برای طراحی زیباتر و کاربر پسند تر بود.

اگر در سالیان ابتدای ظهور وب، نمایشگر ها  دارای رزولیشن استاندارد و ثابتی بودند ، در عوض امروز انواع و اقسام مانیتورها با روزولیشن های مختلف به بازار عرضه شدند.

همینطور موبایل هایی با رزولیشن های مختلف تولید شدند.

همه این موارد باعث شد که صفحات وب که طراحی می شدند باید در تمام این دستگاه ها به درستی نمایش داده شوند.

در نهایت  مفهومی به نام رسپانسیو (responsive)   یا معادل فارسی آن واکنش گرایی مطرح شد.

وب سایت هایی که طراحی می شدند در مانیتورها و اسکرین های موبایل باید تغییر می کردند و همان مطالب را با شکل دیگری نمایش می دادند.

در صفحه وب سایت موزیلا دولوپر می توانیم مستندات فانکشن های  css functions   را مشاهده و مرور کنیم.

ایجاد استایل پویا و داینامیک در صفحات وب

فانکشن های استایل  (css functions)، کمک می کنند که کدهای استایل تعریف شده ما از حالت خشک و مرده، به حالت زنده و پویا در بیایند.

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

اگر از وب سایت های بزرگ و مطرح اینسپکت (inspect) بگیرید، در فایل استایل آنها خواهید دید که  به خوبی از فانکشن ها در استایل استفاده شده است.

راهنمای فانکشن های css

 

 

فانکشن های css

عموما مقادیر تعریف شده در کلاس ها و آی دی ها  css  ثابت هستند.  نهایتا اگر قصد تعریف یک خصوصیت نسبی مثلا ارتفاع یک بخش و یا عرض یک تصویر، را داشتیم از درصد استفاده می کردیم.

اما با کمک css functions ، دست ما در استفاده و استایل دادن به بخش های مختلف یک وب سایت باز تر شد و محدود عمل ما بیشتر شد.

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

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

اگر از فانکشن var  وجود نداشت باید تک تک و در تمام بخش هایی که کد رنگ مورد نظر ما وجود داشت را در فایل های استایل پیدا می کردیم و تغییر می دادیم .

نمونه دیگر از استفاده از فانکشن ها (css functions)، استفاده از فانکشن های rgb() ,rgba() ,calc  هست .

از rgb  برای ایجاد طیف وسیعی از رنگ ها استفاده می شود و در rgba علاوه بر رنگ، امکان تعریف شفافیت هم وجود دارد.

از calc که مخفف کلمه  calculate  است برای محاسبه عددی استفاده می شود برای مثال محاسبه ارتفاع و یا عرض یک div  در یک صفحه .

در مثال زیر، ما تعیین کردیم که عرض باید 100درصد منهای 50 پیکسل باشد.

width: calc(100% - 50px);

به طور کلی در  css  می توانیم از فانکشن های زیر استفاده کنیم.

در این جدول، خلاصه ای از عملکرد هر کدام از فانکشن ها  ذکر شده است.

 

Function Description
acos() Returns the inverse cosine of a number between -1 and 1
asin() Returns the inverse sine of a number between -1 and 1
atan() Returns the inverse tangent of a number between -∞ and ∞
atan2() Returns the inverse tangent of two values between -infinity and infinity
attr() Returns the value of an attribute of the selected element
blur() Applies a blur effect to an element
brightness() Adjusts the brightness of an element (brighter or darker)
calc() Allows you to perform calculations to determine CSS property values
circle() Defines a circle
color() Allows a color to be specified in a particular, specified color space
color-mix() Mixes two color values in a given color space, by a given amount
conic-gradient() Creates a conic gradient
contrast() Adjusts the contrast of an element
cos() Returns the
cosine of an angle
counter() Returns the current value of the named counter
counters() Returns the current values of the named and nested counters
cubic-bezier() Defines a Cubic Bezier curve
drop-shadow() Applies a drop shadow effect to an image
ellipse() Defines an ellipse
exp() Returns E raised to the power of the specified number x (Ex)
fit-content() Allows you to size an element based on its content
grayscale() Converts an image to grayscale
hsl() / hsla() Defines a color using the Hue-Saturation-Lightness model (HSL); with an
optional alpha component
hue-rotate() Applies a color rotation to an element
hwb() Defines a color using the Hue-Whiteness-Blackness model (HWB); with an
optional alpha component
hypot() Returns the square root of the sum of squares of its parameters
inset() Defines a rectangle at the specified inset distances from each side of
the reference box
invert() Inverts the color of an image
lab() Specifies a color in the CIE L*a*b color space
lch() Specifies a color in the LCH (Lightness-Chroma-Hue) color space
light-dark() Enables two color-value settings, and returns the first value if the
user has set a light color theme, and the second value if the user has set a
dark color theme
linear-gradient() Creates a linear gradient
log() Returns the natural logarithm (base E) of a specified number, or the
logarithm of the number to the specified base
matrix() Defines a 2D transformation, using a matrix of six values
matrix3d() Defines a 3D transformation, using a 4×4 matrix of 16 values
max() Uses the largest value, from a comma-separated list of values, as the
property value
min() Uses the smallest value, from a comma-separated list of values, as the
property value
minmax() Defines a size range greater than or equal to a min value and less than or
equal to a max value (used with CSS grids)
mod() Returns the remainder left over when a number is divided by another
number
oklab() Specifies a color in the OKLAB color space
oklch() Specifies a color in the OKLCH color space
opacity() Applies an opacity effect to an element
perspective() Defines a perspective view for a 3D transformed element
polygon() Defines a polygon
pow() Returns the value of a number (x) raised to the power of another number
(y)
radial-gradient() Creates a radial gradient
ray() Defines the offset-path line segment that an animated element should
follow
rem() Returns the remainder left over when a number is divided by another
number
repeat() Repeats a set of columns or rows in a grid
repeating-conic-gradient() Repeats a conic gradient
repeating-linear-gradient() Repeats a linear gradient
repeating-radial-gradient() Repeats a radial gradient
rgb() / rgba() Defines colors using the Red-Green-Blue model (RGB); with an optional
alpha component
rotate() Defines a 2D rotation of an element
rotate3d() Defines a 3D rotation of an element
rotateX() Defines a 3D rotation of an element around the x-axis (horizontal)
rotateY() Defines a 3D rotation of an element around the y-axis (vertical)
rotateZ() Defines a 3D rotation of an element around the z-axis
round() Rounds a number according to the specified rounding-strategy
saturate() Adjusts the saturation (color intensity) of an element
scale() Defines a 2D scaling of an element
scale3d() Defines a 3D scaling of an element
scaleX() Scales an element horizontally (the width)
scaleY() Scales an element vertically (the height)
sepia() Converts an image to sepia
sin() Returns the sine of a number (angle)
skew() Skews an element along the x- and y-axis
skewX() Skews an element along the x-axis
skewY() Skews an element along the y-axis
sqrt() Returns the square root of a number
steps() Creates a stepped timing function for animations
tan() Returns the tangent of a number
translate() Allows you to re-position
an element along the x- and y-axis
translateX() Allows you to re-position
an element along the x-axis
translateY() Allows you to re-position
an element along the y-axis
url() Allows you to include a file in the stylesheet
var() Inserts the value of a custom property

 

 

(0) دیدگاه برای این پست ثبت شده
دیدگاه خود را بفرستید
  1. اولین نفری باشید که دیدگاه خود را ثبت می کند!
« اینطوری تبدیل به ارباب حلقه ها شو تصویر اینطوری تبدیل به ارباب حلقه ها شو
افزودن فیلد کد ملی به برگه تسویه حساب ووکامرس »
Clicky