اطلاعات جامع از طراحی سایت

در سلسله مقاله ها آموزشی سلکتورهای css در خانواده سلکتورهایی که بصورت : ویا :: بودند ، فعلا به یک کدام از گزینش کننده‌های بسیار کاربردی رسیدیم که در ساخت وب سایت به وسیله گویش css عنایت بسیار بالایی دارااست . این گزینش کننده checked اسم دارااست و بروی کلیه مرورگرها دفاع گردیده و میتوانید با خاطر شل از آن استعمال فرمائید . طراحی سایت در مشهد خصوصیت checked چه هنگامی در وبسایت به کار گیری می شود ؟ خصوصیت checked در المان‌های هیبت و در قسمتی که از checkbox یا این که radio مصرف شده میباشد معین می گردد . خصوصیت های checkbox یا این که radio به صورت ذیل در هیبت به کار گیری می گردند :

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

پیشنهادی : فراگیری سلکتور optional: در css
برای مثال برای تشکیل داد دکمه‌هایی که بصورت سوئیچی می‌باشند و با کلیک روی آنان ، یک اسلایدر ریز به تکان درآمده و به چپ و راست تکان می‌نماید ، این خصوصیت بسیار بدردبخور میباشد . یک مثال از پیاده سازی این دکمه ها را میتوانید در هیبت ورود به اکانت کاربری خودتان درون سئونود ببینید .

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

input [type=\'checkbox\']:checked {
border: none;
outline: 2px solid #515151;
}
درین کد روی همه input هایی که از نوع checkbox می باشند ، به هنگام بررسی شدن یا این که همان تعیین شدن به وسیله مخاطب ، یک استایل ریز اجرا کردیم . استایل نویسی برای input هایی که از نوع checkbox یا این که radio میباشند بایستی بسیار مدبرانه و با رعایت اصول صورت بپذیرد .

برای اینکه یک استایل دیدنی به input های خودتان که از دو نوع بالا می‌باشند اعمل فرمایید بایستی خصوصیت checked را با after و before ها ادغام کرده و یک صفحه آرایی دیدنی بسازید . همان طور که گفته شد یک مثال از این پیاده سازی جالب که با مخلوط after و before و وضعیت checked پیاده سازی گردیده‌است کاغذ ورود در seo نود میباشد که به صورت ذیل میباشد :

به دکمه ” به خیال و خاطر بسپار ” در باطن هیبت دقت فرمائید . در‌این‌حالت‌ آغاز بوسیله امرها after و before استایل خاصی به‌این input که از نوع checkbox میباشد داده گردیده و بعد از آن وقتی که‌این input به وسیله استفاده کننده تعیین گردیده ( کلیک شد ) و محاسبه گردیده است ، استایل آن را دوباره به وسیله after و before تغییر‌و تحول دادیم . یک مثال کد html برای این نمونه به صورت تحت میباشد :

Remember Me
و نهایتا کد css نیز برای این نصیب یا این که اصطلاحا دکمه به صورت پایین مندرج میباشد :

.Panel_FormBox label {
cursor: pointer;
padding-left: 60px;
font-size: 14px;
top: -15px;
}
.Panel_FormBox input[type=checkbox] {
opacity: 0;
width: 0;
height: 0;
}
.Panel_FormBox label::before {
content: "";
position: absolute;
width: 40px;
height: 20px;
top: 2px;
left: 0;
background-color: #ddd;
-webkit-transition: .4s;
transition: .4s;
border-radius: 4px;
}
.Panel_FormBox label::after {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
top: 5px;
background-color: #fff;
-webkit-transition: .4s;
transition: .4s;
border-radius: 4px;
}
.Panel_FormBox input:checked+label::before {
background-color: #e91e63;
}
.Panel_FormBox input:checked+label::after {
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
اما این کد فقط یک نمونه بی آلایش از پیاده سازی input هایی از نوع checkbox میباشد که به یاری تغییر و تحول وضعیت در checkbox و همینطور after و before ساخته شده است .

این خصوصیت هم برای input از نوع checkbox و هم برای input از نوع radio کاربردی میباشد و برای تعیین شدن هردوی این input ها به وسیله استفاده کننده وبسایت می توانید دقیقا همین استایل نویسی را ایفا دهید .

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

در سلسله مقاله ها آموزشی سلکتورهای css در خانواده سلکتورهایی که بصورت : ویا :: بودند ، فعلا به یک کدام از گزینش کننده‌های بسیار کاربردی رسیدیم که در ساخت وب سایت به وسیله گویش css عنایت بسیار بالایی دارااست . این گزینش کننده checked اسم دارااست و بروی کلیه مرورگرها دفاع گردیده و میتوانید با خاطر شل از آن استعمال فرمائید . طراحی سایت در مشهد خصوصیت checked چه هنگامی در وبسایت به کار گیری می شود ؟ خصوصیت checked در المان‌های هیبت و در قسمتی که از checkbox یا این که radio مصرف شده میباشد معین می گردد . خصوصیت های checkbox یا این که radio به صورت ذیل در هیبت به کار گیری می گردند :

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

پیشنهادی : فراگیری سلکتور optional: در css
برای مثال برای تشکیل داد دکمه‌هایی که بصورت سوئیچی می‌باشند و با کلیک روی آنان ، یک اسلایدر ریز به تکان درآمده و به چپ و راست تکان می‌نماید ، این خصوصیت بسیار بدردبخور میباشد . یک مثال از پیاده سازی این دکمه ها را میتوانید در هیبت ورود به اکانت کاربری خودتان درون سئونود ببینید .

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

input [type=\'checkbox\']:checked {
border: none;
outline: 2px solid #515151;
}
درین کد روی همه input هایی که از نوع checkbox می باشند ، به هنگام بررسی شدن یا این که همان تعیین شدن به وسیله مخاطب ، یک استایل ریز اجرا کردیم . استایل نویسی برای input هایی که از نوع checkbox یا این که radio میباشند بایستی بسیار مدبرانه و با رعایت اصول صورت بپذیرد .

برای اینکه یک استایل دیدنی به input های خودتان که از دو نوع بالا می‌باشند اعمل فرمایید بایستی خصوصیت checked را با after و before ها ادغام کرده و یک صفحه آرایی دیدنی بسازید . همان طور که گفته شد یک مثال از این پیاده سازی جالب که با مخلوط after و before و وضعیت checked پیاده سازی گردیده‌است کاغذ ورود در seo نود میباشد که به صورت ذیل میباشد :

به دکمه ” به خیال و خاطر بسپار ” در باطن هیبت دقت فرمائید . در‌این‌حالت‌ آغاز بوسیله امرها after و before استایل خاصی به‌این input که از نوع checkbox میباشد داده گردیده و بعد از آن وقتی که‌این input به وسیله استفاده کننده تعیین گردیده ( کلیک شد ) و محاسبه گردیده است ، استایل آن را دوباره به وسیله after و before تغییر‌و تحول دادیم . یک مثال کد html برای این نمونه به صورت تحت میباشد :

Remember Me
و نهایتا کد css نیز برای این نصیب یا این که اصطلاحا دکمه به صورت پایین مندرج میباشد :

.Panel_FormBox label {
cursor: pointer;
padding-left: 60px;
font-size: 14px;
top: -15px;
}
.Panel_FormBox input[type=checkbox] {
opacity: 0;
width: 0;
height: 0;
}
.Panel_FormBox label::before {
content: "";
position: absolute;
width: 40px;
height: 20px;
top: 2px;
left: 0;
background-color: #ddd;
-webkit-transition: .4s;
transition: .4s;
border-radius: 4px;
}
.Panel_FormBox label::after {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
top: 5px;
background-color: #fff;
-webkit-transition: .4s;
transition: .4s;
border-radius: 4px;
}
.Panel_FormBox input:checked+label::before {
background-color: #e91e63;
}
.Panel_FormBox input:checked+label::after {
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
اما این کد فقط یک نمونه بی آلایش از پیاده سازی input هایی از نوع checkbox میباشد که به یاری تغییر و تحول وضعیت در checkbox و همینطور after و before ساخته شده است .

این خصوصیت هم برای input از نوع checkbox و هم برای input از نوع radio کاربردی میباشد و برای تعیین شدن هردوی این input ها به وسیله استفاده کننده وبسایت می توانید دقیقا همین استایل نویسی را ایفا دهید .

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