یکشنبه ۰۳ مرداد ۱۴۰۰

Sunday, July 25, 2021 GMT +4:30

» زیبا سازی فرم های وب با CSS

web-css-form

امروزه استفاده از خاصیت های متنوع CSS و تکنیک ها و قابلیت های مبتنی بر این زبان در طراحی صفحات و قالب های وب امری اجتناب ناپذیر و فراگیر است، طراحان و برنامه نویسان وب با استفاده از قدرت CSS و کمی تجربه بسیاری از جلوه های بصری را بدون به کارگیری تصاویر و المان های گرافیکی و صرفا با استایل نویسی ایجاد می کنند که این امر نهایتا منتج به خلق صفحاتی زیبا و چابک و کاهش حجم کلی قالب های وب می شود که در زمینه بهینه سازی (SEO) نیز فاکتور مهمی است، با این مقدمه در ادامه یادداشت پیش رو می خواهیم در خصوص استفاده از CSS جهت زیباسازی و اختصاص استایل CSS سفارشی به عناصر مختلف زیرمجموعه تگ فرم (form) شامل تگ های input، textarea، checkbox، select و button بپردازیم، به طور معمول این تگ ها با استایل پیش فرض مرورگرها نمایش داده می شوند که شاید برای کاربردهای حرفه ای مطلوب نباشد.

Pseudo کلاس های پرکاربرد CSS برای عناصر فرم


عناصر مختلف فرم های وب معمولا شامل چند حالت مختلف تعاملی هستند که برای هر حالت ممکن است نیازمند تعریف استایل خاصی باشیم، به طور مثال برای تگ input چند حالت قبل از شروع به تایپ (Normal)، بردن نشانه گر ماوس روی فیلد (Hover) و کلیک در فیلد (Focus) را می توانیم تصور کنیم، برای اینکه بتوانیم به هر کدام از این حالت ها استایل سفارشی اختصاص دهیم از قابلیتی تحت عنوان Pseudo-classes (تلفظ soo·dow) یا شبه کلاس در CSS استفاده می شود، Pseudo کلاس ها راهکاری برای توسعه سلکتورهای متداول CSS هستند تا حالت های تعاملی مختلف عناصر وب را پوشش دهند، به فرض اگر تگ input با سلکتور ID انتخاب شده باشد:
<style>
#my-input {
    color: #999;
}
</style>
<form action="#" method="post">
<label for="my-input">Name:</label>
<input id="my-input" type="text">
</form>
با کمک Pseudo کلاس hover می توانیم برای حالتی که کاربر ماوس را روی فیلد می برد استایل ویژه تعریف  کنیم:
<style>
#my-input {
    color: #999;
}
#my-input:hover {
    color: #00C;
}
</style>
از جمله Pseudo کلاس های پرکاربرد CSS در زمینه استایل دهی سفارشی به عناصر زیرمجموعه تگ form می توانیم موارد زیر را نام ببریم:
- hover: برای زمانی که نشانه گر ماوس را روی عنصر می بریم.
- focus: زمانی که یک عنصر در حالت متمرکز قرار دارد (به فرض وقتی داخل فیلد متنی کلیک می کنیم).
Pseudo کلاس focus دو هم خانواده با نام های focus-within و focus-visible دارد، focus-within (زمانی که یک عنصر یا عناصر زیرمجموعه آن در حالت متمرکز قرار دارند) را در ادامه بررسی و از توضیح focus-visible (نمایش محدوده متمرکز شده با استایل پیش فرض واسط کاربری در مواقعی که به فرض با صفحه کلید و tabindex سر و کار داریم) به جهت کاربرد کمتر و نیاز به آموزش های جداگانه صرف نظر می کنیم.
- active: برای زمانی که عنصر در حالت فعال قرار می گیرد (به فرض هنگامی که کاربر بر روی دکمه کلیک می کند).

استفاده از Pseudo کلاس hover برای تگ های فرم


اولین رفتار تعاملی کاربران در خصوص عناصر مختلف فرم های وب بردن نشانه گر ماوس بر روی آنها جهت کلیک با هدف شروع به نوشتن، انتخاب آیتم، اجرای ابزار یا ارسال اطلاعات است و شبه کلاسی که برای تعیین استایل سفارشی این رفتار تعاملی می توانیم استفاده کنیم hover است، با در نظر گرفتن Pesudo کلاس hover زمانی که کاربر ماوس را بر روی یکی از تگ های زیرمجموعه فرم می برد استایل مربوطه اعمال خواهد شد، به طور مثال:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از hover برای استایل عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
label {
    display: inline-block;
    width: 100px;
    height: 50px;
}
.input {
    background: #F9F9F9;
    padding: 4px;
    border: #CCC 1px solid;
    outline: 0;
}
.input:hover {
    background: #F5F5F5;
    border: #92C9FF 1px solid;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
</form>
</body>
</html>
برای دیدن پیش نمایش آنلاین کدها لطفا به انتهای این مطلب مراجعه کنید.
توضیح:
- کلاس CSS تعریف شده در نمونه کد بالا از دو قسمت تشکیل شده است، قسمت اول ویژگی های کلی فیلد هدف (در اینجا فیلد input) را در حالت عادی تعریف می کند و در قسمت دوم با استفاده از Pesudo کلاس hover برای حالتی که کاربر ماوس را بر روی فیلد مورد نظر می برد استایل متمایزی در نظر گرفته ایم که می تواند به فرض تغییر رنگ خط حاشیه فیلد یا هر شکل ظاهری دلخواه دیگری باشد.
- برای استفاده از شبه کلاس hover در سایر عناصر فرم های وب مانند textarea، select، button، submit و... نیز می توانیم به همین ترتیب عمل کنیم، یعنی ابتدا یک کلاس در CSS با دو وضعیت تعاملی Normal و Hover تعریف کرده و کلاس را به عنصر مورد نظر نسبت دهیم.

استفاده از Pseudo کلاس focus برای تگ های فرم


معمولا وضعیت hover به تنهایی نمی تواند جلوه کاملی برای طراحان وب ایجاد کند، به فرض کاربر انتظار دارد هنگامی که در فیلد متنی کلیک کرده حاشیه فیلد متمرکز (Focus) شده را به رنگی متمایز از سایر عناصر فرم مشاهده کند، البته این نوع تنظیمات بیشتر سلیقه ای هستند اما حداقل استفاده هایی از این نوع سفارشی سازی می تواند برای هر صفحه وبی کاربردی باشد، برای در نظر گرفتن استایل سفارشی برای حالت تمرکز بر روی یک عنصر از Pesudo کلاس focus استفاده و کدهای مثال بالا را به صورت نمونه زیر تکمیل می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از focus برای استایل عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
label {
    display: inline-block;
    width: 100px;
    height: 50px;
}
.input {
    background: #F9F9F9;
    padding: 4px;
    border: #CCC 1px solid;
    outline: 0;
}
.input:hover {
    background: #F5F5F5;
    border: #92C9FF 1px solid;
}
.input:focus {
    background: #F0F0F0;
    border: #3399FF 1px solid;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
</form>
</body>
</html>
برای دیدن پیش نمایش آنلاین کدها لطفا به انتهای این مطلب مراجعه کنید.
توضیح:
- با افزودن شبه کلاس focus به استایل CSS هنگامی که کاربر در یکی از فیلدها کلیک می کند می توانیم استایل سفارشی برای وضعیت تمرکز در فیلد داشته باشیم.
- اگرچه حالت focus در بیشتر مرورگرهای استاندارد امروزی پشتیبانی می شود اما در مرورگر اینترنت اکسپلورر نسخه 6 و 7 پشتبانی نشده و در اینترنت اکسپلورر نسخه 8 هم باید DOCTYPE در ابتدای صفحه درج شود تا این خاصیت عمل کند (این مرورگرها در حال حاضر منسوخ شده اند و توضیحات صرفا جهت اطلاعات بیشتر عنوان شد).

استفاده از Pseudo کلاس focus-within برای تگ های فرم


در کدنویسی صفحات وب تگ های مختلف می توانند به صورت والد فرزندی باشند و ممکن است بخواهیم زمانی که تگ فرزند در حالت focus قرار گرفت به تگ والد استایل سفارشی اختصاص دهیم، در اینگونه موارد Pseudo کلاس focus-within کاربرد دارد که نحوه تعریف و استفاده از آن را با نمونه کد زیر بررسی می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از focus-within برای استایل عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
form {
    padding: 8px;
    background: #F9F9F9;
    border: #CCC 1px solid;
}
form:focus-within {
    background: #F0F0F0;
    border: #3399FF 1px solid;
}
label {
    display: inline-block;
    width: 100px;
    height: 50px;
}
.input {
    background: #F9F9F9;
    padding: 4px;
    border: #CCC 1px solid;
    outline: 0;
}
.input:hover {
    background: #F5F5F5;
    border: #92C9FF 1px solid;
}
.input:focus {
    background: #F0F0F0;
    border: #3399FF 1px solid;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
</form>
</body>
</html>
برای دیدن پیش نمایش آنلاین کدها لطفا به انتهای این مطلب مراجعه کنید.
توضیح:
- در نمونه کد بالا تگ form به عنوان تگ والد و تگ های label و input به عنوان تگ های فرزند هستند.
- با تمرکز کاربر در یکی از فیلدهای input یا label سلکتور مربوط به شبه کلاس focus-within اجرا شده و استایل سفارشی در نظر گرفته شده بر روی تگ form اعمال می شود.

استفاده از Pseudo کلاس active برای تگ های فرم


یکی دیگر از رفتارهای تعاملی کاربران در هنگام کار با عناصر زیرمجموعه فرم وضعیت های فعال مانند کلیک بر روی دکمه ها است که ممکن است نیاز به استایل دهی سفارشی داشته باشد، در نمونه کد زیر نحوه استفاده از Pseudo کلاس active برای تگ های فرم را بررسی می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از active برای استایل عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
form {
    padding: 8px;
    background: #F9F9F9;
    border: #CCC 1px solid;
}
form:focus-within {
    background: #F0F0F0;
    border: #3399FF 1px solid;
}
label {
    display: inline-block;
    width: 100px;
    height: 50px;
}
.input {
    background: #F9F9F9;
    padding: 4px;
    border: #CCC 1px solid;
    outline: 0;
}
.input:hover {
    background: #F5F5F5;
    border: #92C9FF 1px solid;
}
.input:focus {
    background: #F0F0F0;
    border: #3399FF 1px solid;
}
button {
    background: #063FE0;
    color: #FFFFFF;
    padding: 4px;
}
button:active {
    background: #001759;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
<button onclick="seyHello();">کلیک کنید</button>
</form>
<script>
function seyHello(){
    alert('رنگ پس زمینه دکمه در حالت فعال تغییر می کند');
}
</script>
</body>
</html>
برای دیدن پیش نمایش آنلاین کدها لطفا به انتهای این مطلب مراجعه کنید.
توضیح:
- در این نمونه کد با شبه کلاس active برای تگ button استایل سفارشی در نظر گرفته ایم که در هنگام کلیک (با فشردن دکمه ماوس) اجرا می شود.
- دقت داشته باشیم یک عنصر می تواند در عین واحد در چند وضعیت تعاملی قرار داشته باشد که در اینجا با فشردن دکمه ماوس بر روی دکمه دو حالت focus و active اتفاق می افتد و به همین دلیل استایل مربوط به سلکتور form:focus-within نیز برای تگ form اعمال می شود.

گرد کردن گوشه ها و افزودن سایه با border-radius و box-shadow


یکی دیگر از قابلیت های CSS که از نسخه 3 به آن افزوده شده امکان گرد کردن گوشه ها و افزودن سایه به عناصر HTML و از جمله تگ های مربوط به فرم های وب است، در این شیوه با استفاده از خاصیت border-radius می توان لبه های زاویه 90 درجه ای تگ های فرم را به صورت گرد شده و نرم با میزان انحنای دلخواه درآورد، همچنین با خاصیت box-shadow می توانیم رنگ دلخواهی را به عنوان سایه برای حاشیه عناصر فرم درنظر بگیریم که ممکن است با توجه به سلیقه و نیاز مورد استفاده طراحان و برنامه نویسان وب قرار گیرد، با این توضیح نمونه کد را به شکل زیر ویرایش می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از border-radius و box-shadow برای استایل عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
form {
    padding: 8px;
    background: #F9F9F9;
    border: #CCC 1px solid;
    border-radius: 8px;    
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;    
    box-shadow:2px 2px 3px #666;    
    -moz-box-shadow:2px 2px 3px #666;
    -webkit-box-shadow:2px 2px 3px #666;    
}
form:focus-within {
    background: #F0F0F0;
    border: #3399FF 1px solid;
}
label {
    display: inline-block;
    width: 100px;
    height: 50px;
}
.input {
    background: #F9F9F9;
    padding: 4px;
    border: #CCC 1px solid;
    border-radius: 8px;    
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;        
    box-shadow:2px 2px 3px #666;    
    -moz-box-shadow:2px 2px 3px #666;
    -webkit-box-shadow:2px 2px 3px #666;    
    outline: 0;
}
.input:hover {
    background: #F5F5F5;
    border: #92C9FF 1px solid;
}
.input:focus {
    background: #F0F0F0;
    border: #3399FF 1px solid;
}
button {
    background: #063FE0;
    color: #FFFFFF;
    padding: 4px;
    border-radius: 8px;    
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    box-shadow:2px 2px 3px #666;    
    -moz-box-shadow:2px 2px 3px #666;
    -webkit-box-shadow:2px 2px 3px #666;    
}
button:active {
    background: #001759;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
<button onclick="seyHello();">کلیک کنید</button>
</form>
<script>
function seyHello(){
    alert('رنگ پس زمینه دکمه در حالت فعال تغییر می کند');
}
</script>
</body>
</html>
برای دیدن پیش نمایش آنلاین کدها لطفا به انتهای این مطلب مراجعه کنید.
توضیح:
- در کدهای بالا برای تعریف خاصیت border-radius و box-shadow از سلکتورهای moz و webkit نیز استفاده کرده ایم، این کار به این جهت است که مرورگرهای مختلف در نسخه های قدیمی در شناسایی و پردازش این خاصیت ها شیوه مخصوص خود را دارند و برای سازگاری بیشتر از پیشوند moz (مرورگرهای خانواده Mozila مانند Firefox) و پیشوند webkit (مرورگرهای خانواده موتور Webkit مانند Chrome) استفاده کرده ایم، با یکسان سازی استانداردها در نسخه های جدیدتر مرورگرها ممکن است استفاده از این پیشوندها دیگر ضرورتی نداشته باشد.
- خاصیت outline که خط بیرونی حاشیه فیلد را مشخص می کند از این جهت با مقادیر صفر در نظر گرفته ایم که در برخی مرورگرهای مبتنی بر موتور Webkit (مانند سافاری، گوگل کروم و...) در هنگام کلیک در فیلد در اطراف سایه ای ایجاد می شود، برای از بین بردن این سایه پیش فرض از outline با مقادیر صفر استفاده کرده ایم.
- اگرچه برخی از مرورگرها (مانند اینترنت اکسپلورر نسخه 8 و ماقبل) از ویژگی های border-radius و box-shadow پشتیبانی نمی کنند اما چندان جای نگرانی نیست، چرا که فرم بدون هیچ مشکل مهمی همچنان کاربرد خواهد داشت با این تفاوت که کاربران این گونه مرورگرها نمی توانند از جلوه های بصری و تعاملی جدید CSS استفاده کنند.

کد و پیش نمایش آنلاین


در انتهای این آموزش مثال هایی که در این مطلب مرور کردیم را به صورت کد تکمیل شده به همراه پیش نمایش آنلاین جهت تست و بررسی بیشتر درج می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظیم استایل CSS سفارشی در طراحی عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
form {
    padding: 8px;
    background: #F9F9F9;
    border: #CCC 1px solid;
    border-radius: 8px;    
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;    
    box-shadow:2px 2px 3px #666;    
    -moz-box-shadow:2px 2px 3px #666;
    -webkit-box-shadow:2px 2px 3px #666;    
}
form:focus-within {
    background: #F0F0F0;
    border: #3399FF 1px solid;
}
label {
    display: inline-block;
    width: 100px;
    height: 50px;
}
.input {
    background: #F9F9F9;
    padding: 4px;
    border: #CCC 1px solid;
    border-radius: 8px;    
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;        
    box-shadow:2px 2px 3px #666;    
    -moz-box-shadow:2px 2px 3px #666;
    -webkit-box-shadow:2px 2px 3px #666;    
    outline: 0;
}
.input:hover {
    background: #F5F5F5;
    border: #92C9FF 1px solid;
}
.input:focus {
    background: #F0F0F0;
    border: #3399FF 1px solid;
}
button {
    background: #063FE0;
    color: #FFFFFF;
    padding: 4px;
    border-radius: 8px;    
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    box-shadow:2px 2px 3px #666;    
    -moz-box-shadow:2px 2px 3px #666;
    -webkit-box-shadow:2px 2px 3px #666;    
}
button:active {
    background: #001759;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
<button onclick="seyHello();">کلیک کنید</button>
<br><br>
<select class="input">
<option value="">-- انتخاب --</option>
<option value="آموزش طراحی وب">آموزش طراحی وب</option>
<option value="آموزش برنامه نویسی وب">آموزش برنامه نویسی وب</option>
</select>
<br><br>
<textarea cols="50" rows="10" class="input"></textarea>
<br><br>
<input class="input" type="submit" value="ارسال">
</form>
<script>
function seyHello(){
    alert('رنگ پس زمینه دکمه در حالت فعال تغییر می کند');
}
</script>
<hr>
برای اینکه جلوه های CSS نسخه 3 مانند border-radius و box-shadow به طور کامل قابل استفاده باشند خاصیت ها باید توسط مرورگر پشتیبانی شوند، به جزء اینترنت اکسپلورر نسخه 8 و ماقبل (که در حال حاضر منسوخ شده اند) سایر مرورگرهای استاندارد وب در نسخه های جدید خود به خوبی از این قابلیت ها پشتیبانی می کنند.
</body>
</html>
پیش نمایش آنلاین
دسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» طراحی باکس جستجو با فتوشاپ و CSS
» طراحی و کدنویسی هدر قالب با فتوشاپ، HTML و CSS
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
» آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
» طراحی قالب سه بعدی وب با فتوشاپ و CSS
commentنظرات (۲۰ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: hosin
۱۰:۴۱ ۱۳۹۱/۰۵/۱۹
سلام من سایت شما رو خیلی دوست دارم عالیه
نویسنده: فریبا
۱۵:۰۰ ۱۳۹۱/۰۵/۱۹
سلام
مثل همیشه عالی هستید.
سوال: میشه توضیحی هم در مورد دکمه های جستجو ( مثل جستجوی سایت خودتون ) داشته باشید؟
ممنون.
پاسخ: 
ممنون، نظر لطف شماست.
دکمه های جستجو ماهیتی متفاوت ندارند و مانند سایر عناصر فرم های وب هستند، دکمه ارسال از نوع input و submit و فیلد جستجو از نوع input و text است، منتها با کلاس های CSS و المان های تصویری، به طور دقیق تنظیم شده اند، با دقت در سورس کد سایت ملاحظه خواهید کرد که برای دکمه ارسال یک عکس ذره بین کوچک به عنوان پس زمینه تنظیم شده و برای فیلد جستجو، تصویری دیگر با همپوشانی کامل با دکمه ارسال؛ به این ترتیب از دید کاربران این یک فیلد جستجو است، ولی از دید برنامه نویسان این یک فرم وب با یک فیلد متنی و یک دکمه ارسال است.
نویسنده: فریبا
۲۱:۱۸ ۱۳۹۱/۰۵/۲۰
سلام
سوال: می خوام فرمی بسازم که عنوان تکست فیلدها از یک طرف تراز شوند و خود تکست فیلدها هم از طرف دیگر و همچنین کل فرم یعنی المنتهای فرم در وسط divای که برای فرم در نظر گرفتم قرار بگیرند یعنی در هر مرورگری وسط باشند؛ چه کدهایی ( CSS و HTML ) باید بنویسم؟
ممنون.
پاسخ: 
پاسخ دقیق به سوال شما نیازمند طرح یک مطلب آموزشی جداگانه است، اما به اختصار باید از label در فرم های خود استفاده کنید، مثال:
<label for="name" dir="rtl">نام:</label>
<input type="text" name="name" id="name">
برای ترازبندی آنها نیز از ویژگی های css یا html مانند dir ، display ، float و... استفاده نمائید.
برای تنظیم یک بلاک در وسط صفحه از ویژگی margin-left و margin-right با مقادیر auto برای کلاس CSS آن استفاده کنید:
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
در مرورگر IE6 نیز از دستورات شرطی و تگ <center> استفاده کنید:
<!--[if IE 6]>
<center>
<![endif]-->
بلاک div
<!--[if IE 6]>
</center>
<![endif]-->
نویسنده: farhad
۱۶:۲۱ ۱۳۹۱/۰۷/۲۳
سلام داداش
انقدر دعات کردم یعنی دمت گرم
با این سایتت محشره
نویسنده: امیر محمد
۲۲:۰۱ ۱۳۹۲/۰۲/۳۱
دستت طلا
نویسنده: حمیدرضا
۰۰:۰۹ ۱۳۹۲/۰۳/۱۴
سلام
عادت به نوشتن نظر ندارم
اما برای این مطلب خوب و کارآمدتون لازم بود تشکر کنم
با تشکر فراوان
نویسنده: حسن دهقانی
۱۲:۲۷ ۱۳۹۲/۰۴/۰۶
سلام
من امروز از سایت شما دیدن کردم
واقعا جای تشکر داره من دست شما استار گرامی را که بدون هیچ توقعی آموزش رایگان در اختیار همه قرار می دهید می بوسم
من که خیلی حال کردم و چیزائی که تا حالا دیده بودم اینجا لمسش کردم
من فعلا سوالی ندارم حتما مزاحمتون می شم
با تشکر
پاسخ: 
نظر لطف شما است.
نویسنده: علی شفیع زاده
۱۸:۵۱ ۱۳۹۲/۰۴/۱۴
با سلام
عالی بود
خیلی استفاده کردم.
تشکر از سایت خوب و پر محتواتون
با آرزوی بهترین ها
نویسنده: گرافيك پلاس
۰۹:۳۶ ۱۳۹۲/۰۵/۲۷
خيلي عالي بود. فقط يه سوال دارم. در خصوص اعمال hover به يك فيلد چطور ميشه يك افكت slow motion به اون داد. مثلا وقتي كه موس را روي يك فيلد مي بريم رنگ آن يك دفعه تغيير نكنه و به آرامي رنگ آن تغيير كنه. نمونش رو تو سايت دي بي اس تم در قسمت خريد قالب مي شه ديد.
ممنون
پاسخ: 
اعمال افکت به صورت انیمیشن در وب از طریق جاوا اسکریپت و یا کتابخانه جی کئوری صورت می گیرد، به طور مثال با متد setTimeout می توان یک عملیات را در چند فریم و با وقفه های کوتاه انجام داد:
<script>
function changeColor(id, frame){
var color = '#CCC';
switch(frame){
case 1:
color = "#FFECEC";
break;
case 2:
color = "#FDD";
break;
case 3:
color = "#FFC6C6";
break;
case 4:
color = "#FFB3B3";
break;
case 5:
color = "#FF9F9F";
break;
case 6:
color = "#FF9393";
break;
case 7:
color = "#FF8282";
break;
case 8:
color = "#FF6F6F";
break;
case 9:
color = "#F55";
break;
case 10:
color = "#FF2F2F";
break;
}
if(frame <= 10){
frame++;
document.getElementById(id).style.backgroundColor = color;
setTimeout("changeColor('" + id + "', " + frame + ");", 100);
}
else if(frame == 12){
document.getElementById(id).style.backgroundColor = color;
}
}
</script>
<input id="your-id" type="text" onmouseover="changeColor(this.id, 0);" onmouseout="changeColor(this.id, 12);">
نویسنده: محمود
۲۳:۰۰ ۱۳۹۲/۰۶/۲۲
سلام خسته نباشید
من میخواهم به وسیله ی css کلمه ی ورود را از فرم زیر حذف کنم. به صورتی که بکگراندی که برایش در نظر گرفته ام حذف نشود. با تشکر
<button class="car" type="submit">
ورود
</button>
پاسخ: 
می توانید از نمونه کد زیر استفاده کنید:
<style>
.hidden{
height:25px;
width:100px;
text-indent:-9999px;
* html button{
font-size:0;
display:block;
line-height:0
}/* ie6 */
*+html button{
font-size:0;
display:block;
line-height:0
}/* ie7 */
}
</style>
<button class="hidden" type="submit">ورود</button>
نویسنده: محمود
۰۰:۵۷ ۱۳۹۲/۰۶/۲۳
یی سوال هم داشتم. البته به این بحث مربوط نیست در سایت هم جستجو کردم به نتیجه نرسیدم.
می خواستم ببینم itemprop چی هست به چه دردی می خورد و چطوری میشه تگی که کلاس ندارد و itemprop را دارد با css بهش استایل داد. مثل کد زیر:
<div itemprop="description"></div>
متشکر
پاسخ: 
itemprop یا Item Property به معنی توصیفی برای تعیین هدف از به کاربردن تگ ها در HTML است (در نسخه 5 افزوده شده)، این ویژگی خواص محتوای هر تگ را مشخص تر می کند.
به نظر نمی رسد از طریق این ویژگی بتوانید با CSS استایلی به تگ اختصاص دهید، چون Selector بدین منظور در CSS پیش بینی نشده است (باید از کلاس یا آی دی استفاده کنید).
نویسنده: امیر نجارپور
۱۱:۳۸ ۱۳۹۲/۰۸/۲۷
عالی بود استاد!!
دنبال چنین مطلبی بودم.
بازم ممنون از آموزشی که دادین.
نویسنده: امین
۱۶:۲۲ ۱۳۹۳/۰۴/۲۴
واقعا زدی وسط خال
همون چیزی که دنبالش بودم
خیلی عالی بود
واقعا ممنونتم
نویسنده: محمد
۱۳:۱۰ ۱۳۹۳/۰۹/۲۲
فقط یه چیز میگم که عالیییی بود.... من اصلا نمیدونستم با سی اس اس هم میشه کاری کرد دکمه ها رنگ هاشون عوض شه...... خیلی عالییی.. فقط با سی اس اس میشه کاری کرد که مثلا موس روی دکمه ای میره و اون دکمه مثل به انیمیشن خیلی کوتاه جاش عوض شه؟
پاسخ: 
چنین امکانی با CSS3 میسر است (باید در وب جستجو کنید)، منتها برای راحتی و سازگاری بیشتر می توانید از jQuery استفاده کنید.
نویسنده: محمد
۱۴:۱۱ ۱۳۹۳/۱۰/۳۰
سلام.... شما راهی واسه افزایش سلیقه در طراحی قالب دارین؟؟؟ گفتم شاید تو وب زیاد کار میکنین یه راهی باشه.
پاسخ: 
منظورتان از افزایش سلیقه مشخص نیست! در مجموع شناخت هارمونی رنگ ها و داشتن اطلاعات و تجربه در زمینه گرافیک + دیدن و بررسی قالب های مختلف با رنگ بندی و اهداف متفاوت می تواند کمک کند.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





6 × 5
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form آی تی
در:
ممنون آینده کاری پی اچ پی خوبه یا جاواسکریپت؟
۱۴۰۰/۰۴/۳۰

form رضا
در:
با عرض سلام و خسته نباشید ایا امکان این قضیه در outlook وجود دارد که ما ادرس فرستنده را از طریق آن بتوانیم پیدا...
۱۴۰۰/۰۴/۳۰

form محمود
در:
سلام مهندس چگونه می شود میزان حرکت اسکرول را تعیین کرد. یعنی با یه حرکت غلطک موس صفحه بعدی در کادر قرار بگیرد....
۱۴۰۰/۰۴/۳۰

form محمد
در:
سلام خیلی خیلی ممنون تشکر
۱۴۰۰/۰۴/۲۷

form محمود
در:
سلام چگونه حاشیه های ناتمام ایجاد کنیم. یعنی تمام دور کادر کامل نباشد و بردر دور کادر ناقص باشد. مثلن بردر سمت راست تا...
۱۴۰۰/۰۴/۲۷

form محمد
در:
سلام ببخشید من با curl میخواستم فایلی رو با api بفرستم ولی جواب نداد اگر امکانش هست تصحیحش کنید:
۱۴۰۰/۰۴/۲۷

form برنامه نویس
در:
سلام و عرض ادب خدمت استاد. یه سوال خدمت شما داشتم. چطور می تونیم از ادیتور مثل ckeditor یا tinymsc به جای textarea...
۱۴۰۰/۰۴/۲۷

form جواد
در:
با سلام من دانشی از برنامه نویسی ندارم ، میشه برنامه ای نوشت که آدرس یک صفحه بعد از لاگین شدن بهش داد و هر...
۱۴۰۰/۰۴/۲۱

form علی
در:
سلام خوبین؟ من میخوام برای وبلاگم سبد خرید بزنم ولی php و ........ بلد نیستم اگه برام درست کنین ممنونتون میشم
۱۴۰۰/۰۴/۱۹

form سینا الف
در:
باسلام! من از این آموزش‌ سایت‌تون هم خیلی استفاده کردم. ضمن تشکر صمیمانه از مدیریت وبگو بابت مطالب مفید و کاربری اش، سوالی درباره...
۱۴۰۰/۰۴/۱۸

form محمود
در:
سلام و تشکر از کمک های قبلی تان. در بخش بالا قسمت «تغییر رنگ پس زمینه با کلیک کاربرم» را خوندم . ولی کد...
۱۴۰۰/۰۴/۱۸

form محمود
در:
با سلام دوباره نمونه کدی که برای افکت پس زمینه چراغ پلیس و صدا قرار دادین خیلی خوب کار میکند و بسیار سپاس ....
۱۴۰۰/۰۴/۱۴

form احمد
در:
سلام خسته نباشید من یه کد نوشتم که قیمت کالا ها و نام کالا ها رو از یه صفحه برام استخراج کنه و بصورت جدول...
۱۴۰۰/۰۴/۱۴

form محمود
در:
سلام و عرض ادب چگونه می شود با کلیک روی یک متن ، کل پس زمینه در یک آن چشمک بزند یعنی رنگ...
۱۴۰۰/۰۴/۱۱

form مجید
در:
سلام. من برنامه ای دارم که بر اساس php و mysql کار میکنه. بهش 100 جمله میدم و جملات رو تصادفی نمایش میده. حالا میخام...
۱۴۰۰/۰۴/۱۰

form Amir
در:
خیلی عالی بود
۱۴۰۰/۰۴/۱۰

form Amir
در:
سلام ببخشید یک کانال تلگرامی است که سیگنال میده و شرطی اینکه در آلپاری و لایت فارسی حساب داشته باشی و تحت ای پی آنها...
۱۴۰۰/۰۴/۱۰

form مجید
در:
خیر ببینی جوون - این اسکرول افقی کلی اعصاب رو بهم ریخته بود .
۱۴۰۰/۰۴/۰۷

form جین مین
در:
با سلام و وقت بخیر من تمام مراحل رو به نظر خودم درست انجام دادم و فایل هم دانلود میشه اما مشکل اصلی اونجاست...
۱۴۰۰/۰۴/۰۶
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.