بخش Vip سئو نود

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

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید آموزش طراحی cms با php و mysql ، مشاهده دوره

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

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

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

0 63
آموزش سلکتور 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 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

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

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

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

توسط انتخابگر any-link می‌توانید تمامی تگ‌های a و همچنین area را که دارای صفت target هستند در حالت های link و visited استایل دهی کنید . پس در این مقاله همراه ما باشید .

0 56

کاربرد وب سایت استاتیک برای چه مواردی است ؟ بررسی زمان و هزینه لازم جهت طراحی و اجرای سایت های استاتیک برای انواع کسب و کارها

0 1,091
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود