ایجادمتن های زیبا همراه با گرادینت و بازتابش نور توسط CSS

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

مشاهده دمو متن با افکت گرادینت دانلود سورس کامل

● پسورد : www.websiteha.com

برای شروع نیاز به دو تصویر گرادینت با فرمت png به صورت زیر داریم که در سورس کد آماده موجود است:

متن با طیف رنگی و گرادینت در وبسایت

همانطور که مشاهده می کنید گرادینت 1 به صورت نرم از رنگ سفید به شفاف کشیده شده است و گرادینت 2 در وسط تصویر تمام شده است. هر دو تصویر به ارتفاع 50 پیکسل و عرض 6 پیکسل ترسیم شده اند. گرادینت نرم تر را gradient_1 و گرادینت سخت تر را gradient_2 نامگذاری میکنیم. اکنون کافیست کدهای CSS زیر را به کدهای وبسایت خود بیافزایید تا تمامی تیترهای سایت شما که با استفاده از تگ های <h1> ، <h2> ، <h3> و <h4> ساخته شده اند، همانند نسخه نمایشی من با افکت گرادینت و یا بازتابش نور نمایش داده شوند:

 

شما میتوانید با تغییر رنگ ها نمونه های هماهنگ با قالب وبسایت خود را ایجاد کنید و یا با تغییر selector های کد و همچنین تغییر سایز تصاویر استفاده شده، این افکت را بر روی متن هایی با سایزهای متفاوت نیز اعمال کنید.

نظرات (14) -

  • محسن

    10/02/1390 11:31:42 ق.ظ | پاسخ به این نظر

    سلام.

    از CSS3 استفاده کردین؟

    من بعضی از کد هارو درک نمیکنم.

    مثلا آخرین خط معنیش چیه و دقیقاً چه کای انجام میده؟

    همین طور خاصیت letter spacing

    • Admin

      10/02/1390 11:53:32 ق.ظ | پاسخ به این نظر

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

  • محمد

    10/06/1390 09:23:46 ق.ظ | پاسخ به این نظر

    سلام دادا
    من خدای وبگردی هستم
    بدون اغراق میم سایتی بسیار پر محتوا داری
    واقعا تمامی مطالب سایت شما بسیار مفید هستند و انتخابهای درستیداشتید برای پستها

    فقط خواستم بگم خسته نباشی داداش

    • Admin

      10/06/1390 04:19:44 ب.ظ | پاسخ به این نظر

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

  • مصطفی

    12/09/1390 06:42:05 ب.ظ | پاسخ به این نظر

    سلام حامد خان
    برای دیدن نسخه نمایشی نمونه کدها یوزرنیم و پسوورد درخواست میشه!
    چی باید وارد کنم؟

    ممنون و موفق باشی

    • Admin

      12/09/1390 11:00:18 ب.ظ | پاسخ به این نظر

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

  • محمد

    06/25/1391 05:39:15 ب.ظ | پاسخ به این نظر

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

  • محمدصالح

    05/19/1393 07:05:54 ق.ظ | پاسخ به این نظر

    سلام
    با عرض خسته نباشید میخواستم بگم این نسخه های نمایشی اگه درست بشن خیلی عالی میشه
    با تشکر از وب سایت خوبتون

  • zohreh

    11/20/1393 01:22:14 ب.ظ | پاسخ به این نظر

    ببخشید یه سوال الان شما اینجا repeat-x دادید اگر بخوایم گروه دینتمون عمودی نبشه و افقی باشه چی کار کنیم؟
    آخه طول متن مهمه و ممکنه تغییر کنه؟

  • زهره

    11/21/1393 11:22:03 ق.ظ | پاسخ به این نظر

    من هـــــــــر کاری کردم نشد ریخت بهم اصلا میخواستم به زیر منوهام بدم Foot Frown

Loading