• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6251 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

2 3557 ۲۶ تیر ۹۳

به نام خدا

با سلام خدمت همگی دوستان عزیز سون‌لرنی.

برای نشون دادن اینکه مطلبی ادامه داره معمولا آخر خلاصه ی مطلب مینویسن به ادامه برید یا با سه نقطه این رو نشون میدن که مطلب ادامه داره، اما وقتی شما یک بلوک تقریبا باریک دارید که میخواهید تمام بلوکتون رو متن پر کنه و کاربر هم بفهمه که مطلب ادامه داره چیکار میکنید؟!

چند وقت پیش بود که به google play رفتم و این ترفند نظرمو جلب کرد. tuts plus هم از همین ترفند استفاده کرده بود...

white-shadow.min

shadow

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

  1. توسط خاصیت box-shadow در css
  2. توسط خاصیت linear-gradient در css

اگه بخواید با box-shadow این کارو انجام بدید کارتون خیلی آسونه ولی شاید خیلی نتیجه دلخواهتون حاصل نشه و با linear-gradient میتونید بهترین سایه سفید رو روی متن بندازید.

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

میتونید دمو رو ببینید.

در ابتدا میخواهیم سایه ای مانند تصویر پایین ایجاد کنیم.

my-shadow

 

همونطور که دیدید دو باکس ساده ایجاد کردم و داخلش هم متن زیادی ریختم. کد اچ تی ام ال:

و بعد از اینکه بهش استایل دادم، کدهای CSS زیر رو بهش اضافه کردم:

همون طور که کدهارو دیدید ابتدا به باکس position: relative تا وقتی به p::after پوزیشن با مقدار absolute میدم، پوزیشن p::after از داخل باکس اعمال بشه. بعد هم در خط 17 و 22 به ترتیب لایه ی سفید رو هم با box-shadow و هم با linear-gradient ایجاد کردم.

my-shadow2

برای ایجاد لایه های سفید بالا هم کافیست کمی استایل رو تغییر بدیم:

(کلاس shadow2 را به باکس اضافه کردیم)

همونطور که کدهارو دیدید ابتدا سایز p::after رو تغییر دادیم و سپس مقادیر  box-shadow و linear-gradient رو هم با سایز اونها ست کردیم.

 

امیدوارم این مطلب براتون مفید باشه.

در پناه حق پیروز و موفق باشید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    سید مهدی(۲۷ تیر ۱۳۹۳)

    خعلی مفید بود. دمت گرم

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram