٢۵ ترفند CSS بسیار مفید که باید بدانید

در این مقاله، ٢۵ ترفند CSS بسیار مفید مطرح شده است که به شما کمک می کند صفحات وب بسیار عالی طراحی کنید. ممکن است شما برخی یا همه ی این ترفند ها را از قبل بلد باشید، با این حال، این می توانید یک مرجع دم دستی برای ترفند های جذاب CSS برای شما باشد که باید بدانید.

این مقاله، ترجمه‌ی آزاد با حذف و اضافات از مقاله‌ی زیر است:
http://webdeveloperplus.com/css/25-incredibly-useful-css-tricks-you-should-know/

١ - تغییر رنگ متن در حالت انتخاب شده

ممکن نیست که این ترفند را بلد بوده باشید!
شما به کمک CSS می توانید رنگ متن صفحات وب را در حالت انتخاب شده مشخص کنید. این ترفند دست کم در مرورگر های جدید نظیر safari و firefox کار می کند.

/**
 * Safari and Opera
 */
::selection {
  background: #c3effd; 
  color: #000;  
}
/**
 * Firefox
 */
::-moz-selection {
  background: #c3effd; 
  color: #000; 
}

همانطور که می بینید، با استفاده از انتخابگر ::selection می توانید متن های انتخاب شده را هدف قرار دهید

٢ - جلوگیری از جهش اسکرول فایرفاکس

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

html {
  overflow-y: scroll;
}

٣ - شکستن صفحات و رفتن به صفحه ی بعد هنگام پرینت

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

به کمک CSS می توانید محل شکسته شدن صفحات و رفتن به صفحه ی بعد در هنگام پرینت را کنترل کنید. فقط کافی است که کد CSS زیر را به استایل های خود اضافه کنید و سپس به هر تگی که می خواهید در صفحه ی بعد چاپ شود، کلاس page-break را انتساب دهید.

.page-break {
  page-break-before: always;
}

۴ - استفاده از دستور !important

طراحان با تجربه، از کاربرد این دستور اطلاع دارند، اما معمولا تازه کارها، از این دستور !important در CSS بی اطلاع هستند و تعجب می کنند.
با افزودن دستور !important به انتهای دستور css تان، اولویت دستور مورد نظر را نسبت به دستورات دیگر که با آن در تضاد هستند، افزایش می دهید.
در کد زیر، رنگ زمینه، به دلیل وجود !important آبی خواهد بود (و نه قرمز)

.page { 
  background-color: blue !important;
  background-color: red;
}

کاربرد روش فوق وقتی است که شما یک css rule می نویسید، اما متوجه می شوید که هیچ تاثیری ندارد! دلیل این مسئله احتمالا این است که یک دستور دیگر با اولویت بالاتر وجود دارد که اثر دستور شما را خنثی می کند.
برای این که دستور شما اولویت بالا تری داشته باشد و اثر دستورات دیگر را خنثی کند، می توانید از !important استفاده کنید.

۵ - جایگذاری متن با تصویر

این ترفند در مقاله ی قبلی شرح داده شده است:
۱٠ ترفند CSS که احتمالا تا کنون نمی دانستید!

۶ - ارتفاع حداقل که در تمامی مرورگر ها کار می کند.

متاسفانه مرورگر Internet Explorer دستور min-height در CSS را درک نمی کند و لذا نمی توان با دستور فوق، ارتفاع حد اقل را در IE مشخص نمود.

برای حل این مشکلی می توانید از ترفند زیر استفاده کنید.

#container{
  /* all browsers except ie6 will respect the !important flag */
  height: auto !important;
  min-height: 500px;
  /* Should have the same value as the min height above */
  height: 500px;
}

٧ - مشخص کردن لینک هایی که در پنجره ی جدید باز می‌شوند.

کد CSS زیر سبب می شود که لینک هایی که در پنجره ی جدید باز می شوند، را با استایل ویژه نمایان می کند. به این ترتیب، بازدیدکنندگان سایت، قبل از این که بر روی لینک کلیک کنند، می دانند که این لینک در یک پنجره یا تب جدید باز خواهد شد

a[target="_blank"]:before,
a[target="new"]:before {
  margin: 0 5px 0 0;
  padding: 1px;
  outline: 1px solid #333;
  color: #333;
  background: #ff9;
  font: 12px "Zapf Dingbats";
  content: "\279C";
}

در کد فوق چند نکته وجود دارد که خوب است به آنها توجه کنید:

  • به انتخابگر a[target="_blank"] توجه کنید. در CSS می توان تگ های html را بر اساس مقادیر خواص آن ها فیلتر کرد. برای این منظور همانطور که می بینید، مقدار خواص را در درون [] قرار می دهیم. در این دستور لینک هایی که دارای خاصیت target="_blank" هستند را انتخاب کرده ایم. یعنی لینک هایی که در یک تب جدید باز می شوند.
  • به کلاس کاذب :before و :after توجه کنید. این دو کلاس، تگ خاصی را هدف نمی گیرند، بلکه فقط یک نقطه ی خالی در قبل یا بعد تگ مربوطه را انتخاب می کنند.
  • به دستور content در CSS توجه کنید. به کمک دستور content می توان یک کاراکتر یا یک متن را در قبل یا بعد از یک تگ قرار داد. توجه کنید که دستور content فقط زمانی قابل استفاده است که از کلاس کاذب :after و یا :before استفاده شده باشد.
    در کد فوق، ما یک علامت \279C که به صورت یک فلش نمایش داده می شود در قبل و بعد لینک ها قرار داده ایم.

٨ - استایل دهی به لیست های مرتب به شیوه ی متفاوت

Ordered list style

استایل دهی به اعداد یک لیست مرتب (شماره گذاری شده) به شیوه ای متفاوت نسبت به باقی متن هریک از آیتم های لیست.
در کد زیر، همانطور که می بینید، یک فونت را برای تگ ol تعریف کرده ایم و بعد برای تگ p ی درون آن، مجددا فونت را تغییر داده ایم. به این ترتیب، استایل خود لیست (شامل اعداد لیست) با محتوای آن (که باید در درون p قرار گرفته باشد) متفاوت خواهد بود.

 

ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}
ol p {
  font: normal .8em Arial, Helvetica, sans-serif;
  color: #000000;
}

٩ - استفاده از حروف بزرگ در اولین حرف مقاله

Drop caps

شما می توانید حرف اول مقاله تان را همانند روزنامه ها و مجلات، بزرگ کنید! برای ایجاد این جلوه، می توانید از کلاس کاذب :first-letter استفاده کنید.

p:first-letter {
  display: block;
  margin: 5px 0 0 5px;
  float: left;
  color: #FF3366;
  font-size: 3.0em;
  font-family: Georgia;
}

١٠ - شفافیت به گونه ای که در تمام مرورگر ها کار کند

گرچه CSS 3 خاصیت جدید opacity را برای شفافیت معرفی کرده است، اما همه ی مرورگرها از آن پشتیبانی نمی کنند. این یک ترفند CSS برای شفافیت در همه ی مرورگرها می باشد

.transparent_class {  
  filter: alpha(opacity=50);  
  -moz-opacity: 0.5;  
  -khtml-opacity: 0.5;  
  opacity: 0.5;  
}  

١١ - موقعیت دهی عمودی در وسط با line-height

این ترفند در مقاله ی قبلی شرح داده شده است:
۱٠ ترفند CSS که احتمالا تا کنون نمی دانستید!

١٢ - طرح ثابت در وسط صفحه

این ترفند در مقاله ی قبلی شرح داده شده است:
۱٠ ترفند CSS که احتمالا تا کنون نمی دانستید!

١٣ - حذف اسکرول عمودی در textarea ها در IE

مرورگر Internet Explorer بدون توجه به ارتفاع متن، یک اسکرول عمودی به کادر های متنی textarea اضافه می‌کند. با استفاده از روش زیر می توانید مشکل فوق را برطرف نمایید

textarea{
  overflow: auto;
}

١۴ - حذف حاشیه از لینک های فعال

برخی از مرورگر ها مانند فایرفاکس و IE دور لینک هایی که کاربر کلیک می کند، یک حاشیه ی نقطه چین نمایش می دهند. این یک ویژگی مفید است و به این ترتیب، کاربر می تواند بفهمد که روی کدام لینک کلیک کرده است و یا در حال حاضر فوکوس بر روی کدام لینک قرار دارد. با این حال، این ویژگی گاها باعث زشت شدن لینک می شود. برای حذف این حاشیه می توانید از کد زیر استفاده کنید:

a:active, a:focus {
  outline: none;
}

١۵ - جلوگیری از مخفی شدن عناصر در IE

گاهی اوقات مرورگر IE به شیوه ی خاصی رفتار می کند و سبب می شود که برخی عناصر مخفی شوند. و هنگامی که با موس چیزی را انتخاب می کنیم، مجددا عناصر مخفی شده، ظاهر می شوند. این مشکل به سبب برخی باگ ها در IE به هنگام برخورد با عناصر شناور (float) به وجود می‌آید. این مشکل با افزودن دستور position: relative به عناصری که مخفی می شوند، قابل حل می باشد.

١۶ - آیکون های خاص بر اساس خواص

انتخاب گرهای خواص در CSS بسیار قدرمند هستند و به شما امکانات زیادی را برای کنترل استایل عناصر متفاوت می دهند. به عنوان مثال شما می توانید بر اساس مقدار href در لینک ها (یا به عبارت دیگر، بر اساس مقصد لینک ها)، یک آیکون متفاوت را در سمت چپ لینک ها قرار دهید.

به این روش شما می توانید آیکون های متفاوتی را به لینک هایی که به یک فایل pdf یا یک فایل word اشاره می کنند انتساب دهید و کاربر قبل از این که کلیک کند، می داند که مقصد این لینک، فایل pdf است یا تصویر است یا ...

a[href$='.doc'] { 
  padding: 0 20px 0 0; 
  background: transparent url(/graphics/icons/doc.gif) no-repeat center right; 
}

١٧ - نشانگر pointer در CSS

با استفاده از خاصیت cursor می توانید شکل اشاره گر موس را تغییر دهید. مقدار cursor: pointer سبب می شود که اشاره گر موس شبیه دست (مانند لینک ها) بشود.

به عنوان مثال فرض کنید که می خواهیم اشاره گر موس بر روی تمامی عناصری که توسط کاربر قابل کلیک هستند، مشابه لینک ها بشود. در زیر کد CSS برای انجام این کار آمده است:

input[type=submit], label, select, .pointer {
  cursor: pointer;
}

١٨ - با حروف درشت نوشتن متن

برای این که کلیه ی حروف یک متن با استفاده از حروف بزرگ نمایش داده شود، می توانید از دستور text-transform استفاده کنید. این دستور معمولا برای نمایش دادن عنوان صفحات مفید است.

text-transform: capitalize;

١٩ - حروف درشت کوچک

با استفاده از دستور زیر، می توانید کلیه ی حروف متن مورد نظر را با استفاده از حروف بزرگ (capital) بنویسید اما سایز حروف هر کلمه نسبت به حرف اول آن کلمه کوچک تر خواهد بود (small caps)

font-variant: small-caps;

٢٠ - پررنگ کردن فیلد های ورودی متنی

با استفاده از روش زیر می توانید فیلد های متنی که فوکوس را در اختیار دارند را highlight کنیم. البته این روش در IE کار نخواهد کرد

input[type=text]:focus, input[type=password]:focus { 
  border:2px solid #000; 
}

٢١ - حذف حاشیه ی تصویر لینک شده

در زیر لینک های تصویری (تصاویری که در درون لینک قرار گرفته باشند) یک حاشیه ی آبی رنگ زشت نمایش داده می شود. بهتر است که این حاشیه ی زائد را برای همه ی لینک های تصویری حذف کنیم و اگر مورد خاصی را خواستیم با حاشیه نمایش دهیم، مجددا حاشیه را به آن اضافه کنیم. برای این منظور، از دستور زیر استفاده می کنیم:

a img {
  border: none;
}  

٢٢ - مرتب سازی فرم ها بدون استفاده از جدول

Tableless form

آن زمانی که برای استایل دهی و مرتب سازی فرم ها از جدول ها استفاده می شد، گذشت. CSS به شما اجازه می دهد که فرم های قابل دسترس ایجاد کنید که دارای طرحی مشابه جدول باشند اما از جدول به هیچ عنوان در آن ها استفاده نشده باشد.

برای این منظور از تگ <label> استفاده می کنیم. با استفاده از تگ label می توانیم مطمئن شویم که دسترسی پذیری فرم بیشتر خواهد شد. در زیر یک نمونه کد HTML و CSS مربوطه برای ایجاد یک فرم بدون استفاده از جدول آمده است و می توانید از آن به عنوان الگو برای طراحی فرم هایتان استفاده کنید:

کد HTML

<form method="post" action="#" >
  <p><label for="username" >Username</label>
    <input type="text" id="username" name="username" />
  </p>
  <p><label for="password" >Username</label>
    <input type="password" id="password" name="pass" />
  </p>
  <p><input type="submit" value="Submit" /></p>
</form>

کد CSS

p label{ 
  width: 100px; 
  float: left; 
  margin-right: 10px; 
  text-align: right; 
}

به خاصیت for در تگ label توجه کنید. for در واقع id ی عنصری است که این label برای آن تهیه شده است. label ها برچسب هایی هستند که برای کادر های متنی و ... در صفحه قرار می گیرند. باید با خاصیت for مشخص کنیم که این label برای کدام عنصر می باشد.

٢٣ - انتخاب یک سایز پایه‌ی مناسب برای صفحه

تنظیم سایز فونت به طور مناسب به 62.5% در تگ <body> باعث می شود که 1em به لحاظ سایز معادل 10px باشد. این کار به شما اجازه می دهد که به سادگی و آسانی از واحد em استفاده کنید و بدانید که معادل آن به پیکسل چقدر است.

body {
  font-size: 62.5%;
}  

٢۴ - پر رنگ کردن تگ های acronym و abbr

تگ acronym برای نوشتن علامات اختصاری سرنام کلمات مفید است و تگ abbr برای نوشتن کلمات اختصاری می باشد.

تگ های acronym و abbr اطلاعات مفیدی را برای کاربران، مرورگرها و موتور های جستجو فراهم می کنند. اما بیشتر مرورگرها، به جز فایرفاکس، این تگ ها را به طور متفاوتی نمایش نمی دهند.

در زیر ترفند CSS برای highlight کردن تگ های acronym و abbr آمده است.

acronym, abbr{
  border-bottom: 1px dotted #333;
  cursor: help;
}  

٢۵ - بازنشانی CSS توسط Eric Meyer

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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/**
 * remember to define focus styles!
 */
:focus {
  outline: 0;
}

/**
 * remember to highlight inserts somehow!
 */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/**
 * tables still need 'cellspacing="0"' in the markup
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
برای ترجمه و نوشتن این مطلب، زمان زیادی صرف شده است، لطفا نظرات سازنده ی خود را با استفاده از فرم زیر برای من ارسال کنید. موفق باشید.
دسته بندی‌ها: 

دیدگاه‌ها

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

سلام
ممنونم
مشکلی وجود نداره، هر کس به این مطالب نیاز داره، می تونه مطلب را پرینت بگیره یا به هر صورت ذخیره کنه و استفاده آموزشی کنه (و یا به طور مکرر به این سایت مراجعه کنه و مطلب رو مطالعه کنه! :) ).
من شخصا وقتی با یک سری نکته ی جدید مواجه می شوم، آن ها را بر روی کاغذ یادداشت می کنم تا فراموش نکنم و بعدا استفاده می کنم.
البته چون که برای نوشتن این مطالب، زمان زیادی را صرف می کنم، راضی نیستم که مطالب در وبسایت های گوناگون کپی شود و باید حق مالکیت معنوی ترجمه برای مترجم محفوظ باشد.
با این حال چون هدف آموزش است، هر کسی می تواند به هر صورتی که نیاز داشته باشد، از آن استفاده ی آموزشی کند، یاد بگیرد، یاد بدهد و ...
(مشروط به حفظ حقوق صاحبان اثر - مترجم و مولف)

I love Drupal

سلام احمد جان/حالت خوبه؟کم پیدایی داداش؟ :)
در مورد text-transform: capitalize; فکر نمیکنی اشتباهه توی مقاله؟ تا اونجایی که من میدونم این value باعث میشه که اولین حرف از تمام کلمه های یک تگ رو با حروف بزرگ نمایش بده . مثل Ahmad Omid

از توجه شما ممنونم
برای نمایش کدها به صورت highlight شده کتابخانه های زیادی وجود دارد که فکر می کنم قبلا راجع بهش توضیح داده باشم.
به هر حال، من از syntaxhighlighter استفاده می کنم. برای اطلاعات بیشتر به این سایت مراجعه کنید:
http://alexgorbatchev.com/SyntaxHighlighter/
اگر برای دروپال می خواهید، از ماژول syntaxhighlighter استفاده کنید و برای وردپرس هم از این پلاگین:
http://wordpress.org/extend/plugins/syntaxhighlighter/

موفق باشید

I love Drupal

سلام. از زحماتی که بابت نوشتن مطالب می کشید ازتون تشکر میکنم.

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

سلام دوست عزیز.
سوال شما قدری مبهم است. لطفا بیشتر توضیح دهید.
برای استایل دادن به تگ های input می توانید به صفحه ی زیر مراجعه کنید:
http://css-tricks.com/styling-texty-inputs-only/
http://www.sitepoint.com/style-web-forms-css/
در صورتی که استایل خاصی مد نظرتان باشد، لطفا دقیقا قید کنید تا راهنمایی کنم.
راجع به جابه جایی اطلاعات بین صفحات وب متوجه منظورتان نشدم.
اگر منظورتان این است که استایل های css بین چند صفحه ی وب مشترک باشد، کافی است که استایل هایتان را در یک فایل با پسوند .css ذخیره کنید و آن را در تمامی صفحات مورد نظرتان استفاده کنید.
اگر منظورتان این است که اطلاعات را از یک صفحه کپی کنید و در یک صفحه ی دیگر paste کنید، روش خاصی ندارد و می توانید از copy/paste ویندوز استفاده کنید! :)
مجددا راجع به جابه جا شدن صفحات وب متوجه منظورتان نشدم. اما اگر منظورتان این است که آدرس URL صفحات وب تغییر نکند، باید عرض کنم که تغییر آدرس صفحات وب بدون دلیل صورت نمی گیرد. اما در صورتی که آدرس یک صفحه تغییر کرده باشد، می توانید آدرس قبلی را به آدرس بعدی ریدایرکت کنید و می توانید از کد های HTTP 301 و HTTP 302 استفاده کنید.

اگر سوال دیگری هم دارید لطفا بپرسید.
موفق باشید.

I love Drupal

سلام مطالب سازنده و زیبایی بود. ممنونم. اگر روش Highlight کردن تگ ها رو بگین خیلی ممنون میشم. یا shadow دادن به یک تگ

دوست عزیز، متوجه منظورتان نشدم.
اگر منظورتان این است که چطوری داخل این سایت، کد های html رنگی میشن، در این صورت پاسخ این است که من از syntax highlighter استفاده می کنم.

I love Drupal

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

I love Drupal

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

خیلی ممنون از اطلاعاتی که گذاشتید به نظرم اگه مثال هاتون همراه با عکس بود بهتر بود.به هر حال بازم مفیده ممنونم

اقا واقعا ممنونم ازتون
مطالبتون خیلی خوب بودن
با اجازتون من این متن رو برای تحقیق استفاده کردم
راضی باشین

سلام عزیز
تو این صفحه یاهو ستون مقاله طولانی تر از ستون سمت راست است. وقتی اسکرول می کنیم به پایین مقاله تا پایان اسکرول می شود اما ستون سمت راست پس از اتمام مطالب ثابت می ماند. این امکان چطوری ایجاد میشه؟ اسکریپت هست یا سی اس اس؟
https://en-maktoob.news.yahoo.com/iran-women-flout-dress-code-facebook-c...

درود
دوست عزیز بنده درخواست نحوه ی استایل دادن به object --&gt;

رو دارم اگر میتونید آموزش بدید خیلی متشکرم

سلام، خسته نباشید.
من از سرویس بلاگفا استفاده میکنم. برای تغییر رنگ قسمتی از متن باید چیکار کنم و کد تغییر رنگ رو باید کجای وبلاگ قرار بدم؟ در قسمت جاوا اسکریپت یا در قسمت ‏HTML؟
لطفا کاملا توضیح بدید و اگه ممکنه ایمیل کنید.
خیلی ممنون.

سلام.
میخواستم روی یک کلمه سایه متحرک ایجاد کنم با کد css3 چطور میتونم انجام بدم؟ممنون میشم اگه پاسخ بدین.

بستگی داره که چه نوع حرکتی لازم داشته باشید. اگر حرکت با موس تحریک میشه، از کلاس کاذب hover استفاده کنید. ولی اگر انیمیشن بر اساس زمان می باشد، باید از دستورات animation در CSS3 استفاده کنید
http://www.w3schools.com/css/css3_animations.asp
http://daneden.github.io/animate.css/

I love Drupal

سلام.اگر بخواهیم زمانی که روی تگ کلیک میکنیم تگ که جزئیات عکس دران توضیح داده شده نشان داده شود بااستفاده ازhover چه کار بایدکنیم..درصورتی که 3تاعکس درکنارهم داشته باشیم

سلام
واقعا از زحمتی که کشیدی ممنونم و اطلاعات مفیدی بهمون دادی

موفق باشی

باتشکر
این قطعه کد سی اس اسی را که قراردادید که مقادیر پیش فرض مرورگر را بازنشانی می کند
دیگه نیازی نیست کدهای خود را سازگارشون کنیم برای نمایش در مرورگرهای مختلف
مثال:
-webkit-
-moz-
-o-
و مانند اینها.
ممنون

سلام
وقتتون بخیر.
بنده در چندین سایت دیدم که مثل سایت من از ویژگی وبلاگی صحیفه استفاده میکنند با این تفاوت که استایل خاصی به قالبشون اضافه کرده بودند که وقتی موس روی قسمتی که تو تصویر مشخص کردم قرار میگرفت رنگ نوشته ها ی اون قسمت عوش میشد یا اینکه کلا اون باکس کمی بزرگتر نشون داده میشد.
میخواستم راهنمایی کنید که بنده استایل مورد نظرم رو به کدوم قسمت اضافه کنم؟
اینم عکس
http://up.facenama.com/file/3679/Capture3.png
خیلی ممنون
http://www.arize.ir

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

سلام دوست عزیز.وب جالب وزیبایی دارید چند تا سوال داشتم ! 1-چطوری متنی را در قالب وبلاگ به صورت رنگی بنویسیم یعنی هر رنگی که خواستیم ؟؟ 2-چطوری کلمه ای را در قالب به صورت بزرگ یا کوچک بنویسیم؟؟؟ 3-چطوری کلمه ای را لینک دار کنیم در قالب با تایتل البته یعنی وقتی موس میره روش یه توضبح کوچک بده ؟؟ اینارو برای سئو میخام در قالب بیرون سایت.ممنون میشم توضیح کامل بدی .

سلام خسته نباشید خیلی عالی بود لذت بردم موفق باشید انشالله مطالب بیشتری از این ترفندها بگذارید با تشکر

با درورد حضور پیشکسوت عزیز گرامی :
عرض کنم یک گواهی دیجیتال استاندار نصب کردم که به گفته فروشنده فقط یک دامین را ساپرت میکنه یعنی ساب دامین را شامل نمیشه برای سبز نشان دادن در مرورگرها گفته باید تمامی لینکها به https تغییر کنه
به نظرت کد خاصی یا دستکاری یا افزونه ای پیشنهاد میدهید که کار را راحت کنه ممنون میشم زودتر جواب بدین با تشکر 09197777791

سلام. اگر از دروپال استفاده میکنید، ماژول securepages همراه با pathologic به شما کمک خواهد کرد. موفق باشید.

I love Drupal

سلام من کدزیررا در یک برنامه آندرویدی بکار بردم لیست حذف وآشکار
شدنش خوبه مشکل این است که پس از خارج شدن وبستن برنامه
وقتی دوباره برنامه رواجرا میکنیم لیستی که قبلا انتخاب شده وآشکار شده بود مخفی میشود
یعنی تازمانی که برنامه بازه کارشو درست انجام میده ولی وقتی برنامه رو میبندم ودوباره اجرا میکنم لیست مخفی شده است برنامه بصورت جی کوئری طراحی شده
لطفا راهنمایی کنید
ممنون

function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}

این قسمت، مخفی و آشکار می شود

نمایش/مخفی

وقت بخیر
ضمن تشکر از پست مفید شما ،
من میخوام کد css ای بزنم که تنها وقتی یوزر با pc هست براش اجرا بشه و زمانی که کد های css رسپانسیو فراخوانی میشن ، اجرا نشه ، چطور باید این دستور رو بدم ؟
ممنون

سلام
واقعا ممنون از مطالب عالی تون،
من از وردپرس فارسی استفاده میکنم و قالبم تا ie8 منو های اولیه و ثانویه رو درست نشان میده ولی در ie 9,10,11 منوها یک ثانیه نشان داده میشوند و بعد ناپید میشوند در حالی که این قالب با وردپرس انگلیسی روی ie هیچ مشکلی ندارد!!!
به نظر شما مشکل چیه؟
باتشکر

سلام
ممنونم از مطالب
بسیار مفید بود

با سلام
ممنون از مقاله خوبتون
اگر امکانش هست مقالتون رو به صورت پی دی اف در بیارم و داخل سایت دانشگاهمون بذارم قسمت آموزش هاش با ذکر منبع که سایت شکا باشه

سلام . خیلی خیلی مفید بود . ممنون
یک سوال هم داشتم. میشه با کلیک روی یک checkbox یک دیو دیگه رو تغییر داد. مثلا با کلیک روی یک دکمه بکگراند عوض بشه. سوال من اینه جز این روش راه دیگه ای هم وجود داره؟
ممنون

با سلام

برای ساخت کادر جستجو همراه با آیکن جستجو (کادر آبی رنگ )که در حالت ریسپانسیو تغییر نکند از چه کدی در css استفاده میشود؟
ممنون

سلام
واقعا عالی بود
خیلی نکات جالبی رو یاد گرفتم
ممنونم

سلام خسته نباشید !! من یه منویی با css ساختم و می خواهم اونو رسپانسیو کنم که هر وقت عرض مرورگر تغییر کرد اون همواره در وسط بمونه !!
میشه کمکم کنیم

با عرض سلام و خسته نباشید خدمت جناب حجازی عزیز؛
یه سؤال از محضرتون داشتم:
من 6 تا باکس تو یه صفحه دارم و میخوام این باکسها به نحوی باشند که با کوچیک شدن ابعاد صفحه کوچیک بشن؛ اما نه یه دفعه زیر هم برن بلکه ابتدا بشن 2تا ردیف 3تایی و با کوچیکتر شدن بشن 3تا ردیف 2تایی و در آخر برن زیر همدیگه.
لطفا راهنماییم کنید خیلی کارم فوریه، ممنون؛

سلام دوست عزیز
اگر از کتابخانه ی bootstrap استفاده میکنید، به همه ی 6 تا باکس، کلاس های col-sm-6 col-md-4 col-lg-2 را بدهید.
یعنی به این صورت:

<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-2">First column</div>
<div class="col-sm-6 col-md-4 col-lg-2">Second column</div>
<div class="col-sm-6 col-md-4 col-lg-2">Third column</div>
<div class="col-sm-6 col-md-4 col-lg-2">Fourth column</div>
<div class="col-sm-6 col-md-4 col-lg-2">Fifth column</div>
<div class="col-sm-6 col-md-4 col-lg-2">Sixth column</div>
</div>
</div>
I love Drupal

افزودن دیدگاه جدید