ده ترفند کاربردی CSS برای حرفه ای تر شدن!

خیلی وقتا شده که حس می کنیم اطلاعات کاملی راجب CSS داریم اما وقتی که مشغول وبگردی و سر کشیدن به سایت های مردم هستیم یهو به یه چیزای جدیدی بر میخوریم! توی این پست میخوام چندتا از ترفندهای ساده اما جالب CSS رو به شما دوستان عزیز آموزش بدم , اگه حس میکنید که همه ی CSS رو به طور کامل حفظ هستید و هیچ چیزی نیست که ندونید با من همراه باشید تا یه چیز جدید یاد بگیرید 😀 در اینجا اطلاعات جدیدی راجب CSS خواهید اموخت!

در اینجا قصد دارم تا ۱۰ تا ترفند CSS به شما دوستان عزیز آموزش بدم که براتون تازگی داشته باشه , بروووو برییییییییم:

  • افزودن فایل CSS خارجی به صفحه ی HTML :
    همه ی ما میدونیم چجوری یک فایل css خارجی رو با استفاده از دستور link به صفحه html خودمون اظافه کنیم اما یک راه جدیدتر وجود داره که میشه فایل های css خارجی رو درون تگ style نیز وارد کرد 😀 به مثال زیر دقت کنید :

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

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

در مثال بالا ما مقدار مورد نظر خودمون برای width رو با جاوا اسکریپت معین میکنیم و به Css میدیم.

  • استفاده از عکس در border :
    شما قادر خواهید بود تا با استفاده از خاصیت image که یکی از خاصیت های border است از تصاویر برای استایل دادن به border خودتون استفاده کنید. به مثال زیر دقت کنید (پیش نمایش مثال زیر رو میتونید از اینجا ببینید تا بهتر متوجه بشید.)

پیش نمایش مثال بالا رو میتونید از اینجا ببینید(کلیک کنید) , در مثال بالا دقت کنید که در دستور border-image یک عدد وجود دارد , عدد موجود در خاصیت border-image مشخص میکند چه بخشی از تصویر باید به عنوان border استفاده شود.

در مثال بالا با دستور counter-reset یک نام برای شمارنده خودمون مشخص میکنیم. هم چنین با استفاده از دستور counter-increment میتونیم مقدار شمارنده خودمون رو افزایش بدیم و با استفاده از دستور content به همراه counter میتونیم مقدار شمارنده رو نمایش بدیم. دقت کنید که دستورات counter-increment و counter با استفاده از نامی که برای شمارنده تنظیم کردیم کار میکنند.

  • بررسی Text-decoration و استایل های مختلف اون :
    خیلی از کسانی که با Text-decoration در css اشنایی دارند نمیدونن که این خاصیت نوع های مختلفی داره یا حتی نمیدونن که میشه برای خطی که زیر یا روی محتوا کشیده میشه رنگ تعیین کرد! به مثال زیر دقت کنید (پیش نمایش مثال زیر رو میتونید از اینجا ببینید, در پیش نمایش به خط هایی که زیر نوشته ها کشیده شده دقت کنید).

  • نقل قول در CSS :
    با استفاده از دستور qout در CSS میتونیم به صورت اتوماتیک علامت نقل قول رو در نوشته های خودمون درج کنیم یا اینکه نقل قول ها رو کنترل کنیم. به مثال زیر دقت کنید:

  • سلکتور empty :
    با استفاده از این سلکتور میشه تگ هایی که بدون محتوا هستن رو انتخاب کرد 😀 این برای وقتی مهم هست که ما میخوایم بخش هایی از صفحه رو تا هنگامی که محتوایی ندارند نمایش ندیم! و هرگاه محتوایی داشتند خود به خود نمایش داده بشن! به مثال زیر دقت کنید:

  • خاصیت empty-cells :
    توسط این دستور میتونید سلول های خالی جدول رو مخفی کنید به مثال زیر دقت کنید:

  • بررسی خاصیت font-style :
    همه ی دوستان با این خاصیت اشنایی دارند و میدونند که میتونه مقدار italic رو قبول کنه! اما مقدار دیگری نیز برای فونت استایل وجود داره با نام oblique که شکل و شمایل متفاوتی به متن میده (البته باید این امکان در فونتی که برای متن مورد نظرتون انتخاب کردید وجود داشته باشه) , به مثال زیر دقت کنید:

  • سلکتور selection :
    وقتی که شما بخشی از متن یا محتوای یک سایت رو انتخاب میکنید این سلکتور فعال میشه! به مثال زیر دقت کنید (پیش نمایش رو میتونید از اینجا ببینید):

در مثال بالا هنگامی که بخشی از متن رو انتخاب کنید (مثلا سعی کنید قسمتی از متن رو انتخاب و کپی کنید) رنگ بک گراند و رنگ متن تغییر میکنه 😀

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

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. مجید

    سلام . مطلبتون عالللللیییییی بود 🙂 البته خودم بیشترشو میدونستم ولی چنتاشو همینجا یاد گرفتم … ممنون .
    یه مشکلی هم تو قالب سایتتون هست اینه که … این پارالاکس پایین بلاگ .. یخورده سنگینه . با کروم که سرعتش بالاس سنگینه … اگه میشه رسیدگی کنید 😀

    • سلاااااام. ممنون از اینکه تذکر دادید. قسمت پارالاکس رو تصحیح میکنیم. موفق باشید.

    • اگه عکس بک گراند یه قسمت از سایت رو به صورت fixed بزارید موقع اسکرول کردن انگار عکس زیر قسمت های دیگه کشیده میشه که بهش میگن پارالاکس! مثلا این سایت رو به پایین اسکرول کنید(کلیک کنید) 😀
      کلا اگه با اسکرول کردن اتفاق خاصی توی نمای گرافیکی سایت بیوفته بهش میگن پارالاکس! حالا میشه اون رو به شیوه های مختلف پیاده سازی کرد. توی گوگل css paralax سرچ کنید 😀

  2. البته برای نکته آخری باید کد مربوط به مرورگر firefox رو اضافه کنید. یعنی قبل از دستور{} selection کد -moz-:: را اضافه کنید. ولی برای مرورگر کروم نیازی به اضافه کردن -webkit- نمی باشد.

می‌خواهید دیدگاهتان را بیان کنید؟