نحوه طراحی لینک با CSS: یک آموزش مفصل برای مبتدیان

از


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

یادگیری نحوه تغییر طراحی آنها به شما امکان می دهد اطمینان حاصل کنید که آنها به عنوان پیوند قابل تشخیص هستند و با بقیه وب سایت شما مطابقت دارند. CSS روش ها و ویژگی های مختلفی را برای این کار ارائه می دهد، بنابراین بیایید آنها را یکی یکی مرور کنیم.

استانداردهای لینک و طراحی لینک پیش فرض

قبل از اینکه به نحوه ایجاد تغییرات در طراحی پیوندها بپردازیم، ابتدا ساختار آنها را درک می کنیم. این چیزی است که عنصر پیوند در HTML به نظر می رسد:

<a href="https://torquemag.io/">TorqueMag</a>

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

  • <a> – این محرک ایجاد یک آیتم پیوند است. چرا a? زیرا در HTML به لینک نیز گفته می شود نشانه های لنگر.
  • href="" – هر چیزی در داخل نقل قول های دوگانه جایی است که آن پیوند به آن اشاره می کند. این آدرسی است که شخصی که روی آن کلیک می کند روی آن قرار می گیرد.
  • TorqueMag – این همان متن پیوندی است که در صفحه ظاهر می شود، مثلاً به این صورت (روی آن کلیک نکنید، این لینک ها به جایی نمی رسند).
  • </a> بخش هایی که عنصر پیوند را می بندند و به مرورگر می گویند که متن پیوند در اینجا به پایان می رسد.

تا اینجای کار خیلی آسان است.

پیوند به طور پیش فرض چگونه به نظر می رسد

زمانی که به این نوع پیوندها در یک صفحه نگاه می کنید، واقعاً جالب می شود. شاید قبلاً آن را دیده باشید.

اگر پیوند قدیمی را در یک سند HTML اعلام کنید و هیچ اطلاعاتی از سبک ارائه ندهید، سبک پیش فرض را خواهد گرفت:

  1. متن پیوند آبی است و خط پیوند زیر آن خط کشیده شده است.
  2. هنگامی که ماوس خود را روی آن قرار می دهید، مکان نما به یک نماد دست کوچک تغییر می کند.
  3. وقتی روی آن کلیک می کنید برای یک ثانیه قرمز می شود.
  4. پس از بازدید از لینک، رنگ آن به بنفش تغییر می کند.
  5. وقتی از طریق کلید جدول‌ساز روی صفحه‌کلید خود به پیوند می‌روید، یک طرح کلی آبی در اطراف آن خواهد داشت.

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

با لینک ها آشنا شوید

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

  • a – این تگ لنگر فوق الذکر است. تمام پیوندها را در تمام مراحل هدف قرار می دهد.
  • a:link – برای پیوند اسپم معمولی. از نظر فنی، :link همه لنگرهایی که پسوند دارند را هدف قرار می دهد href نسبت داده. در واقع زیاد استفاده نمی شود. افراد زیادی استفاده می کنند a، از آنجایی که تگ های داک بدون پسوند href این ویژگی نسبتاً نادر است، بنابراین اغلب نیازی به این نوع تمایز وجود ندارد.
  • a:visited پیوندی را توصیف می کند که کاربر فعلی قبلاً از آن بازدید کرده است، به این معنی که در تاریخچه مرورگر است.
  • a:hover – اهداف طراحی که زمانی ظاهر می شوند که کاربر نشانگر ماوس را روی یک لینک قرار می دهد.
  • a:active – طراحی به طور خلاصه در لحظه کلیک روی لینک قابل مشاهده است.
  • a:focus پیوندی که فوکوس دارد، مانند حرکت کاربر برای استفاده از کلید تب. hover و focus آنها اغلب با هم طراحی می شوند.

توجه به این نکته ضروری است که هنگام تغییر الگوی چندین وضعیت پیوند به طور همزمان، باید این کار را به ترتیب زیر انجام دهید.

  1. a
  2. a:link
  3. a:visited
  4. a:focus
  5. a:hover
  6. a:active

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

انتظارات کاربر را برآورده کنید

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

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

از نظر عملی این به این معنی است:

  • مطمئن شوید که لینک ها به نحوی برجسته شده اند. رنگ ها یا خط کشی ها همه خوب هستند تا زمانی که پیوندها را در صفحه برجسته کنید. از مواردی مانند مورب یا تاریک.
  • با تغییر پیوندها در حالی که ماوس را روی آن نگه می دارید و کمتر کلیک می کنید، بازخورد ارائه دهید (a:active، به خاطر سپردن؟). همچنین نباید با تبدیل مکان نما به نماد دستی برای نشان دادن یک عنصر تعاملی، درگیر شوید.

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

نحوه تغییر سبک انکر تکست خود از طریق CSS

بیایید ابتدا در مورد نحوه تغییر قسمت متنی یک پیوند صحبت کنیم، زیرا از آن ساخته شده است.

رنگ متن پیوند را ویرایش کنید

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

شما می توانید رنگ متن پیوند را به روش های مختلف تغییر دهید: کلمات رنگی و سیستم های نمادگذاری رنگ های مختلف مانند کد HEX، rgb()/rgba()و hsl()/hsla()، و غیره.

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

در اینجا به شکلی است که در بالا در صفحه به نظر می رسد:

تغییر رنگ پیوند از طریق نمونه های css

معمولاً از چیزی مانند HEX یا استفاده می کنید rgb(). استفاده از نام رنگ ها خارج از موارد آزمایش ساده بسیار نادر است.

طرح رنگی که استفاده می کنید به عوامل مختلفی مانند سازگاری مرورگر یا نیاز به شفافیت بستگی دارد. با این حال، همانطور که می بینید، اختصاص رنگ به لینک ها از طریق یک فایل بسیار ساده است color ویژگی و برای همه موارد پیوند دیگر یکسان کار می کند. بنابراین، شما به راحتی می توانید رنگ متن را تغییر دهید :hover یا :focus، خیلی

رنگ پس زمینه را تنظیم کنید

علاوه بر تغییر رنگ متن، می‌توانید رنگ پس‌زمینه پیوندها و حالت‌های مختلف آنها را نیز تغییر دهید. این کار به آسانی استفاده از یک فایل است background-color منشا آن

رنگ پس زمینه برای پیوند دادن سبک از طریق مثال css

در اینجا کد نویسی برای مثال بالا آمده است:

#link-one {
	background-color: #fadbd8;
	color: red;
}

#link-two {
	background-color: #f26c2e;
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-three:focus {
	background-color: rgb(61, 76, 128);
	color: #fff;
}

سایر گزینه های قالب بندی متن

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

قالب پیوند جایگزین بسته شد

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

در اینجا کدنویسی برای دستیابی به اثرات فوق آمده است:

#link-one {
	background-color: #fadbd8;
	color: red;
	font-family: Arial;
}

#link-two {
	color: #3af278;
	font-weight: 600;
	text-transform: uppercase;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-three:focus {
	font-size: 36px;
}

کار با خطوط زیر

همانطور که در ابتدا آموختیم، لینک ها به طور پیش فرض زیر خط کشیده شده اند. اگر می خواهید از شر آن خلاص شوید، می توانید استفاده کنید text-decoration: none; (که رایج ترین استفاده از فایل . است text-decoration منشا آن).

a {
	text-decoration: none;
}

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

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

علاوه بر این، می توانید از فایل ها استفاده کنید border: bottom; بجای text-decoration: underline; برای افزودن یک خط زیر پیوندهای خود مردم قبلا از این استفاده می کردند زیرا گزینه های طراحی بهتری را ارائه می دهد. با این حال، این روزها ما ویژگی های جدید استاندارد را داریم underline این روش امکان سفارشی سازی های بیشتری را فراهم می کند.

مثلا، text-underline-offset به شما امکان می دهد هنگام استفاده، فاصله بین متن و خط زیر را کنترل کنید text-decoration. text-decoration-thickness به شما امکان می دهد یک عرض فونت سفارشی تنظیم کنید. بنابراین، رفتن به border جاده مثل قبل ضروری نیست.

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

هنگام شناور کردن، سبک مکان نما را تغییر دهید

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

هنگام نگه داشتن عدد 10 مکان نما را به مکان نما تغییر دهید

اکنون، این نشانه کلی است که شما با یک عنصر HTML قابل کلیک سروکار دارید. با این حال، ممکن است متوجه نباشید که می‌توانید نشانگر را به چیزهای دیگری نیز تغییر دهید، از عبور از روی فلش‌های تغییر اندازه تا نشانگر بارگذاری.

a {
	cursor: crosshair;
}

a {
	cursor: move;
}

a {
	cursor: wait;
}

a {
	cursor: n-resize;
}

a {
	cursor: grab;
}

اگر کنجکاو هستید، موارد بالا را در یک محیط توسعه محلی امتحان کنید تا تأثیر آن را ببینید. گزینه های زیادی وجود دارد که می توانید در اینجا پیدا کنید.

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

a {
	cursor: pointer;
}

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

نمونه ای از مکان نما پیمایش سفارشی

اگر نحوه انجام این کار را از طریق ابزارهای توسعه دهنده مرورگر خود بررسی کنید، کد زیر را خواهید دید:

a {
  cursor: url(../images/hand.cur),pointer;
}

همانطور که می بینید، می توانید با ارائه آدرس یک فایل تصویری، از یک مکان نما سفارشی استفاده کنید.

ایجاد تغییرات در: تمرکز

طراحی برای focus یک کمک دسترسی مهم است، بنابراین مطمئن شوید که در جای خود باقی می ماند. به طور پیش فرض، سایه زدن از طریق یک فایل انجام می شود outline که باعث می شود یک جعبه در اطراف آن ظاهر شود.

مثال طرح کلی پیش فرض را پیوند دهید

چرا outline نه border تو پرسیدی؟

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

بنابراین، چه گزینه های طراحی دیگری برای پیوند متمرکز دارید؟

بسیاری از آنها. همه چیز را از background-color به من colorو font-sizeو box-shadow، شما به آن می گویید.

پیوند فوکوس سبک از طریق نمونه های css

در اینجا نحوه دستیابی به موارد فوق آمده است:

#link-one:focus {
	color: red;
}

#link-two:focus {
	box-shadow: 0 0 14px 0px;
}

#link-three:focus {
	font-size: 36px;
}

استفاده کنید a:focus، هر کاری بخوای می توانی انجام دهی. با این حال، شاید یکی از جالب ترین برنامه ها این باشد که می توانید به سادگی مرورگر پیش فرض را با یک فایل شخصی سازی کنید outline منشا آن

a:focus {
	outline: 3px dotted green;
}

در اینجا چیزی است که در بالا در صفحه به نظر می رسد:

نمودار همبستگی فوکوس سبک از طریق مثال css

دکمه ها و جعبه ها را وصل کنید

البته لینک ها فقط لینک های متنی نیستند. در برخی مکان‌ها، اغلب به‌عنوان کادرهایی مانند منوهای پیمایش، به‌عنوان بخش‌هایی از فرم‌ها یا فراخوان‌ها به عمل ظاهر می‌شوند.

پیوند به عنوان دکمه مثال

دستیابی به این امر دشوار نیست. اساساً شما فقط باید راه هایی برای اضافه کردن فضا در اطراف متن پیوند و ارائه یک پس زمینه یا حاشیه/طرح کلی پیدا کنید تا آن را به عنوان یک دکمه یا کادر نشان دهید. صرف نظر از این، آنها همچنان همان عنصر پیوند دهنده هستند که قبلاً استفاده می کردیم.

راه‌های مختلفی برای رسیدن به این هدف وجود دارد، از اضافه کردن بالشتک به سیستم‌هایی مانند flexbox یا grid. در زیر فقط یک نمونه از نحوه انجام این کار آورده شده است و گزینه های زیادی وجود دارد.

a {
	background-color: #1a0dab;
	color: #fff;
	padding: 1.5rem;
}

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

آیکون ها را در پیوندهای خود قرار دهید

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

در اینجا نحوه انجام آن آمده است. ابتدا HTML:

<a id=link-one href="#">Link Text</a>
<a id=link-two href="#">Link Text</a>
<a id=link-three href="https://wikipedia.org/">Link Text</a>

سپس، CSS:

a[href^="http"] {
	background: url('external-link-icon.png') no-repeat right center;
	background-size: 16px 16px;
	padding-right: 15px;
}

را a[href^="http"] فقط تگ های لنگر را هدف قرار می دهد که عنوان آنها با آن شروع می شود http در href="". به آن‌ها، تگ‌ها یک تصویر پس‌زمینه، که نماد است، اضافه می‌کنند، آن را روی حالت بدون تکرار قرار می‌دهند، آن را تا انتها به سمت راست حرکت می‌دهند و آن را به صورت عمودی در مرکز قرار می‌دهند. بقیه تگ ها اندازه آیکون را تعیین می کنند و فاصله کمی بین آن و متن ایجاد می کنند.

افکار نهایی: طراحی CSS برای پیوندها

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

روش مورد علاقه شما برای استایل دادن به لینک ها از طریق CSS چیست؟ نکات دیگری برای به اشتراک گذاشتن وجود دارد؟ لطفا این کار را در نظرات انجام دهید!


– ارائه و ترجمه توسط تیم wordpress-templates.ir

سفارش طراحی سایت به وی تی!