انجمن کدایگنایتر فارسی - persian codeigniter
ده ترفند CSS بسیار مفید که باید بدانید - نسخه‌ی قابل چاپ

+- انجمن کدایگنایتر فارسی - persian codeigniter (http://code-igniter.ir)
+-- انجمن: کلاینت ساید (http://code-igniter.ir/forumdisplay.php?fid=16)
+--- انجمن: HTML/CSS (http://code-igniter.ir/forumdisplay.php?fid=17)
+--- موضوع: ده ترفند CSS بسیار مفید که باید بدانید (/showthread.php?tid=41)



ده ترفند CSS بسیار مفید که باید بدانید - fns4565 - 2017/09/06

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

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

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


کد:
/**
* Safari and Opera
*/
::selection {
 background: #c3effd;
 color: #000;  
}
/**
* Firefox
*/
::-moz-selection {
 background: #c3effd;
 color: #000;
}
همانطور که می بینید، با استفاده از انتخابگر :Confusedelection می توانید متن های انتخاب شده را هدف قرار دهید

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

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



کد:
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 استفاده کنید.




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



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

متاسفانه مرورگر 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 که به صورت یک فلش نمایش داده می شود در قبل و بعد لینک ها قرار داده ایم.
٨ - استایل دهی به لیست های مرتب به شیوه ی متفاوت

استایل دهی به اعداد یک لیست مرتب (شماره گذاری شده) به شیوه ای متفاوت نسبت به باقی متن هریک از آیتم های لیست. 
در کد زیر، همانطور که می بینید، یک فونت را برای تگ 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.png]


شما می توانید حرف اول مقاله تان را همانند روزنامه ها و مجلات، بزرگ کنید! برای ایجاد این جلوه، می توانید از کلاس کاذب :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;  
}

ادامه دارد ...



RE: ده ترفند CSS بسیار مفید که باید بدانید - tablooaraz - 2017/11/15

(2017/09/06، 05:05 AM)fns4565 نوشته است: در این مقاله، 10 ترفند CSS بسیار مفید مطرح شده است که به شما کمک می کند صفحات وب بسیار عالی طراحی کنید. ممکن است شما برخی یا همه ی این ترفند ها را از قبل بلد باشید، با این حال، این می توانید یک مرجع دم دستی برای ترفند های جذاب CSS برای شما باشد که باید بدانید.

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

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


کد:
/**
* Safari and Opera
*/
::selection {
 background: #c3effd;
 color: #000;  
}
/**
* Firefox
*/
::-moz-selection {
 background: #c3effd;
 color: #000;
}
همانطور که می بینید، با استفاده از انتخابگر :Confusedelection می توانید متن های انتخاب شده را هدف قرار دهید

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

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



کد:
html {
 overflow-y: scroll;
}
  1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1


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


گرچه اکثر کاربران اینترنت ترجیح می دهند که صفحات وب را به صورت آنلاین مطالعه کنند، اما بعضی از کاربران شما ممکن است بخواهند متن مقاله را پرینت بگیرند و سپس مطالعه کنند.
به کمک 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 استفاده کنید.




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



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

متاسفانه مرورگر 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 که به صورت یک فلش نمایش داده می شود در قبل و بعد لینک ها قرار داده ایم.
٨ - استایل دهی به لیست های مرتب به شیوه ی متفاوت

استایل دهی به اعداد یک لیست مرتب (شماره گذاری شده) به شیوه ای متفاوت نسبت به باقی متن هریک از آیتم های لیست. 
در کد زیر، همانطور که می بینید، یک فونت را برای تگ 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.png]


شما می توانید حرف اول مقاله تان را همانند روزنامه ها و مجلات، بزرگ کنید! برای ایجاد این جلوه، می توانید از کلاس کاذب :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;  
}

ادامه دارد ...

ترفندهای دیگه هم اگه داره بزارید بی زحمت استفاده کنیم