عنوان مقاله :

css هک های که شما ممکن است ندانید

گردآوری و تالیف : حسام موسوی
تاریخ انتشار : 15 خرداد 1394
دسته بندی ها : css

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

کد اول استفاده از کلاس های Unicode بصورت زیر 

.♫ {
   background: #222;
   color: #FFF;
}
.ಠ_ಠ {
	background: #ccc;
	color: #fff;
}
  • حذف خط آبی زمانی که روی یک input فرم کلیک میکنید 
input[type="text"]:focus {
  outline: none;
}

با این کد دیگه اون خط آبی یا هر رنگ دیگه ای که روی ورودی فرم کلیک میکنید دیگه وجود نداره .

  • قابلیت Opacity در همه ای مرورگرها 
div {
opacity:0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE8 */
filter: alpha(opacity=40); /* IE 5-7  */
}
  • قابلیت جدید تزینن متن ها با ویژگی های جدید text-decoration بصورت زیر [ البته فعلا فقط در فایرفاکس پشتیبانی میشه ]
a {
  text-decoration: overline red wavy;
}

اطلاعات بیشتر در این مورد رو میتونید اینجا  مشاهده کنید

  • ویژگی های جدید خصوصیت Background
div {
	background:
		[background-image]
		[background-position]
		[/ background-size]
		[background-repeat]
		[background-attachment]
		[background-origin]
		[background-clip]
		[background-color];
}
  • معاف کردن صفحه از پرینت گرفتن با 
.page-break { 
    page-break-before: always;
}
  • درشت کردن حرف های اول در یک متن  ، البته برای حروف انگلیسی 
p {
   text-transform: capitalize; 
}
  • سازگار فونت با صفحه 
body { 
     font-size:62.5%; 
}

62.5% برابر 10px 

  • خوندن attribute های html در css
a:hover:after {
      content: attr(title);
}
  • یک Media Query جالب برای مرورگرهای  Webkit
@media screen and (-webkit-min-device-pixel-ratio:0) {
   .selector { 
       property:value; 
 } 
}
  • تغییر ویژگی های عناصر در مرورگرهای قدیمی 

با استفاده از این ویژگی میتونید مرورگرهای ie8 و نسخهای قدیمی تر رو تغییر بدید . البته میدونم که الان سال 2015 :D و خیلی کم از این مرورگرها استفاده میشه ولی به هر حال دونستنش خالی از لطف نیست .

.element {
  color: black;
  color: green\9; /* IE8 and older */
  *color: blue; /* IE7 and older */
  _color: red; /* IE6 and older */
}

امیدوارم مورد استفاده اتون قرار بگیره . دوستان عزیز برای دسترسی به هک های بیشتر میتونن به این سایت مراجعه کنن . با تشکر

مقالات پیشنهادی

چگونه از فیلترهای CSS استفاده کنیم ؟

فیلترهای CSS ابزاری بسیار قدرتمند و مفید است که به ما اجازه می دهد تا روی تعدادی از المنت های مان افکت های بصری زیبایی را ایجاد کنیم. این فیلترها برای...

ایجاد اشکال مثلثی با css بدون هک های مسخره

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

چیزهایی که نیاز دارید در مورد متغیرات css بدانید

وقتی پروژه های وب بزرگتر میشوند css آنها به طور نجومی زیاد و گاهی اوقات مبهم میشود . برای کمک به این مسئله ، متغیرات جدید css طراحی شده اند که مرورگر...

کتابخانه های css در سال 2016

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

دیدگاه های ارزشمند شما

برای ارسال نظر لازم است ابتدا وارد سایت شوید
رضا شیخله | 2 سال پیش

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

hosseyn | 2 سال پیش

خوندن attribute های html در css این یعنی چی؟

admin | 2 سال پیش

شما میتونی با استفاده از این قابلیت المنت های با attribute های که میخواین رو انتخاب کنید یه چیزی شبیه انتخاب class ها یا id ها

محمد | 3 سال پیش

"اصلاعات بیشتر در این مورد در اینجا " یه اشتباه املایی هست گفتم بگم درستش کنید. مطلب هم عالی بود.