در ستایش سایه ها

بازنشر افلاطون

دنبال: 0

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

بنابراین، چرا این را به اشتراک بگذارید؟ چون خیلی خوب است که او یک صفحه برای یک مقاله اختصاص داده است. و اگر DevTools را در آن باز کنید، چیزهای زیادی در مورد CSS یاد خواهید گرفت:

تکنیک های مرکز سازی به نحوه استفاده از CSS Grid در <body> به سادگی به جزوه را در مرکز قرار دهید. سپس رابین دوباره آن را روی هر یک می برد .frame از انشا همین کار را با محتوا انجام دهید.
تصاویر پس زمینه "Faux". رابین می‌توانست با ایجاد یک کلاس CSS برای هر کدام، کارهای زیادی برای خودش بسازد .frame برای دریافت تصاویر پس زمینه در عوض، او استفاده می کند object-fit: cover در HTML درون خطی <img>s برای حفظ نسبت تصویر در حین پر کردن .frame ظرف (او در واقع در این مورد نوشته شده است قبل از.) که مطمئناً مقدار زیادی از CSS را ذخیره می کند، اما همچنین به او اجازه می دهد در صورت نیاز از متن جایگزین استفاده کند. من متعجبم که آیا الف <figure>/<figcaption> ساختار می‌توانست به جای آن در اینجا کار کند، اما من شک دارم که مزایای بیشتری برای آنچه در حال وقوع است فراهم کند.
انباشتن زمینه ها مزیت دیگری از آن تصاویر پس زمینه مصنوعی؟ آنها از موقعیت یابی مطلق استفاده می کنند که یک زمینه انباشته ایجاد می کند و به رابین اجازه می دهد a را تنظیم کند z-index: 0 روی تصاویر به این ترتیب، متن مستقیماً در بالای صفحه قرار می گیرد z-index: 1. مجدداً، CSS Grid تمام محورها را مدیریت می کند تا همه چیز به خوبی تراز شوند.
اسکرول کردن. من همیشه عشق وقتی می بینم که اسکرول CSS در طبیعت می زند. رابین انتخاب خوبی برای استفاده از آن در اینجا انجام داد، زیرا در حین پیمایش در فریم ها، واقعاً به کل تجربه ورق زدن صفحه کمک می کند. پیمایش افقی می‌تواند دیوانه‌کننده باشد، اما در عین حال بسیار ظریف است که به خوبی اجرا شود، زیرا در اینجا نحوه بهبود طراحی ستون‌های باریک است. اگر می‌خواهید توضیح خوبی در مورد نحوه کارکرد آن داشته باشید، رابین نیز توضیح داده است در مورد اسکرول افقی نوشته شده است.