5 ترفند css3 با عناصر کاذب before:: و after::
اکثر مردم فکر می کنند تفاوت عمده ای بین کلاس های کاذب(PseudoClasses) و عناصر کاذب (PseudoElements) وجود ندارد، اما خلاف تصور آنها یک تفاوت عمده بین این دو وجود دارد.
امروزه همه ما می دانیم که ما از این نوع کلاس ها و عناصر به عنوان بخشی از css3 استفاده می کنیم. Css3 که مدتی است معرفی شده، این نوع عناصر کاذب را ارائه می دهد.
تفاوت بین کلاس های کاذب و عناصر کاذب
کلاس های کاذب
بعنوان انتخابگرها استفاده می شوند و به برخی انتخاب هایی که توسط انتخابگرهای ساده بیان نشده اند، کمک می کنند. به روشی ساده ما می توانیم برخی از جلوههای css را که نمی توانیم با انتخابگر خاصی انجام دهیم را با استفاده از این نوع کلاس ها انجام دهیم.
برای مثال: hover:
عناصر کاذب
برای ایجاد عناصر جدید که معمولا در سند وجود ندارند به کار گرفته می شوند و به عنوان یک انتخابگرعادی کنترل می شوند.
برای مثال: before::
در اینجا ما می توانیم ببینیم که یک تفاوت بین این دو وجود دارد و آن استفاده از “(:)colon” است.
برای کلاس های کاذب ما از تک colon (:) و برای عناصر کاذب از دو colon (::) استفاده کردیم که یکی از قواعد css3 است. مرورگرها هر دو نوع قواعد را پشتیبانی می کنند اما در IE(نسخه قدیمی تر از9) فرمت دو colon (∷) پشتیبانی نمی شود.
خاصیت مهم برای عناصر کاذب ” ” : content است.
مقادیر برای خاصیت content عبارتند از:
Content: ” ”
Content: ”هرمقدار مشخصی ”
بیایید برخی ترفندهای css با عناصر کاذب را شروع کنیم:
روش 1: عناصر کاذب با Font Awesome
بر طبق آخرین روند طراحی وب سایت بسیاری از سایت ها در حال حاضر از Font Awesome بیشتر از تصاویر شبیه به آیکون برای ایجاد آیکون ها استفاده می کنند که سرعت بارگزاری وب سایت را نیز افزایش می دهد.
Html code:
<ul> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> </ul>
Css code:
ul li::before{ content: "\f054"; font-family: FontAwesome;}
Result:
روش 2:عناصر کاذب با Background
آیا تا به حال سعی کرده اید تصویر پس زمینه را با استفاده از این نوع css به هر عنصر بدهید؟ اگر نه کافیست کد زیر را امتحان کنید.
Html code:
<h2>I have the background Image</h2>
Css code:
h2::after { width: 100%; height: 23px; content: ""; background: url("../images/separator.png") no-repeat center center; display: block;}
Result:
روش3: عناصر کاذب با خاصیت content
این جالب ترین و شگفت انگیزترین ترفندی است که انجام می دهید. گاهی اوقات یک حالت رخ می دهد که ما باید اندکی متن به هر بلاک اضافه کنیم و ما نمی توانیم این کار را انجام دهیم. برای این مشکل، در اینجا راه حلی وجود دارد.
Html code:
<p>This is an example of Pseudo </p>
Css code:
p::after { content: "Elements"; display: inline-block;}
Result:
روش 4: عناصر کاذب با clear floats
چه اتفاقی می افتد اگر ما فراموش کنیم خاصیت clear را برای دو بلاک که float هستند قرار دهیم؟ این کار ممکن است نتایج ناگوار را نمایش دهد. برخی از آخرین نسخه ی مرورگرها هوشمند هستند و این نوع اشتباهات را نادیده می گیرند اما برخی مرورگرها اینکار را انجام نمی دهند. در اینجا راه حلی برای clear کردن float ها وجود دارد اما قبل از آن، تصویر زیر را بدون clear کردن float ها بررسی کنید.
Html code:
<div class=”container”> <div class=”left”>This is an example</div> <div class=”right”>This is an example</div> </div>
Css code:
.container::after, .container::before { content: ""; display: block;} .container::after { clear: both;} .left { margin-right: 15px; padding: 25px; width: 60%; float: left; background: #2a2a2a; color: #fff; text-align: center; min-height: 95px;} .right { padding: 25px; width: 25%; float: left; background: #2a2a2a; color: #fff; text-align: center;}
و اینجا نتیجه نهایی است پس از به کار بردن خاصیت clear با استفاده از عناصر کاذب:
روش 5: عناصر کاذب با بلاک روکش(overlayblocks) در hover
آخرین بازار طراحی گرافیکی به ما پیشنهاد میکند بلاک های روکش را به عنوان یکی از جلوه های hover برای برخی عناصر بلاک انجام دهیم. همچنین ما می توانیم از عناصر کاذب به عنوان بخشی از طراحی خود استفاده کنیم، نه از لحاظ فیزیکی بلکه به صورت بصری.
Html code:
<ul> <li> <img alt="Image" src="images/thumb.jpeg"> <p>Lorem Ipsum</p> </li> <li> <img alt="Image" src="images/thumb.jpeg"> <p>Lorem Ipsum</p> </li> </ul>
Css code:
ul li { width: 49%; padding: 0 5px; display: inline-block; text-align: center; position: relative;} ul li img { max-width: 100%; height: auto;} ul li p { margin: 0; padding: 20px; background: #ffffff;} ul li::after { height: 100%; content: ""; background: rgba(0,0,0,0.8); position: absolute; top: 0; left: 5px; right: 5px; opacity: 0;} ul li:hover::after, ul li:hover::before { opacity: 1; cursor: pointer;} ul li::before { content: "Hover Text"; position: absolute; top: calc(50% - 12px); left: calc(50% - 40px); color: #ffffff; opacity: 0; z-index: 10;}
Result:
مطالب زیر را حتما مطالعه کنید
حسگرها و فناوریهای پوشیدنی و کاربردهای آنها در پزشکی
نکاتی که باید پیش از دانلود نمودار ER بدانید
۵ راه کسب درآمد از برنامه نویسی
پایگاه داده (Data Base) چیست؟
برنامه نویسی چیست؟
آموزش برنامهنویسی | برنامهنویسی چیست و چگونه میتوان آنرا فراگرفت؟
1 Comment
Join the discussion and tell us your opinion.
دیدگاهتان را بنویسید لغو پاسخ
برای نوشتن دیدگاه باید وارد بشوید.
مممنون ، عالی (;