گاهی اوقات برای طراحی باکس های زیبا در صفحات وب نیاز دارید که از مدل های متفاوتی استفاده کنید. نیاز نیست که هربار از تصاویر برای زیبا شدن صفحات وب خود کمک بگیرید، با استفاده از دستوارت css به سادگی میتوانید طرح های زیبایی را به نوشته ها و باکس های خود اعمال کنید. در این آموزش، استایل طرح دوخت برای باکس ها در صفحات وب سایت را به شما آموزش میدهیم. میتوانید دموی این آموزش را از این قسمت مشاهده کنید.
[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 دیدگاه دربارهٔ «آموزش طراحی یک باکس با استایل دوخته شده Stitched با استفاده از css»
مرسی خیلی به این آموزش نیاز داشتم.عالیییییییی بود
با تشکر