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

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط HADI.RBL
      سلام خسته نباشید من وقتی یک برگه رو در وردپرس خودم میسازم هرکار میکنم در سایتم نمایش داده نمیشه هرکی میدونه مشکل از کجاست لطفا راهنمایی کنه >. 
    • توسط amirdehghani
      سلام ببخشید من داخل سایت ام query monitor نصب کردم بعد بهم ارور slow query میده  میگه دو تا slow query داری 
      الان باید چیکار کنم که درست بشن با افزونه میشه درستش کرد یا باید کد های query رو تغییر بدم 
      لطفا کمک کنید خیلی مهمه تا امشب باید درستش کنم تحویل بدم
    • توسط mahnaz20
      با سلام خدمت دوستان و اساتید گرامی
      دیروز هنگام آپدیت افزونه ووکامرس مشکلی در بروزرسانی بوجود آمد و سایتم بالا نیومد مجبور شدم برم از هاست فایل maintance را پاک کنم و سایت بالا اومد .
      ولی تنظیمات پیکربندی گواهینامه ssl بهم ریخته و وقتی آدرس سایتم را میزنم مرورگر اخطار میده که این سایت امن نیست و سایت باز نمیشه. بجای آیکون سبز رنگ هم آیکون اخطار قرمز کنار url نشان میده.
      لطفا کمک کنید این مشکل را برطرف کنم. ممنونم
    • توسط mahsa98
      سلام دوستان. من از افزونه acf  برای نمایش برخی اطلاعات استفاده میکنم. ولی میخوام نمایش این اطلاعات رو یکم زیبا و منظم و مرتب کنم. مثلا تو یه کادر قرار بگیره، رنگشون تغییر کنه و ....
      میشه از شورتکد استفاده کرد؟ مثلا تو ویژوال کامپوزر یا صفحه ساز خود قالبم اون فرمی که میخوام رو بسازم بعد این اطلاعات رو نمایش بدم؟
       اگه نمیشه چطوری باید بهشون استایل دلخواهم رو بدم؟
      خواهش میکنم دوستانی که تواناییش رو دارن کمکم کنن خیلی کارم گیره
    • توسط mahsa98
      سلام دوستان. من میخوام صفحه جزییات محصول رو در ووکامرس سفارشی سازی کنم. تا حدودی موفق شدم ولی افزونه تخصصی برای اینکار هست؟
      و سوال مهم هم اینه که مکان دکمه افزودن به سبد خرید رو میخوام تغییر بدم. میشه راهنماییم کنین؟ به کد هم خیلی مسلط نیستم
      ممنون♥