آموزش CSS
در CSS چندین روش برای مخفی‌سازی و جلوگیری از نمایش عناصر وجود دارد که مهمترین آنها عبارتند از: استفاده از پراپرتی display با مقدار none، استفاده از پراپرتی visibility با مقدار hidden و پراپرتی opacity با مقدار صفر. در این درس، این روش‌ها را معرفی کرده و با تفاوت آنها آشنا می‌شویم.
پراپرتی display را قبلاً هم بارها دیده‌ایم و می‌دانیم که شیوه‌ی نمایش عناصر را تعیین می‌کند. اگر مقدار none را به این پراپرتی اختصاص دهیم، عنصر مورد نظر نمایش داده نمی‌شود.
CSS
.hidden-paragraph{
display: none;
}نکته‌ی مهم در مورد این روش که از مثال بالا هم مشخص است، این است که عنصر مورد نظر حتی رندر هم نمی‌شود. یعنی فضایی در صفحه اشغال نمی‌کند. درست مثل اینکه از چند کتاب که روی هم قرار دارند، یکی را بیرون بکشیم.
یک روش دیگر برای عدم نمایش یک عنصر این است که مقدار پراپرتی visibility را برای آن عنصر روی hidden تنظیم کنیم.
CSS
.hidden-patagraph{
visibility: hidden;
}بر خلاف روش قبل، در اینجا عنصر مورد نظر رندر می‌شود و فقط نمایش داده نمی‌شود. بنابراین، فضایی که این عنصر برای نمایش نیاز دارد، دست‌نخورده باقی می‌ماند و سایر عناصر آن را پر نمی‌کنند. دزست مثل اینکه با پاک‌کن بخشی از یک نقاشی را پاک کنیم.
از پراپرتی opacity برای تعیین میزان شفافیت (transparency) یک عنصر و محتوای آن استفاده می‌شود. این پراپرتی می‌تواند یک عدد اعشاری بین صفر و 1 را به عنوان مقدار خود دریافت کند. مقادیر بزرگتر به منزله‌ی شفافیت کمتر هستند و لذا مقدار صفر باعث محو شدن عنصر و عدم نمایش آن می‌شود:
CSS
.hidden-paragraph{
opacity: 0;
}نتیجه‌ی استفاده از این روش با پراپرتی visibility با مقدار hidden یکی است. یعنی عنصر حذف می‌شود و فضای آن دست‌نخورده باقی می‌ماند. اما هنوز یک تفاوت بین این دو روش وجود دارد:
پراپرتی visibility عنصر را به صورت آنی مخفی کرده یا نمایش می‌دهد و بنابراین نمی‌تواند برای ایجاد ترنزیشن به کار رود اما پراپرتی opacity می‌تواند با استفاده از یک ترنزیشن به‌صورت تدریجی محو شود یا مقدارش تغییر کند. از این تکنیک می‌توانیم برای خلق افکت‌های fade-in و fade-out استفاده کنیم. با ترنزیشن‌های CSS در فصل دهم آشنا می‌شویم.