5 تکنیک جدید CSS برای کارشناسی ارشد در سال 2020


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

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

1. شبکه های CSS را پاسخگو کنید

تکنیک های CSS

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

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

با واحد کسری (fr) شروع کنید ، واحد انعطاف پذیر که فضای باز را طبق قوانین شما تقسیم می کند. هر اعلامیه fr یک ستون است. سپس می توانید شکاف ها را اضافه کنید و یک شبکه دارید.

تکنیک های CSS

بیشتر بدانید: Smashing Magazine یک راهنمای عالی دارد که تمام گزینه ها را توضیح می دهد تا بتوانید از یک شبکه پاسخگو نهایت استفاده را ببرید.

2. از فونت های متغیر استفاده کنید

تکنیک های CSS

قلم های متغیر کاملاً جدید هستند. این یک پرونده واحد است که شامل هر نسخه از فونت است که کاربر برای مشاهده طرح شما نیاز دارد.

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

برای استفاده از قلم های متغیر ، باید یک فونت را انتخاب کنید که از این ویژگی پشتیبانی کند و یک مرورگر که خاصیت تنظیمات فونت-تغییر-تنظیمات را پیاده سازی کرده است. (پشتیبانی خوب و رو به رشد است.)

تکنیک های CSS

بیشتر بدانید: Axis-Praxis یک زمین بازی با قلم های متغیر است ، بنابراین می توانید بازی کنید ، ترکیب ها را آزمایش کنید و حتی برای پروژه ها حروف بزرگ پیدا کنید.

3. ایجاد انیمیشن های متنی

تکنیک های CSS

از تغییر مکان معلق در کلماتی که در صفحه شناور هستند یا در صفحه پیمایش می شوند ، CSS بر نحوه خواندن و تعامل کاربران با عناصر متنی تأثیر می گذارد.

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

بیشتر بدانید: Animista ابزاری است که در بتا قرار دارد ، اما به شما امکان می دهد تا با سبک های مختلف انیمیشن متن متنوع را آزمایش کنید.

تکنیک های CSS

و حتی بیشتر: Code My UI یک مجموعه زیبا از قطعات کد برای ایجاد انیمیشن های متن مختلف مانند قطعه متن تقسیم شده در بالا دارد.

4. اجرای Snapping را اجرا کنید

تکنیک های CSS

بارها و بارها می خواهید که بتوانید پیمایش را کنترل کنید ، درست است؟ شما می خواهید کاربران یکباره بخش خاصی از طراحی را مشاهده کنند.

پاسخ CSS Scroll Snap است. در اینجا نحوه توصیف گوگل در اینجا آمده است:

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

به عبارت ساده تر ، این بدان معنی است که می توانید نقاط پیمایش را کنترل کنید – چه به صورت عمودی و هم به صورت افقی (عمدتا فقط یک الگوی دسک تاپ) – به گونه ای که کاربران دقیقاً آنچه را می خواهید مشاهده کنید.

تکنیک های CSS

بیشتر بدانید: تقریباً همه چیزهایی را که باید از Google Developers بدانید ، شامل چند قطعه کد برای شروع کار می توانید پیدا کنید.

5- پشتیبانی از مرورگر را با CSS تست کنید

CSS حتی می تواند به شما در تعیین اینکه آیا برخی مرورگرها از ویژگیهای جدید CSS پشتیبانی می کنند ، کمک کند.

این ریشه در قانون ویژگی های نمایش داده شدهsupports است ، که به شما امکان می دهد بیانیه هایی را بر اساس قابلیت مرورگر ایجاد کنید. یک هشدار این است که این کار برای هر چیزی قدیمی تر از Internet Explorer 11 کار نمی کند ، اما این روزها کاربران زیادی در آن مرورگر وجود ندارند.

بیشتر بدانید: می توانید قطعه های کد را بگیرید و نحو را درک کنید و از موزیلا نمونه بگیرید.

منابع شبکه CSS

CSS Grid Layout یکی از مواردی است که در حال حاضر درباره CSS صحبت می شود. اگر در حلقه نیستید ، وقت آن است که یادگیری را شروع کنید.

“CSS Grid ابزاری قدرتمند است که اجازه می دهد تا طرح های دو بعدی در وب ایجاد شود ،” شرح جاناتان سوه در راهنمای منابع بسته بندی شده خود است.

در اینجا پنج منبع عالی CSS Grid آورده شده است:

نتیجه

بازی کردن با CSS و یادگیری ترفندهای جدید می تواند بسیار سرگرم کننده باشد – اگر این باعث نمی شود که موهای خود را بیرون بکشید. امسال می خواهید چه چیزی یاد بگیرید؟ در کجای انرژی خود تمرکز می کنید؟

امیدواریم که این ایده ها الهام بخش کافی برای کمک به شما در شروع کار باشند. موفق باشید!



Source link

قیمت طراحی سایت

برچسب ها

ممکن است به این موارد نیز علاقه مند باشید:

0 دیدگاه در “5 تکنیک جدید CSS برای کارشناسی ارشد در سال 2020”

پاسخی بگذارید

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