امروز،
در طراحی صفحات وب همیشه برای ساختن طرح های راه راه به عنوان پس زمینه به سراغ ابزارهایی نظیر فوتوشاپ می رفتیم و با استفاده از تصاویر, به نتیجه می رسیدیم. هنوز هم خیلی از ما از تصاویر کمک می گیریم. اما مشکلی که تصاویر دارند این است که تغییر دادن آنها دردسر زیادی دارد و انعطاف پذیری مناسبی ندارند. راه حل دیگر ساخت این طرح ها, استفاده از SVG است. که این روش نیازمند یادگیری SVG است و همچنین سینتکس آن متفاوت از سی اس اس است.
عالی نمی شد اگر می توانستیم اینگونه طرح ها را با سی اس اس خلق کنیم؟
خوشبختانه می توانیم و در این مطلب قدم به قدم نحوه انجام این کار را با هم بررسی خواهیم کرد.
کد زیر برای راه راه افقی
راه راه عمودی
عالی نمی شد اگر می توانستیم اینگونه طرح ها را با سی اس اس خلق کنیم؟
خوشبختانه می توانیم و در این مطلب قدم به قدم نحوه انجام این کار را با هم بررسی خواهیم کرد.
کد زیر برای راه راه افقی
کد:
body {
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;
}
html {
height: 100vh;
}راه راه عمودی
کد:
background: linear-gradient(to right, #fb3 50%, #58a 50%);
background-size: 30px 100%;