نحوه استفاده از Opacity و Transparency برای ایجاد یک Modal در CSS
ورود به سایت
معرفی
هنگام استایل‌سازی HTML با CSS، راه‌های متعددی برای تنظیم شفافیت عناصر و دلایل متعددی برای استفاده از این افکت در طراحی وجود دارد. کدورت می‌تواند به نرم کردن سایه، کاهش تاکید بر محتوای غیر ضروری در طول یک کار خاص، یا محو کردن محتوا در داخل یا خارج از دید کمک کند. شما می‌توانید این افکت‌ها را با ویژگی opacity، نام رنگ شفاف یا کانال‌های آلفا، که بسط مقادیر رنگ با یک بخش اضافی برای کنترل کدورت هستند، انجام دهید.
در طول این آموزش، شما از روش‌های مختلفی برای اعمال کدورت و خواص اضافی برای انجام مؤثر جلوه‌های خاص استفاده خواهید کرد. شما یک مودال ایجاد خواهید کرد که با رویکرد بدون جاوا اسکریپت با استفاده از کلاس شبه :target و ویژگی های opacity، pointer-events و transition ظاهر می شود. سپس از هر یک از مقادیر رنگ کانال آلفا برای ایجاد همپوشانی سایه، حاشیه و محتوا استفاده خواهید کرد. شما همچنین از مقدار رنگ شفاف برای کمک به ایجاد شیب متحرک رنگ ها در یک رویداد :hover استفاده خواهید کرد.
پیش نیازها
- درک درستی از ویژگی‌های آبشار و ویژگی‌های CSS، که می‌توانید با خواندن نحوه اعمال سبک‌های CSS در HTML با Cascade و Specificity به آن دست پیدا کنید.
- آشنایی با انتخابگرهای نوع، انتخابگرهای ترکیب‌کننده و گروه‌های انتخابگر، که می‌توانید در نحوه انتخاب عناصر HTML به سبک با CSS بیابید.
- درک خواص رنگ .
- آشنایی با گرادیان های CSS با ویژگی های پس زمینه. نحوه اعمال سبک‌های پس‌زمینه به عناصر HTML با CSS را بررسی کنید تا تجربه ایجاد پس‌زمینه گرادیان را به دست آورید.
- ویژگی box-shadow را تجربه کنید،
- یک فایل HTML خالی که در دستگاه محلی شما به عنوان index.html ذخیره شده است که می توانید از ویرایشگر متن و مرورگر وب انتخابی خود به آن دسترسی داشته باشید. برای شروع، آموزش نحوه تنظیم پروژه HTML خود را بررسی کنید و نحوه استفاده و درک عناصر HTML را برای دستورالعمل‌هایی در مورد نحوه مشاهده HTML خود در مرورگر خود دنبال کنید. اگر در HTML تازه کار هستید، کل نحوه ساخت یک وب سایت در سری HTML را امتحان کنید.
راه اندازی پایه HTML و CSS
در این بخش اول، HTML را برای سبک های بصری که در طول آموزش خواهید نوشت، تنظیم خواهید کرد. شما همچنین فایل styles.css خود را ایجاد کرده و سبک هایی را اضافه می کنید که طرح بندی محتوا را تنظیم می کند.
برای شروع، فایل index.html را در ویرایشگر متن خود باز کنید. سپس HTML زیر را به فایل اضافه کنید:
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Destination: Moon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
چندین تنظیمات صفحه در عنصر <head> HTML تعریف شده است. عنصر <meta> مجموعه کاراکتری را برای استفاده از متن تعریف می‌کند، که به مرورگر می‌گوید چگونه کاراکترهای خاص را بدون استفاده از کدهای کاراکتر HTML تفسیر کند. عنصر <title> عنوان صفحه را در اختیار مرورگر قرار می دهد. عناصر <link> در سبک های صفحه بارگیری می شوند. سه مورد اول در فونت، Museo Moderno، از فونت‌های Google بارگیری می‌شوند، و آخرین مورد، سبک‌هایی را که به styles.css اضافه می‌کنید، بارگیری می‌کند.
در مرحله بعد، صفحه برای استایل دادن به محتوا نیاز دارد. شما از محتوای نمونه از Sagan Ipsum به عنوان کپی پرکننده برای استفاده با سبک ها استفاده خواهید کرد. شما همچنین HTML را برای سرصفحه سایت، حاوی نام سایت و یک نوار ناوبری کوچک اعمال خواهید کرد. در ویرایشگر متن خود به index.html برگردید و HTML برجسته شده را از بلوک کد زیر اضافه کنید:
index.html
<!doctype html>
<html>
<head>
...
</head>
<body>
<header class="site-header">
<h1 class="site-name">Destination: <strong>Moon</strong></h1>
<nav>
<ul class="nav-list">
<li><a href="#" class="nav-link">Base Station</a></li>
<li><a href="#" class="nav-link">Travel Packages</a></li>
<li><a href="#" class="nav-link">Accommodations</a></li>
<li><a href="#" class="nav-link">Plan Your Trip</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Schedule Your Trip</h2>
<p>Sea of Tranquility great turbulent clouds with pretty stories for which there's little good evidence extraordinary claims require extraordinary evidence. Citizens of distant epochs rings of Uranus intelligent beings birth take root and flourish across the centuries. Corpus callosum invent the universe as a patch of light the only home we've ever known a mote of dust suspended in a sunbeam made in the interiors of collapsing stars. Kindling the energy hidden in matter Orion's sword.</p>
<p>Vastness is bearable only through love emerged into consciousness not a sunrise but a galaxyrise emerged into consciousness courage of our questions across the centuries and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
<a href="#" class="button">Read the Disclaimer!</a>
</section>
</main>
</body>
</html>
حتما فایل index.html خود را ذخیره کنید و آن را در ویرایشگر متن خود باز بگذارید. سپس یک فایل جدید به نام styles.css ایجاد کنید و آن را در ویرایشگر متن باز کنید. این فایلی است که در عنصر <head> index.html ارجاع داده شده است. در فایل styles.css کد زیر را اضافه کنید:
styles.css
body {
margin: 0;
font: 100%/1.5 sans-serif;
}
main {
margin: 6rem auto;
width: 75ch;
font-size: 1.125rem;
}
h2 {
font: 400 1.875rem/1.25 MuseoModerno, sans-serif;
color: #6b2d6b;
}
.site-header {
font: 1.125rem / 1.25 MuseoModerno, sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
color: white;
background: linear-gradient(135deg, #8e3d8e, #230f23);
}
.site-name {
margin: 0;
font-size: 1.75rem;
font-weight: 400;
}
.nav-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: stretch;
}
.nav-link {
color: inherit;
display: block;
text-decoration: none;
padding: 1.25rem 1.5rem;
}
.nav-link:hover,
.nav-link:focus {
color: #230f23;
background-color: white;
}
.button {
text-decoration: none;
display: inline-block;
padding: 0.5rem 1.25rem;
color: white;
background: #4c90b2;
border: 1px solid #2d566b;
border-radius: 0.5rem;
}
.button:hover,
.button:focus {
background-color: #2d566b;
}
این سبک‌ها زیبایی‌شناسی و چیدمان کلی صفحه را با سبک‌های اعمال شده روی بدنه و عناصر اصلی تنظیم می‌کنند. انتخابگرهای .site-header، site-name، .nav-list و .nav-link همگی سبک ها را در سرصفحه صفحه تعریف می کنند. قوانین .button و .button:hover یک عنصر <a> را تغییر می دهند تا مانند یک دکمه بزرگ و قابل کلیک ظاهر شود.
تغییرات خود را در styles.css ذخیره کنید، سپس یک مرورگر وب باز کنید. آیتم منوی File را انتخاب کرده و سپس گزینه Open را انتخاب کنید. سپس به پوشه پروژه خود بروید و فایل index.html خود را در مرورگر بارگذاری کنید. تصویر زیر نحوه نمایش صفحه در مرورگر را نشان می دهد:
CSS که تا به حال نوشته اید یک هدر بنفش در بالای صفحه با عنوان سایت و پیمایش در متن سفید ایجاد می کند. در زیر، محتوا از یک عنوان بنفش و دو پاراگراف متن تشکیل شده است. عرض محتوا به 75 کاراکتر با مقدار ویژگی max-width: 76ch در انتخابگر عنصر اصلی محدود شده است. در نهایت، دکمه آبی با متن Read the Disclaimer! یک عنصر بزرگ و تعاملی در زیر محتوا است.
در سراسر این بخش شما HTML خود را در فایل index.html تنظیم کرده و سبک های پایه را در فایل styles.css ایجاد می کنید. در بخش بعدی، از ویژگی opacity برای ناپدید شدن یک عنصر جدید و ظاهر شدن مجدد با کلاس :target شبه استفاده خواهید کرد.
ایجاد :target State با opacity برای نمایش و پنهان کردن عناصر
یکی از کاربردهای مفید ویژگی opacity این است که باعث محو شدن و محو شدن محتوا در صفحه می شود. یکی از نمونه‌های چنین جلوه‌ای زمانی است که یک مودال، یک عنصر رابط کاربری (که به عنوان جعبه نور نیز شناخته می‌شود) که در جلوی بقیه محتوای صفحه شما ظاهر می‌شود، به نمایش تبدیل می‌شود. می توانید این افکت را با ترکیبی از ویژگی های opacity و pointer-events و شبه کلاس :target ایجاد کنید.
با باز کردن index.html برای ایجاد محتویات مدال شروع کنید. HTML برجسته شده را از بلوک کد زیر بین تگ های بسته </section> و </main> اضافه کنید:
index.html
<!doctype html>
<html>
<head>
...
</head>
<body>
...
<main>
<section>
...
</section>
<div class="modal-container">
<section class="modal">
<header class="modal-header">
<h2 class="modal-title">Destination: Moon Disclaimer</h2>
<a href="#" class="modal-close">Close</a>
</header>
<div class="modal-content">
<p><strong>Disclaimer:</strong> Vastness is bearable only through love emerged into consciousness not a sunrise but a galaxyrise emerged into consciousness courage of our questions across the centuries and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
</div>
</section>
</div>
</main>
</body>
</html>
تغییرات خود را در index.html ذخیره کنید، سپس به styles.css در ویرایشگر متن خود بازگردید و CSS هایلایت شده را در بلوک کد زیر به فایل خود اضافه کنید:
styles.css
...
.button:hover {
background-color: #2d566b;
}
.modal-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background-color: black;
display: flex;
}
.modal {
margin: auto;
width: 90%;
max-width: 40rem;
background-color: white;
border-radius: 1.5rem;
}
.modal-header,
.modal-content {
padding: 1.5rem;
}
کلاس .modal-container ناحیه ای را تعریف می کند که فضای کامل قابل مشاهده را با یک عنصر ثابت پوشش می دهد. سپس صفحه نمایش: خم شدن در کانتینر .modal همراه با حاشیه: خودکار در انتخابگر .modal، محتوا را به صورت عمودی و افقی روی صفحه متمرکز می کند.
تغییرات خود را در styles.css ذخیره کنید و برای بازخوانی index.html به مرورگر خود بازگردید. همانطور که در تصویر زیر نشان داده شده است، محتوای صفحه دیگر قابل مشاهده نیست زیرا یک پوشش سیاه روی صفحه با یک ظرف سفید پوشانده شده است:
اکنون که مدال در جای خود قرار دارد و محتویات صفحه را پوشش می‌دهد، باید تا زمانی که نمونه‌سازی شود، پنهان شود. ویژگی opacity یک ویژگی قدیمی است که اجازه می دهد تا شفافیت روی یک عنصر و محتویات آن قرار گیرد. مقدار ویژگی opacity می تواند از 0 تا 1 با هر نقطه اعشاری بین آن متغیر باشد.
برای شروع استفاده از ویژگی opacity، به styles.css در ویرایشگر متن خود بازگردید. در انتخابگر کلاس .modal، یک ویژگی opacity با مقدار 0 اضافه کنید، همانطور که در بلوک کد زیر مشخص شده است:
styles.css
...
.modal-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background-color: black;
display: flex;
opacity: 0;
}
...
این باعث می شود که کل نمای مودال به صورت بصری روی صفحه پنهان شود. مودال فقط باید زمانی قابل مشاهده باشد که لازم باشد. برای دستیابی به این ظاهر شرطی، می توانید از شبه کلاس :target استفاده کنید.
بعد از انتخابگر .modal-container، یک انتخابگر جدید برای .modal-container:target اضافه کنید. در داخل بلوک انتخابگر، یکی دیگر از ویژگی های opacity را به مقدار 1 تنظیم کنید. CSS برجسته شده در بلوک کد زیر، نحوه قالب بندی آن را نشان می دهد:
styles.css
...
.modal-container {
...
opacity: 0;
}
.modal-container:target {
opacity: 1;
}
...
این تغییرات را در styles.css ذخیره کنید.
:target زمانی که یک عنصر دارای تمرکز URL باشد، نمونه سازی می شود. در مرورگرهای وب، ویژگی id در یک عنصر HTML را می توان در URL همانطور که با نماد پوند یا هش (#) نشان می دهد ارجاع داد. برای اینکه .modal-container:target فعال شود، همان عنصر به یک عنصر id نیاز دارد و صفحه به راهی برای فعال کردن آن URL نیاز دارد.
در ویرایشگر متن خود به index.html برگردید. در عنصر <div class=”modal-container”>، یک مجموعه ویژگی id را به سلب مسئولیت مقدار اضافه کنید. سپس، در عنصر <a href=”#” class=”button”>، مقدار href را از # به #سلب مسئولیت تغییر دهید. برای نحوه نوشتن به HTML برجسته شده در بلوک کد زیر مراجعه کنید:
index.html
<!doctype html>
<html>
<head>
...
</head>
<body>
...
<main>
<section>
...
<a href="#disclaimer" class="button">Read the Disclaimer!</a>
</section>
<div id="disclaimer" class="modal-container">
...
</div>
</main>
</body>
</html>
تغییر در مقدار href به مرورگر می‌گوید که به عنصری با مقدار شناسه سلب مسئولیت صفحه فعلی برود. هنگامی که #سلب مسئولیت به URL اضافه شد، سپس :target در CSS فعال می شود.
این تغییرات را در index.html ذخیره کنید، سپس به styles.css بازگردید.
همانطور که صفحه اکنون ساختار یافته است، مودال تمام رویدادهای کلیک و لمسی را که از تعامل ماوس یا صفحه لمسی حاصل می شود، ضبط می کند. این به این دلیل است که اگرچه کاملاً شفاف است، اما عنصر مدال هنوز کل صفحه را پوشش می دهد. برای حذف تعامل از عنصر، یک ویژگی pointer-events با مقدار هیچ به انتخابگر .modal-container اضافه می‌کنید. سپس، هنگامی که مدال قابل مشاهده است، باید بتواند دوباره رویدادهای تعامل را دریافت کند. در شبه کلاس :target، اشاره گر رویدادها را به همه اضافه کنید، همانطور که در بلوک کد زیر مشخص شده است:
styles.css
...
.modal-container {
...
opacity: 0;
pointer-events: none;
}
.modal-container:target {
opacity: 1;
pointer-events: all;
}
...
ویژگی pointer-events نحوه تعامل یک عنصر با ماوس یا دستگاه ورودی مبتنی بر لمس را تغییر می دهد. با تنظیم مقدار روی هیچ، این عنصر نه تنها برای کاربران بینا، بلکه برای دستگاه های ورودی مبتنی بر اشاره گر نیز نامرئی می شود. سپس، مقدار all تعامل را دوباره برقرار می‌کند، اما تنها زمانی که .modal-container در URL فعال و قابل مشاهده باشد.
در نهایت، برای اینکه مدال در داخل و خارج از دید محو شود، یک ویژگی انتقال برای متحرک سازی بین 0 و 1 مقادیر برای کدورت اضافه می‌کنید.
به styles.css برگردید و یک ویژگی انتقال به انتخابگر .modal-container اضافه کنید، همانطور که در بلوک کد زیر مشخص شده است:
styles.css
...
.modal-container {
...
opacity: 0;
pointer-events: none;
transition: opacity 250ms ease;
}
.modal-container:target {
opacity: 1;
pointer-events: all;
}
...
ویژگی transition مختصر یک سری از خواص است. کدورت به مرورگر می گوید که این ویژگی برای انتقال بین است. 250 میلی‌ثانیه زمانی است که انتقال باید تکمیل شود و واحد برای میلی‌ثانیه ایستاده است. در نهایت، سهولت توضیح می دهد که چگونه انتقال رخ خواهد داد. در این مورد، ease به این معنی است که آهسته شروع می‌شود، سرعت می‌گیرد و سپس در نزدیکی پایان انتقال دوباره کاهش می‌یابد.
انتقال زمانی کار خواهد کرد که مودال ظاهر شود و با فشار دادن پیوند بستن در داخل مدال ناپدید شود. این پیوند بستن دارای یک مقدار href است که روی # تنظیم شده است، که URL را از #سلب مسئولیت به # تغییر می‌دهد و حالت :target را حذف می‌کند.
تغییرات خود را در styles.css ذخیره کنید و index.html را در مرورگر refresh کنید. انیمیشن زیر نحوه ظاهر و ناپدید شدن مودال را نشان می دهد
این بخش شما را با خاصیت opacity آشنا کرد که از آن برای پنهان کردن بصری یک ظرف مدال استفاده کردید. شما همچنین از ویژگی شبه کلاس :target، ویژگی pointer-events و ویژگی transition برای ایجاد یک افکت fade-in و fade-out استفاده کردید. در بخش بعدی، از رنگ‌هایی با کانال‌های آلفا برای شفاف‌تر کردن مودال استفاده خواهید کرد.
استفاده از کانال های آلفا برای ایجاد مقادیر رنگ شفاف
یک کانال آلفا مانند ویژگی opacity است، اما در عوض یک بخش اضافی برای یک مقدار رنگ است که از طریق rgb()، hsl() یا هگزادسیمال تعریف شده است. در جایی که ویژگی opacity کل عنصر و فرزندان آن را تنظیم می کند، کانال آلفا فقط کدورت رنگ را در یک ویژگی مشخص تنظیم می کند. در طول این بخش، شما از هر یک از مقادیر رنگ کانال آلفا استفاده کرده و آنها را عملی خواهید کرد.
برای شروع کار با مقادیر رنگ کانال آلفا، stlyes.css را در ویرایشگر متن خود باز کنید. سپس به انتخابگر کلاس .modal-container بروید. همانطور که در بلوک کد زیر مشخص شده است، مقدار ویژگی پس زمینه رنگ را از #000 به rgba (0، 0، 0، 0.75) تغییر دهید:
styles.css
...
.modal-container {
...
background-color: rgba(0,0,0,0.75);
...
}
...
مقدار رنگ rgba () مانند rgb () عمل می کند که شامل سه عدد جدا شده با کاما است که سطح نور قرمز، سبز و آبی را نشان می دهد. وقتی یکی از مقادیر رنگ روی 0 تنظیم شود، کاملاً خاموش است (سیاه) و 255 به این معنی است که در روشنایی کامل (سفید) است. بین این سه کانال رنگی می توان میلیون ها رنگ تولید کرد. عدد چهارم کانال آلفا است که مانند خاصیت opacity کار می کند و یک مقدار اعشاری از 0 تا 1 است. تنظیم کانال آلفا باعث شفاف شدن رنگ می شود و به محتوای پشت آن اجازه می دهد از طریق رنگ قابل مشاهده باشد.
تغییرات خود را در styles.css ذخیره کنید و index.html را در یک مرورگر وب باز کنید. خواندن سلب مسئولیت را فشار دهید! را فشار دهید تا مودال فعال شود. پس‌زمینه پوشش سیاه همچنان سیاه است، اما اکنون نیز شفاف است و صفحه پشت آن را آشکار می‌کند:
اکنون که روکش شفاف است، به مدال بچرخید و با تغییر پس‌زمینه به یک گرادیان بنفش با متن سفید، استایل بصری بیشتری به آن بدهید. در ویرایشگر متن خود به styles.css برگردید و CSS هایلایت شده زیر را از بلوک کد بعدی اضافه کنید:
styles.css
...
.modal {
margin: auto;
width: 90%;
max-width: 40rem;
background: linear-gradient(135deg, hsl(300, 40%, 20%),hsl(300, 40%, 5%));
border-radius: 1.5rem;
}
.modal-header,
.modal-content {
padding: 1.5rem;
}
.modal-header {
display: flex;
justify-content: space-between;
}
.modal-title {
margin: 0;
color: white;
}
.modal-close {
color: white;
}
.modal-content {
color: white;
}
این به روز رسانی را در styles.css ذخیره کنید، سپس index.html را در مرورگر خود بازخوانی کنید. سبک مودال همانطور که در تصویر زیر نشان داده شده است به روز می شود و ارائه می شود:
اکنون در ویرایشگر متن خود به styles.css بازگردید. اکنون از مقدار رنگ ()hsla برای روشن کردن رنگ هدر modal استفاده خواهید کرد. همچنین باید گوشه های بالایی را طوری تنظیم کنید که یک مقدار شعاع مرزی مطابق با مدال داشته باشد، بنابراین هدر خارج از ناحیه مدال ظاهر نشود. CSS هایلایت شده در بلوک کد زیر نحوه تنظیم این را نشان می دهد:
styles.css
...
.modal-header {
display: flex;
justify-content: space-between;
background-color: hsla(300, 80%, 90%, 0.2);
border-radius: 1.5rem 1.5rem 0 0;
}
...
مقدار پس زمینه رنگ از فرمت hsla() استفاده می کند و مانند مقدار rgba()، فرمت hsl() است اما با کانال آلفا. hsl() از سه بخش تشکیل شده است: یک مقدار درجه از چرخه رنگ، یک مقدار درصد اشباع، و یک مقدار درصد روشنایی، که رنگ نهایی را ایجاد می کند. 300 مقدار رنگ را بین آبی و قرمز در چرخه رنگ قرار می دهد، 80٪ اشباع سنگین به معنای رنگ بیشتر و خاکستری کمتر است، و 90٪ رنگ نهایی را روشن می کند. در نهایت، کانال آلفا مانند خاصیت opacity کار می کند و 0.2 مقدار را نزدیک به کاملا شفاف می کند. این یک پوشش روشن در بالای گرادیان ایجاد می کند و تعریفی را برای هدر ارائه می دهد.
این تغییرات را در styles.css ذخیره کنید و برای بازخوانی index.html به مرورگر بازگردید. سرصفحه مدال اکنون دارای یک برجسته صورتی تر در ناحیه است که آن را از محتوای مدال متمایز می کند. تصویر زیر نشان می دهد که چگونه هدر مدال اکنون در مرورگر رندر می شود:
راه دیگر برای ایجاد مقادیر رنگ شفاف، استفاده از مقادیر هگزادسیمال است. مقادیر رنگ هگزادسیمال از سه جفت ترکیبی از 0 تا 9 یا a تا f تشکیل شده و معادل عددی از 0 تا 255 است. سه رقم اول یک مقدار قرمز، سبز و آبی هستند که به صورت #RRGGBB فرمت شده اند. برای ایجاد یک کانال آلفا، مجموعه چهارم اضافه می شود و الگوی #RRGGBBAA را می سازد.
برای شروع کار با کانال های آلفای هگزادسیمال، به styles.css در ویرایشگر متن خود بازگردید. اکنون یک حاشیه به قسمت سرصفحه و محتوای مدال اضافه می‌کنید تا تعریف بیشتری به آن بدهید. این مرزها از مقدار هگزادسیمال یکسانی استفاده می کنند، اما مقادیر متفاوتی برای کانال آلفا به آنها داده می شود. CSS هایلایت شده از بلوک کد زیر نحوه نوشتن این سبک ها را نشان می دهد:
styles.css
...
.modal-header {
display: flex;
justify-content: space-between;
background-color: hsla(300, 80%, 90%, 0.2);
border-radius: 1.5rem 1.5rem 0 0;
border: 4px solid #f7baf72f;
border-bottom: none;
}
...
.modal-content {
color: white;
border-radius: 0 0 1.5rem 1.5rem;
border: 4px solid #f7baf744;
border-top: none;
}
...
هدر و محتوا هر کدام یک رنگ هگزادسیمال با #f7baf7 دارند، اما مقادیر کانال آلفای متفاوتی دارند. رنگ حاشیه انتخابگر هدر مدال دارای یک کانال آلفا تنظیم شده روی 2f است که شفاف تر است، زیرا 00 یک مقدار کانال آلفا کاملاً شفاف است. کانال آلفای .modal-content روی 44 تنظیم شده است که باعث شفاف‌تر شدن آن می‌شود.
تغییرات خود را در styles.css ذخیره کنید و index.html را در مرورگر وب بازخوانی کنید. تصویر زیر نحوه نمایش این حاشیه ها در مرورگر را نشان می دهد:
در نهایت، یک رنگ شش رقمی هگزا دسیمال را می توان به صورت خلاصه سه رقمی نوشت، که در آن #33ccee همان #3ce است. به همین ترتیب، یک مقدار هگزادسیمال با یک کانال آلفا را می توان به صورت خلاصه چهار رقمی نوشت به طوری که #33ccee99 را بتوان به #3ce9 کوتاه کرد و یک رنگ باشد.
برای شروع کار با یک هگزادسیمال کوتاه با کانال آلفا، به stlyes.css در ویرایشگر متن خود بازگردید. سپس، به انتخابگر کلاس .modal بروید و یک ویژگی box-shadow اضافه کنید. در اینجا یک سایه بزرگ روی مدال ایجاد می کنید که سیاه است اما توسط یک کانال آلفا نرم می شود. CSS هایلایت شده را در بلوک کد زیر به بلوک انتخابگر .modal خود اضافه کنید:
styles.css
...
.modal {
margin: auto;
width: 90%;
max-width: 40rem;
background: linear-gradient(135deg, hsl(300, 40%, 20%),hsl(300, 40%, 5%));
border-radius: 1.5rem;
box-shadow: 0 1rem 2rem #000a;
}
...
این سایه محور x را 1 rem پایین می آورد و تاری 2 rem را پخش می کند. در مرحله بعد، مقدار #000a با خاموش کردن هر سه مقدار رنگ، یک رنگ سیاه کامل را مشخص می کند. a که معادل aa است و دارای مقدار عددی 170 است، کانال آلفا را با شفافیت تقریباً 66٪ ارائه می کند. این کار سایه را کمی کم می کند، اما آن را به اندازه کافی قابل توجه نگه می دارد تا عمق زیر مودال را فراهم کند.
حتما این افزودنی را در styles.css ذخیره کنید، سپس index.html را در مرورگر refresh کنید. مدال اکنون تعریف و عمق بیشتری دارد. تصویر زیر رندر مودال را با مقادیر رنگ های مختلف ارائه می دهد:
در این بخش، شما از سه مقدار رنگ مختلف با کانال های آلفا برای اعمال کدورت به رنگ ها در ویژگی های خاص استفاده کردید. شما این رنگ ها را به ویژگی های پس زمینه رنگ، ویژگی های حاشیه و ویژگی box-shadow اضافه کردید. در بخش بعدی، از مقدار رنگ نامگذاری شده شفاف برای ایجاد گرادینت‌های منحصر به فرد و مخفی کردن محتوا استفاده می‌کنید.
افزودن مقدار رنگ شفاف به گرادیان خطی
مقادیر مختلف رنگی که از کانال های آلفا پشتیبانی می کنند برای زمانی که یک رنگ هنوز نیاز به شناسایی دارد مفید است. با این حال، زمانی که هیچ رنگی مورد نیاز نیست، رنگ شفاف به نام مفید می شود. در این بخش، دکمه Close را در حالت مخفی می‌کنید و یک شکل X با یک خطی-gradient() ایجاد می‌کنید که همه اینها با استفاده از مقدار شفاف است.
برای شروع استفاده از مقدار شفاف، styles.css را در ویرایشگر متن خود باز کنید. سپس، به انتخابگر کلاس .modal-close که قبلا اضافه کردید بروید. در داخل انتخابگر، همانطور که در بلوک کد زیر مشخص شده است، مقدار ویژگی رنگ را از سفید به شفاف تغییر دهید:
styles.css
...
.modal-close {
color: transparent;
}
...
این تغییر متن را از فضای خالی حذف نمی کند. فقط آن را از رندر بصری در صفحه حذف می کند.
بعد، یک مربع از پیوند نزدیک ایجاد می کنید تا جایی برای ایجاد شکل X وجود داشته باشد. با افزودن یک ویژگی نمایشگر به بلاک شروع کنید، که به <a> امکان پیکربندی بصری بیشتری را می دهد. در مرحله بعد، یک ویژگی height و width ایجاد کنید و هر کدام را روی 1.5rem قرار دهید که شکل مربع را ایجاد می کند. در نهایت، یک ویژگی overflow را به hidden اضافه کنید، که از خروج متن به خارج از ظرف و افزودن فضای تعاملی جلوگیری می کند. CSS هایلایت شده از بلوک کد زیر نحوه تنظیم مربع را نشان می دهد:
styles.css
...
.modal-close {
color: transparent;
display: block;
height: 1.5rem;
width: 1.5rem;
overflow: hidden;
}
...
بخش آخر ایجاد شکل X با یک نمونه پس زمینه چندگانه متشکل از دو مقدار خطی-gradient() است. برای تنظیم این، کد برجسته شده را از بلوک کد زیر اضافه کنید:
styles.css
...
.modal-close {
color: transparent;
display: block;
height: 1.5rem;
width: 1.5rem;
overflow: hidden;
background-image:
linear-gradient(
to top right,
transparent 48%,
white 48%,
white 52%,
transparent 52%
),
linear-gradient(
to top left,
transparent 48%,
white 48%,
white 52%,
transparent 52%
);
}
...
اولین چیزی که در مورد این کد باید به آن توجه کرد این است که بخش های مختلف خطی-gradient() در خطوط جداگانه قرار دارند، که برای کمک به درک و خوانایی بیشتر پس زمینه پیچیده انجام می شود. این CSS هنوز معتبر است و نیازی نیست که مقادیر در یک خط با ویژگی باشند. سپس، مقادیر تکراری درصد برای شفاف و سفید به این معنی است که درجه بندی وجود نخواهد داشت. در عوض رنگ بلافاصله از شفاف به سفید تغییر می کند. در نهایت، سمت راست و بالا دو شیب در زوایای 45 درجه ایجاد می کند که همپوشانی دارند.
این تغییر را در styles.css ذخیره کنید و index.html را در یک مرورگر وب باز کنید. خواندن سلب مسئولیت را انتخاب کنید! دکمه و مدال اکنون به جای پیوند نزدیک، یک شکل X بزرگ و نازک خواهد داشت، همانطور که در تصویر زیر ارائه شده است:
در نهایت، حالت :hover و :focus مورد نیاز است تا به شکل X زمانی که مرکز تعامل است بیشتر قابل توجه باشد. برای این کار، گرادیان های قبلی را کپی می کنید و موقعیت را برای رشد ناحیه سفید جامد تنظیم می کنید.
برای ایجاد یک حالت تعاملی برای X، به styles.css در ویرایشگر متن خود بازگردید. به دنبال انتخابگر کلاس .modal-close، یک انتخابگر گروه جدید متشکل از .modal-close:hover و .modal-close:focus ایجاد کنید. سپس، ویژگی و مقدار background-image را از .modal-close در انتخابگر جدید کپی کنید. در نهایت، بخش های 48 درصدی را به 46 درصد کاهش دهید و 52 درصد را به 54 درصد افزایش دهید.
style.css
...
.modal-close {
...
}
.modal-close:hover,
.modal-close:focus {
background-image:
linear-gradient(
to top right,
transparent 46%,
white 46%,
white 54%,
transparent 54%
),
linear-gradient(
to top left,
transparent 46%,
white 46%,
white 54%,
transparent 54%
);
}
...
این تغییرات را در styles.css ذخیره کنید و صفحه را در مرورگر خود بازخوانی کنید. اکنون، زمانی که X روی ماوس قرار می‌گیرد یا فوکوس صفحه‌کلید به آن داده می‌شود، اندازه شیب‌هایی که شکل را ایجاد می‌کنند افزایش می‌یابد و جلوه‌ای می‌دهد که گویی X پررنگ است. انیمیشن زیر نشان می دهد که چگونه این افکت در یک مرورگر در طول یک رویداد شناور ارائه می شود:
این بخش شما را با ویژگی transparent آشنا می کند و شما از آن برای مخفی کردن محتوا و ایجاد نماد X با استفاده از مقادیر ()linear-gradient استفاده می کنید. در بخش آخر، از مقدار شفاف بر روی یک گرادیان برای کمک به ارائه افکت انیمیشن بر روی یک عنصر استایل دکمه ای استفاده خواهید کرد.
با استفاده از حالت :hover برای انتقال بین مقادیر رنگ شفاف
یکی از جنبه‌های ویژگی انتقال که گاهی به راه‌حل‌های خلاقانه نیاز دارد این است که همه ویژگی‌ها را نمی‌توان متحرک کرد. یکی از این ویژگی ها تصویر پس زمینه است، به این معنی که مقادیر یک گرادیان خطی در این ویژگی نمی توانند متحرک شوند. با این حال، مقدار رنگ پس‌زمینه حتی اگر تصویر پس‌زمینه وجود داشته باشد، می‌تواند متحرک شود. در این بخش، با استفاده از مقادیر رنگی شفاف و کانال آلفا، یک انیمیشن انتقال ایجاد می کنید که به نظر می رسد یک انیمیشن گرادیان باشد.
برای ایجاد یک گرادیان متحرک، styles.css را در ویرایشگر متن خود باز کنید. سپس به انتخابگر کلاس .button بروید. کلاس .button از قبل تغییری در رنگ پس زمینه بین انتخابگر خود و دکمه .:hover دارد. ویژگی و مقدار انتقال برجسته شده را از بلوک کد زیر به فایل styles.css خود اضافه کنید:
styles.css
...
.button {
text-decoration: none;
display: inline-block;
padding: 0.5rem 1.25rem;
color: white;
background: #4c90b2;
border: 1px solid #2d566b;
border-radius: 0.5rem;
transition: background-color 250ms ease;
}
.button:hover,
.button:focus {
background-color: #2d566b;
}
...
تغییرات خود را در styles.css ذخیره کنید و index.html را در مرورگر وب خود باز کنید. نگه داشتن دکمه با مکان نما اکنون باعث می شود که رنگ پس زمینه بین آبی روشن و آبی تیره متحرک شود. انیمیشن زیر نشان می دهد که چگونه این در مرورگر ارائه می شود:
اکنون، برای افزودن گرادیان، به styles.css در ویرایشگر متن خود برگردید. به انتخابگر دکمه .برگردید و یک ویژگی پس زمینه تصویر با یک خطی-gradient() اضافه کنید. جهت گرادیان به سمت پایین خواهد بود و با یک کانال آلفا آبی روشن شروع می شود و سپس به سمت شفاف می رود. انیمیشن با کانال آلفا آبی تیره به پایان می رسد. CSS هایلایت شده در بلوک کد زیر نحوه نوشتن این گرادیان را نشان می دهد:
styles.css
...
.button {
text-decoration: none;
display: inline-block;
padding: 0.5rem 1.25rem;
color: white;
background: #4c90b2;
border: 1px solid #2d566b;
border-radius: 0.5rem;
background-image:
linear-gradient(
to bottom,
hsla(200, 40%, 80%, 0.4),
transparent,
hsla(200, 40%, 20%, 0.6)
);
transition: background-color 250ms ease;
}
...
این گرادیان رنگ پس‌زمینه را پوشش می‌دهد و به این شکل ظاهر می‌شود که گرادیان از آبی روشن به آبی میانی و سپس آبی تیره می‌گذرد. هنگامی که دکمه با یک رویداد تعاملی روبرو می شود، رنگ پس زمینه به آبی تیره تر تغییر می کند و این توهم ایجاد می کند که شیب کلی تیره شده است.
این به روز رسانی ها را در styles.css ذخیره کنید و سپس به فایل index.html خود در مرورگر بازگردید و صفحه را بازخوانی کنید. همانطور که در انیمیشن زیر نشان داده شده است، هنگامی که مکان نما روی دکمه حرکت می کند، به نظر می رسد گرادیان از یک گرادیان آبی روشن به یک گرادیان آبی تیره متحرک می شود:
در این بخش آخر، از مقادیر رنگ، مقدار شفاف نامگذاری شده و ویژگی transition برای ایجاد توهم متحرک سازی گرادیان استفاده کردید. با توجه به این، شما همچنین یاد گرفتید که چه نوع ویژگی هایی را می توان متحرک کرد.
نتیجه
در طول این آموزش، از ویژگی opacity و مقادیر رنگی زیادی با کانال های آلفا استفاده کردید. شما از کدورت با رویدادهای اشاره گر و انتقال برای ایجاد یک افکت محو برای نمایش یک مدال در صورت تقاضا استفاده کردید. شما همچنین از مقادیر مختلف رنگ موجود برای کنترل شفافیت و پوشش رنگ روی محتوا استفاده کردید. شما از مقدار با نام شفاف برای ایجاد یک نماد X برای بستن مدال استفاده کردید. در نهایت، شما از ترکیبی از رنگ‌ها، مقدار شفاف، گرادیان‌ها و انتقال برای ایجاد توهم شیب متحرک روی یک دکمه استفاده کردید.
دلایل مفید زیادی برای استفاده از رنگ‌های شفاف و شفاف در طراحی وب وجود دارد. ویژگی opacity را می توان برای متحرک سازی یک افکت محو و محو بر روی عناصری که قرار است در صورت نیاز قابل مشاهده باشند، استفاده کرد. مقادیر رنگ های مختلف که امکان کنترل شفافیت را فراهم می کند، راه های بسیاری را برای ترکیب رنگ ها و محتوا با یکدیگر فراهم می کند. در مجموع، این روش‌های ایجاد شفافیت می‌توانند جلوه‌ها و سبک‌های منحصربه‌فردی را ایجاد کنند.
برچسب‌ها:CSS, استایل‌سازی HTML با CSS, انواع سرور مجازی, ایجاد سرور مجازی, ایجاد یک Modal در CSS, خرید سرور لینوکس, راه اندازی پایه HTML و CSS, سرور مجازی
https://vpsgol.net/product/vps-germany/
https://vpsgol.net/product/vps-usa/
https://vpsgol.net/product/vps-france/
https://vpsgol.net/product/vps-canada/
https://vpsgol.net/product/vps-poland/
https://vpsgol.net/product/vps-netherlands/
https://vpsgol.net/product/vps-england/
