img

ساخت یک افکت پیش زمینه مایع با CSS

/
/
/
انتقال های Jse CSS برای ساخت یک افکت پیش زمین مایع با CSS در واکنش به یک واقعه شناور

۱- ساختار سند
با ایجاد یک سند HTML این پروژه را آغاز کیند. این مرحله ، ساختار سند HTML و بخش های داخلی آن برای عنوان و بدنه را تعریف می کند. از بخش عنوان برای ذخیره سازی توصیف های سند و همچنین پیوند ها به منابع داخلی ( در این حالت فایل CSS) استفاده می شود و این منابع در مرحله بعدی اضافه می شوند.

<!DOCTYPE html>
<html>
<head>
<title>Liquid Background</title>
<link rel=”stylesheet” type=”text/css”
href=”styles.css” />
</head>
<body>
*** STEP 2
</body>
</html>

۲- محتویات مسیر یابی
مسیر یابی استفاده شده در این مثال، از افکت مایع در زمان شناور کردن افکت برای کاربر بهره می برد. یک ظرف nav مورد استفاده قرار می گیرد که مجموعه از پیوند های مسیر یابی را شامل می شود. در داخل ظرف nav ، با دو عنصر span مانند اولین آیتم ها داشت( از آن ها برای افکت متحرک استفاده می شود). سومی عنصر span به عنوان یک ظرف برای پیوند ها استفاده می شود.

<nav>
<span></span>
<span></span>
<span>
<a href=”#first”>Option</a>
<a href=”#second”>Option</a>
<a href=”#third”>Option</a>
</span>
</nav>

۳-شروع سند سبک
بعد از تکمیل HTML، باید قوانین نمایش CSS را ایجاد کنید. این قوانین اولیه، محتویات را تعیین می کنند دکمه یک صفحه وب را با پیش زمیه سفید و متن سیاه به طور پیش فرض پوشش می دهد.

متن Chameleo
html,body{
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
background: #fff;
color: #000;
}

۴- ظرف مسیر یابی
به کد زیر توجه کنید.
ظرف مسیر یابی ، براساس ارتفاع خاص و پهنای کامل فضای در دسترس تعیین می شود. برای آن که محتویات ظرف با محتویات خارجی برخورد نداشته باشد، از لایه گزاری استفاده می شود. به علاوه، از تعیین موقعیت نسبی استفاده می شود به طوری که تصویر متحرک در نسبت با موقعیت مسیر یابی قرار گیرد.

nav{
position: relative;
display: block;
width: 100%;
padding: 2em;
text-align: center;
}

۵- عناصر مایع
تصویر متحرک مایع از دو عنصر اول درون ظرف مسیر یابی تشکیل شده است. با استفاده از انتخاب کننده کودک n ام فه این عناصر اشاره می شود که در آن ها از قوانین نمایش برای کودکان ۱ و ۲ استفاده می کنیم. این عنصر در شعاع مرز مدور ظاهر می شوند که از موقعیت یابی اولین خاص و پیش زمینه سیاه بهره می برند. یک قانون انتقال نیز مورد استفاده قرار می گیرد، به طوری که تغییرات در ارتفاع و تعیین موقعیت به صورت متحرک نمایش داده می شوند.

nav > *:nth-child(1),
nav > *:nth-child(2){
display: block;
position: absolute;
top: -2em;
left: 0;
z-index: 0;
width: 100%;
background: #000;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
height: 0em;
transition: height 3s, top 5s;
}

۶- تنظیم های مایع
کودک دوم داخل ظرف nav باید تنظیم شود( خصوصا طوری چرخانده شود به رو به روی عنصر بالایی قرار گیرد و براساس دکمه nav تعیین موقعیت صورت گیرد. زمانی nav اصلی شناور باشد، افکت تصویر متحرک با تغییر ارتفاع اولین و دومین عناصر کودک فعال می شود.

nav > *:nth-child(2){
transform: rotate(180deg);
top: unset;
bottom: 0;
}
nav:hover > *:nth-child(1),
nav:hover > *:nth-child(2){
height: 175%;
}

۷- ظرف پیوند
عنصر سوم در داخل ظرفnav برای کنترل پیوند های مسیر یابی استفاده می شود و این پیوند ها را در خود جای می دهد. با استفاده از این کار ، از پیوند های مختلف با دو عنصر اول کودک جلوگیری می شود ، از این عناصر برای پوشش پهنای کامل nav با z-index بالای عناصر متحرک مایع استفاده می شود.
این افکت ها می توانند قابلیت خوانش متن را کاهش دهند. می تواند با تغییر رنگ و اندازه در زمان استفاده از افکت این مشکل را حل کرد.

nav > *:nth-child(3){
display: block;
position: absolute;
width: 100%;
text-align: center;
z-index: 2; }

۸- پیوند های مسیر یابی
پیوند های مسیر یابی به طوری سبک بندی می شوند که بتوان آن ها را به طور پیش فرض به رنگ سیاه نمایش داد و همچنین ت زمانی که nav اصلی شناور باشد، بتوان تغییر آن ها را به رنگ سفید را متحرک ساخت. از این طریق زمانی که رنگ پیش زمینه با رنگ متن یکی شود، خواندن آن ها ممکن می شود.

nav a{
color: #000;
transition: color 5s;
text-decoration: none;
padding: 1em 2em;
margin-right: 1em;
}
nav:hover a{
color: #fff;
}
nav > a:hover{
border-bottom: .5em solid #c00;
}

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text