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

- visibility ۲ mode_comment

به نام خدا

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

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

چند وقت پیش بود که به 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 رو هم با سایز اونها ست کردیم.

 

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

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

comment دیدگاه کاربران

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

عالیه باقری

OK

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.