امروز چهارشنبه ۱۴۰۰/۰۱/۲۵

2021/04/14 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>
پیش نمایش آنلاین
دسته بندی: مهارتهای وب » طراحی وب
برچسب ها: CSS - طراحی وب
قبلی »
« بعدی
related مطالب بیشتر:
» آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
» نحوه ساخت باکس گوشه گرد در فتوشاپ و CSS
» طراحی و کدنویسی هدر قالب با فتوشاپ، HTML و CSS
» طراحی باکس جستجو با فتوشاپ و CSS
commentنظرات (۲۰ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: hosin
۱۰:۴۱ ۱۳۹۱/۰۵/۱۹
salam man site shoma ro khili dost daram aliye
نویسنده: فریبا
۱۵:۰۰ ۱۳۹۱/۰۵/۱۹
سلام
مثل همیشه عالی هستید.
سوال: میشه توضیحی هم در مورد دکمه های جستجو ( مثل جستجوی سایت خودتون ) داشته باشید؟
ممنون.
پاسخ: 
سلام
ممنون، نظر لطف شماست.
دکمه های جستجو ماهیتی متفاوت ندارند و مانند سایر عناصر فرم های وب هستند، دکمه ارسال از نوع 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 آن استفاده کنید:
تنظیم موقعیت و حذف فاصله بلاک های div با استفاده از css
در مرورگر IE6 نیز از دستورات شرطی و تگ <center> استفاده کنید:
<!--[if IE 6]>
<center>
<![endif]-->
بلاک div
<!--[if IE 6]>
</center>
<![endif]-->
نویسنده: farhad
۱۶:۲۱ ۱۳۹۱/۰۷/۲۳
salam dadash
enghad doad kardama yani damet garm
ba in sitet mahshare
نویسنده: امیر محمد
۲۲:۰۱ ۱۳۹۲/۰۲/۳۱
دستت طلا
نویسنده: حمیدرضا
۰۰:۰۹ ۱۳۹۲/۰۳/۱۴
سلام
عادت به نوشتن نظر ندارم
اما برای این مطلب خوب و کارآمدتون لازم بود تشکر کنم
با تشکر فراوان
نویسنده: حسن دهقانی
۱۲:۲۷ ۱۳۹۲/۰۴/۰۶
سلام
من امروز از سایت شما دیدن کردم
واقعا جای تشکر داره من دست شما استار گرامی را که بدون هیچ توقعی آموزش رایگان در اختیار همه قرار می دهید می بوسم
من که خیلی حال کردم و چیزائی که تا حالا دیده بودم اینجا لمسش کردم
من فعلا سوالی ندارم حتما مزاحمتون می شم
با تشکر
پاسخ: 
سلام
نظر لطف شما است.
نویسنده: علی شفیع زاده
۱۸:۵۱ ۱۳۹۲/۰۴/۱۴
با سلام
عالی بود
خیلی استفاده کردم.
تشکر از سایت خوب و پر محتواتون
با آرزوی بهترین ها
نویسنده: گرافيك پلاس
۰۹:۳۶ ۱۳۹۲/۰۵/۲۷
خيلي عالي بود. فقط يه سوال دارم. در خصوص اعمال hover به يك فيلد چطور ميشه يك افكت slow motion به اون داد. مثلا وقتي كه موس را روي يك فيلد مي بريم رنگ آن يك دفعه تغيير نكنه و به آرامي رنگ آن تغيير كنه. نمونش رو تو سايت دي بي اس تم در قسمت خريد قالب مي شه ديد.
ممنون
پاسخ: 
سلام
اعمال افکت به صورت انیمیشن در وب یا از طریق جاوا اسکریپت و یا فریم ورک جی کئوری صورت می گیرد، به طور مثال از متد setTimeout می توان یک عملیات را در چند فریم و با وقفه های کوتاه انجام داد:
<script type="text/javascript">
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 type="text/css">
.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 استفاده کنید.
نویسنده: محمد
۱۴:۱۱ ۱۳۹۳/۱۰/۳۰
سلام.... شما راهی واسه افزایش سلیقه در طراحی قالب دارین؟؟؟ گفتم شاید تو وب زیاد کار میکنین یه راهی باشه.
پاسخ: 
سلام
منظورتان از افزایش سلیقه مشخص نیست! در مجموع شناخت هارمونی رنگ ها و داشتن اطلاعات و تجربه در زمینه گرافیک + دیدن و بررسی قالب های مختلف با رنگ بندی و اهداف متفاوت می تواند کمک کند.
نخست
قبلی
1
2
بعدی
آخر
paged صفحه 1 از 2
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





4 × 2
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form شریفی
در:
ارسال پارامتر به URL و دریافت مقادیر با PHP
سلام مجدد. من یه سوال خیلی تخصصی دارم. ممنون میشم پاسخ بدین. برای پروژه پایان نامه. دارم روی موتورهای جستجوگر تحقیق میکنم. فرض...
۱۴۰۰/۰۱/۲۵
form شریفی
در:
ارسال پارامتر به URL و دریافت مقادیر با PHP
سلام استاد. من از متد file_get_contents استفاده می کنم برای دریافت اطلاعات از سایت های مختلف. بعضی وقتها سایت ها دیر لود میشه. آیا...
۱۴۰۰/۰۱/۲۵
form hh
در:
دوباره نویسی آدرس های وب (URL Rewrite) در htaccess
سلام خدمت شما بنده یه سوال داشتم تمام مراحل شما رو انجام دادم و نتیجه گرفتم و لازمه یه تشکرم بکنم. وبسایت من،...
۱۴۰۰/۰۱/۲۵
form erfan
در:
رویدادها (Events) در جاوا اسکریپت (JavaScript)
سلام من واسه یه دکمه یه محتوایی تعریف کردم که وقتی کلیک شد محتوا رو نشون بده اما تو دوجاش موندم یک اینکه چیکار کنم...
۱۴۰۰/۰۱/۲۱
form mahdi
در:
توابع (Functions) در جاوا اسکریپت (JavaScript)
سلام استاد عزیز ، بازم معذرت میخوام سوالام زیاد شد ولی همشون در یک موضوع هستن ، تونستم که با این روش برای هر اسلایدر...
۱۴۰۰/۰۱/۱۸
form mahdi
در:
توابع (Functions) در جاوا اسکریپت (JavaScript)
سلام استاد عزیز عذر میخوام بار سومه پیام میزارم ، مشکلش از ست اینترول بود که قطع نمیشد و با هم تداخل داشتند ولی بدون...
۱۴۰۰/۰۱/۱۸
form mahdi
در:
توابع (Functions) در جاوا اسکریپت (JavaScript)
سلام وقت بخیر استاد عزیز ، یک تابع رو چطور میشه در جاوا اسکریپت اورراید کرد؟ که مثلا با هر فراخوانی مجدد ، قبلی ها...
۱۴۰۰/۰۱/۱۸
form متین
در:
نحوه ایجاد لینک در HTML
سلام چجوری برای خود صفحه ادرس بسازیم که سایتی که رو ساختیم رو با دستگاه دیگه پیداش کنیم
۱۴۰۰/۰۱/۱۶
form امیرحسین برزویی
در:
پاسخ به سوالات و حل مشکلات وبلاگ نویسان
من یک وبلاگ دارم و 9 سالمه من در وبلاگم مداحی می گذارم ولی وقتی قاب گذاشتم از این سایت من دیگه فیلم...
۱۴۰۰/۰۱/۱۶
form بنده خدا
در:
پاسخ به سوالات و حل مشکلات وبلاگ نویسان
سلام خسته نباشین، خدا قوت. یه سوال دارم. چرا در بخش نظردهی وبلاگ به جای عنوان پست می نویسه مطلب مورد نظر یافت نشد؟!...
۱۴۰۰/۰۱/۱۵
form روح الله
در:
IP چیست و چه کاربردی دارد؟
موقعی میخواهم وارد سایت ایران خودرو بشم پیام میده از Ip داخلی استفاده کنید دلیلش چیست
۱۴۰۰/۰۱/۱۴
form غریب
در:
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
تشکر از شما مشکلم حل شد امیدوارم موفق و پیروز باشید هر جا که هستید
۱۴۰۰/۰۱/۱۱
form غریب
در:
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
سلام مجدد ممنون و تشکر از کمکتون کد به خوبی کار میکنه اما همچنان من مشکلی دارم که حل نتونستم کنم...
۱۴۰۰/۰۱/۱۰
form غریب
در:
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
سلام مجدد این کدی که دادید خوب هست ولی من بد و ناقص توضیح دادم توجه کنید کد این هست تقریبا ممنون...
۱۴۰۰/۰۱/۱۰
form غریب
در:
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
سلام خسته نباشید من کدی دارم که میخوام داخل یه بخشیش نتیجه یه رویداد رو فراخوانی کنم و راهش و نمیدونم اگر میشه کمک...
۱۴۰۰/۰۱/۱۰
form محسن
در:
رویدادها (Events) در جاوا اسکریپت (JavaScript)
سلام ، سوال من مربوط به پنل کارگزاری هاست ، وقتی اسم یک سهم (نماد) را در قسمت جست و جو سرچ میکنم...
۱۴۰۰/۰۱/۰۸
form ترجمه
در:
دوباره نویسی آدرس های وب (URL Rewrite) در htaccess
باسلام همه صفحات من دارای دو url می باشد که یکی با حروف کوچک است و دیگری با حروف بزرگ چجوری این مشکل را...
۱۴۰۰/۰۱/۰۸
form سهیل ملکی
در:
استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
سلام خسته نباشید ببخشید من میخوام از تابع navigator.online توی جاوا اسکریپت استفاده کنم تا باهاش بفهمم کاربر آنلاین هست یا نه و اگه بود...
۱۴۰۰/۰۱/۰۴
form Rabbiten
در:
اشتباهات رایج در وبلاگ نویسی غیر حرفه ای!
سلام. من چند ماه است که دنبال کد استایل تصویر مثل تبلیغات بالای سایت شما هستم. اما هیچ جا پیدایش نمی کنم. لطف می...
۱۴۰۰/۰۱/۰۱
form mahdi
در:
مفهوم پلتفرم (Platform) و فریم ورک (Framework)
سلام استاد عزیز سال نو رو تبریک میگم بهتون ، امیدوارم که خودتون و خانوادتون همیشه سالم و سلامت باشید و امسال پر از...
۱۳۹۹/۱۲/۳۰
form korosh abbasy
در:
محدود کردن لینک دانلود مستقیم فایل ها با PHP و htaccess
سلام وقت بخیر ببخشید در مورد این مطلب سوالی پرسیدم شما در مورد output buffering توضیح دادید کد کار نمیکنه میخواستم ببینم نیازی هست من...
۱۳۹۹/۱۲/۲۹
form احمد
در:
حمله DDoS چیست و چگونه از آن جلوگیری کنیم؟
سلام مجدد عذرخواهی میکنم یه موردی دیگه بود فراموش کردم در مورد سوال هدر بگم اینکه روی لوکال به هدر ارسال میشه ولی روی هاست...
۱۳۹۹/۱۲/۲۸
form احمد
در:
حمله DDoS چیست و چگونه از آن جلوگیری کنیم؟
با سلام خسته نباشید ببخشید قبلا یه سری دستورات جی کوری رو از خودتون گرفتم وقتی فیلدهای فرمم تکمیل شده است توسط هدر بره به...
۱۳۹۹/۱۲/۲۸
form korosh abbasy
در:
محدود کردن لینک دانلود مستقیم فایل ها با PHP و htaccess
سلام دم شما گرم این دستور برای خوندن فایل هم استفاده میشه؟ من میخوام دسترسی تعیین کنم که اگر یک متغییر true...
۱۳۹۹/۱۲/۲۷
form احمد
در:
حمله DDoS چیست و چگونه از آن جلوگیری کنیم؟
با سلام و خسته نباشید ببخشید داخل جیکوری یدونه متغییر دارم الان میخوام همین متغییر رو با یه عدد دیگه جمع کنم ولی وقتی علامت...
۱۳۹۹/۱۲/۲۶
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.
صفحه نخست | آموزش مقدماتی | آموزش کاربردی | مهارتهای وب | تماس با ما | درباره ما | حریم خصوصی | RSS Feed | HEX RGB
copyright محتوا در «وبگو» به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
© 2012 - 2021 Webgoo.ir - All Rights Reserved.