بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید " شاهکار تولید محتوا " برای علاقمندان به سئو ، جزئیات دوره

آموزش سلکتور focus: در css

مقالات طراحی سایت

چگونه توسط سلکتور focus: در css ، تغییر استایل های مختلفی را روی المان های فرم ایجاد کنیم ؟ بررسی تفاوت focus و hover در طراحی با css !

0 10
آموزش سلکتور focus: در css

یکی از حالت‌ها یا بهتر است بگوییم event و رویدادهایی که داخل سایت و خصوصا طراحی فرم می‌تواند وجود داشته باشد حالت focus است . focus زمانی اتفاق خواهد افتاد که شما روی یک المان کلیک کنید ، به نوعی می‌توان گفت تشابه زیادی با حالت click در جاوا اسکریپت و جی کوئری دارد .

توسط حالت focus می‌توانیم مشخص کنیم که وقتی روی المان خاصی روی صفحه وب کلیک شد ، چه اتفاقاتی رخ دهد . ویژگی focus عموما روی المان های فرم و تگ هایی همچون input و textarea بخوبی قابل مشاهده است .

جهت ایجاد یک تجربه کاربری مناسب یا به عبارتی یک UX خوب ، باید تا حد امکان به واکنش های کاربر داخل صفحه پاسخ داد ، دو حالت بسیار کاربردی برای ایجاد واکنش در صفحه وب حالت های focus و حالت های hover هستند که بازهم کارایی حالت hover بیشتر از حالت focus است . بخش مربوط به hover را در مقالات آتی خدمتتان آموزش خواهیم داد .

چرا باید از حالت focus استفاده کنیم ؟

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

معمولا استایل هایی که برای این رویداد یعنی focus استفاده می‌شوند ، تغییر در قسمت border مثل رنگ و یا بهتر از هر استایلی ، تغییر در حالت box shadow است .

تغییر در ضخامت border مسبب به هم ریختگی استایل خواهد شد از این جهت اگر قصد دارید تا با focus شدن روی input تغییر حالتی در border آن ایجاد کنید ، بهتر است روی رنگ border انجام دهید .

input:focus {
  border-color: blue;
}

اما همانطور که گفته شد ، بهترین حالت برای ایجاد تغییر روی المان های فرم استفاده از دستور box-shadow است که مسبب به هم ریختگی در نظم ساختاری صفحه شما نخواهد شد :

input:focus {
  box-shadow:0 0 0 5px #818181;
}

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

در فرم های فریمورک بوت استرپ دستورات focus به شکلی زیبا استفاده شده است و دستوری که داخل این فریمورک برای بخش focus درنظر گرفته شده است به شکل زیر است :

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

خروجی این تصویر بروی input ها و درکل هر المانی از بوت استرپ که کلاس form-control را داشته باشد به شکل زیر است :

استایل حالت focus در css

همانطور که مشاهده می‌کنید با اعمال شدن این دستور برای المان های فرم ، خاصیت active شدن آنها بیشتر مشخص خواهد شد لذا بعنوان یک طراح باید جهت بهبود تجربه کاربری به آن توجه داشته باشید . بنابراین هنگام کدنویسی برای طراحی پروژه ، بهتر است حالتی را برای focus شدن و یا کلاس خاصی را برای آن تعریف کنید تا وجه فرم های پروژه شما بسیار زیبا باشد .

این انتخاب کننده بسیار کاربردی و در عین حال ساده ، تاثیر بسزایی در UX سایت شما دارد و لذا دوستانی که بعنوان طراح قالب سایت قصد فعالیت دارند باید برای قسمت فرم های سایت که اهمیت بسیاری را یدک می‌کشد ، حالت های focus و disabled و read only و … را به درستی طراحی کنند تا هرزمان صاحب وب سایت داخل فرم های سایت از چنین بخش هایی استفاده کرد ، بتواند طراحی متمایزی نسبت به سایر المان های ساده در فرم داشته باشد . برای مطالعه سایر سلکتور های جذاب در css میتوانید قسمت مقالات طراحی سایت در بلاگ ما را مشاهده کنید .

امید قدیمی

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

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

بهترین ادیتور های طراحی سایت بهترین ادیتور های طراحی سایت ؛ یکی از مهمترین ابزار طراحان و برنامه نویسان دنیای وب محیط هایی برای نوشتن کد هستند و بدون این ابزار ها توسعه برنامه ها بسیار سخت و طاقت فرسا میباشد شاید هم غیرممکن .! امروزه در دنیای کد نویسی دو نوع نرم افزار عمده […]

2 1,182

مدت زمان تسلط به Css چقدر است ؟! ممکن است برای برخی تازه کارها و دانشجو های طراحی سایت این سوال پیش آید که مدت زمان تسلط به Css چقدر است و برای یادگیری این زبان جهت طراحی سایت چقدر باید زمان و انرژی صرف کنند تا بتوانند قالب های شیک و کاربر پسند برای […]

9 2,692
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود