نحوه استایل دادن به عناصر HTML با حاشیه ها، سایه ها و خطوط در CSS
ورود به سایت
معرفی
کار با سایه‌ها، حاشیه‌ها و خطوط کلی یکی از اجزای کلیدی توسعه وب است و می‌تواند تعریف بصری پیرامون عناصر HTML و آیتم‌های متنی ارائه دهد. ظاهر حاشیه ها و سایه ها را می توان از طریق پنج ویژگی اصلی CSS دستکاری کرد: border، border-radius، box-shadow، text-shadow و outline. سایه ها عمق را فراهم می کنند و به عناصر کمک می کنند تا برجسته شوند، در حالی که ویژگی های حاشیه می توانند عملکردهای بصری مختلفی را انجام دهند، از ایجاد یک تقسیم کننده خطی بین محتوا تا تعریف فضای یک شبکه. ویژگی border-radius گوشه های گردی را روی جعبه ها ایجاد می کند و حتی می تواند یک شکل دایره ای ایجاد کند. در نهایت، outline یک ویژگی است که اغلب نادیده گرفته می شود که بسیاری از عملکردهای مشابه ویژگی مرزی را بدون ایجاد اختلال در جریان محتوا ارائه می دهد.
در این آموزش، شما با این املاک کار خواهید کرد تا یک اعلامیه قانونی برای یک شرکت گردشگری فضایی خیالی ایجاد کنید. در طول نسخه ی نمایشی، با استفاده از ویژگی های مبتنی بر لبه، ظروف بصری غنی ایجاد خواهید کرد. علاوه بر این، تفاوت های ظریف در مورد مقادیر پیچیده تر، مانند سایه های متعدد و اینکه چگونه مرورگرهای مختلف می توانند ویژگی های خاص را به طور متفاوت پیاده سازی کنند را در نظر خواهید گرفت.
پیش نیازها
- درک درستی از ویژگی‌های آبشار و ویژگی‌های CSS، که می‌توانید با خواندن نحوه اعمال سبک‌های CSS در HTML با Cascade و Specificity به آن دست پیدا کنید.
- آشنایی با انتخابگرهای نوع، انتخابگرهای ترکیب‌کننده و گروه‌های انتخابگر، که می‌توانید در نحوه انتخاب عناصر HTML به سبک با CSS بیابید.
- آشنایی با خواص رنگ در CSS برای اطلاعات بیشتر، نحوه استفاده از مقادیر رنگ با CSS را ببینید.
آشنایی با گرادیان های CSS با ویژگی های پس زمینه. نحوه اعمال سبک‌های پس‌زمینه به عناصر HTML با CSS را بررسی کنید تا تجربه ایجاد پس‌زمینه گرادیان را به دست آورید.
- یک فایل 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" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Travel Disclosure - Destination: Moon</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
تنظیمات صفحه زیادی در عنصر <head> تعریف شده است. اولین عنصر <meta> مجموعه کاراکتری را برای استفاده از متن تعریف می کند. به این ترتیب اکثر کاراکترهای خاص، مانند علائم تاکیدی، بدون کدهای HTML خاص ارائه می شوند. عنصر دوم <meta> به مرورگرها و به ویژه مرورگرهای تلفن همراه می گوید که چگونه با عرض محتوا رفتار کنند. در غیر این صورت، مرورگر عرض دسکتاپ 960 پیکسلی را شبیه سازی می کند. عنصر <title> عنوان صفحه را در اختیار مرورگر قرار می دهد. عنصر <link> فایل CSS را بارگیری می کند که در آن استایل های خود را در طول این آموزش می نویسید.
صفحه همچنین برای استایل دادن به محتوا نیاز دارد. برای متن قانونی، شما از محتوای نمونه از Legal Ipsum به عنوان کپی پرکننده استفاده خواهید کرد که فقط برای اهداف طراحی در نظر گرفته شده است.
در ویرایشگر متن خود به index.html برگردید و HTML برجسته شده را از بلوک کد زیر اضافه کنید:
index.html
<!doctype html>
<html>
...
<body>
<section class="disclosure-alert">
<header class="disclosure-header">
<h2 class="disclosure-title"><em>Destination: Moon</em> Travel Disclosure</h2>
</header>
<div class="disclosure-content">
<p>Although space travel is routine practice, there are many unknown possibilities that any traveller must be aware of before traveling with <em>Destination: Moon</em>. Agreeing to this disclosure of knowns is required prior to purchase of tickets with <em>Destination: Moon</em>. PLEASE, READ AND AGREE TO THE FOLLOWING DISCLOSURE OF TRAVEL UNKNOWNS BEFORE PROCEEDING TO PURCHASE.</p>
<div class="legal-contents">
<p>Effect of Termination. Upon termination, You agree not to use it under the terms of Sections 4(a) through 4(e) for that Covered Code, or any third party. Description of Modifications.<p>
<p>You must make sure that you know you can do these things. To make sure the requirements of this Agreement. REQUIREMENTS A Contributor may participate in any way. Notwithstanding the foregoing, if applicable law or agreed to in writing, the Copyright Holder, but only to the terms applicable to Covered Code. Inability to Comply Due to Statute or Regulation.</p>
<p>If it is impossible for You to the Recipient retains any such Additional Terms. Versions of This License. If you are re-using, b) a hyperlink (where possible) or URL to the terms of Sections 4(a) through 4(e) for that Work shall terminate if it fails to comply with the exception of content that is granting the License. License Terms 1.</p>
<p>Grant of Patent Infringement. If you have knowledge of patent infringement litigation, then the only applicable Base Interpreter is a "commercial item" as defined in 48 C.F.R. Consistent with 48 C.F.R.</p>
<p>U.S. Government End Users acquire Covered Code (Original Code and/or as part of a Larger Work; and b) allow the Commercial Contributor then makes performance claims, or offers warranties related to Product X, those performance claims and warranties are such Commercial Contributor's responsibility alone. Under this section, the Commercial Distributor in writing of such Contributor, if any, to grant more extensive warranty protection to some or all of these conditions: (a) You must make it clear that any Modifications made by such Respondent, or (ii) withdraw Your litigation claim is resolved (such as Wikimedia-internal copying), it is Recipient's responsibility to secure any other exploitation. Program, and in any of the provisions set forth in Section 4(b), you shall terminate if it fails to comply with.</p>
<p>Please note that these licenses do allow commercial uses of your company or organization, to others outside of this License Agreement), provided that You meet the following terms which differ from this License) and (b) You must duplicate the notice in Exhibit A in each changed file stating how and when you changed the files and the definitions are repeated for your past or future use of the Original Code; or 3) for infringements caused by: i) third party against the drafter will not be used as a handle): 1895.22/1011. This Agreement shall be held by the terms of this agreement. If any provision of this license which gives you legal permission to modify NetHack, or otherwise using this software in source and binary forms, with or without modification in printed materials or in related documentation, stating that you provide a service, including but not limited to the terms under which you distribute, wherever you describe the origin or ownership of such termination, the Recipient a non-exclusive, royalty-free, world-wide license to reproduce, analyze, test, perform and/or display publicly, prepare derivative works, distribute, and otherwise use Python 1.6b1 or any part of Derivative Works. If You initiate litigation by asserting a patent infringement against You in that instance.</p>
<p>Effect of New York and the like. While this license document the following disclaimer in the Work contain all the conditions listed in Clause 6 above, concerning changes from the Work. If you created a Modification, you may at your option offer warranty protection to some or all of the Licensed Program as a product of your Modifications available to others outside of this License.</p>
<p>Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted to Licensor for inclusion in the documentation and/or other rights consistent with this program; if not, write to the modified files to carry prominent notices stating that You distribute, all copyright, patent, trademark, and attribution notices from the Public Domain or from the Original Code; 2) separate from the Public Domain or from the Work, you may distribute a Compiled Work on their system exactly as it is being maintained, then ask the Current Maintainer to update their communication data within one month. If the program is free software; you can change the License will not have to defend and indemnify every other Contributor to control, and cooperate with the Source Code version of the Licensed Program, or any Contributor.</p>
</div>
<div class="button-group">
<a href="#" class="button button-primary">
Agree
</a>
<a href="#" class="button button-secondary">
Disagree
</a>
</div>
</div>
</section>
</body>
</html>
تغییرات خود را در index.html ذخیره کنید و سپس مرورگر وب خود را باز کنید. آیتم منوی File را انتخاب کنید و سپس گزینه Open را انتخاب کنید و فایل index.html خود را در مرورگر بارگذاری کنید. تصویر زیر نحوه نمایش این HTML در مرورگر را نشان می دهد:
یک فایل جدید به نام styles.css در همان دایرکتوری index.html ایجاد کنید، سپس آن را در ویرایشگر متن خود باز کنید. این فایل شامل تمام سبک های استفاده شده در طول آموزش است. اولین مجموعه از سبک ها یک زیبایی شناسی کلی را اعمال می کند که شما از آن خواهید ساخت. CSS را از بلوک کد زیر در فایل styles.css خود اعمال کنید:
styles.css
html, body {
height: 100%;
}
body {
display: flex;
margin: 0;
font: 100% / 1.5 sans-serif;
background: url("images/moon-bg.jpg") no-repeat fixed center / cover black;
}
.disclosure-alert {
background-color: hsl(0, 0%, 95%);
width: 85%;
max-width: 48rem;
margin: auto;
color: hsl(0, 0%, 20%);
}
.disclosure-header {
background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
padding: 2rem 0.5rem;
text-align: center;
color: hsl(300, 50%, 95%);
}
.disclosure-title {
margin: 0;
font-size: 2rem;
line-height: 1.25;
}
.disclosure-content {
margin: 1.5rem;
}
.legal-contents {
margin-top: 1.5rem;
background-color: white;
padding: 0.75rem;
font-family: "Times New Roman", serif;
}
.button-group {
margin-top: 1.5rem;
display: flex;
justify-content: center;
}
.button {
display: inline-block;
text-align: center;
padding: 0.5rem 1rem;
background: black;
text-decoration: none;
color: white;
width: 50%;
max-width: 8rem;
}
.button + .button {
margin-left: 1.5rem;
}
.button-primary {
background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
}
.button-primary:hover {
background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
}
.button-secondary {
background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
}
.button-secondary:hover {
background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
}
استایل موجود در این فایل، طرح‌بندی اولیه صفحه را با افشای قانونی متمرکز، دکمه‌هایی با فاصله و رندر با گرادیان خطی، و تصویری از ماه به‌عنوان پس‌زمینه تنظیم می‌کند. قبل از ادامه، حتما فایل styles.css را ذخیره کنید.
برای نمایش تصویر پیوند شده در ویژگی پس‌زمینه مجموعه قوانین بدن، به تصویر پس‌زمینه ماه نیاز دارید. ابتدا یک پوشه images در همان پوشه فایل index.html خود بسازید:
mkdir images
از مرورگر خود برای دانلود این فایل در فهرست تصاویر جدید خود استفاده کنید یا از دستور curl زیر برای دانلود آن از طریق خط فرمان استفاده کنید:
curl -sL https://assets.digitalocean.com/articles/68102/moon-bg.jpg -o images/moon-bg.jpg
در مرحله بعد، به مرورگر خود بازگردید و آن را به روز کنید. مرورگر اکنون رندر و استایل ها را در محتوای صفحه اعمال می کند. تصویر زیر نحوه نمایش کامل صفحه را نشان می دهد:
طول محتوا باعث ایجاد یک صفحه بسیار طولانی می شود. از آنجایی که این به عنوان کپی قانونی در نظر گرفته شده است، محتوای .legal-contents می تواند به فضایی قابل پیمایش تبدیل شود. این کار از طریق ترکیبی از ویژگی های ارتفاع، حداکثر ارتفاع و سرریز انجام می شود.
برای ایجاد یک ناحیه قابل پیمایش، styles.css را در ویرایشگر متن خود باز کنید. سپس ارتفاع محتوای قانونی را با کد زیر تنظیم کنید:
styles.css
...
.legal-contents {
height: 50vh;
max-height: 20rem;
overflow: auto;
margin-top: 1.5rem;
background-color: white;
padding: 0.75rem;
font-family: "Times New Roman", serif;
}
...
در این کد، یک ویژگی height را در بلوک انتخابگر محتوای قانونی ایجاد کردید، سپس مقدار آن را روی 50vh تنظیم کردید، یعنی 50 درصد از ارتفاع پنجره viewport. شما همچنین یک ویژگی max-height ایجاد کردید که مقدار آن روی 20rem تنظیم شده است. در نهایت، یک ویژگی سرریز با مقدار خودکار اضافه کردید، که در صورت سرریز شدن محتوا از ظرف، نوار اسکرول ایجاد می‌کند.
این موارد اضافه شده را در فایل styles.css خود ذخیره کنید، سپس به مرورگر خود بازگردید و index.html را بازخوانی کنید. ارتفاع کامل صفحه و ظرف اصلی متراکم شده است. اکنون، همانطور که در انیمیشن زیر نشان داده شده است، کپی Legal Ipsum را می توان در داخل ظرف تعیین شده خود پیمایش کرد:
در سراسر این بخش، HTML اصلی را تنظیم می کنید که برای بقیه آموزش استفاده خواهید کرد. شما همچنین یک فضای قابل پیمایش را با ویژگی overflow تنظیم می کنید. در قسمت بعدی با خاصیت border برای اعمال حاشیه بر روی این کانتینرها کار خواهید کرد.
با استفاده از مرز Property
ویژگی border یکی از روش های اصلی اعمال سبک ها در لبه های عناصر است. یک خط به هر رنگی در محیط بیرونی ظرف اعمال می کند. ارزش ملک از سه جزء تشکیل شده است: ضخامت، سبک و رنگ. ویژگی border این مقادیر را برای هر چهار طرف یک عنصر اعمال می کند. می‌توانید تک تک طرف‌ها را با تغییرات جهت حاشیه مشخص کنید، مانند ویژگی border-top، که فقط برای بالای یک عنصر اعمال می‌شود.
برای شروع کار با ویژگی border، styles.css را در ویرایشگر متن خود باز کنید و به انتخابگر کلاس .disclosure-alert بروید. در بلوک انتخابگر، همانطور که در بلوک کد زیر مشخص شده است، یک ویژگی مرزی با مقدار 1px solid hsl (0، 0٪، 0%) اضافه کنید:
styles.css
...
.disclosure-alert {
background-color: hsl(0, 0%, 95%);
width: 85%;
max-width: 48rem;
margin: auto;
color: hsl(0, 0%, 20%);
border: 1px solid hsl(0, 0%, 0%);
}
...
این ویژگی مرزی یک ویژگی مختصر است، یعنی مقدار آن ترکیبی از مقادیر دیگر است. در این مورد، ضخامت 1px مقدار خاصیت عرض حاشیه را نشان می دهد. این مقدار می تواند هر مقدار عددی با یک واحد همراه با چند مقدار نامگذاری شده باشد: نازک، متوسط و ضخیم. در مرحله بعد، solid مقدار به سبک مرزی است که نحوه ظاهر شدن خط اطراف عنصر را مشخص می کند، در این مورد به عنوان یک خط پیوسته و پیوسته. سایر مقادیر برای سبک حاشیه عبارتند از: نقطه چین، چین، دوتایی و هیچ. مقدار نهایی خاصیت border-color را مشخص می کند که می تواند هر مقدار رنگ معتبری باشد.
تغییرات خود را در styles.css ذخیره کنید، سپس index.html را در یک مرورگر وب باز کنید. محفظه محتوای اصلی اکنون دارای یک حاشیه سیاه نازک در اطراف خود خواهد بود، که بیشتر مشهود است زیرا تصویر پس‌زمینه ماه را پوشانده است. تصویر زیر نحوه نمایان شدن حاشیه در قسمت محتوای اصلی را نشان می دهد:
در مرحله بعد، می‌توانید از ویژگی border برای ایجاد حس عمق با اعمال برجسته‌ها و سایه‌ها به یک عنصر استفاده کنید. می توانید این کار را با استفاده از یک حاشیه جهت دار در یک طرف که از رنگ پس زمینه روشن تر است و سپس یک رنگ تیره تر در سمت مجاور انجام دهید.
در ویرایشگر متن خود به styles.css برگردید، سپس به بلوک انتخابگر کلاس .disclosure-header بروید. خطی-gradient() در ویژگی پس زمینه یک گرادیان بنفش تیره را تعریف می کند که به یک سایه کمی تیره تر تبدیل می شود. برای ایجاد عمق بیشتر از گرادیان به تنهایی، حاشیه را با کد زیر تنظیم کنید:
styles.css
...
.disclosure-header {
background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
padding: 2rem 0.5rem;
text-align: center;
color: hsl(300, 50%, 95%);
border-top: 1px solid hsl(300, 50%, 35%);
border-bottom: 1px solid hsl(300, 50%, 5%);
}
...
شما یک ویژگی border-top با مقدار 1px solid hsl (300، 50٪، 35%) اضافه کردید، که کمی سبکتر از مقدار گرادیان شروع است. سپس، یک ویژگی حاشیه-پایین را با مقدار 1px solid hsl (300، 50٪، 5%) ایجاد کردید، که کمی تیره تر از انتهای گرادیان است.
تغییرات خود را در styles.css ذخیره کنید، سپس به مرورگر بازگردید و index.html را بازخوانی کنید. پس‌زمینه هدر بنفش اکنون کمی برجسته از رنگ بنفش در بالای سرصفحه و سایه‌ای جزئی در امتداد پایین دارد. تصویر زیر نشان می دهد که چگونه در مرورگر ظاهر می شود:
از آنجایی که border یک ویژگی مختصر است، می توانید ویژگی های longhand اضافی اضافه کنید. یک حاشیه می تواند اعمال شود که عرض و سبک دو کلاس دکمه را مشخص می کند، در حالی که یک رنگ حاشیه می تواند روی کلاس های جداگانه اعمال شود.
برای شروع کار با border-color، styles.css را در ویرایشگر متن خود باز کنید. در بلوک انتخاب کننده برای دکمه، یک ویژگی حاشیه با مقدار 1px جامد اضافه کنید، سپس یک ویژگی border-color برای .button-primary و .button-secondary اضافه کنید:
styles.css
...
.button {
...
border: 1px solid;
}
...
.button-primary {
background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
border-color: hsl(200, 100%, 15%);
}
.button-primary:hover {
background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
border-color: hsl(200, 100%, 10%);
}
.button-secondary {
background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
border-color: hsl(200, 10%, 15%);
}
.button-secondary:hover {
background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
border-color: hsl(200, 10%, 10%);
}
این یک حاشیه به سبک جامد با عرض 1 پیکسل برای هر دو دکمه تعریف می کند. سپس، یک ویژگی حاشیه رنگ برای سفارشی کردن رنگ‌ها برای انتخابگرهای حالت .button-primary، .button-secondary و مرتبط با آنها اضافه کردید.
این تغییرات را در styles.css ذخیره کنید، سپس صفحه را در مرورگر وب خود بازخوانی کنید. همانطور که در تصویر زیر نشان داده شده است، دکمه‌ها اکنون با یک حاشیه رنگ تیره‌تر منطبق، تعریف کمی دارند:
در نهایت، هر جهت مرزی نیز مختصری است. این به این معنی است که -width، -style و -color هر کدام می‌توانند برای یک ویژگی جهت اعمال شوند. برای مثال، ویژگی longhand border-right-color فقط یک رنگ را در حاشیه سمت راست اعمال می کند.
برای کار با این ویژگی های حاشیه longhand جهت دار، در ویرایشگر متن خود به styles.css بازگردید. به بلوک انتخابگر .legal-contents بروید و عرض و سبک را برای هر چهار طرف حاشیه تنظیم کنید، سپس رنگ‌های هر طرف را سفارشی کنید:
styles.css
...
.legal-contents {
height: 50vh;
max-height: 20rem;
margin-top: 1.5rem;
overflow: auto;
background-color: white;
border: 1px solid;
border-top-color: hsl(0, 0%, 65%);
border-bottom-color: hsl(0, 0%, 100%);
border-right-color: hsl(0, 0%, 80%);
border-left-color: hsl(0, 0%, 80%);
padding: 0.75rem;
font-family: "Times New Roman", serif;
}
...
در این کد، حاشیه: 1px جامد را به انتهای فایل اضافه کردید. پس از آن، ویژگی های حاشیه-بالا-رنگ، رنگ حاشیه-پایین، رنگ حاشیه-راست-رنگ و رنگ حاشیه-چپ را نیز ایجاد کردید. برای مقادیر، از مقادیر مختلف hsl() برای خاکستری استفاده کردید.
تغییرات خود را در styles.css ذخیره کنید، سپس صفحه را دوباره در مرورگر بارگیری کنید. ظرف محتوی قابل پیمایش اکنون دارای یک حاشیه خاکستری تیره در امتداد بالا، خاکستری کمی روشن تر در طرفین و یک حاشیه سفید در پایین است. این برای این است که این تصور را ایجاد کنیم که محتوا در پشت پس‌زمینه خاکستری روشن قرار می‌گیرد و باعث ایجاد یک اثر می‌شود که برجسته‌سازی در لبه پایینی است، همانطور که در تصویر زیر نشان داده شده است:
در این قسمت از ویژگی border و تغییرات طولانی آن استفاده کردید. شما چندین حاشیه ایجاد کردید که در صورت نیاز به طرف های مختلف اعمال شد. در بخش بعدی، با ویژگی border-radius کار خواهید کرد که اجازه می دهد گوشه های کانتینرها گرد شوند.
اعمال یکborder-radius
گوشه‌های گرد مدت‌ها قبل از اینکه ویژگی حاشیه‌ای برای انجام این کار وجود داشته باشد، یک طراحی زیبایی‌شناسی در وب بوده است. این ویژگی می‌تواند هر واحد عددی یا مقدار درصدی را بپذیرد و یک ویژگی کوتاه‌نویسی مانند خواص حاشیه یا padding است. این بدان معنی است که هر گوشه را می توان به صورت جداگانه در صورت نیاز تنظیم کرد.
برای شروع کار با ویژگی border-radius، styles.css را در ویرایشگر متن خود باز کنید. به بلوک انتخابگر .disclosure-alert و ویژگی border-radius بروید. سپس، مقدار را روی 1.5rem قرار دهید، که این مقدار را در هر چهار گوشه ویژگی اعمال می کند. CSS هایلایت شده در بلوک کد زیر نشان می دهد که چگونه این نوشته شده است:
styles.css
...
.disclosure-alert {
...
border: 1px solid hsl(0, 0%, 0%);
border-radius: 1.5rem;
}
...
این افزونه را در styles.css ذخیره کنید و سپس index.html را در یک مرورگر وب باز کنید یا به‌روزرسانی کنید. فقط دو گوشه پایینی گرد به نظر می رسد، در حالی که دو گوشه بالایی لبه های نوک تیز باقی می مانند. تصویر زیر نشان می دهد که چگونه این در مرورگر رندر می شود:
دلیل اینکه فقط دو گوشه گرد قابل مشاهده است به دلیل نحوه تعامل عناصر نزولی با یکدیگر در وب است. مرورگر در نمایان نگه داشتن محتوا اشتباه می کند. .disclosure-alert دارای چهار گوشه گرد است، اما از آنجایی که .disclosure-header داخل عنصر است و گوشه‌های گرد ندارد، بر گوشه‌های گرد همپوشانی دارد. یک راه حل سریع اضافه کردن سرریز: مخفی به .disclosure-alert است که باعث می‌شود کانتینر هر ظروف و محتوای نزولی را حذف کند. با این حال، این رویکرد می تواند منجر به ناخوانا یا نامرئی شدن محتوای ضروری شود. یک تمرین بهتر این است که یک شعاع مرزی برای کلاس .disclosure-header اعمال کنید تا با منحنی گوشه اجداد خود مطابقت داشته باشد.
برای تنظیم گوشه های همپوشانی، به styles.css در ویرایشگر متن خود بازگردید. به بلوک انتخابگر .disclosure-header بروید و ویژگی border-radius را اضافه کنید. از آنجایی که فقط دو گوشه بالا نیاز به تنظیم دارند، مقدار 1.5rem 1.5rem 0 0 خواهد بود:
styles.css
...
.disclosure-header {
...
border-top: 1px solid hsl(300, 50%, 35%);
border-bottom: 1px solid hsl(300, 50%, 5%);
border-radius: 1.5rem 1.5rem 0 0;
}
...
فرمت توسعه‌یافته این مقدار یک منحنی 1.5 میلی‌متری را در گوشه‌های بالا-چپ و بالا-راست اعمال می‌کند.
تغییرات خود را در styles.css ذخیره کنید و index.html را در مرورگر بازخوانی کنید. هدر بنفش اکنون گوشه ای گرد دارد و ظرف اصلی را نمی پوشاند. یک مشکل جدید ظاهر شده است، همانطور که در تصویر بزرگنمایی شده زیر نشان داده شده است، زیرا یک برش سفید از ظرف اصلی از پشت سرصفحه بنفش به اوج می رسد:
گوشه های هر دو .disclosure-alert و .disclosure-header به اندازه 1.5rem هستند، اما عرض آنها تفاوت اندازه دارند. این تفاوت اندازه ناشی از حاشیه سمت چپ و راست عنصر .disclosure-alert است. از آنجایی که عرض حاشیه در هر دو طرف 1px است، تفاوت اندازه آن 2px یا 0.125rem است. برای مطابقت دادن منحنی ها، شعاع مرزی برای .disclosure-header باید 0.125 rem کوچکتر از آنچه در حال حاضر است باشد. همانطور که در بلوک کد زیر مشخص شده است، مقادیر حاشیه 1.5rem را به 1.375rem تغییر دهید:
styles.css
...
.disclosure-header {
background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
padding: 2rem 0.5rem;
text-align: center;
color: hsl(300, 50%, 95%);
border-top: 1px solid hsl(300, 50%, 35%);
border-bottom: 1px solid hsl(300, 50%, 5%);
border-radius: 1.375rem 1.375rem 0 0;
}
...
این تغییر را در styles.css ذخیره کنید و سپس صفحه را در مرورگر وب بازخوانی کنید. برش سفید اکنون از بین رفته است و منحنی های دو عنصر در مکان مناسب به هم می رسند. تصویر بزرگنمایی شده زیر نشان می‌دهد که این منحنی‌ها چگونه کنار هم قرار می‌گیرند:
در نهایت، یک گوشه گرد روی دکمه های پایین ظرف اصلی اعمال می کنید. این دکمه ها به شکل قرص، با بالا و پایین صاف و بلند و کناره های کاملا گرد خواهند بود. برای انجام این کار، مقدار شعاع مرزی باید یک مقدار مبتنی بر واحد بزرگتر از ارتفاع عنصر باشد.
برای ایجاد دکمه ای به شکل قرص، styles.css را در ویرایشگر متن خود باز کنید. در بلوک انتخابگر دکمه، ویژگی border-radius را اضافه کنید و سپس مقدار را روی 2rem قرار دهید. این عدد می‌تواند یک عدد دلخواه باشد تا زمانی که بزرگتر از ارتفاع محاسبه‌شده، ترکیبی از اندازه قلم، ارتفاع خط، لایه‌بندی و عرض حاشیه باشد که می‌تواند بر ارتفاع کلی یک عنصر تاثیر بگذارد. CSS هایلایت شده در بلوک کد زیر نشان می دهد که کجا باید این ویژگی را اضافه کرد:
styles.css
...
.button {
...
border: 1px solid;
border-radius: 2rem;
}
...
در مورد این رویکرد دو نکته قابل ذکر است. اولین مورد این است که مقدار ارتفاع روی این عنصر تنظیم نشده است. از تنظیم مقدار ارتفاع باید اجتناب شود زیرا محتوا می تواند و در موقعیتی قرار می گیرد که خارج از ظرف جریان داشته باشد. با اجتناب از تعیین ارتفاع، دکمه می تواند رشد کند تا با کل محتوا مطابقت داشته باشد. دوم این است که با یک مقدار مبتنی بر درصد به درستی کار نخواهد کرد. مقادیر مبتنی بر درصد در ویژگی شعاع حاشیه، درصدی از ارتفاع و عرض را منحنی می‌کنند و به جای گوشه‌ای گرد، شکلی بیضی ایجاد می‌کنند.
تغییرات خود را در styles.css ذخیره کنید، سپس به مرورگر بازگردید و index.html را بازخوانی کنید. این صفحه اکنون دو دکمه مستطیلی به شکل قرص را نمایش می دهد، همانطور که در تصویر زیر نشان داده شده است:
در سرتاسر این بخش، شما از ویژگی border-radius برای اعمال گوشه های گرد به چندین عنصر استفاده کردید، و متوجه شدید که یک border-radius مانع از خروج عناصر نزولی از فضای منحنی نمی شود. شما همچنین مقدار شعاع حاشیه را طوری تنظیم کردید که با عرض یک عنصر مطابقت داشته باشد، زمانی که چندین عنصر گرد روی هم قرار می گیرند. در بخش بعدی، از ویژگی text-shadow برای اعمال سایه های در حال پخش بر روی محتوای متن استفاده می کنید.
با استفاده از ویژگی text-shadow
اعمال سایه روی متن کاربردهای زیادی در توسعه روزمره وب دارد. سایه‌ها می‌توانند عمق، جلوه درخشش ایجاد کنند، یا در مکان‌هایی که ممکن است نادیده گرفته شوند، به برجسته‌تر شدن متن کمک کنند. در سرتاسر این بخش، text-shadow را به چندین عنصر برای ایجاد جلوه های بصری مختلف اعمال می کنید.
ویژگی text-shadow حداکثر از چهار مقدار تشکیل شده است: offset محور x، offset محور y، blur radius و color. به عنوان مثال، مقادیر می توانند به این شکل باشند: 2px 4px 10px قرمز. از این چهار مقدار، فقط مقادیر افست مورد نیاز است. رنگ سایه به طور پیش فرض رنگ متن است.
برای شروع کار با text-shadow، با ایجاد یک افکت درخشش در هدر شروع می‌کنید. styles.css را در ویرایشگر متن خود باز کنید و به انتخابگر کلاس .disclosure-header بروید. در بلوک انتخابگر، ویژگی text-shadow زیر را اضافه کنید:
styles.css
...
.disclosure-header {
...
border-radius: 1.375rem 1.375rem 0 0;
text-shadow: 0 0 0.375rem hsl(300, 50%, 50%);
}
...
جلوه درخشش به این معنی است که رنگ از هر لبه متن بیرون می‌آید، بنابراین مقادیر افست محور x و y در اینجا روی 0 تنظیم می‌شوند. شما تاری برای درخشش را روی 0.375 rem (معادل 6 پیکسل) تنظیم می‌کنید تا کمی ظریف باشد. هاله رنگ به متن در نهایت، مقدار رنگ کمی تیره تر از ویژگی رنگ تنظیم شد: hsl (300، 50٪، 50%).
این افزودنی را در فایل styles.css خود ذخیره کنید. بعد، index.html را در یک مرورگر وب باز کنید. متن عنوان پررنگ در پس‌زمینه گرادیان بنفش اکنون درخششی از بنفش میانی در اطراف خود دارد. تصویر زیر نحوه نمایش این افکت در مرورگر را نشان می دهد:
در مرحله بعد، چندین سایه را می توان روی عناصر متن قرار داد، که امکان ایجاد یک جلوه برجسته روی متن را فراهم می کند. این افکت با قرار دادن یک سایه با رنگ روشن تر در زیر جسم و یک سایه با رنگ تیره در بالا انجام می شود.
برای ایجاد یک جلوه برجسته، به styles.css در ویرایشگر متن خود بازگردید. افکت به دکمه های پایین ظرف اضافه می شود. برای انتخابگرهای .button-primary، .button-primary:hover، .button-secondary و .button-secondary:hover یک ویژگی text-shadow اضافه کنید. CSS هایلایت شده را در بلوک کد زیر برای مقادیر بررسی کنید:
styles.css
...
.button-primary {
border: 1px solid hsl(200, 100%, 5%);
background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
text-shadow: 0 1px hsl(200, 100%, 50%),
0 -1px hsl(200, 100%, 5%);
}
.button-primary:hover {
border: 1px solid hsl(200, 100%, 0%);
background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
text-shadow: 0 1px hsl(200, 100%, 45%),
0 -1px hsl(200, 100%, 0%);
}
.button-secondary {
border: 1px solid hsl(200, 10%, 5%);
background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
text-shadow: 0 1px hsl(200, 10%, 50%),
0 -1px hsl(200, 10%, 5%);
}
.button-secondary:hover {
border: 1px solid hsl(200, 10%, 0%);
background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
text-shadow: 0 1px hsl(200, 10%, 45%),
0 -1px hsl(200, 10%, 0%);
}
سایه اول یک برجسته روشن تر از پایین است. این کار با آفست 0 1px و سپس نسخه روشن‌تر رنگ‌های گرادیان پس‌زمینه انجام می‌شود. در مرحله بعد، سایه بالای متن را با آفست 0 -1 پیکسل ایجاد کردید، که سایه را 1 پیکسل به بالا می کشد و از تنوع تیره تری از رنگ های پس زمینه استفاده می کند.
این تغییرات را در styles.css ذخیره کنید، سپس صفحه را در مرورگر وب خود بازخوانی کنید. اکنون متن داخل دکمه‌ها دارای یک برجسته‌سازی جزئی در زیر متن و یک سایه کمی در بالای متن است. ترکیب این مقادیر متن-سایه افکت برجسته را همانطور که در تصویر زیر ارائه می شود ایجاد می کند:
در این بخش، ویژگی text-shadow را روی چند عنصر اعمال کردید. شما یک افکت درخشش روی هدر و یک جلوه برجسته با سایه های متعدد روی دکمه ها ایجاد کردید. در بخش بعدی، سایه هایی را با ویژگی box-shadow به عناصر HTML اعمال می کنید.
افزودن box-shadow به عناصر
همانطور که ویژگی text-shadow به محتوای متن اجازه می دهد سایه داشته باشد، ویژگی box-shadow نیز به عناصر و کانتینرها اجازه می دهد سایه داشته باشند. box-shadow دارای دو ویژگی اضافی است که در این بخش بررسی خواهید کرد، از جمله توانایی کنترل گسترش تاری و تنظیم سایه در داخل عنصر.
برای شروع کار با ویژگی box-shadow، styles.css را در ویرایشگر متن خود باز کنید. در بلوک انتخابگر .disclosure-alert، ویژگی box-shadow را اضافه کنید. درست مانند text-shadow، مقادیر افست محور x و y مورد نیاز است و اگر رنگی ارائه نشده باشد، از مقدار ویژگی رنگ استفاده می شود. برای اولین کادر سایه، offset ها را روی 0، blur را روی 0.5rem، و رنگ را روی یک hsl تیره (300، 40٪، 5%) تنظیم کنید، همانطور که در بلوک کد زیر مشخص شده است:
styles.css
...
.disclosure-alert {
...
border-radius: 1.5rem;
text-shadow: 0 0 0.375rem hsl(300, 50%, 50%);
box-shadow: 0 0 0.5rem hsl(300, 40%, 5%);
}
...
تغییرات را در styles.css ذخیره کنید و صفحه را در مرورگر وب خود بازخوانی کنید. اکنون یک سایه سیاه تقریباً از ظرف پخش شده است. همچنین توجه داشته باشید که سایه به منحنی هایی که با ویژگی border-radius ایجاد کرده اید احترام گذاشته و از آنها پیروی می کند. تصویر زیر نشان می دهد که چگونه این در مرورگر ارائه می شود:
در مرحله بعد، به styles.css بازگردید و با افزودن دو افکت درخشش بزرگ اضافی به box-shadow شروع به ایجاد یک افکت پیچیده تر کنید. بین هر سایه جدید یک کاما اضافه کنید، و هر کدام را به گونه‌ای تنظیم کنید که آفست محور y 0.5rem باشد. سپس تاری های بزرگ را تنظیم کنید و از تغییرات کم رنگ آبی و بنفش از پالت رنگ استفاده کنید، همانطور که در بلوک کد زیر مشخص شده است:
styles.css
...
.disclosure-alert {
...
box-shadow: 0 0 0.5rem hsl(300, 40%, 5%),
0 0.5rem 6rem hsl(200, 40%, 30%),
0 0.5rem 10rem hsl(300, 40%, 30%);
}
...
ترتیب این سایه ها مهم است. اولین سایه با رنگ تقریبا مشکی در بالای سایه های جدید ارائه می شود و هر سایه بعدی پشت سایه بعدی اضافه می شود.
تغییرات خود را در styles.css ذخیره کنید و صفحه را در مرورگر خود بازخوانی کنید. همانطور که در تصویر زیر نشان داده شده است، ترکیب سایه های متعدد جلوه ای منحصر به فرد را ارائه می دهد:
ویژگی گسترش تاری ویژگی box-shadow را می توان برای ایجاد احساس عمق استفاده کرد. ارزش اسپرد هر دو ارزش مثبت و منفی را می پذیرد. گسترش ارزش منفی همراه با یک افست قوی و تاری سایه ای ایجاد می کند که دور و دور از ظرف منبع ایجاد می کند.
برای شروع، به styles.css در ویرایشگر متن خود بازگردید. بین سایه کوچک تیره و سایه آبی بزرگتر در انتخابگر .disclosure-alert، CSS هایلایت شده زیر را از بلوک کد اضافه کنید:
styles.css
...
.disclosure-alert {
...
box-shadow: 0 0 0.5rem hsl(300, 40%, 5%),
0 6rem 4rem -2rem hsl(300, 40%, 5%),
0 0.5rem 6rem hsl(200, 40%, 30%),
0 0.5rem 10rem hsl(300, 40%, 30%);
}
...
این اضافه شدن به مجموعه سایه، افست محور x را روی 0 نگه می دارد، اما محور y را به طور قابل توجهی به 6rem می رساند. بعد، تاری به اندازه درخشش بزرگ نیست، اما در اندازه مناسب 4 rem است. سپس به مقدار گسترش blur می رسد که در این حالت روی -2rem تنظیم می شود. مقدار پیش فرض اسپرد 0 است که برابر با ظرف است. در -2rem، گسترش از ظرف به سمت داخل متراکم می شود تا جلوه بصری عمق ایجاد کند.
تغییرات خود را در styles.css ذخیره کنید، سپس index.html را در مرورگر بازخوانی کنید. سایه یک رنگ بنفش تیره است که این حس را ایجاد می کند که جعبه محتوای اصلی به خوبی بالای سطح ماه شناور است، همانطور که در تصویر زیر نشان داده شده است:
یکی دیگر از موارد استفاده از box-shadow ایجاد یک هایلایت و افکت مخروطی سایه است، همانطور که قبلاً با ویژگی border در هدر انجام دادید. مزیت استفاده از box-shadow به جای حاشیه این است که بر مدل جعبه تأثیر نمی گذارد، که باعث تغییر در جریان محتوا می شود. همچنین می توان از آن در ارتباط با حاشیه استفاده کرد. هنگام استفاده از این افکت با حاشیه، مقدار inset باید به box-shadow اضافه شود تا سایه در داخل ظرف باشد.
برای شروع استفاده از مقدار inset در box-shadow، styles.css را در ویرایشگر متن خود باز کنید. این افکت به دکمه‌ها اضافه می‌شود، بنابراین شما این استایل‌ها را در .button-primary، .button-primary:hover، .button-secondary و .button-secondary:hover اعمال خواهید کرد. مانند text-shadow، این شامل یک ترکیب افست 0 1px و 0 -1px خواهد بود. تفاوت این است که کلمه inset را می توان به ابتدا یا انتهای مقدار اضافه کرد، همانطور که در بلوک کد زیر مشخص شده است:
styles.css
...
.button-primary {
...
text-shadow: 0 1px hsl(200, 100%, 50%),
0 -1px hsl(200, 100%, 5%);
box-shadow: inset 0 1px hsl(200, 100%, 50%),
inset 0 -1px hsl(200, 100%, 15%);
}
.button-primary:hover {
...
text-shadow: 0 1px hsl(200, 100%, 45%),
0 -1px hsl(200, 100%, 0%);
box-shadow: inset 0 1px hsl(200, 100%, 45%),
inset 0 -1px hsl(200, 100%, 10%);
}
.button-secondary {
...
text-shadow: 0 1px hsl(200, 10%, 50%),
0 -1px hsl(200, 10%, 5%);
box-shadow: inset 0 1px hsl(200, 10%, 50%),
inset 0 -1px hsl(200, 10%, 15%);
}
.button-secondary:hover {
...
text-shadow: 0 1px hsl(200, 10%, 45%),
0 -1px hsl(200, 10%, 0%);
box-shadow: inset 0 1px hsl(200, 10%, 45%),
inset 0 -1px hsl(200, 10%, 10%);
}
این تغییرات را در styles.css ذخیره کنید و سپس index.html را در مرورگر خود refresh کنید. اکنون دکمه ها دارای یک برجسته و یک سایه هستند، شبیه به متن. این ترکیب با پس‌زمینه گرادیان، جلوه‌ای ساده و در عین حال متمایز برای دکمه‌ها ایجاد می‌کند. تصویر زیر نشان می دهد که چگونه این در مرورگر ارائه می شود:
در نهایت، شما همچنین می توانید یک مقدار گسترش تاری را به یک سایه داخلی اعمال کنید. اسپرد نقطه شروع تاری را از لبه به سمت بیرون حرکت می دهد، اما هنگام استفاده از اسپرد، نقطه شروع را به سمت داخل حرکت می دهد. این به این معنی است که وقتی یک مقدار منفی به گسترش روی یک ورودی اعمال می‌شود، سایه از ناحیه مشاهده عنصر منبسط می‌شود. گسترش بیرونی گسترش می تواند سایه ای ایجاد کند که شبیه یک گرادیان کوتاه است. این می تواند این توهم را ایجاد کند که یک عنصر در لبه ها گرد شده است زیرا سایه در زیر محتوای عنصر اعمال می شود.
برای شروع ایجاد این افکت، styles.css را در ویرایشگر متن خود باز کنید. به انتخابگر کلاس .legal-contents بروید و یک ویژگی box-shadow اضافه کنید. این سایه از سه سایه تشکیل خواهد شد. اولی یک سایه کوتاه در اطراف داخل کل ظرف ایجاد می کند و دو مورد بعدی یک سایه روشن دراز در بالا و پایین عنصر ایجاد می کند. CSS هایلایت شده در بلوک کد زیر نحوه تنظیم این را نشان می دهد:
styles.css
...
.legal-contents {
...
font-family: "Times New Roman", serif;
box-shadow: 0 0 0.25rem hsl(0, 0%, 80%) inset,
0 4rem 2rem -4rem hsl(0, 0%, 85%) inset,
0 -4rem 2rem -4rem hsl(0, 0%, 85%) inset;
}
...
تغییرات خود را در styles.css ذخیره کنید، سپس صفحه را در مرورگر بازخوانی کنید. اکنون سایه‌ها جلوه‌ای ایجاد می‌کنند که باعث می‌شود متن قانونی مانند پنجره‌ای به داخل ظرف ظاهر شود. سایه ها همچنین به تقویت رنگ های حاشیه ای که روی این عنصر اعمال شده اند کمک می کند. تصویر زیر نشان می دهد که چگونه این در مرورگر رندر می شود:
در این قسمت ویژگی box-shadow را عملی می کنید. شما همچنین از ویژگی‌های پخش تاری و درج کردن جعبه سایه استفاده کردید تا گزینه‌های یک ظاهر طراحی بیشتری داشته باشید. در بخش آخر، ویژگی outline را پیاده سازی می کنید، سپس از box-shadow برای ایجاد یک طرح کلی همه کاره تر استفاده می کنید.
با استفاده از ویژگی طرح کلی
آخرین ویژگی که بر لبه های عناصر تأثیر می گذارد، ویژگی outline است. در تمام مرورگرها، حالت :focus عناصر با استفاده از ویژگی outline ساخته می‌شود. با این حال، اجرای سبک :focus پیش فرض هر مرورگر به طور قابل توجهی متفاوت است. ویژگی outline شبیه به ویژگی border است، به جز دو تفاوت کلیدی: تغییرات خاصیت جهت دار را ندارد و مدل جعبه را تحت تأثیر قرار نمی دهد. آخرین مورد از این دو تفاوت، آن را برای سبک‌های فوکوس ایده‌آل می‌کند، زیرا نشانگر بصری عنصر فعال را بدون ایجاد اختلال در جریان محتوا ارائه می‌کند.
برای مشاهده پیش فرض مرورگر حالت :focus، index.html را در مرورگر خود باز کنید. از کلید TAB برای پیمایش در صفحه استفاده کنید تا زمانی که یکی از دکمه های پایین فوکوس شود. بسته به اینکه از چه مرورگری استفاده می کنید، ممکن است نتوانید سبک های پیش فرض :focus را ببینید. به عنوان مثال، فایرفاکس یک طرح کلی با نقطه سفید را نشان می دهد، اما در پس زمینه خاکستری روشن قابل درک نیست. تصویر زیر از چپ به راست نشان می دهد که چگونه سبک فوکوس پیش فرض در فایرفاکس، سافاری و کروم ظاهر می شود:
برای شروع سفارشی کردن حالت :focus خود با ویژگی outline، styles.css را در ویرایشگر متن خود باز کنید. به انتخابگر کلاس .button بروید و ویژگی outline را اضافه کنید:
styles.css
...
.button {
...
}
.button:focus {
outline: 0.25rem solid hsl(200, 100%, 50%);
}
...
همانند ویژگی border، مقدار طرح کلی شامل یک مقدار عرض، سبک و رنگ است. از آنجایی که هدف یک حالت فوکوس جلب توجه به یک عنصر است، عرض به 0.25rem افزایش می یابد که معادل 4px است. در مرحله بعد، استایل را روی حالت جامد قرار می دهید تا حالت فوکوس بیشتر شبیه سافاری و کروم باشد. در نهایت، رنگ را با hsl (200، 100، 50%) روی آبی تیره قرار می دهید.
تغییرات خود را در styles.css ذخیره کنید، سپس به مرورگر خود بازگردید و صفحه را بازخوانی کنید. یک بار دیگر، مرورگر نحوه نمایش طرح کلی را تعیین می کند. تصویر زیر نشان می دهد که این سبک ها در فایرفاکس، سافاری و کروم از چپ به راست چگونه هستند:
در هر سه مرورگر، ویژگی outline کاملاً متفاوت نمایش داده می شود. فایرفاکس دور کل شکل گرد دکمه را محکم نگه می دارد. سافاری یک کادر با زاویه راست ایجاد می کند، اما لبه های دکمه را لمس می کند. کروم شبیه سافاری است، اما فضای اضافی بین دکمه و طرح کلی اضافه می کند.
برای ایجاد سبکی که در همه مرورگرها شبیه به فایرفاکس باشد، به جای طرح کلی، باید از box-shadow استفاده کنید.
برای شروع ایجاد حالت :focus سفارشی تر، به فایل styles.css خود در ویرایشگر متن خود بازگردید. اولین کاری که باید انجام دهید این است که سبک طرح کلی پیش فرض مرورگر را با تغییر مقدار .button:focus نمایه انتخابگر به none غیرفعال کنید، همانطور که در بلوک کد زیر مشخص شده است:
styles.css
...
.button {
...
}
.button:focus {
outline: none;
}
...
سپس، به انتخابگرهای button-primary:hover و button-secondary:hover بروید و یک کاما به دنبال آن یک تغییر حالت :focus اضافه کنید، همانطور که در بلوک کد زیر مشخص شده است:
styles.css
...
.button-primary {
...
}
.button-primary:hover,
.button-primary:focus {
...
}
.button-secondary {
...
}
.button-secondary:hover,
.button-secondary:focus {
...
}
در نهایت، دو انتخابگر جدید برای هر دکمه ایجاد کنید: فوکوس، .button-primary: focus، و .button-secondary:focus. در داخل بلوک‌های انتخابگر جدید، یک ویژگی box-shadow جدید با همان سایه‌های داخلی از همتای :hover، :focus آنها اضافه کنید. سپس، سایه دیگری را با offset ها به مجموعه اضافه کنید و همه را روی 0 تار کنید. پس از آن، یک اسپرد 0.25rem اضافه کنید، که یک خط ثابت و غیر تار در اطراف عنصر ایجاد می کند. در نهایت رنگ یکسان را به هر دو نمونه اضافه کنید. CSS هایلایت شده در بلوک کد زیر نشان می دهد که چگونه این نوشته شده است:
styles.css
...
.button-primary {
...
}
.button-primary:hover,
.button-primary:focus {
...
}
.button-primary:focus {
box-shadow: inset 0 1px hsl(200, 100%, 45%),
inset 0 -1px hsl(200, 100%, 10%),
0 0 0 0.25rem hsl(200, 100%, 50%);
}
.button-secondary {
...
}
.button-secondary:hover,
.button-secondary:focus<^> {
...
}
.button-secondary:focus {
box-shadow: inset 0 1px hsl(200, 10%, 45%),
inset 0 -1px hsl(200, 10%, 10%),
0 0 0 0.25rem hsl(200, 100%, 50%);
}
این تغییرات را در styles.css ذخیره کنید و برای بازخوانی index.html به مرورگر خود بازگردید. اکنون، همانطور که از کلید TAB برای پیمایش در صفحه استفاده می کنید. صرف نظر از مرورگر، سبک :focus روی دکمه ها اکنون یکسان به نظر می رسد. تصویر زیر نشان می دهد که چگونه نسخه box-shadow یک طرح کلی به همراه کل صفحه در مرورگر ظاهر می شود:
این بخش آخر شما را با ویژگی outline و نحوه استفاده هر مرورگر از آن به روش های مختلف آشنا کرد. حداقل، یک نشانگر :focus برای دسترسی مورد نیاز است و ویژگی outline کار را انجام می دهد. با گسترش این موضوع، شما همچنین با ایجاد یک جعبه سایه با ارزش گسترش زیاد، یک سبک فوکوس پیشرفته‌تر و سازگارتر از نظر بصری ایجاد کردید.
نتیجه
سبک دادن به لبه های عناصر به طراحی یک وب سایت اجازه می دهد تا تنوع و توجه را به خود جلب کند. ویژگی border می تواند به ارائه تعریف و تفکیک بین محتوا کمک کند. ویژگی حاشیه-شعاع زیبایی شناسی را نرم می کند و به تعریف نگرش طرح کمک می کند. سایه های روی متن و جعبه ها عمق می بخشد و به جلب توجه به محتوا کمک می کند. در نهایت، ویژگی outline راه‌های در دسترس را برای جلب توجه به عناصر با فوکوس صفحه کلید فراهم می‌کند. در این آموزش، شما از تمام این ویژگی ها برای ایجاد یک صفحه وب از نظر بصری جالب و قابل استفاده استفاده کردید. درک هر یک از این ویژگی ها و نحوه و زمان استفاده از آنها به حل انواع مشکلات رابط فرانت اند و ایجاد تجربیات جدید کمک می کند.
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/
برچسب‌ها:CSS, VPS یا سرور مجازی, آشنایی با خواص رنگ در CSS, ایجاد سرور مجازی, ایجاد یکborder-radius, خرید سرور مجازی, راه اندازی پایه HTML, راه اندازی پایه HTML و CSS, سرورمجازی, سرورمجازی آمریکا
