آموزش CSS - قسمت 5
نویسنده
صادق جعفری
تاریخ انتشار
چهارشنبه، 1403/05/03
تگ ها
#آموزش_CSS #گوشه‌های_گرد #border #image #multiple_background #کلمات_کلیدی_رنگ #گرادیان‌ها #افکت‌های_متن #ترنسفورم‌های_دو_بعدی #ترانزیشن‌ها #انیمیشن‌ها #Tooltip #صادق_جعفری

اشتراک گذاری
صادق جعفری
صادق جعفری

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

شبکه های اجتماعی من

سلام دوستان عزیز! صادق جعفری هستم و خوش‌آمدید به قسمت پنجم آموزش CSS. امروز می‌خواهیم با همدیگه به دنیای جذاب و رنگارنگ CSS سفر کنیم و مفاهیم جدید و پیشرفته‌تری رو یاد بگیریم. اول از همه با گوشه‌های گرد شروع می‌کنیم و می‌بینیم چطور می‌تونیم به المان‌های مختلف استایل خاصی بدیم. سپس به سراغ border-image می‌ریم و یاد می‌گیریم چطور از تصاویر برای خطوط دور المان‌ها استفاده کنیم.

پس زمینه‌های چندگانه و کلمات کلیدی رنگ رو بررسی می‌کنیم و بعدش وارد دنیای گرادیان‌ها می‌شیم تا ببینیم چطور می‌تونیم پس‌زمینه‌های جذاب و خاص ایجاد کنیم. افکت‌های متن و ترنسفورم‌های دو بعدی رو هم یاد می‌گیریم که به ما این امکان رو می‌ده تا متن‌ها و المان‌ها رو به شیوه‌های جالبی تغییر بدیم.

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

 

 

گوشه‌های گرد

یکی از ویژگی‌های جذاب در طراحی وب، گوشه‌های گرد یا همان border-radius است. این ویژگی به ما اجازه می‌دهد که گوشه‌های تیز المان‌ها را به صورت منحنی و گرد درآوریم و به طراحی ظاهری ملایم‌تر و مدرن‌تر بدهیم. در این بخش، با نحوه استفاده از border-radius آشنا می‌شویم و چند مثال کاربردی را بررسی می‌کنیم.

 

نحوه استفاده از border-radius

ویژگی border-radius به ما این امکان را می‌دهد که شعاع گوشه‌های یک المان را تعیین کنیم. این ویژگی می‌تواند برای همه گوشه‌ها یک مقدار یکسان داشته باشد یا برای هر گوشه به صورت جداگانه مقدار متفاوتی تعریف شود.

 

مثالی برای یک گوشه گرد ساده

در این مثال، یک المان div را با گوشه‌های گرد 10 پیکسل تعریف می‌کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .rounded-corner {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            border-radius: 10px; /* Rounded corners */
        }
    </style>
    <title>Rounded corners</title>
</head>
<body>
    <div class="rounded-corner"></div>
</body>
</html>

در اینجا، border-radius: 10px; به هر چهار گوشه المان div شعاع 10 پیکسل می‌دهد.

 

تعریف مقادیر مختلف برای هر گوشه

می‌توان برای هر گوشه به صورت جداگانه مقدار متفاوتی تعریف کرد. به عنوان مثال:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .different-corners {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            border-radius: 10px 20px 30px 40px; /* Different values ​​for each corner */
        }
    </style>
    <title>Different corners</title>
</head>
<body>
    <div class="different-corners"></div>
</body>
</html>

در اینجا، مقادیر 10px 20px 30px 40px به ترتیب برای گوشه‌های بالا-چپ، بالا-راست، پایین-راست و پایین-چپ تعریف شده‌اند.

 

مثال با استفاده از درصد

می‌توان از درصد برای تعریف گوشه‌های گرد استفاده کرد. به عنوان مثال، برای ایجاد یک دایره کامل از یک المان مربعی می‌توان از border-radius: 50%; استفاده کرد:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .circle {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            border-radius: 50%; /* full circle */
        }
    </style>
    <title>circle </title>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

در این مثال، استفاده از border-radius: 50%; باعث می‌شود که المان div به شکل دایره درآید.

 

 

خصوصیت border-image

خصوصیت border-image در CSS یکی از ابزارهای پیشرفته و قدرتمند برای ایجاد حاشیه‌های سفارشی با استفاده از تصاویر است. با این ویژگی می‌توانید تصاویر را به عنوان حاشیه برای عناصر HTML خود استفاده کنید، که این امر به طراحی‌های جذاب و منحصر به فرد منجر می‌شود.

 

نحوه استفاده از border-image

خصوصیت border-image شامل چندین زیرخصوصیت است که به شما امکان می‌دهند تا تصویر حاشیه را مشخص کنید، نحوه برش و تکرار تصویر را تعیین کنید و همچنین عرض حاشیه را تنظیم کنید. این زیرخصوصیت‌ها عبارتند از:

  1. border-image-source
  2. border-image-slice
  3. border-image-width
  4. border-image-outset
  5. border-image-repeat

 

مثال ساده

بیایید با یک مثال ساده شروع کنیم. فرض کنید یک تصویر به نام border.png دارید و می‌خواهید آن را به عنوان حاشیه یک div استفاده کنید.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .border-image-example {
            width: 300px;
            height: 200px;
            border: 10px solid transparent; /* Transparent border for image placement */
            border-image-source: url('border.png'); /* Border image source */
            border-image-slice: 30; /* Image cropping */
            border-image-width: 10px; /* margin width */
            border-image-outset: 0; /* Distance from element borders */
            border-image-repeat: stretch; /* Repeat or stretch the image */
        }
    </style>
    <title>Example image border</title>
</head>
<body>
    <div class="border-image-example"></div>
</body>
</html>

در این مثال:

  • border-image-source مسیر تصویر حاشیه را مشخص می‌کند.
  • border-image-slice مشخص می‌کند که تصویر حاشیه چگونه برش داده شود. مقدار 30 به این معنی است که 30 درصد از تصویر از هر طرف برش داده می‌شود.
  • border-image-width عرض حاشیه را تعیین می‌کند.
  • border-image-outset فاصله حاشیه از مرزهای عنصر را مشخص می‌کند.
  • border-image-repeat نحوه تکرار یا کشش تصویر را تعیین می‌کند. گزینه‌های آن عبارتند از stretch، repeat، round و space.

 

مثال پیشرفته‌تر

بیایید یک مثال پیشرفته‌تر را بررسی کنیم که در آن تصویر حاشیه به صورت تکراری استفاده می‌شود.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .border-image-repeat-example {
            width: 300px;
            height: 200px;
            border: 10px solid transparent; /* Transparent border for image placement */
            border-image-source: url('border-repeat.png'); /* Border image source */
            border-image-slice: 20; /* Image cropping */
            border-image-width: 10px; /* margin width */
            border-image-outset: 0; /* Distance from element borders */
            border-image-repeat: repeat; /* Repeat image */
        }
    </style>
    <title>Example of repeating the border of the image</title>
</head>
<body>
    <div class="border-image-repeat-example"></div>
</body>
</html>

در اینجا، border-image-repeat: repeat; باعث می‌شود که تصویر حاشیه به صورت تکراری در طول حاشیه عنصر استفاده شود.

 

 

پس‌زمینه‌های چندگانه در CSS (Multiple Backgrounds)

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

 

ویژگی‌های پس‌زمینه‌های چندگانه

برای استفاده از چندین پس‌زمینه، از خصوصیت‌های زیر استفاده می‌کنیم:

  1. background-size: برای تنظیم اندازه پس‌زمینه.
  2. background-origin: برای تعیین نقطه شروع پس‌زمینه.
  3. background-clip: برای تعیین ناحیه‌ای که پس‌زمینه در آن قرار می‌گیرد.

 

استفاده از چندین پس‌زمینه

برای استفاده از چندین پس‌زمینه، هر پس‌زمینه را با کاما از دیگری جدا می‌کنیم. بیایید با یک مثال شروع کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .multiple-backgrounds {
            width: 300px;
            height: 300px;
            background-image: url('background1.png'), url('background2.png'); /* Use two background images */
            background-position: top left, bottom right; /* The position of each background */
            background-repeat: no-repeat, no-repeat; /* No repetition of any background */
        }
    </style>
    <title>Multiple backgrounds</title>
</head>
<body>
    <div class="multiple-backgrounds"></div>
</body>
</html>

در این مثال:

  • background-image دو تصویر پس‌زمینه background1.png و background2.png را برای عنصر تعریف کرده است.
  • background-position موقعیت هر تصویر را مشخص کرده است: تصویر اول در بالا و چپ، و تصویر دوم در پایین و راست قرار گرفته است.
  • background-repeat تعیین کرده که هر دو تصویر پس‌زمینه تکرار نشوند.

 

استفاده از background-size

خصوصیت background-size برای تنظیم اندازه پس‌زمینه‌ها استفاده می‌شود. بیایید مثالی را ببینیم:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .background-size-example {
            width: 300px;
            height: 300px;
            background-image: url('background1.png'), url('background2.png');
            background-size: 50px 50px, 100px 100px; /* Adjust the size of each background */
            background-position: top left, bottom right;
            background-repeat: no-repeat, no-repeat;
        }
    </style>
    <title>Background size</title>
</head>
<body>
    <div class="background-size-example"></div>
</body>
</html>

در این مثال، background-size اندازه پس‌زمینه‌ها را به ترتیب 50x50 پیکسل و 100x100 پیکسل تنظیم کرده است.

 

استفاده از background-origin

خصوصیت background-origin مشخص می‌کند که نقطه شروع پس‌زمینه کجا باشد. گزینه‌های آن شامل padding-box، border-box و content-box است. بیایید یک مثال دیگر را بررسی کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .background-origin-example {
            width: 300px;
            height: 300px;
            padding: 20px;
            border: 10px solid black;
            background-image: url('background1.png'), url('background2.png');
            background-origin: padding-box, border-box; /* The starting point of the background */
            background-position: top left, bottom right;
            background-repeat: no-repeat, no-repeat;
        }
    </style>
    <title>The starting point of the background</title>
</head>
<body>
    <div class="background-origin-example"></div>
</body>
</html>

در این مثال:

  • background-origin: padding-box برای تصویر اول و border-box برای تصویر دوم تعیین شده است.

 

استفاده از background-clip

خصوصیت background-clip مشخص می‌کند که پس‌زمینه در کدام قسمت عنصر نمایش داده شود. بیایید مثالی دیگر را بررسی کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .background-clip-example {
            width: 300px;
            height: 300px;
            padding: 20px;
            border: 10px solid black;
            background-image: url('background1.png'), url('background2.png');
            background-clip: content-box, padding-box; /* Background display area */
            background-position: top left, bottom right;
            background-repeat: no-repeat, no-repeat;
        }
    </style>
    <title>Background display area</title>
</head>
<body>
    <div class="background-clip-example"></div>
</body>
</html>

در این مثال:

background-clip: content-box برای تصویر اول و padding-box برای تصویر دوم تعیین شده است.

 

استفاده از پس‌زمینه‌های چندگانه در CSS امکان ایجاد طراحی‌های پیچیده و زیبا را به شما می‌دهد. با استفاده از خصوصیت‌های background-size، background-origin و background-clip می‌توانید کنترل کاملی بر روی نحوه نمایش پس‌زمینه‌های خود داشته باشید.

 

 

کلمات کلیدی رنگ

در CSS، کلمات کلیدی رنگی مانند transparent، currentColor و inherit برای ایجاد جلوه‌های خاص و انتقال خصوصیات رنگی استفاده می‌شوند. این کلمات کلیدی به شما کمک می‌کنند تا کنترل بهتری بر رنگ‌ها و استایل‌های خود داشته باشید.

 

1. transparent

کلمه کلیدی transparent به معنای شفافیت کامل است. این کلمه باعث می‌شود که عنصر به صورت کاملاً شفاف نمایش داده شود و محتوای زیرین آن دیده شود.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .transparent-box {
            width: 200px;
            height: 200px;
            background-color: transparent;
            border: 2px solid black;
        }
    </style>
    <title>transparency</title>
</head>
<body>
    <div class="transparent-box">This is a transparent box.</div>
</body>
</html>

در این مثال، background-color: transparent باعث می‌شود که پس‌زمینه جعبه شفاف باشد و تنها مرز آن نمایش داده شود.

 

2. currentColor

کلمه کلیدی currentColor برای ارث‌بری رنگ فعلی متن (color) عنصر استفاده می‌شود. این قابلیت به شما اجازه می‌دهد تا رنگ‌های دیگر خصوصیات (مانند border یا background) را با رنگ متن هماهنگ کنید.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .current-color-box {
            color: blue;
            border: 2px solid currentColor;
            padding: 20px;
        }
    </style>
    <title>Current color</title>
</head>
<body>
    <div class="current-color-box">This box matches the color of the text.</div>
</body>
</html>

در این مثال، border: 2px solid currentColor باعث می‌شود که رنگ مرز جعبه با رنگ متن (color: blue) هماهنگ باشد.

 

3. inherit

کلمه کلیدی inherit برای ارث‌بری خصوصیات CSS از عنصر والد استفاده می‌شود. این کلمه می‌تواند برای هر خصوصیت CSS، از جمله رنگ، استفاده شود.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .parent {
            color: red;
        }
        .child {
            color: inherit;
            border: 2px solid inherit;
        }
    </style>
    <title>inheritance</title>
</head>
<body>
    <div class="parent">
        This text is red.
        <div class="child">This text is also red and its border is also red.</div>
    </div>
</body>
</html>

در این مثال، color: inherit و border: 2px solid inherit باعث می‌شوند که رنگ متن و مرز عنصر فرزند با رنگ عنصر والد (color: red) هماهنگ باشند.

 

 

پس‌زمینه‌های Gradients

در CSS، گرادینت‌ها یا شیب‌های رنگی به شما اجازه می‌دهند تا پس‌زمینه‌هایی با انتقال نرم و هموار بین دو یا چند رنگ ایجاد کنید. این ویژگی‌ها می‌توانند به طراحی شما جذابیت و عمق بیشتری ببخشند. CSS از سه نوع گرادینت پشتیبانی می‌کند: خطی (Linear), شعاعی (Radial)، و مخروطی (Conic).

 

1. گرادینت خطی (Linear Gradient)

گرادینت خطی از یک نقطه شروع به یک نقطه پایان امتداد می‌یابد و در طول مسیر خود از یک رنگ به رنگ دیگر تغییر می‌کند.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .linear-gradient {
            height: 200px;
            background: linear-gradient(to right, red, yellow);
        }
    </style>
    <title>Linear gradient</title>
</head>
<body>
    <div class="linear-gradient"></div>
</body>
</html>

در این مثال، گرادینت از رنگ قرمز در سمت چپ شروع شده و به رنگ زرد در سمت راست ختم می‌شود.

 

2. گرادینت شعاعی (Radial Gradient)

گرادینت شعاعی از یک نقطه مرکزی شروع شده و به سمت بیرون گسترش می‌یابد.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .radial-gradient {
            height: 200px;
            background: radial-gradient(circle, red, yellow);
        }
    </style>
    <title>Radial Gradient</title>
</head>
<body>
    <div class="radial-gradient"></div>
</body>
</html>

در این مثال، گرادینت از مرکز شروع شده و به سمت بیرون به رنگ زرد تغییر می‌کند.

 

3. گرادینت مخروطی (Conic Gradient)

گرادینت مخروطی از مرکز شروع شده و به صورت زاویه‌ای تغییر رنگ می‌دهد.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .conic-gradient {
            height: 200px;
            background: conic-gradient(red, yellow, green);
        }
    </style>
    <title>Conic Gradient</title>
</head>
<body>
    <div class="conic-gradient"></div>
</body>
</html>

در این مثال، گرادینت از مرکز به صورت زاویه‌ای از رنگ قرمز به زرد و سپس به سبز تغییر می‌کند.

 

نحوه استفاده از گرادینت‌ها

برای استفاده از گرادینت‌ها در CSS، باید از تابع‌های linear-gradient، radial-gradient یا conic-gradient در خصوصیت background استفاده کنید. هر تابع چندین آرگومان می‌پذیرد که شامل رنگ‌ها و نقاط شروع و پایان گرادینت هستند.

مثال ترکیبی:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .combined-gradient {
            height: 200px;
            background: linear-gradient(to right, red, yellow),
                        radial-gradient(circle, blue, green);
            background-blend-mode: multiply;
        }
    </style>
    <title>Blended gradient</title>
</head>
<body>
    <div class="combined-gradient"></div>
</body>
</html>

در این مثال، دو گرادینت خطی و شعاعی با هم ترکیب شده‌اند و با استفاده از خصوصیت background-blend-mode، حالت ترکیب آن‌ها تعیین شده است.

 

 

سایه‌ها در CSS

سایه‌ها در CSS ابزاری بسیار قدرتمند و جذاب هستند که به طراحان وب کمک می‌کنند تا عمق و بعد بیشتری به عناصر مختلف صفحه وب بدهند. دو نوع سایه اصلی در CSS وجود دارد: سایه متن (Text Shadow) و سایه جعبه (Box Shadow). در اینجا به بررسی این دو نوع سایه می‌پردازیم و مثال‌هایی از هر کدام ارائه می‌دهیم.

 

سایه متن (Text Shadow)

سایه متن به شما اجازه می‌دهد که به متون خود سایه اضافه کنید، که این کار می‌تواند به زیبایی و خوانایی متن کمک کند.

text-shadow: x-offset y-offset blur-radius color;
  • x-offset: فاصله افقی سایه از متن (مثبت برای سمت راست و منفی برای سمت چپ).
  • y-offset: فاصله عمودی سایه از متن (مثبت برای پایین و منفی برای بالا).
  • blur-radius: شعاع تاری سایه (اختیاری).
  • color: رنگ سایه.

 

مثال:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .text-shadow {
            font-size: 2em;
            color: black;
            text-shadow: 2px 2px 5px red;
        }
    </style>
    <title>Text shadow</title>
</head>
<body>
    <p class="text-shadow">This is a shaded text.</p>
</body>
</html>

در این مثال، متن دارای یک سایه قرمز با فاصله 2px به سمت راست و پایین و شعاع تاری 5px است.

 

سایه جعبه (Box Shadow)

سایه جعبه به شما امکان می‌دهد که به عناصر جعبه‌ای (مانند div‌ها، تصاویر و غیره) سایه اضافه کنید.

box-shadow: x-offset y-offset blur-radius spread-radius color;
  • x-offset: فاصله افقی سایه از جعبه.
  • y-offset: فاصله عمودی سایه از جعبه.
  • blur-radius: شعاع تاری سایه (اختیاری).
  • spread-radius: میزان گستردگی سایه (اختیاری).
  • color: رنگ سایه.

 

مثال:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box-shadow {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            box-shadow: 5px 5px 10px gray;
        }
    </style>
    <title>Box Shadow</title>
</head>
<body>
    <div class="box-shadow"></div>
</body>
</html>

در این مثال، یک جعبه با سایه خاکستری با فاصله 5px به سمت راست و پایین و شعاع تاری 10px داریم.

 

ترکیب سایه‌ها

شما می‌توانید چندین سایه متن یا جعبه را با هم ترکیب کنید تا افکت‌های پیچیده‌تری بسازید.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .multiple-text-shadow {
            font-size: 2em;
            color: black;
            text-shadow: 1px 1px 2px red, 2px 2px 5px blue, -1px -1px 0 white;
        }

        .multiple-box-shadow {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            box-shadow: 3px 3px 5px gray, -3px -3px 5px lightgray;
        }
    </style>
    <title>Combination of shadows</title>
</head>
<body>
    <p class="multiple-text-shadow">This is a text with mixed shadows.</p>
    <div class="multiple-box-shadow"></div>
</body>
</html>

در این مثال، متن دارای سه سایه مختلف است و جعبه نیز دارای دو سایه در جهت‌های مختلف می‌باشد.

 

 

افکت‌های متن در CSS

CSS ویژگی‌های مختلفی را برای مدیریت و افکت‌دهی به متن‌ها ارائه می‌دهد. در این بخش به بررسی چندین ویژگی مفید برای افکت‌های متن می‌پردازیم که شامل text-overflow، word-wrap، word-break و writing-mode می‌باشد.

1. ویژگی text-overflow

ویژگی text-overflow زمانی استفاده می‌شود که متن از فضای مشخص‌شده خارج می‌شود و به دو حالت clip و ellipsis تقسیم می‌شود.

.text-overflow-clip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.text-overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

مثال:

<div class="text-overflow-clip" style="width: 150px; border: 1px solid black;">
    This is a very long text that will be clipped.
</div>
<div class="text-overflow-ellipsis" style="width: 150px; border: 1px solid black;">
    This is a very long text that will show ellipsis...
</div>

 

2. ویژگی word-wrap

ویژگی word-wrap (یا overflow-wrap) به مرورگر اجازه می‌دهد که کلمات را در صورت نیاز بشکند تا از جعبه‌ی خود خارج نشوند.

.word-wrap {
    word-wrap: break-word; /* or overflow-wrap: break-word; */
}

مثال:

<div class="word-wrap" style="width: 150px; border: 1px solid black;">
    Thisisaverylongwordthatwillbewrappedtothenextline.
</div>

 

3. ویژگی word-break

ویژگی word-break مشخص می‌کند که چگونه کلمات شکسته شوند و به خط بعدی منتقل شوند. سه مقدار normal، break-all و keep-all وجود دارند.

.word-break-normal {
    word-break: normal;
}

.word-break-break-all {
    word-break: break-all;
}

.word-break-keep-all {
    word-break: keep-all;
}

مثال:

<div class="word-break-normal" style="width: 150px; border: 1px solid black;">
    Thisisaverylongwordthatwillbebrokenifneeded.
</div>
<div class="word-break-break-all" style="width: 150px; border: 1px solid black;">
    Thisisaverylongwordthatwillbebrokenifneeded.
</div>
<div class="word-break-keep-all" style="width: 150px; border: 1px solid black;">
    这是一个非常长的中文句子不会被拆分。
</div>

 

4. ویژگی writing-mode

ویژگی writing-mode جهت نوشتن متن را مشخص می‌کند که می‌تواند افقی یا عمودی باشد.

.writing-mode-horizontal {
    writing-mode: horizontal-tb;
}

.writing-mode-vertical-rl {
    writing-mode: vertical-rl;
}

.writing-mode-vertical-lr {
    writing-mode: vertical-lr;
}

مثال:

<div class="writing-mode-horizontal" style="width: 150px; border: 1px solid black;">
    This text is written horizontally.
</div>
<div class="writing-mode-vertical-rl" style="height: 150px; border: 1px solid black;">
    This text is written vertically from right to left.
</div>
<div class="writing-mode-vertical-lr" style="height: 150px; border: 1px solid black;">
    This text is written vertically from left to right.
</div>

با استفاده از این ویژگی‌های CSS، می‌توانید کنترل بیشتری بر نحوه نمایش و مدیریت متن‌ها در صفحات وب داشته باشید. این ویژگی‌ها به شما امکان می‌دهند تا متن‌های طولانی را مدیریت کنید، کلمات را بشکنید، جهت نوشتن متن را تغییر دهید و نمایش متون را بهبود ببخشید. این توانایی‌ها به طراحی‌های وب شما حرفه‌ای‌تر و جذاب‌تر کمک می‌کند.

 

 

Transform‌های دو بعدی

ویژگی‌های Transform دو بعدی در CSS به شما اجازه می‌دهند که عناصر HTML را بدون تاثیر بر جایگاه دیگر عناصر، بچرخانید، مقیاس دهید، تغییر مکان دهید و یا منحرف کنید. این قابلیت‌ها امکان ایجاد انیمیشن‌ها و افکت‌های گرافیکی جالبی را به شما می‌دهند. در این بخش به بررسی چندین نوع transform دو بعدی می‌پردازیم.

1. translate

ویژگی translate به شما اجازه می‌دهد که یک عنصر را در محور x و y جابجا کنید.

.translate-example {
    transform: translate(50px, 100px);
}

مثال:

<div class="translate-example" style="width: 100px; height: 100px; background-color: red;">
    Translate
</div>

 

2. rotate

ویژگی rotate یک عنصر را حول یک نقطه مرکزی می‌چرخاند. مقدار زاویه‌ای بر حسب درجه (deg) مشخص می‌شود.

.rotate-example {
    transform: rotate(45deg);
}

مثال:

<div class="rotate-example" style="width: 100px; height: 100px; background-color: blue;">
    Rotate
</div>

 

3. scale

ویژگی scale اندازه یک عنصر را در محور x و y تغییر می‌دهد. این ویژگی می‌تواند به طور جداگانه یا همزمان برای هر دو محور اعمال شود.

.scale-example {
    transform: scale(1.5, 0.5);
}

مثال:

<div class="scale-example" style="width: 100px; height: 100px; background-color: green;">
    Scale
</div>

 

4. skew

ویژگی skew یک عنصر را در محور x و y منحرف می‌کند. مقدار انحراف بر حسب درجه (deg) مشخص می‌شود.

.skew-example {
    transform: skew(30deg, 20deg);
}

مثال:

<div class="skew-example" style="width: 100px; height: 100px; background-color: yellow;">
    Skew
</div>

 

5. ترکیب Transform‌ها

شما می‌توانید چندین transform را با هم ترکیب کنید تا افکت‌های پیچیده‌تری ایجاد کنید.

.combined-transform-example {
    transform: translate(50px, 50px) rotate(45deg) scale(1.2);
}

مثال:

<div class="combined-transform-example" style="width: 100px; height: 100px; background-color: purple;">
    Combined Transform
</div>

 

استفاده از transform‌های دو بعدی در CSS به شما این امکان را می‌دهد که عناصر را به راحتی جابجا، چرخانده، مقیاس‌بندی و منحرف کنید. این ویژگی‌ها ابزار قدرتمندی برای ایجاد انیمیشن‌ها و افکت‌های گرافیکی زیبا و پویا در صفحات وب هستند. با ترکیب این ویژگی‌ها می‌توانید افکت‌های منحصر به فرد و جذابی بسازید که تجربه کاربری را بهبود ببخشند و طراحی شما را حرفه‌ای‌تر کنند.

 

 

Transition ها در CSS

Transitionها در CSS به شما این امکان را می‌دهند که تغییرات در سبک‌های CSS به طور صاف و روان انجام شوند. با استفاده از Transition، می‌توانید افکت‌های انیمیشنی ساده و زیبا ایجاد کنید که تجربه کاربری را بهبود می‌بخشند. در این بخش به بررسی ویژگی‌های مختلف Transition و نحوه استفاده از آنها با مثال‌های کدنویسی می‌پردازیم.

1. ویژگی‌های Transition

 

a. transition-property

این ویژگی مشخص می‌کند که کدام خاصیت CSS باید در طول Transition تغییر کند.

transition-property: width;

 

b. transition-duration

این ویژگی مدت زمان اجرای Transition را تعیین می‌کند.

transition-duration: 2s;

 

c. transition-timing-function

این ویژگی تعیین می‌کند که Transition با چه سرعتی در طول زمان انجام شود. برخی از مقادیر رایج عبارتند از ease, linear, ease-in, ease-out, ease-in-out.

transition-timing-function: ease;

 

d. transition-delay

این ویژگی مدت زمانی را تعیین می‌کند که قبل از شروع Transition صبر می‌کند.

transition-delay: 1s;

 

2. مثال‌های کدنویسی

مثال 1: تغییر عرض یک عنصر

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition-property: width;
            transition-duration: 2s;
            transition-timing-function: ease-in-out;
        }

        .box:hover {
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

در این مثال، با قرار دادن ماوس بر روی .box، عرض آن به آرامی از 100px به 200px تغییر می‌کند.

 

مثال 2: تغییر رنگ و چرخش یک عنصر

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: background-color 1s, transform 1s;
        }

        .box:hover {
            background-color: green;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

در این مثال، با قرار دادن ماوس بر روی .box، رنگ پس‌زمینه آن به رنگ سبز تغییر می‌کند و همزمان به اندازه 45 درجه چرخانده می‌شود.

 

3. استفاده از Shorthand برای Transition

شما می‌توانید تمام ویژگی‌های Transition را به صورت کوتاه شده در یک خط تعریف کنید.

transition: property duration timing-function delay;

 

مثال 3: استفاده از shorthand

.box {
    width: 100px;
    height: 100px;
    background-color: purple;
    transition: width 2s ease-in-out 1s, background-color 2s ease-in-out 1s;
}

.box:hover {
    width: 200px;
    background-color: yellow;
}

در این مثال، تغییر عرض و رنگ پس‌زمینه همزمان با تاخیر یک ثانیه و به مدت دو ثانیه انجام می‌شود.

 

 

انیمیشن‌ها در CSS

انیمیشن‌ها در CSS به شما اجازه می‌دهند تا حرکت‌های پیچیده و جذاب را بدون نیاز به استفاده از جاوا اسکریپت پیاده‌سازی کنید. با استفاده از ویژگی‌های انیمیشن در CSS، می‌توانید تغییرات تدریجی در استایل‌های یک عنصر را بر اساس کلید فریم‌ها (keyframes) تعریف کنید.

1. ویژگی‌های انیمیشن

a. @keyframes

این ویژگی مجموعه‌ای از مراحل (کلید فریم‌ها) را تعریف می‌کند که انیمیشن باید از آنها پیروی کند.

@keyframes example {
    0% { background-color: red; left: 0px; top: 0px; }
    25% { background-color: yellow; left: 200px; top: 0px; }
    50% { background-color: blue; left: 200px; top: 200px; }
    75% { background-color: green; left: 0px; top: 200px; }
    100% { background-color: red; left: 0px; top: 0px; }
}

 

b. animation-name

نام انیمیشن را مشخص می‌کند که با @keyframes تعریف شده است.

animation-name: example;

 

c. animation-duration

مدت زمان اجرای انیمیشن را تعیین می‌کند.

animation-duration: 4s;

 

d. animation-timing-function

تعیین می‌کند که چگونه انیمیشن به مرور زمان تغییر کند.

animation-timing-function: linear;

 

e. animation-delay

مدت زمانی که قبل از شروع انیمیشن صبر می‌کند.

animation-delay: 1s;

 

f. animation-iteration-count

تعداد دفعات تکرار انیمیشن را تعیین می‌کند.

animation-iteration-count: infinite;

 

g. animation-direction

تعیین می‌کند که انیمیشن به جلو، به عقب یا به هر دو صورت اجرا شود.

animation-direction: alternate;

 

2. مثال‌های کدنویسی

مثال 1: انیمیشن تغییر رنگ و حرکت

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @keyframes example {
            0% { background-color: red; left: 0px; top: 0px; }
            25% { background-color: yellow; left: 200px; top: 0px; }
            50% { background-color: blue; left: 200px; top: 200px; }
            75% { background-color: green; left: 0px; top: 200px; }
            100% { background-color: red; left: 0px; top: 0px; }
        }

        .box {
            width: 100px;
            height: 100px;
            position: relative;
            animation-name: example;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

در این مثال، عنصر .box به طور مداوم تغییر رنگ داده و به چهار گوشه یک مربع حرکت می‌کند.

 

مثال 2: انیمیشن تغییر اندازه و شفافیت

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @keyframes sizeOpacity {
            0% { width: 100px; height: 100px; opacity: 1; }
            50% { width: 200px; height: 200px; opacity: 0.5; }
            100% { width: 100px; height: 100px; opacity: 1; }
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: purple;
            animation: sizeOpacity 3s infinite;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

در این مثال، عنصر .box به طور مداوم اندازه و شفافیت خود را تغییر می‌دهد.

 

3. استفاده از Shorthand برای انیمیشن

شما می‌توانید تمام ویژگی‌های انیمیشن را به صورت shorthand در یک خط تعریف کنید.

animation: name duration timing-function delay iteration-count direction;

 

مثال 3: استفاده از shorthand

@keyframes slide {
    from { left: 0px; }
    to { left: 200px; }
}

.box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: green;
    animation: slide 2s linear 1s infinite alternate;
}

در این مثال، عنصر .box به طور مداوم به سمت چپ و راست حرکت می‌کند.

 

 

Tooltip در CSS

Tooltip یکی از عناصر رابط کاربری است که وقتی کاربر بر روی یک عنصر خاص مانند یک دکمه، لینک یا تصویر قرار می‌گیرد، نمایش داده می‌شود. این ابزارک معمولاً برای نمایش اطلاعات اضافی یا توضیحات کوتاه استفاده می‌شود. با استفاده از CSS می‌توانید Tooltip های زیبا و کاربردی ایجاد کنید.

 

ساختار Tooltip

یک Tooltip معمولاً شامل دو بخش است:

  1. عنصری که Tooltip به آن تعلق دارد (مثلاً یک دکمه یا لینک)
  2. خود Tooltip که هنگام قرار گرفتن ماوس بر روی عنصر نمایش داده می‌شود

 

مثال ساده از Tooltip

در این مثال، ما یک دکمه خواهیم داشت که هنگام قرار گرفتن ماوس بر روی آن، یک Tooltip ظاهر می‌شود.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%; /* Location Tooltip */
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>

<div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

توضیحات مثال

  • .tooltip: این کلاس به عنصر اصلی (مثلاً دکمه یا لینک) تعلق دارد.
  • .tooltip .tooltiptext: این کلاس به متن Tooltip تعلق دارد.
    • visibility: hidden: پنهان کردن Tooltip در حالت عادی.
    • position: absolute: موقعیت دهی Tooltip به صورت مطلق.
    • z-index: 1: اطمینان از اینکه Tooltip بالای عناصر دیگر نمایش داده می‌شود.
    • transition: opacity 0.3s: ایجاد انیمیشن برای ظاهر و پنهان شدن Tooltip.
  • .tooltip:hover .tooltiptext: هنگام قرار گرفتن ماوس روی عنصر اصلی، Tooltip نمایش داده می‌شود.

 

مثال Tooltip با پیکان

برای ایجاد یک Tooltip با پیکان به سمت عنصر اصلی، می‌توانیم از CSS اضافی استفاده کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 140px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%; /* Location Tooltip */
            left: 50%;
            margin-left: -70px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%; /* Down Tooltip */
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>

<div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip with arrow</span>
</div>

</body>
</html>

توضیحات مثال

  • .tooltip .tooltiptext::after: این بخش پیکان Tooltip را ایجاد می‌کند.
    • border-width: 5px: عرض و ارتفاع پیکان.
    • border-style: solid: سبک پیکان.
    • border-color: black transparent transparent transparent: رنگ پیکان به طوری که تنها بخش بالایی آن رنگی باشد و بقیه شفاف باشند.

 

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

به همین سادگی، الان دیگه می‌تونیم صفحات وب‌مون رو با این تکنیک‌های جذاب و مدرن، حرفه‌ای‌تر و کاربرپسندتر کنیم. منتظر قسمت بعدی باشید تا با هم بیشتر در دنیای CSS غرق بشیم و کلی چیزهای جالب دیگه یاد بگیریم. ممنون که همراه من بودید!

ارسال دیدگاه