css arrows چیست؟
فلش‌ها در رابط کاربری‌ها برای راهنمایی کاربران و کمک به آن‌ها برای درک جریان اطلاعات استفاده می‌شوند. آن‌ها نشانه‌های بصری ارائه می‌دهند تا کاربران را در راهبری از طریق اقدامات مختلف کمک کنند.
فلش‌ها یک روش موثر برای بهبود تجربه کاربری هستند. آن‌ها در tooltipها، منوهای کشویی، عناصر ناوبری و موارد دیگر استفاده می‌شوند. این باعث می‌شود راهنمایی کاربران در طول فرآیند آسان‌تر شود.
با استفاده از خصوصیت‌های CSS می‌توان فلش‌ها را ایجاد کرد که عبارتند از:
transform: این خصوصیت برای ایجاد آیکون‌های فلش با دوران المان‌ها با استفاده از تابع rotate() استفاده می‌شود. تابع rotate() یک زاویه را به عنوان آرگومان خود می‌پذیرد که جهت و میزان چرخش را مشخص می‌کند.
border: این خصوصیت به ما امکان می‌دهد یک مثلث را با تلاش در عرض و ارتفاع حاشیه المان ایجاد کنیم.
Using Transform
این بخش نشان می‌دهد که چگونه از خاصیت transform برای ایجاد نمادهای فلش با دوران المان‌ها با استفاده از تابع rotate() استفاده می‌شود. تابع rotate() یک زاویه را به عنوان آرگومان خود می‌پذیرد که جهت و میزان چرخش را مشخص می‌کند.
در این مثال، از ویژگی transform برای ایجاد نمادهای فلش استفاده می‌شود. به طور خاص، از کلاس‌های CSS برای تعیین جهت و نوع فلش‌ها استفاده شده است. هر کدام از کلاس‌های arrow دارای تنظیمات مخصوص خود برای rotate() هستند، که باعث می‌شود فلش در جهت و میزان مشخصی چرخش داده شود.
سپس این فلش‌ها در داخل پاراگراف‌های مختلف نمایش داده می‌شوند، هرکدام با توضیحات مربوطه در مورد جهت و نوع آن فلش.
<html>
<head>
<style>
.arrow-container {
display: flex;
align-items: center;
}
.arrow {
display: inline-block;
margin-right: 30px;
width: 15px;
height: 15px;
border-top: 2px solid #000;
border-right: 2px solid #000;
}
.right-arrow {
transform: rotate(45deg);
}
.left-arrow {
transform: rotate(-135deg);
}
.up-arrow {
transform: rotate(-45deg);
}
.down-arrow {
transform: rotate(135deg);
}
.top-narrow-arrow {
transform: rotate(-45deg) skew(-15deg, -15deg);
}
.top-wide-arrow {
transform: rotate(-45deg) skew(7deg, 7deg);
}
.top-left-arrow {
transform: rotate(-90deg) skew(-10deg, -10deg);
}
.top-right-arrow {
transform: rotate(0) skew(-10deg, -10deg);
}
.bottom-left-arrow {
transform: rotate(180deg) skew(-10deg, -10deg);
}
.bottom-right-arrow {
transform: rotate(90deg) skew(-10deg, -10deg);
}
</style>
</head>
<body>
<p class="arrow-container"><span class="arrow right-arrow"></span> - This arrow points to the right.</p>
<p class="arrow-container"><span class="arrow left-arrow"></span> - This arrow points to the left.</p>
<p class="arrow-container"><span class="arrow up-arrow"></span> - This arrow points upwards.</p>
<p class="arrow-container"><span class="arrow down-arrow"></span> - This arrow points downwards.</p>
<p class="arrow-container"><span class="arrow top-narrow-arrow"></span> - This arrow points top and is narrow.</p>
<p class="arrow-container"><span class="arrow top-wide-arrow"></span> - This arrow points top and is wide.</p>
<p class="arrow-container"><span class="arrow top-left-arrow"></span> - This arrow points top left.</p>
<p class="arrow-container"><span class="arrow top-right-arrow"></span> - This arrow points top right.</p>
<p class="arrow-container"><span class="arrow bottom-left-arrow"></span> - This arrow points bottom left.</p>
<p class="arrow-container"><span class="arrow bottom-right-arrow"></span> - This arrow points bottom right.</p>
</body>
</html>Using Border
این بخش نشان می‌دهد که چگونه با استفاده از ویژگی border می‌توان فلش‌ها را با تلاش در اندازه و ارتفاع حاشیه المان‌ها ایجاد کرد و در نتیجه یک فلش ایجاد کرد.
در این مثال، با استفاده از ویژگی border، فلش‌هایی با ابعاد مختلف ایجاد شده‌اند. به طور خاص، با تنظیم border-top و border-bottom برای فلش‌های راست و چپ، و با تنظیم border-left و border-right برای فلش‌های بالا و پایین، از خواص border برای ایجاد شکل فلش استفاده شده است.
با تنظیم رنگ border به عنوان رنگ پرده‌ای مطلوب، فلش‌های مختلف به سمت‌های مختلف نمایش داده می‌شوند. سپس این فلش‌ها در داخل پاراگراف‌های مختلف نمایش داده می‌شوند، هرکدام با توضیحات مربوطه در مورد جهت و نوع آن فلش.
<html>
<head>
<style>
.arrow-container {
display: flex;
align-items: center;
}
.left-arrow,
.right-arrow,
.up-arrow,
.down-arrow {
width: 0;
height: 0;
margin: 5px;
}
.left-arrow,
.right-arrow {
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
}
.up-arrow,
.down-arrow {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
.right-arrow {
border-left: 25px solid #F10C0C;
}
.left-arrow {
border-right: 25px solid #F10C0C;
}
.up-arrow {
border-bottom: 25px solid #F10C0C;
}
.down-arrow {
border-top: 25px solid #F10C0C;
}
</style>
</head>
<body>
<p class="arrow-container"><span class="right-arrow"></span> - This arrow points to the right.</p>
<p class="arrow-container"><span class="left-arrow"></span> - This arrow points to the left.</p>
<p class="arrow-container"><span class="up-arrow"></span> - This arrow points to the upwards.</p>
<p class="arrow-container"><span class="down-arrow"></span> - This arrow points to the downwards.</p>
</body>
</html>Styling
در این بخش نشان داده می‌شود که چگونه با استفاده از تحولات CSS و ویژگی‌های border، می‌توان فلش‌ها را به شکل‌های متنوع‌تری طراحی کرد.
ویژگی transform-origin: center مطمئن می‌شود که چرخش هر فلش حول نقطه مرکزی آن اتفاق می‌افتد.
در این مثال، با استفاده از ویژگی‌های border و transform، فلش‌هایی با اندازه‌ها و شکل‌های مختلف ایجاد شده‌اند. همچنین با استفاده از پسوند ::after و ویژگی content، یک مستطیل روی هر فلش اضافه شده است که به آن شکل و ظاهر بیشتری می‌دهد.
با استفاده از transform: rotate()، هر فلش به نسبت چرخش داده شده است تا به شکل مورد نظر برسد. همچنین با استفاده از transform: rotate() و translate()، پسوند ::after به شکلی مناسب تر در هر فلش جابه‌جا شده است.
در این مثال، فلش‌ها با توضیحات مربوطه در مورد جهت و نوع آن‌ها در پاراگراف‌های مختلف نمایش داده شده‌اند.
<html>
<head>
<style>
.arrow-container {
display: flex;
align-items: center;
}
.left-arrow,
.right-arrow,
.up-arrow,
.down-arrow {
display: inline-block;
margin: 30px;
width: 15px;
height: 15px;
border-top: 2px solid #F10C0C;
border-left: 2px solid #F10C0C;
transform-origin: center;
}
.right-arrow {
transform: rotate(135deg);
}
.left-arrow {
transform: rotate(-45deg);
}
.up-arrow {
transform: rotate(45deg);
}
.down-arrow {
transform: rotate(-135deg);
}
.right-arrow::after,
.left-arrow::after,
.up-arrow::after,
.down-arrow::after {
content: "";
display: block;
width: 2px;
height: 45px;
background-color: #F10C0C;
transform: rotate(-45deg) translate(15px, 4px);
}
</style>
</head>
<body>
<p class="arrow-container">Right Arrow - <span class="right-arrow"></span></p>
<p class="arrow-container">Left Arrow - <span class="left-arrow"></span></p>
<p class="arrow-container">Up Arrow - <span class="up-arrow"></span></p>
<p class="arrow-container">Down Arrow - <span class="down-arrow"></span></p>
</body>
</html>Dropdown Arrow
این بخش نشان می‌دهد چگونه می‌توان یک دکمه با یک آیکون فلش به سمت پایین برای منوی کشویی ایجاد کرد. وقتی روی دکمه نشان داده شود، منوی کشویی ظاهر می‌شود.
در این مثال، از یک دکمه و یک منوی کشویی استفاده شده است. دکمه با کلاس .dropdown-btn و منوی کشویی با کلاس .dropdown-content ایجاد شده‌اند.
ویژگی position: relative برای دکمه و ویژگی position: absolute برای منوی کشویی استفاده شده است تا منو کشویی به صورت نسبی به دکمه واقع شود.
آیکون فلش به صورت یک مستطیل سه‌گوشه ایجاد شده است که با استفاده از پسوند ::after به دکمه اضافه شده است.
وقتی روی دکمه نشان داده می‌شود (hover)، ویژگی display برای منوی کشویی به block تغییر می‌کند و منو نمایش داده می‌شود.
هر آیتم منو کشویی با یک پیوند کلیک‌پذیر (a) و کلاس .dropdown-item ایجاد شده است.
با استفاده از این مثال، یک منوی کشویی ساده با دکمه و آیکون فلش به سمت پایین ایجاد شده است که وقتی روی دکمه نشان داده می‌شود، آیتم‌های منو نمایش داده می‌شوند.
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-btn {
background-color: #F10C0C;
color: #ffffff;
padding: 10px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #28992e;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-btn::after {
content: "";
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid white;
margin-left: 5px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-item {
padding: 10px;
text-decoration: none;
color: #ffffff;
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropdown-btn">Dropdown</button>
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
</body>
</html>Tooltip Arrow
این بخش نشان می‌دهد چگونه می‌توان یک راهنما با یک مثلث به سمت بالا ایجاد کرد که هنگامی که موس روی متن قرار گرفت راهنما نمایش داده می‌شود و وقتی موس از روی متن حرکت می‌کند، راهنما ناپدید می‌شود.
در این مثال، از یک عنصر div با کلاس .tooltip برای متن و یک عنصر span با کلاس .tooltipcontent برای محتوای راهنما استفاده شده است.
ویژگی position: relative به div با کلاس .tooltip اضافه شده است تا محتوای راهنما به صورت نسبی به متن قرار بگیرد.
وقتی روی متن هوور می‌شود (hover)، ویژگی display برای محتوای راهنما به block تغییر می‌کند و راهنما نمایش داده می‌شود.
مثلثی که به سمت بالا اشاره می‌کند با استفاده از عنصر ::before و ویژگی‌های border و transform ایجاد شده است. این مثلث به صورت مطلق بالای محتوای راهنما قرار می‌گیرد و به وسیله ترکیبی از transform: translateX(-50%); در موقعیت میانی افقی قرار می‌گیرد.
<html>
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltipcontent {
display: none;
position: absolute;
background-color: #F10C0C;
color: #fff;
padding: 8px;
border-radius: 4px;
z-index: 1;
font-size: 14px;
white-space: nowrap;
}
.tooltip:hover .tooltipcontent {
display: block;
}
.tooltipcontent::before {
content: "";
position: absolute;
border-width: 6px;
border-style: solid;
border-color: transparent transparent #F10C0C transparent;
top: -12px;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h3 class="tooltip">Tutorialspoint
<span class="tooltipcontent">CSS - Arrow</span>
</h3>
</body>
</html>Animated CSS Arrows
در این بخش، می‌خواهیم یک پیشانه CSS ایجاد کنیم که حرکت کند و نبض بزند، این امر به صفحات وب افکتی پویا اضافه می‌کند. مثال زیر یک پیشانه متحرک را نشان می‌دهد که بالا و پایین حرکت می‌کند. برای ایجاد یک پیشانه متحرک، از قانون @keyframes در CSS استفاده می‌کنیم تا یک مجموعه از انیمیشن‌ها را که به پیشانه اعمال می‌شود تعریف کنیم.
در این مثال، از یک عنصر span با کلاس .left-arrow استفاده شده است که یک پیشانه به سمت چپ را ایجاد می‌کند.
سپس با استفاده از قوانین CSS، این پیشانه متحرک می‌شود. ویژگی animation به پیشانه اضافه شده است که مشخص می‌کند که انیمیشنی با نام move به مدت 2 ثانیه و با تسهیل ورودی-خروجی به صورت بی‌نهایت اعمال شود.
سپس با استفاده از قوانین @keyframes، یک مجموعه از مراحل حرکت تعریف می‌شود که پیشانه باید آن را دنبال کند. این مراحل شامل حرکت به بالا، به سمت پایین، و دوباره به حالت اولیه می‌باشد.
<html>
<head>
<style>
.arrow-container {
display: flex;
align-items: center;
}
.left-arrow
{
width: 0;
height: 0;
margin: 5px;
}
.left-arrow
{
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
}
.left-arrow {
border-right: 25px solid #F10C0C;
}
.arrow-move {
position: relative;
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<p class="arrow-container"><span class="left-arrow arrow-move"></span> - This arrow points to the left.</p>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام