shayan

ساخت انحنا با css

9 پست در این موضوع قرار دارد

سلام

من میخوام بدونم چطور میشه چنین انحنا هایی به شکل تصاویر زیر با css یا هر چیز دیگه درست کرد؟

نمونه آنلاین : همایش وردپرس

post-813-0-85859500-1438164618_thumb.png

post-813-0-36136600-1438164656_thumb.png

0

به اشتراک گذاری این پست


لینک به پست

با css نمیشه

با فتوشاپ درست مکنند بعد با خاصیت position:relative در css اونو میفرستن رو لایه زیری که باعث میشه لایه زیری بریده به نظر برسه

یاعلی

0

به اشتراک گذاری این پست


لینک به پست

به دو روش:

استفاده از عکس(منسوخ شده)

با استفاده از روش لایه ای (css) و کار با z-index ها...

بدین صورت که لایه پایینی z-index پایینتری داشته باشه... و برعکس

در این صورت لایه هایی که z-index بالاتری دارند بالاتر قرار میگیرند...

0

به اشتراک گذاری این پست


لینک به پست

به دو روش:

استفاده از عکس(منسوخ شده)

با استفاده از روش لایه ای (css) و کار با z-index ها...

بدین صورت که لایه پایینی z-index پایینتری داشته باشه... و برعکس

در این صورت لایه هایی که z-index بالاتری دارند بالاتر قرار میگیرند...

خب این مواردی که شما فرمودید میشه مرحله دوم کار

اول باید ببینم که اصلا چطور با css این کا رو انجام بدم

0

به اشتراک گذاری این پست


لینک به پست

حس کد زدن ندارم

ولی کلید کار رو میدم

دو لایه ایجاد میکنیم، اولین لایه، لایه بیس کار هست... لایه دوم لایه انحنا یا شکستگی لایه بیس هست...(من لایه شکستگی رو فقط میگم فعلا)

z-index لایه بیس رو 0 و z-index لایه دوم رو 1 میدیم...

لایه شماره دو متشکل از یک مستطیل هست که چرخانده شده...

البته باید موقعیت دهی در css رو خوب بلد باشید...

همین

0

به اشتراک گذاری این پست


لینک به پست

حس کد زدن ندارم

ولی کلید کار رو میدم

دو لایه ایجاد میکنیم، اولین لایه، لایه بیس کار هست... لایه دوم لایه انحنا یا شکستگی لایه بیس هست...(من لایه شکستگی رو فقط میگم فعلا)

z-index لایه بیس رو 0 و z-index لایه دوم رو 1 میدیم...

لایه شماره دو متشکل از یک مستطیل هست که چرخانده شده...

البته باید موقعیت دهی در css رو خوب بلد باشید...

همین

این دوستمون چقدر لقمه رو می پیچونه! :)

استفاده از عکس به هیچ وجه منسوخ نشده و همچنین عکسی کلا 5 کیلوبایت حجم داره(تو حالت گیف)

z-index هم که این آقا میگم طبیعیه که بعد از relative باید اعمال بشه

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

0

به اشتراک گذاری این پست


لینک به پست

دوستان ببینید من تونستم این کد رو پیدا کنم


.class {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 0;
height: 100px;
border: 50px solid #1abc9c;
border-top: 0 solid;
border-bottom: 35px solid rgba(0,0,0,0);
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
-webkit-transform: rotateX(-180.76deg) rotateY(-180.51deg) scaleX(10) ;
transform: rotateX(-180.76deg) rotateY(-180.51deg) scaleX(10) ;
}

فقوط چون میخوام تو صفحه ریسپانسیو از استفاده کنم باید

به صورت اتوماتیک کش بیاد و مناسب صفحه بشه

ببینید اگر مشکلی داره بر طرف کنید بی زحمت

میخوام نهایتا به این نتیجه برسم

cxb4_infobottm.png

خیلییییی ممنون

0

به اشتراک گذاری این پست


لینک به پست

تو سایت همایش وردپرس از svg استفاده شده :


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="60" viewBox="0 0 100 102" preserveAspectRatio="none" class="svg-sep">
<path d="M0 0 L50 100 L100 0 Z"/>
</svg>

@morteza

لطفا راهنمایی کنید به همراه آموزش

ممنون

1

به اشتراک گذاری این پست


لینک به پست

سلام برای این کار دو تا راه هست یکی این که تو فتوشاپ این کارو بکنید و با فرمت gif سیو کنید دوم استفاده از یه خصیصه در css هستش به اسم border-radius که مقدارش هم اون قدریه که میخواین منحی داشته باشه مانند:

style="border-radius:25 25 25 25

[/

CODE]border-radius:25 25 25 25

البتهدومی برای باکسی ها کاربرد داره. (مانند div )

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط abdananbimeh
      آن کیست کز روی کرم مرا یاری کند
      باسلام
      دوستان عزیزان برادران مهندسین گرامی
      من نمی تونم این وردپرس رو هاست گیگفا نصب کنم حالم رو گرفته
      یه کسی من رو کمک کنه
      یه دامنه خودم دارم هر کسی لطف کرد  تونست کمک کنه ایمیل بفرست رمز و یوزر رو بهش بدم خودش زحمتش رو بکشه البته یه دامنه هم خودم دارم
       
    • توسط iritteam
      سلام دوستان
      وقت بخیر
       
      یک قالب از یک شرکت خارجی خریدیم که بجز pages و posts بخش های دیگه ای مثل services و landings و ... بهش اضافه شده. در اصل به صورت post_type جدید موارد landing و... رو به قالب اضافه کردن.
      آدرس صفحات لندینگ در حال حاضر به این شکله: http://example.com/landing/landing-page-name و میخوایم که عبارت landing در وسط URL حذف بشه و آدرس به این شکل بشه: http://example.com/landing-page-name
      سعی کردیم با استفاده از تغییرات htaccess و قوانین rewriterule ها این کار رو انجام بدیم که متاسفانه با خطای too many redirection مواجه شدیم.
      در مرحله بعد هم در متد register_posty_type() با استفاده کد زیر:
      'rewrite' => [ 'slug' => '/', 'with_front' => false ] سعی کردیم این کار رو انجام بدیم اما متاسفانه همه صفحات و پست ها رو دچار مشکل کرد و مجدد نتیجه ای نداشت.
       
      کسی هست که بتونه کمک کنه تا این مشکل رو حل کنیم؟
    • توسط Rezasafari
      با سلام بنده بخاطر اینکه سورس سایتم پاک شده بود مجبور شدم سایتو به بک آپ پنج روز قبل برگردونم.و چون سایت من خبری هست و هر روز پنج خبر گزاشته میشه.آیا الان من باید اقدامی کنم که توسط گوگل جریمه نشم یاخیر؟؟
    • توسط faradm
      با سلام. وقت بخیر!
      من قصد دارم فرمی طراحی کنم که کاربر تاریخ تولد یکی از دوستان یا نزدیکانش را وارد کنه و وقتی کسی فرم تولد را پر میکنه برای شماره ای که وارد کرده، در تاریخی که مشخص کرده، (یکروز/دوروز/سه روز) زودتر یک پیام تبریک به همراه کد تخفیف از طرف سایت ارسال بشه.
      آیا این امکان از طریق فرم گرویتی وجود داره؟
      یا افزونه خاصی برای اینکار باید نصب بشه؟(ممنون میشم اگر افزونه مفیدی در این زمینه میشناسید معرفی کنید)
      ضمنا قالب سایت وودمارت هست و افزونه پیامک فارسی هم روی قالب نصبه.
    • توسط mahdixq
      سلام من فایل های سایت gzip شدن حتی افزونه نصب کردم فایل اچ تی داکس هم ادیت کردم توی اینسپکت المنت هم فایل های سایتم بخصوص svg هارو encoding رو gzip نشون میده ولی ولی با ابزار gtmetrix انالیز میکنم هیچ نمره ای به gzip (https://gtmetrix.com/reports/chikarkonam.com/FPDb4Ba9)نمیده دوستان چیکار کنم کلافه شدم کلی سایت ایرانی خارجی سر زدم کمکم کنید!!(: