ایجاد یک خط نقطه عمودی در مرکز یک صفحه وب می تواند طرح را تقویت کرده و چشم کاربران را راهنمایی کند. اگر نمی دانید چگونه می توانید با CSS به این اثر برسید ، خوشحال می شوید که می دانید روش های ساده ای وجود دارد که به تصاویر احتیاج ندارند. در این مقاله ، ما یک روش CSS تمیز را برای ایجاد یک خط با نقطه عمودی که در زیر هر جعبه محتوا ظاهر می شود ، جزئیات می دهیم.
چرا از CSS برای خطوط نقطه استفاده می کنید؟
در حالی که استفاده از تصاویر مکرر برای تولید یک خط نقطه ای امکان پذیر است ، CSS انعطاف پذیری بیشتری را ارائه می دهد و امکان تنظیم رنگ ، فاصله و پاسخگویی را بدون نیاز به پرونده های تصویری اضافی فراهم می کند. این روش نه تنها کد شما را ساده تر می کند بلکه عملکرد وب سایت شما را با کاهش درخواست های HTTP بهینه می کند و در نتیجه زمان بارگذاری سریعتر انجام می شود.
ایجاد خط نقطه با CSS
روش های مختلفی برای ایجاد یک خط نقطه عمودی در CSS وجود دارد. در زیر ، ما دو روش کارآمد را کشف خواهیم کرد: با استفاده از border ملک و استفاده از linear-gradient زمینه
روش 1: با استفاده از خاصیت مرزی
این ساده ترین روش برای اضافه کردن یک خط عمودی است. ما از یک طرف یک DIV با ارتفاع کامل استفاده خواهیم کرد.
ساختار HTML
This is where your other content goes, and it will overlap with the vertical line.
یک ظاهر طراحی شده CSS
body {
margin: 0;
padding: 0;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.vertical-line {
border-left: 2px dotted black;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.content {
padding: 20px;
background-color: white;
z-index: 1; /* Ensures the content is above the line */
}
در این تنظیم ، ما یک کانتینر ایجاد می کنیم که هم خط عمودی و هم محتوای دیگر را در خود جای داده است. خط با استفاده از خط کاملاً در مرکز قرار گرفته است transform: translateX(-50%); برای تراز کردن کاملاً.
روش 2: استفاده از شیب خطی
برای سفارشی سازی بیشتر ، به ویژه در یک ظاهر طراحی ظاهر خط نقطه ، می توانیم از یک استفاده کنیم linear-gradient به عنوان یک تصویر پس زمینه
ساختار HTML به روز شده
در اینجا هیچ تغییری لازم نیست. می توانید با همان HTML مانند بالا ادامه دهید.
یک ظاهر طراحی شده CSS
.vertical-line {
width: 2px; /* Width of the line */
height: 100%;
background: linear-gradient(
to bottom,
transparent 9%,
black 9%,
black 11%,
transparent 11%
);
position: absolute;
left: 50%;
transform: translateX(-50%);
}
در این روش ، ما با انتقال بین رنگ های شفاف و سیاه در آن اثر خالص ایجاد می کنیم linear-gradientبشر درصد ها را تنظیم کنید تا اندازه و فاصله نقطه مورد نظر خود را بدست آورید.
ملاحظات طراحی پاسخگو
هنگام ایجاد عناصر بصری مانند یک خط عمودی ، اطمینان از جذابیت آنها در اندازه های مختلف صفحه نمایش ضروری است. مثالهای فوق از اندازه گیری های نسبی استفاده می کنند و باعث می شود که طراحی این طرح را آسان کند زیرا کاربران تغییر اندازه مرورگرهای خود را تغییر می دهند.
آزمایش در نمای مختلف
حتماً طرح خود را در دستگاه های مختلف آزمایش کنید ، زیرا ممکن است عناصر بر اساس وضوح و اندازه صفحه نمایش کمی تغییر کنند. ابزارهایی مانند ابزارهای توسعه دهنده Chrome می توانند به شما در شبیه سازی دستگاه های مختلف کمک کنند.
سوالات متداول (متداول)
آیا می توانم رنگ خط نقطه را تغییر دهم؟
بله به سادگی مقدار رنگ را در مرز یا شیب تغییر دهید تا متناسب با تنظیمات طراحی خود باشد.
چگونه خط را ضخیم تر یا نازک تر کنم؟
مقدار پیکسل را در border-left خاصیت یا width از .vertical-line کلاس.
آیا این روش در تمام مرورگرها کار خواهد کرد؟
بله ، خواص CSS مورد استفاده به طور گسترده در مرورگرهای مدرن پشتیبانی می شود. با این حال ، همیشه بهتر است که تأیید کنید.
در نتیجه ، ایجاد یک خط با نقطه عمودی با استفاده از CSS هم آسان و هم بسیار قابل تنظیم است. آیا شما انتخاب کنید border روش یا linear-gradient رویکرد ، این تکنیک ها به شما امکان می دهد تا یک طراحی تمیز را حفظ کرده و عملکرد را به طور مؤثر بهینه کنید.
