دوستان سلام چند وقتی هست که فوتر سایت همیار اکادمی منو به خودش جذب کرده می خواستم بدونم چی شکلی این رو ساخته لطفا راهنمایی کنید
همیار اکادمی
از طریق ابزار inspect مرورگرتون به سادگی می تونید بررسی کنید و متوجه بشید.
به کمک این ابزار، این دو مورد رو بررسی کنید:
<footer id="footer">
#footer {
background: url(/wp-content/themes/Hamyar/assets/public/img/footer-bg.svg) repeat-x left top;
height: auto;
direction: rtl;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
}
<div class="main-footer-bg"></div>
#footer .main-footer .main-footer-bg {
background: #d70d59;
background: linear-gradient(324deg, #d70d59 0%, #fc3924 100%);
-webkit-mask-box-image: url(/wp-content/themes/Hamyar/assets/public/img/footer-inner-bg.svg);
mask-image: url(/wp-content/themes/Hamyar/assets/public/img/footer-inner-bg.svg);
mask-position: top center;
width: 1335px;
height: 322px;
position: absolute;
left: 0;
z-index: 0;
}
مرسی از کمکت منظور من این بود که ابزاری هست که بتونه عکس های خمیده درست کنه یا مثلا از قبل اماده داشته باشه
@milad
خواهش میکنم.
1) عکس خمیده رو من نمی دونم راه حلش رو، ولی این رو هم بگم که از عنوان سوالتون و همینطور متن گفتگوی اصلی تون، فکر نمی کنم خواننده متوجه بشه که میخواید عکس هارو تغییر حالت بدین.
2) در واقع همین کدها دارند کار مدنظر شما رو انجام میدن و در پس زمینه یک منحنی دو بعدی بوجود آوردن.
معمولا اگر طرح های UI/UX توسط یک دیزاینر تحویل برنامه نویس بشه به راحتی میشه این جور طرح ها رو خروجی گرفت. اگر هم نه خودتون میتونید تو فتوشاپ چنین طرح هایی رو درست کنید (با ابزار PEN مثلا) و با فرمت مثلا PNG ذخیره و استفاده کنید.
ولی رایج ترین روشش استفاده از طرح های vector-based هست. یعنی تصاویری که پیکسلی نیستند و فارغ از سایز صفحه نمایش با بالاترین کیفیت و پایین ترین حجم نمایش داده میشن. یکی از تخصصی ترین نرم افزار های این حوزه هم Adobe Illustrator هست. بعد از طراحی به روش های مختلفی میشه از کار Export گرفت. ولی باز فرمتی که مناسب وب هست و پیشنهاد میشه SVG هست.
در سایت مذکور هم اگر دقت کنید از همین تصاویر با فرمت SVG استفاده شده:
https://hamyar.co/wp-content/themes/Hamyar/assets/public/img/footer-inner-bg.svg
این مقاله خیلی مختصر و مفید راجع به تفاوت svg و png توضیح داده و چندتا از نرم افزار های گرافیکی که به گرافیست Export فرمت svg میده رو معرفی کرده
https://blog.hubspot.com/website/what-is-an-svg-file
دوره svg سایت w3schools هم برای جزییات بد نیست
https://www.w3schools.com/graphics/svg_intro.asp
@mhyeganeh @endworld @f.zare
با تشکر از ارائه توضیحات شما دوستان، می خواستم جویا بشم که آیا منبعی رو می شناسید که چنین طرح هایی رو بصورت متنوع، در قالب عکس های png یا بُرداری svg شامل بشه؟
مثال:
یا
@endworld بله فیلم رو دیدم و از پاسخ دوستان هم متوجه این شدم، اما منظورم اینه که جایی باشه که بخصوص چنین طرح هایی رو بصورت متنوع در دسترس گذاشته باشه و کار رو ساده کنه.
@f.zare @nimageneral
پیوندهایی که قرار دادید هر دو عزیز خیلی خیلی باحال و خوب بودن، سپاس سپاس 👌
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟