۸ ترفند مفید CSS که باید بدانید — راهنمای کاربردی
CSS یک زبان خاص است که در نگاه نخست ممکن است کاملاً ساده به نظر برسد؛ اما برخی جلوههای خاص که از نظر تئوری و به ظاهر ساده هستند در اغلب موارد در هنگام پیادهسازی عملی پیچیده میشوند. در این مقاله چند نکته و ترفند مفید CSS را ارائه کردهایم که به شما کمک میکنند تا بهبود قابل توجهی در مسیر توسعه پروژههای خود به دست بیاورید.
در این مقاله قصد نداریم در مورد میزان پیچیده بودن CSS صحبت کنیم؛ بلکه قصد داریم برخی ترفندهای مفید را با شما به اشتراک بگذاریم که فکر میکنیم احتمال یافتن آنها در راهنماهای دیگر کمتر است.
فوتر چسبنده
فوتر چسبنده یا Sticky Footer یکی از موارد بسیار رایج است که ممکن است پیادهسازی آن برای افراد مبتدی دشوار باشد. در اغلب پروژهها به یک فوتر نیاز داریم که صرف نظر از محتوای صفحه در انتهای صفحه همواره بر جای خود باقی بماند. اگر محتوای صفحه از حوزه دید خارج شود، فوتر باید سازگار شود.
تا پیش از CSS3 طراحی این جلوه بدون دانستن ارتفاع دقیق فوتر کار دشواری بود و با این که آن را فوتر چسبنده مینامیم؛ اما رسیدن به این تأثیر صرفاً با استفاده از position: sticky ممکن نیست، چون این خصوصیت میتواند کل محتوا را مسدود کند.
امروزه سازگارترین راهحل استفاده از Flexbox است. نکته کلیدی، استفاده از مشخصه کمتر شناخته شده flex-grow روی div شامل محتوای اصلی صفحه است. در مثال زیر ما از تگ main به این منظور استفاده کردهایم.
مشخصه flex-grow به کنترل میزان پر شدن کانتینر از سوی آیتم flex در رابطه با عناصر flex دیگر میپردازد. با تعیین مقدار آن به صورت 0 دیگر نمیتواند رشد یابد و بنابراین باید آن را به میزان 1 یا بیشتر تعیین کنیم. در مثال زیر ما از مشخصه میانبر flex: auto استفاده کردهایم که به صورت پیشفرض مقدار flex-grow را برابر با 1 تنظیم میکند.
برای جلوگیری از هر گونه رفتار ناخواسته میتوانیم flex-shrink: 0 را نیز به footer اضافه کنیم. flex-shrink عملاً مخالف مشخصه flex-grow است و مقدار جمع شدگی یک عنصر برای قرار گرفتن در کانتینرش را مشخص میکند. تعیین آن به میزان 0 از کوچک شدن فوتر به طور کلی ممانعت میکند و بدین ترتیب مطمئن میشویم که ابعاد خود را حفظ خواهد کرد.
کد HTML
1<div id="document">
2 <main>
3 <h1>Everything apart from the footer goes here</h1>
4 <p>Add more text here, to see how the footer responds!</p>
5 </main>
6 <footer>
7 <h1>The footer goes here</h1>
8 </footer>
9</div>
کد CSS
1#document {
2 height: 100vh;
3 display: flex;
4 flex-direction: column;
5}
6
7main {
8 flex: auto;
9}
10
11footer {
12 flex-shrink: 0;
13}
14
15/* Other styling elements, that are not necessary for the example */
16
17* {
18 margin: 0;
19 font-family: Candara;
20}
21
22h1, p {
23 padding: 20px;
24}
25
26footer {
27 color: white;
28 background: url(https://images.unsplash.com/photo-1550795598-717619d32900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80);
29 background-position: center;
30 background-repeat: no-repeat;
31 background-size: cover;
32}
33
34footer > h1 {
35 text-shadow: 1px 1px 4px #00000080;
36}
بزرگنمایی تصاویر هنگام قرار گرفتن ماوس
جلوه zoom-on-hover روشی عالی برای جلب توجه به تصاویر قابل کلیک است و زمانی که کاربر ماوس خود را روی یک تصویر میبرد، تصویر کمی بزرگتر میشود؛ اما ابعاد آن حفظ میشود. برای رسیدن به این جلوه باید یک div پوششی داشته باشیم که پیرامون تگ img نرمال ما در HTML قرار گیرد.
برای این که این جلوه عملیاتی شود باید مشخصههای width و height عنصر والد را تعیین کنیم و مطمئن شویم که overflow به صورت hidden تنظیم شده است. سپس میتوانیم هر نوع انیمیشن تبدیل که میخواهیم روی تصویر اصلی اعمال کنیم.
کد HTML
1<div class="img-wrapper">
2 <img class="inner-img" src="https://source.unsplash.com/random/400x400" />
3</div>
4
5<!-- Additional examples -->
6
7<div class="img-wrapper">
8 <img class="inner-img" src="https://source.unsplash.com/random/401x401" width="400px" height="400px" />
9</div>
10
11<div class="img-wrapper">
12 <img class="inner-img" src="https://source.unsplash.com/random/402x402" width="400px" height="400px" />
13</div>
کد CSS
1.img-wrapper {
2 width: 400px;
3 height: 400px;
4 overflow: hidden;
5}
6
7.inner-img {
8 transition: 0.3s;
9}
10
11.inner-img:hover {
12 transform: scale(1.1);
13}
14
15/* Other styling elements, that are not necessary for the example */
16
17.img-wrapper {
18 display: inline-block;
19 box-sizing: border-box;
20 //border: 1px solid #000;
21}
حالت شب به صورت آنی
اگر قصد دارید روش سریعی برای اعمال پوسته «حالت شب» در وبسایت خود طراحی کنید، میتوانید از فیلترهای invert و hue-rotate استفاده کنید.
()filter: invert روی مقیاسی از 0 تا 1 عمل میکند که 1 سفید را به سیاه تبدیل میکند. ()filter: hue-rotate محتوای رنگی عناصر ما را به ترتیبی تغییر میدهد که کمابیش همان سطح از جداسازی از همدیگر را حفظ کنند. مقادیر آن از 0deg تا 360deg متغیر است.
با ترکیب کردن این جلوهها روی تگ body میتوانید به سرعت یک نسخه تاریک از سایت خود ایجاد کنید. دقت کنید که برای تأثیر گرفتن پسزمینه باید به آن یک رنگ اختصاص داده باشید.
مثالی از این وضعیت به صورت زیر است:
1body {
2 background: #FFF;
3 filter: invert(1) hue-rotate(210deg);
4}
با استفاده از این تنظیمات، میتوانیم صفحه اصلی وبسایت گوگل را به صورت آنی به شکل زیر دربیاوریم:
نقطههای گلولهای سفارشی
برای ایجاد «نقطههای گلولهای» (Bullet points) سفارشی برای یک لیست نامرتب میتوانید از مشخصه content به همراه شبه عنصر ::before استفاده کنید. در CSS زیر ما از دو کلاس complete. و incomplete. برای ایجاد تمایز بین دو نوع مختلف از نقاط گلولهای استفاده کردهایم.
کد HTML
1<h1>Checklist</h1>
2
3<ul class="complete">
4 <li>Item 1</li>
5 <li>Item 2</li>
6 <li>Item 3</li>
7</ul>
8
9<ul class="incomplete">
10 <li>Item 4</li>
11 <li>Item 5</li>
12 <li>Item 6</li>
13</ul>
کد CSS
1ul {
2 list-style: none;
3}
4
5ul.complete li::before {
6 content: '? ';
7}
8
9ul.incomplete li::before {
10 content: '☐ ';
11}
12
13/* Other styling elements, that are not necessary for the example */
14
15* {
16 font-family: Candara;
17}
18
19h1 {
20 margin: 2rem 2.5rem;
21 font-size: 3rem;
22}
23
24ul {
25 font-size: 1.7rem;
26 margin: 0 auto;
27}
کاربرد دیگر: مسیرهای ناوبری
روشهای مفید زیادی برای بهرهمندی از مزیت مشخصه content وجود دارد. از آنجا که کاراکتر (/) و دیگر نمادها برای جداسازی مسیرهای ناوبری به صورت نمادین استفاده میشوند، تعریف کردن آنها در CSS کمک زیادی به معنابخشی کد ما میکند. مانند اغلب مثالهای دیگر این نوشته، در این جلوه نیز از شبه کلاس استفاده کردهایم که امکان استفاده آن تنها در CSS3 وجود دارد.
کد HTML
1<div class="breadcrumb">
2 <a>Home</a>
3 <a>Shop</a>
4 <a>T-Shirts</a>
5</div>
کد CSS
1.breadcrumb a:first-child::before {
2 content: " » ";
3}
4.breadcrumb a::after {
5 content: " /";
6}
7.breadcrumb a:last-child::after {
8 content: "";
9}
10
11/* Other styling elements, that are not necessary for the example */
12
13* {
14 text-align: center;
15 font-family: Candara;
16 font-size: 1.3rem;
17}
تصاویر Parallax
این جلوه چشمنواز محبوبیت فزایندهای در وب یافته است و از آن میتوان برای حیات بخشیدن به هر صفحه در زمان اسکرول شدن از سوی کاربر استفاده کرد. با این که تصاویر نرمال یک صفحه با اسکرول شدن از سوی کاربر حرکت میکنند؛ اما تصاویر Parallax به نظر ثابت میآیند و تنها پنجرهای که آنها را از میان آن میبینیم، حرکت میکند.
مثال با استفاده صرف از CSS
مشخصه ضروری برای این جلوه، background-attachment: fixed است که موقعیت تصویر پسزمینه را بدون ویو-پورت تثبیت میکند. جلوه معکوس از طریق background-attachment: scroll به دست میآید.
کد HTML
1<div class="wrapper">
2 <h1>Scroll Down</h1>
3 <div class="parallax-img"></div>
4 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
5 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
6 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
7</div>
8
9<div class="wrapper">
10</div>
کد CSS
1.wrapper {
2 height: 100vh;
3}
4
5.parallax-img {
6 height: 100%;
7 background-attachment: fixed;
8 background-position: center;
9 background-repeat: no-repeat;
10 background-size: cover;
11}
12
13/* Other styling elements, that are not necessary for the example */
14
15* {
16 font-family: Candara;
17}
18
19p {
20 font-size: 1.1rem;
21}
22
23.parallax-img {
24 background-image: url('https://source.unsplash.com/random/1920x1080');
25}
مثال CSS به همراه جاوا اسکریپت
برای دستیابی به یک جلوه پیشرفتهتر میتوانید از جاوا اسکریپت برای افزودن حرکت به تصویر در زمان اسکرول شدن استفاده کنید.
کد HTML
1<div class="block">
2 <img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax">
3 <h2>Parallax Speed -1</h2>
4</div>
5<div class="block">
6 <img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax">
7 <h2>Parallax Speed 1</h2>
8</div>
9<div class="block">
10 <img src="https://unsplash.it/1920/1920/?gravity=center" data-speed="-0.25" class="img-parallax">
11 <h2>Parallax Speed -0.25</h2>
12</div>
13<div class="block">
14 <img src="https://unsplash.it/1920/1920/?image=1080" data-speed="0.25" class="img-parallax">
15 <h2>Parallax Speed 0.25</h2>
16</div>
17<div class="block">
18 <img src="https://unsplash.it/1920/1920/?random" data-speed="-0.75" class="img-parallax">
19 <h2>Parallax Speed -0.75</h2>
20</div>
21<div class="block">
22 <img src="https://unsplash.it/1920/1920/?blur" data-speed="0.75" class="img-parallax">
23 <h2>Parallax Speed 0.75</h2>
24</div>
کد CSS
1@import url(https://fonts.googleapis.com/css?family=Amatic+SC:400,700);
2html, body{
3 margin: 0;
4 padding: 0;
5 height: 100%;
6 width: 100%;
7 font-family: 'Amatic SC', cursive;
8}
9.block{
10 width: 100%;
11 height: 100%;
12 position: relative;
13 overflow: hidden;
14 font-size: 16px;
15}
16.block h2{
17 position: relative;
18 display: block;
19 text-align: center;
20 margin: 0;
21 top: 50%;
22 transform: translateY(-50%);
23 font-size: 10vw;
24 color: white;
25 font-weight: 400;
26}
27.img-parallax {
28 width: 100vmax;
29 z-index: -1;
30 position: absolute;
31 top: 0;
32 left: 50%;
33 transform: translate(-50%,0);
34 pointer-events: none
35}
کد جاوا اسکریپت
1// I know that the code could be better.
2// If you have some tips or improvement, please let me know.
3
4$('.img-parallax').each(function(){
5 var img = $(this);
6 var imgParent = $(this).parent();
7 function parallaxImg () {
8 var speed = img.data('speed');
9 var imgY = imgParent.offset().top;
10 var winY = $(this).scrollTop();
11 var winH = $(this).height();
12 var parentH = imgParent.innerHeight();
13
14
15 // The next pixel to show on screen
16 var winBottom = winY + winH;
17
18 // If block is shown on screen
19 if (winBottom > imgY && winY < imgY + parentH) {
20 // Number of pixels shown after block appear
21 var imgBottom = ((winBottom - imgY) * speed);
22 // Max number of pixels until block disappear
23 var imgTop = winH + parentH;
24 // Porcentage between start showing until disappearing
25 var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));
26 }
27 img.css({
28 top: imgPercent + '%',
29 transform: 'translate(-50%, -' + imgPercent + '%)'
30 });
31 }
32 $(document).on({
33 scroll: function () {
34 parallaxImg();
35 }, ready: function () {
36 parallaxImg();
37 }
38 });
39});
انیمیشن با تصاویر برش یافته
تا پیش از CSS3 برش دادن تصاویر نیز همانند فوتر چسبنده کار دشواری بود. اینک دو مشخصه به نامهای object-fit و object-position در اختیار داریم که موجب شده کار برش دادن آسان شود و هنگامی که با همدیگر استفاده شوند، امکان تغییر ابعاد یک تصویر بدون تأثیر روی نسبت ابعاد را فراهم میسازند.
تا پیش از معرفی شدن این مشخصهها، همواره امکان برش دادن تصاویر در نرمافزارهای ویرایش عکس وجود داشته است؛ اما مزیت بزرگ برش دادن تصاویر در یک مرورگر، امکانی است که موجب میشود بتوانیم تصاویر را به صورت بخشی از یک انیمیشن تغییر اندازه بدهیم.
برای نمایش تا حد امکان ساده این جلوه، در مثال زیر این افکت با استفاده از یک تگ <"input type="checkbox> فعال میشود. بدین ترتیب میتوانیم از مزیت شبه کلاس checked: در CSS بهرهمند شویم و نیازی به هیچ کد جاوا اسکریپت هم نداریم.
کد HTML
1<input type="checkbox" />
2<br />
3<img src="https://source.unsplash.com/random/1920x1080" alt="Random" />
کد CSS
1input {
2 transform: scale(1.5);
3 margin: 10px 5px;
4}
5
6img {
7 width: 1920px;
8 height: 1080px;
9 transition: 0s;
10}
11
12input:checked + br + img {
13 width: 500px;
14 height: 500px;
15 object-fit: cover;
16 object-position: left-top;
17 transition: width 2s, height 4s;
18}
حالتهای Blend
اگر تاکنون از فتوشاپ استفاده کرده باشید، احتمالاً میدانید که حالتهای مختلف ترکیب (Blend) آن تا چه حد قدرتمند است و میتوان جلوههای جالبی با آن خلق کرد. اما آیا میدانید که بسیاری از جلوههای ترکیب تصاویر فتوشاپ در CSS نیز ممکن هستند؟
در تصویر زیر صفحه اصلی وبسایت مدیوم را میبینید که در آن تصاویر دارای خصوصیات background-color به صورت lightblue و همچنین blend-mode:difference هستند.
به علاوه باید بدانید که تصاویر پسزمینه تنها روش برای بهرهمندی از مزیت حالتهای Blend نیستند. مشخصه mix-blend-mode امکان ترکیب عناصر با پسزمینه موجودشان را میدهد. بنابراین در مثال زیر میتوان جلوههایی مانند زیر را با استفاده از mix-blend-mode:color-dodge و پسزمینه lightsalmon به دست آورد.
نکته: در حال حاضر یک باگ در کروم نسخه 58 به بعد وجود دارد که mix-blend-mode روی عناصری که دارای تگهای <body> یا <html> شفاف هستند اعمال نمیشود. یک راهحل سریع این است که به این تگها background-color به صورت while بدهیم.
کد HTML
1<h1>This is an example title</h1>
کد CSS
1 h1 {
2 mix-blend-mode: color-dodge;
3 font-family: Candara;
4 font-size: 5rem;
5 text-align: center;
6 margin: 0;
7 padding: 20vh 200px;
8 color: lightsalmon;
9 }
10
11 html,
12 body {
13 margin: 0;
14 background-color: white;
15 }
16
17 body {
18
19 background-image: url(https://images.unsplash.com/photo-1550589348-67046352c5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80);
20 background-repeat: no-repeat;
21 background-size: cover;
22 min-height: 100vh;
23 overflow: hidden;
24 }
صفحه تصاویر به سبک پینترست
شبکه CSS و Flexbox امکان طراحی انواع مختلفی از طرحبندیهای واکنشگرا را تسهیل کردهاند و به ما امکان میدهند که به سادگی عناصر را به صورت مرکزی روی صفحه قرار دهیم که تا قبل از آن کار دشواری محسوب میشد.
با این وجود یک سبک از طرحبندی وجود دارد که کار آسانی نیست و پینترست از آن استفاده میکند و آن موقعیتیابی عمودی تغییرات همه عناصر بر مبنای ارتفاع عناصر بالای آن عنصر است.
بهترین روش برای رسیدن به این جلوه استفاده از مجموعه مشخصههای ستون CSS است. این مشخصهها به طور متداول برای ایجاد ستونهای متنی شبیه به روزنامه مورد استفاده قرار میگیرند؛ اما این نیز یک کاربرد عالی دیگر محسوب میشود. برای این که به این تأثیر برسیم باید عناصر را در یک div قرار دهیم و به این پوشش یک مشخصه column-width و column-gap بدهیم.
سپس برای اجتناب از تقسیم شدن عناصر بین دو ستون یک مشخصه column-break-inside: avoid به تک تک عناصر صفحه اضافه میکنیم. در مثال زیر میتوانید این جلوه را مشاهده کنید.
کد HTML
1<div id="columns">
2 <figure>
3 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
4 <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
5 </figure>
6
7 <figure>
8 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
9 <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
10 </figure>
11
12 <figure>
13 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
14 <figcaption>Belle, based on 1770’s French court fashion</figcaption>
15 </figure>
16
17 <figure>
18 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
19 <figcaption>Mulan, based on the Ming Dynasty period</figcaption>
20 </figure>
21
22 <figure>
23 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
24 <figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
25 </figure>
26
27 <figure>
28 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
29 <figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
30 </figure>
31
32 <figure>
33 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
34 <figcaption>Snow White, based on 16th century German fashion</figcaption>
35 </figure>
36
37 <figure>
38 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
39 <figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
40 </figure>
41
42 <figure>
43 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tiana.jpg">
44 <figcaption>Tiana wearing the <i>robe de style</i> of the 1920’s</figcaption>
45 </figure>
46 <small>Art © <a href="//clairehummel.com">Claire Hummel</a></small>
47 </div>
کد CSS
1@font-face{font-family:'Calluna';
2 src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/callunasansregular-webfont.woff') format('woff');
3}
4body {
5 background: url(//subtlepatterns.com/patterns/scribble_light.png);
6 font-family: Calluna, Arial, sans-serif;
7 min-height: 1000px;
8}
9#columns {
10 column-width: 320px;
11 column-gap: 15px;
12 width: 90%;
13 max-width: 1100px;
14 margin: 50px auto;
15}
16
17div#columns figure {
18 background: #fefefe;
19 border: 2px solid #fcfcfc;
20 box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
21 margin: 0 2px 15px;
22 padding: 15px;
23 padding-bottom: 10px;
24 transition: opacity .4s ease-in-out;
25 display: inline-block;
26 column-break-inside: avoid;
27}
28
29div#columns figure img {
30 width: 100%; height: auto;
31 border-bottom: 1px solid #ccc;
32 padding-bottom: 15px;
33 margin-bottom: 5px;
34}
35
36div#columns figure figcaption {
37 font-size: .9rem;
38 color: #444;
39 line-height: 1.5;
40}
41
42div#columns small {
43 font-size: 1rem;
44 float: right;
45 text-transform: uppercase;
46 color: #aaa;
47}
48
49div#columns small a {
50 color: #666;
51 text-decoration: none;
52 transition: .4s color;
53}
54
55div#columns:hover figure:not(:hover) {
56 opacity: 0.4;
57}
58
59@media screen and (max-width: 750px) {
60 #columns { column-gap: 0px; }
61 #columns figure { width: 100%; }
62}
مثال فوق همچنین نمونهای عالی از شبه کلاس ()not: در CSS محسوب میشود. از این شبکه کلاس به همراه :hover استفاده شده است تا همه عناصر به جز آن که ماوس روی آن قرار دارد محو شوند.
سخن پایانی
در پایان امیدواریم نمونههای فوق توانسته باشند برخی جلوههای مشخص CSS را برای شما روشنتر سازند و شاید حتی توجه شما را به برخی از ویژگیهای CSS که نمیدانستید جلب کرده باشند. تصمیمگیری در مورد این که کدام ترفندهای CSS را در این نوشته ارائه کنیم کار دشواری بوده است، چون چندین جلوه دیگر نیز وجود دارد که بسیار مفید هستند. این موارد شامل ویژگیهایی مانند انیمیشن با استفاده از کیفریم، اسنپینگ اسکرول، نوارهای ناوبری پیچیدهتر، جلوههای 3 بعدی و استفاده از CSS برای پرینت است.
اما ویژگیهایی از این دست در نوشتهای با موضوع ترفندهای ساده جای نمیگیرند و باید در مقالات پیشرفتهتری ارائه شوند که در مطالب آینده مجله فرادرس میتوانید در مورد آنها بیشتر بخوانید.
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد میشوند:
- مجموعه آموزشهای طراحی و توسعه پروژه های وب
- مجموعه آموزش طراحی سایت با HTML و CSS
- مجموعه آموزشهای برنامه نویسی
- آموزش تکمیلی طراحی وب با CSS3) CSS)
- مزایای استفاده از پیش پردازشگر (Sass) در CSS — از صفر تا صد1
- طراحی یک تقویم ساده با Moment ،CSS و Vue — راهنمای مقدماتی
==