دسته بندی :
تاریخ انتشار : ۱۵ خرداد ۱۳۹۴
گردآوری و تالیف : حسام موسوی

کارمو با طراحی گرافیکی شروع کردم و حدود 2 سال طراحی گرافیکی میکردم بعد به طراحی وب علاقه پیدا کردم و همراه طراحی وب عاشق کدنویسی شدم به PHP | sass | css | Jquery | javaScript تسلط کامل دارم . در بین فریم ورک های PHP اول با CodeIgniter کار کردم اما به laravel علاقه مند شدم و دارم بطور حرفه ای دنبالش میکنم . امید من اینکه بتونم کاربرهای ایرانی رو به دنیای بیرون متصل کنم تا بتونن از فناوری های تازه آگاهی داشته باشن

امروز من قصد دارم تا نکاتی از 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 */
}

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

دیدگاه های مخاطبین

ثبت دیدگاه شما
  • رضا شیخله

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

  • hosseyn

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

    • admin

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

  • محمد

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

پیشنهاد میکنیم این مطالب رو هم مطالعه کنید :