اثر پرده در شناور ماوس. جلوه های شناور اصلی برای تصاویر با استفاده از CSS3 خالص

24.06.2019 مشاوره

این پست شامل مجموعه‌ای از افکت‌ها و انیمیشن‌های مختلف CSS است که می‌تواند در کار شما مفید باشد و همچنین نیاز به استفاده مداوم از جاوا اسکریپت را از بین می‌برد. مثال ها ممکن است جدیدترین یا غیر معمول ترین نباشند، اما به نظر من مفید هستند.

1. ساعت CSS3 با جی کوئری

این ساعت با استفاده از یکی از ابزارهای اصلی CSS3 - چرخش و اتصال کتابخانه JQuery ایجاد شده است.

2. ساعت آنالوگ CSS

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

3. چرخش مکعب سه بعدی

چرخش و حرکت در طرفین مکعب با کلیدهای استاندارد "بالا"، "پایین"، "چپ" و "راست" انجام می شود. خود شکل سه بعدی با استفاده از webkit-perspective، -webkit-transform و -webkit-transition ساخته شده است.

4. چند مکعب سه بعدی جمع شونده

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

5. منوی آکاردئون

افکت منوی آکاردئون بر اساس CSS خالص است، جایی که با کلیک بر روی هر خط یک پنجره اضافی در بدنه خود لیست باز می شود. انیمیشن سفارشی در مرورگرهای مبتنی بر WebKit.

6. پیمایش اختلاف منظر با CSS

این یک انیمیشن پیمایش اختلاف منظر متحرک با استفاده از انتقال CSS بر اساس WebKit است. هنگامی که ماوس را روی پنجره متن نگه دارید، ستاره‌های پس‌زمینه به آرامی به سمت کنار حرکت می‌کنند. اثر پرواز ایجاد می شود.

7. ماتریس

فیلم کالت «ماتریکس» یکی از بهترین فیلم های علمی تخیلی است. مثال نشان می دهد که چگونه می توان تقریباً همان انیمیشن شگفت انگیز (صفحه سیاه با اعداد در حال اجرا) را در CSS3 بازسازی کرد.

8. پالارویدهای پویا

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

9. مقیاس تصویر

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

10. جلوه های جاوا اسکریپت در CSS3

به عنوان جایگزینی برای جاوا اسکریپت، این پست هفت افکت CSS3 را پیشنهاد می کند: بلوک های مختلفی که می چرخند، ناپدید می شوند، خارج می شوند، رشد می کنند و غیره.

11. رکوردهای مجازی DJ Hero

این پست نحوه ایجاد رکوردهای چرخشی را توضیح می دهد. سرعت چرخش را می توان مستقیماً روی صفحه تنظیم کرد.

12. وینیل کشویی

افکت کشویی رکورد وینیل با استفاده از انتقال CSS3 و HTML ایجاد می شود. چنین انیمیشنی یک صفحه وب را زنده می کند، به یک جلد آلبوم استاندارد اصالت می بخشد و غیره.

13. جلوه ها هنگام نگه داشتن ماوس روی یک عکس

هنگامی که مکان نما را روی یک تصویر نگه می دارید، می تواند به طرفین حرکت کند، بچرخد، منقبض شود، از مربعی به گرد تبدیل شود، تار شود... در یک کلام، تصاویر به هر شکل ممکن ویژگی های خود را تغییر می دهند.

14. مثلث دوار

وقتی روی مثلث کلیک می کنید، شروع به چرخش می کند.

15. فضا

یک فضای کیهانی کامل، بسته بندی شده در CSS. این نمونه ای از لایه های چرخان است (زمانی که در مرورگر بزرگنمایی می کنید بیشتر قابل توجه است).

16. Las Meninas به صورت سه بعدی

یک افکت CSS جالب که نقاشی معروف دیگو ولاسکز "Las Meninas" را سه بعدی جلوه می دهد.

17. CSS برای Mac OS X

در پایین صفحه مجموعه ای از آیکون های اصلی Mac OS X وجود دارد که با نگه داشتن ماوس روی آن بزرگ می شوند. این افکت پویایی را به سایت اضافه می کند.

18. دراپ در مدال

جلوه‌های CSS3 و ویژگی‌های Drop-In Modals به شما کمک می‌کنند تغییرات مدال سریع، متحرک و آسان ایجاد کنید.

19. متحرک سازی اشیاء

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

20. ساعت رنگی

ساعت رنگی بر اساس jQuery و CSS3 است. اثر مشابهی در زمینه انتظار برای اتمام برخی رقابت ها، رای دادن و موارد مشابه مفید خواهد بود.

21. گالری لایت باکس با جی کوئری و CSS3

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

22. پیش نمایش "الاستیک".

بزرگنمایی پیش‌نمایش تصویر در شناور. بنابراین، هنگامی که کلیک می کنید، منو به نسبت افزایش می یابد.

23. کارت های پویا

این مثال مجموعه ای پویا از کارت ها با استفاده از ویژگی های HTML و CSS3 است.

24. منوی کشویی JQuery

مثال منوی اسلایدout با استفاده از ترکیبی از CSS3 و JQuery ایجاد می شود. هنگامی که ماوس را روی تصویر نگه می دارید، یک پنجره بازشو با متن ظاهر می شود.

25. زبانه های CSS

در مثال، قرار دادن ماوس روی سربرگ ها باعث می شود که لیست زیر تغییر کند.

26. منوی چشم ماهی

این مثال نحوه ایجاد منوی Fisheye را با استفاده از انیمیشن های CSS و SVG نشان می دهد. به عنوان یک امتیاز اضافی، یک SVG دمو در تگ IMG استفاده می شود.

27. منوی کشویی

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

28. تیتراژ جنگ ستارگان

تیتراژ معروف جنگ ستارگان. HTML و CSS برای اجرای آنها کافی خواهد بود.

29. اثرات بیشتر Fisheye در CSS

دوباره، آیکون هایی که با نگه داشتن ماوس روی آن افزایش می یابند.

30. انیمیشن فریم به فریم

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

31. Imperial AT-AT Walker

بار دیگر Star Wars - این واکر متحرک AT-AT با استفاده از CSS3 ساخته شده است.

32. آکاردئون CSS دیگر

وقتی روی یک ردیف کلیک می کنید، جدول بزرگ می شود.

33. منوی کشویی ساده

40. منوی کشویی
گزینه دیگری برای یک منوی کشویی ساده و زیبا با استفاده از CSS.

اگر افکت را دوست دارید، می توانید به سادگی کد تمام شده را کپی کرده و از آن استفاده کنید!

وب سایت خود را زنده کنید!

افکت های شناور مختلف می توانند به صفحات وب سایت شما تازگی ببخشند. قبلاً برای هر اثری مجبور بودید با جاوا اسکریپت سروکار داشته باشید، اما امروزه پس از ظهور فناوری CSS3، همه چیز را می توان بدون استفاده از جاوا اسکریپت انجام داد.

نمونه های امروزی همگی برای مرورگرهای مدرن جدید پیاده سازی و بهینه سازی شده اند و قطعاً در آنها (مثلاً در موزیلا یا مرورگرهای خانواده WebKit) کار خواهند کرد. ما نمی توانیم به شما اطمینان دهیم که در اینترنت اکسپلورر کار می کند، اما در آخرین نسخه ها قطعاً افکت ها همانطور که باید کار می کنند. اما فراموش نکنید که برای هر افکت یک گزینه بازگشت جذاب در صورتی که مرورگر هنوز از افکت پشتیبانی نمی کند آماده شده است.

01. بزرگنمایی

نسخه ی نمایشی:برای مشاهده

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

انتقال در اینجا می تواند به صلاحدید شما تنظیم شود، و همچنین اثر بدون هیچ گونه انتقالی جذاب خواهد بود. به عنوان مثال، ما افکت را کمی صاف کردیم، که فکر می‌کردیم کمی به افکت اضافه می‌کند.

کد CSS جلوه‌های بالا را افزایش دهید

Ex1 img(
حاشیه: 5px جامد #ccc;
شناور به سمت چپ؛
حاشیه: 15 پیکسل
-webkit-transition: حاشیه 0.5s ease-out.
-moz-transition: حاشیه 0.5s ease-out.
-o-transition: حاشیه 0.5s ease-out.
}

Ex1 img:hover (
margin-top: 2px;
}
02. Stack & Grow

نسخه ی نمایشی:برای مشاهده

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

برای پیاده سازی در اینجا از تصاویر 400x133 پیکسل استفاده شده است. سپس با استفاده از CSS اندازه آنها به 300x100 پیکسل تغییر داده شد و با استفاده از ماوس بزرگ شدند. از آنجایی که در مثال کل لیست تراز وسط است، اندازه جدید تصاویر کل تراز را شکسته است. این مشکل را می توان با تنظیم حاشیه های منفی به نصف عرض تصاویر بزرگ شده حل کرد.

کد CSS برای Stack & Grow

/*مثال 2*/
#ظرف (
عرض: 300 پیکسل؛
حاشیه: 0 خودکار;
}

#ex2 img(
ارتفاع: 100 پیکسل؛
عرض: 300 پیکسل؛
حاشیه: 15 پیکسل 0;
-webkit-transition: all 1s ease.
-moz-transition: همه 1 ها سهولت.
-o-transition: همه 1 ها ease.
}

#ex2 img:hover (
ارتفاع: 133px;
عرض: 400 پیکسل؛
حاشیه سمت چپ: -50 پیکسل.
}
03. محو کردن متن در

نسخه ی نمایشی:برای مشاهده

در اینجا نویسنده می خواست چیزی شبیه به یک رویداد نوع جاوا اسکریپت ایجاد کند که در آن ماوس را روی یک آیتم نگه دارید و اثر روی مورد دیگر نمایش داده شود. در اینجا متن و تصویر گرفته شد و سپس در یک div تراز چپ جداگانه قرار گرفت. سپس پارامترهای color: transparent و line-height: 0px به div اضافه شدند. این به ما امکان داد متن را در لبه بالای div قرار دهیم و آن را به طور کامل پنهان کنیم.

برای اینکه متن دوباره ظاهر شود، به سادگی رنگ و ارتفاع خط را تغییر می دهیم. وقتی ماوس را روی تصویر می‌کشید، متن دوباره ظاهر می‌شود. جلوه بسیار خنده دار و آسان.

محو کردن متن در اثر کد CSS

#ex3 (
عرض: 730 پیکسل؛
ارتفاع: 133px;
ارتفاع خط: 0px;
رنگ: شفاف؛
اندازه فونت: 50px;
font-family: "Helvetica Neue-Light"، "Helvetica Neue Light"، "Helvetica Neue"، Helvetica، Arial، sans-serif;
فونت-وزن: 300;
تبدیل متن: بزرگ;

}

#ex3: شناور (
ارتفاع خط: 133 پیکسل.
رنگ: #575858;
}

#ex3 img(
شناور به سمت چپ؛
حاشیه: 0 15 پیکسل;
}
04. عکس کج

نسخه ی نمایشی:برای مشاهده

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

مقادیر زیادی CSS جدید برای استفاده در اینجا وجود دارد، بنابراین ارزش آن را دارد که به نسخه های قبلی مرورگرها نیز بازگردید. گالری ما از انتقال ها، تبدیل ها و سایه های بلوک استفاده می کند، اما بنا به درخواست شما. Transformation وظیفه چرخش تصویر را بر عهده خواهد داشت و انتقال ها مسئول جلوه نرم و صاف خواهند بود.

اینجاست که می توانید از انتخابگرهای شبه استفاده کنید.

کد CSS برای عکس کج

#ex4 (
عرض: 800 پیکسل؛
حاشیه: 0 خودکار;
}

#ex4 img (
حاشیه: 20 پیکسل
حاشیه: 5px جامد #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2)؛
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2)؛
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: همه 0.5s ease-out.
-moz-transition: همه 0.5s ease.
-o-transition: همه 0.5s ease.
}

#ex4 img:hover (
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
05. محو شدن و بازتاب

نسخه ی نمایشی:برای مشاهده

اجرای این افکت کمی دشوارتر است، بنابراین برای دستیابی به یک اثر مناسب مجبور شدیم کمی آن را سرهم کنیم. موقعیت پیش فرض تصویر کمی شفاف است. سپس، هنگامی که ماوس را روی تصویر می‌برید، سطح شفافیت کاهش می‌یابد و تصویر همراه با درخشش و انعکاس جزئی (فقط مرورگرهای WebKit) به ظاهر اولیه خود بازمی‌گردد.

متأسفانه، بازتاب دقیقاً یک انتقال نیست، بنابراین بلافاصله ظاهر می شود حتی اگر بقیه محتوا در حرکت آهسته ظاهر شود.

اگر در مورد بازتاب CSS گیج شده اید، می توانید در این مقاله (دیوید والش) در مورد آن بیشتر بخوانید.

محو شدن و بازتاب کد CSS

#ex5 (
عرض: 700 پیکسل؛
حاشیه: 0 خودکار;
حداقل ارتفاع: 300 پیکسل؛
}

#ex5 img (
حاشیه: 25 پیکسل
Opacity: 0.8;
حاشیه: 10 پیکسل جامد #eee;

/*انتقال*/
-webkit-transition: همه 0.5s ease.
-moz-transition: همه 0.5s ease.
-o-transition: همه 0.5s ease.

/*بازتاب*/
-webkit-box-reflect: زیر 0px -webkit-gradient (خطی، بالا سمت چپ، پایین سمت چپ، from(شفاف)، color-stop(.7، شفاف)، به (rgba(0،0،0،0.1)) )
}

#ex5 img:hover (
کدورت: 1;

/*بازتاب*/
-webkit-box-reflect: زیر 0px -webkit-gradient(خطی، بالا سمت چپ، پایین سمت چپ، from(شفاف)، color-stop(.7، شفاف)، به (rgba(0،0،0،0.4)) )

/*درخشش*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8)؛
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8)؛
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
نتیجه

این 5 مثال باید برای الهام بخشیدن به شما برای ایجاد چیزی از خودتان کافی باشد. به یاد داشته باشید که همیشه می توانید نمونه های آماده را آزمایش کنید و سپس در مورد آنها به ما بگویید.

اگر در جایی از شبکه با جلوه های جذاب دیگری برخورد کرده اید، لطفاً در مورد آن به ما و سایر خوانندگان بگویید.

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

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

برای اینکه تصویر کلی خراب نشود، نام افکت ها را با ترجمه ماشینی تحریف نکردم (به استثنای برخی)، عناوین اصلی را همانطور که توسعه دهنده نامیده بود گذاشتم.

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

iHover مجموعه ای چشمگیر از جلوه های شناور CSS3 خالص است که از Bootstrap 3 پشتیبانی می کند. بر روی Scss CSS (فایل) ساخته شده است که به راحتی با متغیرها تغییر می کند. کد ماژولار است و نیازی به گنجاندن کل فایل نیست. بیش از 30 افکت مختلف در یک بسته. همه چیز به خوبی مستند شده است و استفاده از جلوه ها بسیار آسان است. تنها کاری که باید انجام دهید این است که نشانه گذاری HTML را به درستی بسازید و فایل CSS را در کار خود قرار دهید.

برخی از جلوه های شناور ساده و در عین حال شیک را برای شرح تصاویر ایجاد می کند. ایده این است که ماوس را روی تصاویر کوچک نگه دارید تا عنوان، نام نویسنده و دکمه های تماس ظاهر شوند. برای برخی از جلوه ها، از تبدیل های بصری سه بعدی استفاده می شود.

یک افکت انتقالی بسیار ساده، بدون هیچ زنگ و سوت خاصی، یک تصویر کاملا گرد در یک قاب، با تغییر فوکوس در هنگام شناور کردن تغییر شکل می‌دهد و بس.

با استفاده از CSS3 جلوه ها را برای ریز عکسها نگه دارید

توسعه‌دهنده کار خود را به عنوان نمونه‌ای از گالری تصاویر با جلوه‌های انتقال زمانی که حاشیه‌نویسی‌ها (شرح‌ها) روی ریز عکس‌ها ظاهر می‌شوند، قرار می‌دهد. پشتیبانی مطمئن توسط مرورگرهای مدرن، از جمله IE 9+، اعلام شده است. البته، دشوار است که آن را یک گالری تمام عیار بنامیم، اما تأثیر ظاهر امضاها بسیار جالب است.

مجموعه دیگری از قوانین CSS برای ایجاد جلوه‌های تبدیل چشمگیر هنگام قرار گرفتن روی ریز عکس‌های کاملاً گرد. این بسته شامل 7 نوع انتقال CSS3، مستندات بسیار دقیق در مورد پیکربندی و استفاده است. جلوه ها توسط تمام مرورگرهای مدرن پشتیبانی می شوند.

چرخش ریز عکسها در حالت شناور

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

برای ترجمه تحت اللفظی آن: "اثر جنسی هنگام شناور شدن بر روی". البته بعید است که در این افکت چیزی به این سکسی متوجه شوید، مگر اینکه تخیل وحشی داشته باشید، اما اثر در نوع خود جالب است و ارزش توجه دارد.

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

4 نوع افکت انیمیشن برای شرح تصاویر، که منحصراً با استفاده از CSS3 پیاده سازی شده است. موقعیت های مختلف هنگام ظاهر شدن و جلوه های انتقال، طراحی کاملا استاندارد. برای اینکه بفهمید انیمیشن چگونه کار می کند، به کد منبع صفحه نمایشی نگاهی بیندازید؛ من هیچ سند جداگانه ای پیدا نکردم.

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

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

مجموعه ای دیگر از 10 افکت شناور برای تصاویر، اصلاحات مختلف ریز عکسها هنگام شناور کردن، بزرگنمایی، چرخش، چرخش، تاریک شدن و غیره.

افکت های مختلف انیمیشن فریم در اطراف تصاویر کاملاً جذاب به نظر می رسند، یک کتابچه راهنمای دقیق برای تنظیم و استفاده از آن وجود دارد.

جلوه‌های شناور اصلی CSS3 برای نمایش مؤثر زیرنویس‌های ریز عکس‌ها در هنگام شناور استفاده می‌شود. مجموعه قوانین CSS شامل 10 افکت مختلف است که می توانید به طور جداگانه برای تصاویر مختلف استفاده کنید. افکت ها واقعاً چشمگیر هستند، به خصوص با توجه به اینکه همه این کارها با استفاده از CSS3 انجام شده است. یک راهنمای دقیق به شما کمک می کند تا بفهمید چه چیزی چیست.

ایده این است که یک SVG ایجاد کنیم که یک شکل پس‌زمینه برای برخی از متن‌ها باشد و با استفاده از ماوس به شکل دیگری تبدیل شود. به این ترتیب می‌توانید گزینه‌های مختلفی ایجاد کنید؛ در مثال، سه نوع افکت انتقال نشان داده شده است. مزیت استفاده از SVG این است که می توانیم اندازه فرم را متناسب با اندازه کانتینر اصلی تغییر دهیم.

تصاویر کشویی

ماهیت این افکت این است که تصویر بالا و پایین می رود تا کپشن ظاهر شود. اگر با پارامترهای استایل کار کنید، فکر می‌کنم می‌توانید به افکت‌های بسیار زیبایی دست پیدا کنید، اما به طور پیش‌فرض، همه چیز بسیار ساده به نظر می‌رسد.

با این جلوه، همه چیز ساده است، شرح تصاویر در بالا سمت راست یا پایین سمت چپ، به شکل یک روبان با پس‌زمینه‌ی تیره شفاف بیرون می‌آیند، همه چیز بسیار ساده با استفاده از ویژگی‌های css دوباره قالب‌بندی می‌شود.

یک راه حل جالب: ریز عکس ها به شکل تیره ارائه می شوند؛ هنگامی که ماوس را روی آنها می گذارید، تصاویر ظاهر می شوند و امضا روی پس زمینه روشن ظاهر می شود.

عنوان تصویر از گوشه ظاهر می شود و به صورت مورب در کل منطقه تصویر گسترش می یابد.

چند راه حل جالب تر برای پیاده سازی زیرنویس های پاپ آپ برای ریز عکسها. در ویرایشگر آنلاین، می توانید پارامترها را آزمایش کنید و به نتایج چشمگیرتری برسید.

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

اشکال عجیب و غریب و جلوه بزرگنمایی همراه با جلوه متحرک ظاهر شرح‌ها برای ریز عکس‌ها.

جلوه‌های شگفت‌انگیز پوشاندن آیکون‌ها بر روی ریز عکس‌ها در انواع مختلف ظاهری. در این مثال از یک علامت (+) استفاده می‌شود که در یک دایره با استفاده از شعاع مرزی مشخص شده است: در CSS، می‌توانید از فونت‌های آیکون نیز برای آموزنده‌تر کردن پانل پاپ آپ استفاده کنید.

نمونه ای از ایجاد یک افکت اسلاید بصری برای نمایش زیرنویس های سه بعدی برای تصاویر تنها با استفاده از CSS3 و HTML5.

6 زیرنویس برای تصاویر

6 گزینه برای نمایش شرح تصاویر پاپ آپ در شناور با استفاده از CSS3. یک درس مفصل در مورد پیاده سازی و پیکربندی، منابع موجود برای دانلود.

و در نهایت، در پایان، نمی توانم ساده ترین راه را برای ایجاد یک عنوان پاپ آپ برای یک تصویر کوچک با استفاده از CSS3 ذکر نکنم.

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