روز چهارم فرانت اند:ساخت hover سفارشی
در سی اس اس راه های زیادی برای سفارشی سازی یک ویژگی و عنصر وجود دارد،این قابلیت به توسعه دهنده این امکان را میدهد که بتواند بر اساس نیاز خود یا مشتری طراح های مختلف و کاملا شخصی را پیاده کند.ساخت hover سفارشی هم یکی از کارهایی است که میتوان انجام داد.
با ویژگی هاور(Hover) در سی اس اس در دوره آموزش ویدئویی مقدماتی Css آشنا شدیم.در این پست هم یک توضیح ساده از hover و عملکرد آن ارائه میکنیم.hover یک pseudo-class یا کلاس ساختگی می باشد که برای انتخاب و استایل دهی به عنصری که کاربر نشانه گر موس و یا وسیله دیگر را بر روی آن نگه داشته است, استفاده می شود.از hover برای تعامل بهتر کاربر با عناصر استفاده می شود, به عنوان مثال می توان به کاربر اطمینان داد که عنصری که به آن اشاره می کند واقعا در وضعیت مورد اشاره بودن است. همینطور از این انتخابگر برای نمایش محتواهای مخفی و ثانویه استفاده می شود. به عنوان مثال برای نمایش زیرمنو ها استفاده از hover بسیار کاربردی و معمول است.
به مثال زیر دقت کنید:
img { opacity: 0.5; } img:hover { transform: scale(1.5); opacity: 1; }
به عنوان نمونه کد بالا یک تصویر را در وضعیت hover یک و نیم برابر اندازه اولیه اش می کند و همینطور opacity آن را کامل می کند.(با transform و opacity در این دوره آشنا شدیم).پس با این توضیحات بریم سراغ ساخت hover سفارشی برای باکس html.
شروع ساخت hover سفارشی (html)
در این آموزش ما میخواهیم یک باکس طراحی کنیم و به این باکس قابلیت هاور(hover) سفارشی اضافه کنیم.برای شروع کار ابتدا یک لایه html برای افزودن عناصری مثل img و div(برای نگهداری متن های داخل باکس) استفاده می کنیم.
<div class="box"> <img src=http://s8.picofile.com/file/8297479768/image_preview.jpg"> <div class="overbox"> <div class="title overtext"> CodeFriend.ir </div> <div class="tagline overtext"> دوست برنامه نویس من </div> </div> </div>
قدم دوم افزودن استایل ها به باکس
افزودن استایل css برای تصاویر و نگهدارنده ای متن(تگ div).در کد زیر ما ابتدا برای باکس استایل دهی کردیم.از ویژگی cursor برای تغییر حالت وضیعت نشانگر موس،از ویژگی position برای تعیین جایگاه و محل عنصر،از overflow هم برای جلوگیری خارج شدن عناصر از باکس استفاده کردیم.(با تمامی این مباحث در دوره های ویدئویی آموزش Css,Css3 کار کرده ایم)
/*Insert an image and text captions in a container element with CSS class of ‘box’.*/ .box { cursor: pointer; height: 300px; position: relative; overflow: hidden; width: 400px; }
در قدم بعدی از عنصر باکس (box) سند html تگ img را انتخاب می کنیم و استایل های مربوط به تصویر را مینویسیم.ویژگی اصلی که در کد زیر بهش توجه کنیم transition هست.خاصیت transition به همراه افکت هایی که با آن به کار می برید ، این امکان را به یک عنصر می دهد تا به صورت تدریجی از یک اندازه و شکل به یک اندازه و شکل دیگر تغییر وضعیت دهد .
.box img { position: absolute; left: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; }
در قدم بعدی از عنصر باکس (box) سند html تگ div یا نام کلاس overbox را انتخاب میکنیم.در این بخش استایل ها مربوط به نمایش متن های بر روی تصویر هنگام عمل hover را مشخص میکنیم.
/*The CSS to style and animate the overlay.*/ .box .overbox { background-color: #304562; position: absolute; top: 0; left: 0; color: #fff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; opacity: 0; width: 360px; height: 240px; padding: 130px 20px; } .box:hover .overbox { opacity: 1; }
و در آخرین بخش ساخت hover سفارشی هم کارهای مربوط به انیمیشن را برای نمایش باکس تصویر و همچنین نمایش متن های بر روی تصویر را انجام میدهیم.
/*The CSS to style and animate text captions*/ .box .overtext { -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; transform: translateY(40px); -webkit-transform: translateY(40px); } .box .title { font-size: 2.5em; text-transform: uppercase; opacity: 0; transition-delay: 0.1s; transition-duration: 0.2s; } .box:hover .title, .box:focus .title { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .box .tagline { font-size: 0.8em; opacity: 0; transition-delay: 0.2s; transition-duration: 0.2s; } .box:hover .tagline, .box:focus .tagline { opacity: 1; transform: translateX(0px); -webkit-transform: translateX(0px); }
به همین سادگی توانستیم یک hover سفارشی ساده را باهم طراحی کنیم(می توانید دموی این آموزش را درصفحه کدپن سایت مشاهده کنید).
برچسب:hover چیست, hover در سی اس اس, transform در css, transition, transition در Css, آشنایی با مفهوم Front-End و Back-End, آموزش front-end, استفاده از hover در css, افزودن استایل در css, اموزش انلاین رایگان, اموزش فرانت اند, انیمیشن, انیمیشن در Css, انیمیشن در سی اس اس, برنامه نویسی front end چیست, توسعه دهنده, توسعه دهنده وب شویم, خاصیت hover در css, خاصیت کلیک در css, در css, در سی اس اس, دستور hover در html, ساخت hover, ساخت hover سفارشی, سفارشی سازی یک ویژگی, طراحی صفحات وب پیشرفته, فرانت اند چیست, کلاس ساختگی, مفهوم front-end, منابع آموزش, منابع آموزشی برنامه نویسی, منبع اموزش وب
6 نظر
سلام وقتتون بخیر بخواییم برای هاور زمان یک ثانیه تعیین کنیم کدش رو چطوری بنویسیم ممنون میشم جواب بدین.
سلام وقت بخیر
باید خصوصیت transition تنظیم کنید. لطفا در بخش پشتیبانی مطرح کنید تا نمونه کد فرستاده بشه خدمت شما
موفق باشید
میخوام یک متن رو هاور بنویسم که با موس روش میرم رنگش عوض بشه چه کدی بنویسم
برای متن یک کلاس تعریف کنید و برای اون کلاس در فایل css ویژگی هاور بنویسید.
سلام
اگر بخوایم hover رو برای a بزاریم ولی نخوایم روی همه ی aها اجرا بشه باید چی کار کرد ؟
باید برای تگ a مد نظرتون کلاس تعریف کنید و ویژگی css رو به این کلاس بدید تا هر کدوم از تگ های a که مایل هستید ویژگی hover بگیرند