ویژگی های CSS برای جذاب تر کردن لینک ها - Speckyboy

هایپرلینک ها همیشه آن طور که شایسته است از سوی طراحان وب مورد توجه قرار نمی گیرند. مطمئناً، ممکن است چند تغییر ایجاد کنیم. با این حال، ما همیشه برای برجسته کردن آنها تلاش نمی کنیم.

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

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

این یک دنیای کاملاً جدید از امکانات است. بیایید برخی از ویژگی های CSS را بررسی کنیم که به جذاب تر کردن لینک ها کمک می کنند.

یک لینک پیش فرض

ما با یک پیکربندی پیوند پیش فرض شروع می کنیم. رنگ پیوند و حالت های CSS اضافه شد - اما همین. همانطور که ویژگی های CSS را در زیر بررسی می کنیم، به عنوان یک خط پایه عمل می کند.

سبک پیوند قلم: ساده اثر اریک کارکواک را ببینید

قبلاً زیرخط پیوند باید همرنگ متن آن باشد. این text-decoration-color ویژگی به ما امکان می دهد یک رنگ جداگانه انتخاب کنیم. همچنین با خطوط، خطوط خطی، و هر چیز دیگری که توسط این تنظیم شده است، کار می کند text-decoration دارایی

ما یک زیر خط قهوه ای برای تمجید از متن پیوند سبز خود اضافه کرده ایم.

به سبک پیوند قلم: متن-تزیین-رنگ اثر اریک کارکواک مراجعه کنید

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

تنظیم ملک به none به این معنی است که خط زیر یا روی خط یک خط مستقیم ترسیم می کند - صرف نظر از اینکه حروف در کجا قرار دارند.

به سبک پیوند قلم: متن-دکوراسیون-پیوند-پرش اثر اریک کارکواک مراجعه کنید

ضخامت زیرخط پیوند معمولاً از آنچه در آن تعریف شده است پیروی می کند font-weight دارایی به این معنی که متن پررنگ باعث ایجاد خط زیر ضخیم تر می شود. این ویژگی به ما امکان می دهد برای هر پیوند در آبشار یک مقدار ثابت تعیین کنیم.

به سبک پیوند قلم: ضخامت متن-تزیینات توسط اریک کارکواک مراجعه کنید

تزئینات متن نباید یک خط مستقیم باشد. این ویژگی به شما امکان می دهد استایل را به dashed، dotted، double، یا wavy خطوط

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

در اینجا راهی برای مشخص کردن نزدیکی (یا نه) خط زیر به متن بالا وجود دارد. افزودن چند پیکسل فاصله بین آنها می تواند خوانایی را بهبود بخشد.

توجه داشته باشید که این ویژگی بر نمونه هایی از برچسب زیر خط HTML (). این فقط بر مواردی تأثیر می گذارد که در آن text-decoration دارایی تنظیم شده است.

به سبک پیوند قلم: متن-زیرخط-offset توسط اریک کارکواک مراجعه کنید

یکی دیگر از اموال طاقچه، text-underline-position موقعیت خط زیر را نسبت به متن آن مشخص می کند. تنظیم آن در زیر برای فرمول های ریاضی و علمی ایده آل است. خواندن کاراکترهای زیرنویس را آسان می کند - حتی وقتی زیر آنها خط کشیده شده باشند.

به سبک پیوند قلم: متن-خط خط-زیر نوشته اریک کارکواک مراجعه کنید

با سبک های پیوند بیشتر پیش بروید

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

ویژگی های بالا همه ارزش در نظر گرفتن هنگام استایل دادن به پیوندها را دارند. پیاده سازی آنها نسبتاً ساده است و می توانند پیوندها را جذاب تر و در دسترس تر کنند. بهتر از همه، آنها CSS بومی هستند و بر عملکرد بارگذاری صفحه تأثیری ندارند.

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

فقط مراقب باشید - ممکن است که همه چیز را کمی بیش از حد انجام دهید. همیشه بهترین شیوه ها را در ذهن داشته باشید تا تجربه کاربری را بهبود ببخشید. هر کاری که خواندن یا استفاده از لینک ها را سخت تر کند ارزش انجام دادن ندارد.

وقت آن است که خلاق شوید! این ویژگی های CSS را آزمایش کنید و ببینید چگونه می توانید کمی زندگی را به پیوندهای خود بدهید.