مطالب عمومی

آموزش طراحی یک باکس با استایل دوخته شده Stitched با استفاده از css

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

شبکه های اجتماعی ما
دوره سئو مقدماتی

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

1300 نفر
2 دقیقه
بروزرسانی در: آبان 9, 1400

فهرست مطالب

گاهی اوقات برای طراحی باکس های زیبا در صفحات وب نیاز دارید که از مدل های متفاوتی استفاده کنید. نیاز نیست که هربار از تصاویر برای زیبا شدن صفحات وب خود کمک بگیرید، با استفاده از دستوارت css به سادگی میتوانید طرح های زیبایی را به نوشته ها و باکس های خود اعمال کنید. در این آموزش، استایل طرح دوخت برای باکس ها در صفحات وب سایت را به شما آموزش میدهیم. میتوانید دموی این آموزش را از این قسمت مشاهده کنید.
Untitled-1

[free_vip]

کدهای html :

[html]
<div class=”stitched”>Stitched</div>
[/html]

کدهای css :
برای ایجاد دوخت اطراف باکس مورد نظر با کدهای css، باید از مشخصه border و box-shadow همزمان استفاده کرد. حالت دوخت را با مشخصه border نمایش میدهیم و برای ایجاد فاصله مجدد بین border و حاشیه های اطراف تگ مورد نظر، از مشخصه box-shadow با رنگی مشابه زمینه و بک گراند داخل تگ استفاده میکنیم.

[html]
.stitched {
padding: 20px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
}

[/html]

[/free_vip]

به این صفحه رتبه دهید
1 دیدگاه
انتشار: مرداد 12, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا