محمد معین بابائی
4 سال پیش توسط محمد معین بابائی مطرح شد
14 پاسخ

فوتر جالب

دوستان سلام چند وقتی هست که فوتر سایت همیار اکادمی منو به خودش جذب کرده می خواستم بدونم چی شکلی این رو ساخته لطفا راهنمایی کنید
همیار اکادمی


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

از طریق ابزار 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;
}

محمد معین بابائی
تخصص : Web developer
@moeinbabaei 4 سال پیش مطرح شد
0

مرسی از کمکت منظور من این بود که ابزاری هست که بتونه عکس های خمیده درست کنه یا مثلا از قبل اماده داشته باشه
@milad


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

خواهش میکنم.
1) عکس خمیده رو من نمی دونم راه حلش رو، ولی این رو هم بگم که از عنوان سوالتون و همینطور متن گفتگوی اصلی تون، فکر نمی کنم خواننده متوجه بشه که میخواید عکس هارو تغییر حالت بدین.
2) در واقع همین کدها دارند کار مدنظر شما رو انجام میدن و در پس زمینه یک منحنی دو بعدی بوجود آوردن.


محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 4 سال پیش آپدیت شد
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


رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 4 سال پیش مطرح شد
محمد معین بابائی
تخصص : Web developer
@moeinbabaei 4 سال پیش مطرح شد
1

مرسی از نظر تمام دوستان
@milad
@mhyeganeh
@endworld


f.zare
@f.zare 4 سال پیش مطرح شد
0

این مقاله خیلی مختصر و مفید راجع به تفاوت svg و png توضیح داده و چندتا از نرم افزار های گرافیکی که به گرافیست Export فرمت svg میده رو معرفی کرده
https://blog.hubspot.com/website/what-is-an-svg-file

دوره svg سایت w3schools هم برای جزییات بد نیست
https://www.w3schools.com/graphics/svg_intro.asp


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

@mhyeganeh @endworld @f.zare
با تشکر از ارائه توضیحات شما دوستان، می خواستم جویا بشم که آیا منبعی رو می شناسید که چنین طرح هایی رو بصورت متنوع، در قالب عکس های png یا بُرداری svg شامل بشه؟

مثال:
منحنی
یا
منحنی


رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 4 سال پیش مطرح شد
0

@milad
با فتوشاپ طراحی کن ...


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

@endworld بله فیلم رو دیدم و از پاسخ دوستان هم متوجه این شدم، اما منظورم اینه که جایی باشه که بخصوص چنین طرح هایی رو بصورت متنوع در دسترس گذاشته باشه و کار رو ساده کنه.


نیما - ش
تخصص : برنامه نویس وب
@nimageneral 4 سال پیش مطرح شد
2

برای ساخت دیوایدر ها شما میتونید از این لینک استفاده کنید و خروجی رو بصورت تگ های html و css دریافت کنید و در سایت تون به راحتی استفاده کنید.


f.zare
@f.zare 4 سال پیش مطرح شد
2

@milad
این لینک می تونه کمکتون کنه.
این لینک برای درست کردن shape های تصادفی خیلی خوبه .... این لینک برای درست کردن shape های منظم
تو بعضی از سایت هایی برای آیکون هم هستند می تونید همچین چیزایی رو تو فرمت svg پیدا کنید.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

@f.zare @nimageneral
پیوندهایی که قرار دادید هر دو عزیز خیلی خیلی باحال و خوب بودن، سپاس سپاس 👌


محمد معین بابائی
تخصص : Web developer
@moeinbabaei 4 سال پیش مطرح شد
2

خیلی ممنون از همه


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام