عناصر صفحه وب را با CSS3 محو و بیرون بکشید

انتقال CSS3 ایجاد جلوه های محو شدن خوب

طراحان وب مدت طولانی خواستار کنترل بیشتری بر صفحاتی شدند که هنگام ایجاد CSS3 در صحنه ایجاد شدند. سبک های جدید معرفی شده در CSS3 به متخصصان وب توانایی اضافه کردن اثرات فتوشاپ به صفحات خود را. این شامل خواص مانند سایه های سایه و درخشان ، گوشه های گرد و بیشتر بود. CSS3 همچنین اثرات متحرک را معرفی می کند که می تواند برای ایجاد تعامل خوب در سایت ها استفاده شود.

یک اثر بصری بسیار خوبی که شما می توانید به عناصر در وب سایت خود اضافه کنید با استفاده از CSS3 این است که آنها را با استفاده از ترکیبی از خواص برای کدورت و انتقال تغییر دهید. این روش آسان و به خوبی پشتیبانی می شود که صفحات شما را با استفاده از ایجاد مناطق محو شده ای که هنگام بازدید یک سایت کاری می کنند، تمرکز می کنند مانند تعامل با آن عنصر.

بیایید نگاهی به چگونگی افزودن این اثر تصویری تعاملی به عناصر مختلف در صفحات وب خود کنیم.

اجازه دهید Opacity را در Hover تغییر دهید

ما با نگاه کردن به چگونگی تغییر کدورت یک تصویر زمانی که یک مشتری روی آن عنصر حرکت می کند شروع می شود. برای این مثال (HTML در زیر نشان داده شده است) من از یک تصویر با ویژگی کلاس greydout استفاده می کنم.

برای ایجاد آن از رنگ قرمز، قوانین سبک زیر را به شیوه CSS ما اضافه می کنیم:

.greydout {
-webkit-opacity: 0.25؛
-moz-opacity: 0.25؛
کدورت: 0.25؛
}

این تنظیمات کدورت 25 درصد است. این به این معنی است که تصویر به اندازه یک چهارم شفافیت طبیعی آن نمایش داده خواهد شد. کاملا شفاف با هیچ شفافیتی 100٪ و 0٪ کاملا شفاف خواهد بود.

بعد، وقتی که ماوس روی آن حرکت کرد، تصویر را روشن کنید (یا دقیق تر، به طور کامل مبهم)، شما می توانید عبارت زیر را اضافه کنید: hover pseudo-class:

.greydout: شناور {
-webkit-opacity: 1؛
-moz-opacity: 1؛
کدورت: 1؛
}

شما متوجه خواهید شد که برای این مثال ها، من از نسخه های پیش فرض فروشنده از قانون استفاده می کنم تا سازگاری برگشتی را برای نسخه های قدیمی تر مرورگرها تضمین کند. در حالی که این یک عمل خوب است، واقعیت این است که قانون کدورت در حال حاضر به خوبی توسط مرورگرها پشتیبانی می شود و این خطوط پیشرو این فروشنده را رها می کند. با این وجود، هیچ دلیلی وجود ندارد که این پیشوندها را شامل شود، اگر بخواهید از نسخه های قدیمی تر مرورگر اطمینان حاصل کنید. فقط مطمئن باشید که به دنبال بهترین روش پذیرفته شده پایان دادن به اعلام با نسخه معمولی، بدون نسخه از سبک است.

اگر شما این سایت را بر روی یک سایت قرار دادید، خواهید دید که تنظیم این کدورت تغییر بسیار ناگهانی است. اول آن خاکستری است و پس از آن نه، بدون دولت موقت بین دو. این مانند یک سوئیچ نور است - روشن یا خاموش است. این ممکن است همان چیزی باشد که میخواهید، اما ممکن است بخواهید با تغییراتی که تدریجی است، آزمایش کنید.

برای افزودن یک اثر واقعا خوب و این تدریجی محو شدن، شما می خواهید اموال انتقال را به کلاس .greydout اضافه کنید:

.greydout {
-webkit-opacity: 0.25؛
-moz-opacity: 0.25؛
کدورت: 0.25؛
-webkit-transition: همه 3s سهولت؛
-moz-transition: همه 3s سهولت؛
-ms-transition: همه 3s سهولت؛
-o-transition: همه 3s سهولت؛
انتقال: همه 3s سهولت؛
}

با استفاده از این کد، تغییر به تدریج تغییر می کند و نه فقط به طور ناگهانی تغییر می کند.

یک بار دیگر، ما از تعدادی از قوانین پیشگام فروشندگان در اینجا استفاده می کنیم. انتقال به خوبی به عنوان opacity پشتیبانی نمی شود، بنابراین این پیشوند ها منطقی هستند.

یکی از چیزهایی که باید به یاد داشته باشید این است که این تعاملات را برنامه ریزی کنید این است که دستگاه های صفحه لمسی حالت "شناور" ندارند، بنابراین اغلب این جلوه ها برای هر کسی با استفاده از یک دستگاه صفحه لمسی مانند تلفن همراه از بین می رود. انتقال اغلب اتفاق می افتد، اما این اتفاق می افتد به طوری که آنها واقعا نمی تواند دیده شود. این خوب است اگر شما این را به عنوان یک اثر پاداش خوب اضافه کنید، اما از تغییراتی که نیازی به دیدن محتوا برای درک آن نیست، اجتناب کنید.

از بین رفتن ممکن است بیش از حد

شما لازم نیست که با یک تصویر محو شده شروع کنید، می توانید از انتقال و کدورت استفاده کنید تا از یک تصویر کاملا ماتقون محو شود. با استفاده از همان تصویر، تنها با یک class offadeout:

class = "withfadeout">

مثل قبل، شفافیت را با استفاده از: hover selecter تغییر دهید:

.withfadeout {
-webkit-transition: همه 2s سهولت در خارج از؛
-moz-transition: همه 2s سهولت در خارج از؛
-ms-transition: همه 2s سهولت در خارج از؛
-o-transition: همه 2s سهولت در خارج از؛
انتقال: همه 2s سهولت در خارج از؛
}
.withfadeout: hover {
-webkit-opacity: 0.25؛
-moz-opacity: 0.25؛
کدورت: 0.25؛
}

در این مثال، تصویر به طور کامل مبهم و تا حدودی شفاف - معکوس از اولین نمونه ما است.

رفتن به فراتر از تصاویر

عالی است که شما می توانید این انتقال بصری را اعمال کنید و به تصاویر خیره می شود، اما شما فقط به استفاده از تصاویر با این اثرات CSS محدود نمی شود. شما به راحتی می توانید دکمه های CSS را سبک کرده و محو کنید زمانی که کلیک کرده اید و نگه دارید. شما فقط می توانید کدورت را با استفاده از کلاس pseudo فعال تنظیم کنید و انتقال را به کلاس که دکمه را تعریف می کند قرار دهید. برای دیدن آنچه اتفاق می افتد، این دکمه را کلیک کنید و نگه دارید.

این امکان وجود دارد که اساسا هر عنصر بصری محو شود زمانی که روی آن کلیک کرده یا کلیک کرده است. در این مثال من می توانم کدورت div و رنگ متن را تغییر دهم وقتی که ماوس روی آن قرار دارد. در اینجا CSS است:

# myDiv {
عرض: 280 پیکسل؛
رنگ پس زمینه: # 557A47؛
رنگ: #dfdfdf؛
padding: 10px؛
-webkit-transition: همه 4s سهولت خارج 0s؛
-moz-transition: تمام 4s سهولت خارج 0s؛
-ms-transition: تمام 4s سهولت خارج 0s؛
-o-transition: همه 4s سهولت خارج 0s؛
انتقال: همه 4s سهولت خارج 0s؛
}
#myDiv: شناور {
-webkit-opacity: 0.25؛
-moz-opacity: 0.25؛
کدورت: 0.25؛
رنگ: # 000؛
}

منوهای هدایت می توانند از رنگ های پس زمینه محو شوند

در این منوی ناوبری ساده رنگ پس زمینه به آرامی در داخل و خارج به عنوان منوس بر روی آیتم های منو از بین می رود. اینجا HTML است:

• • خانه
  • • CSS3 آموزش
    • • خواص CSS3

و اینجا CSS است:

ul # sampleNav {list-style: none؛ }
ul # sampleNav li {
نمایش: درون خطی؛
شناور به سمت چپ؛
padding: 5px 15px؛
حاشیه: 0 5px؛
-webkit-transition: همه 2s خطی؛
-moz-transition: همه 2s خطی؛
-ms-transition: همه 2s خطی؛
-o-transition: همه 2s خطی؛
انتقال: همه 2s خطی؛
}
ul # sampleNav li a {text-decoration: none؛ }
ul # sampleNav li: hover {
رنگ پس زمینه: # DAF197؛
}

پشتیبانی مرورگر

همانطور که چندین بار به آن اشاره کردم، این سبک ها دارای پشتیبانی بسیار خوبی از مرورگر هستند، بنابراین شما باید بدون هیچ مشکلی از آنها استفاده کنید. تنها استثنا در این نسخه نسخه های بسیار قدیمی تر اینترنت اکسپلورر است، اما با تصمیم اخیر مایکروسافت برای پایان دادن به پشتیبانی از تمام نسخه های IE زیر 11، این مرورگر های قدیمی تر کمتر و کمتر از یک مسئله - و در واقع، اگر مرورگر قدیمی تر این گذار محو شده را ببینید، که نباید یک مشکل بزرگ باشد. تا زمانی که این اثرات را به تعاملات لذت بخش محدود نکنید و بر روی آنها کار نکنید و یا محتوای کلیدی را نشان ندهید، مرورگرهای قدیمی که اثرات را پشتیبانی نمی کنند، تجربه ای کمتر لذت بخش خواهند داشت، اما کاربران در آن مرورگرها حتی نمی توانند این تفاوت را می دانید، به ویژه اگر می توانید سایت را به صورت طبیعی استفاده کنید و اطلاعاتی را که نیاز دارید دریافت کنید.

سرگرمی فوق العاده؛ تعویض دو عکس

در اینجا یک مثال از چگونگی محو کردن یک تصویر به دیگری است. از HTML استفاده کنید:

و CSS که یک کاملا شفاف را ایجاد می کند در حالی که دیگر کاملا شفاف است و پس از آن گذرواژه انتقال آنها دو است:

.swapMe img {-webkit-transition: همه 1s سهولت در خارج از؛ -moz-transition: همه 1s سهولت در خارج از؛ -ms-transition: همه 1s سهولت در خارج از؛ -o-transition: همه 1s سهولت در خارج؛ انتقال: همه 1s سهولت در خارج از؛ } .swap1، .swapMe: شناور .swap2 {-webkit-opacity: 1؛ -moz-opacity: 1؛ کدورت: 1؛ } .swapMe: شناور .swap1، .swap2 {-webkit-opacity: 0؛ -moz-opacity: 0؛ کدورت: 0؛ }