ایجاد اشکال غیر منتظم با css [بایگانی]

Mr Code

دوشنبه 09 مرداد 1391, 21:55 عصر

سلام
به چه صورت می شه با css شکلی مشابه قسمت سبز عکس زیر که به شکل ذوزنقه است ایجاد کرد.

90511

با تشکر

Mohsen.

دوشنبه 09 مرداد 1391, 22:05 عصر

فکر کنم با استفاده از جدول. به اینصورت که عرض هر ردیف از ردیف بالایی خودش کمتره.

aminghaderi

سه شنبه 10 مرداد 1391, 05:40 صبح

سلام.
این یکی از امکانات CSS 3 هست ، ولی به راحتی اجرای یک فرمان همچین شکلی بدست نمی آید ، فکر کنم طراح این صفحه کمی خلاق بوده ، که یکی از ویژگی های یه طراح خوب هست.
یه مثال کوتاه می زنم امیدوارم مفید باشه :

<head >
<title></title>

<style type="text/css">

.Main
{
overflow:hidden;
width:400px;
height:200px;
text-align:center;
color:White;
font-family:Tahoma;
font-size:12px;

}
.MyDiv {
width: 200px;
height: 100px;
background-color:red;
margin: 0px 0px 0px -30px;
-ms-transform:skewX(-30deg); /* اینترنت اکسپلورر */
-moz-transform:skewX(-30deg); /* فایرفاکس */
-o-transform:skewX(-30deg); /* اپرا */
-webkit-transform:skewX(-30deg); /* کرم*/
}
</style>

</head>
<body>
<div class="Main">
<div class="MyDiv">این هم یه پنل ذوزنقه</div>
</div>
</body>

bade saba

سه شنبه 10 مرداد 1391, 09:37 صبح

سلام.
این یکی از امکانات CSS 3 هست ، ولی به راحتی اجرای یک فرمان همچین شکلی بدست نمی آید ، فکر کنم طراح این صفحه کمی خلاق بوده ، که یکی از ویژگی های یه طراح خوب هست.
یه مثال کوتاه می زنم امیدوارم مفید باشه :

سلام
روش جالبی بود دوست عزیز اما این فقط در firefox ذوزنقه رو ایجاد میکنه
در IE یک مستطیل هستش و در کروم یک متوازی الاضلاع که چون سمت چپش بیرون افتاده به اون شکل دیده میشه

90522

aminghaderi

سه شنبه 10 مرداد 1391, 10:02 صبح

اما این فقط در firefox ذوزنقه رو ایجاد میکنه
سلام ، خواهش می کنم.
اون مرورگر وسطی در عکس زمیمه شده توسط شما رو نفهمیدم چی هست؟! (البته مطمئن نیستم)
برای ie هم نمی دونم مرورگر شما چه نسخه ای هست ، ولی من فکر می کنم الان از آخرین نسخه ie9 با اخرین آپدیت استفاده می کنم ، اجرا می شود ، اتفاقا مثال رو بر مبنای اون زدم.
90524

همون طوری که در کد ها هم کامل مشخص کردم ، در مررگر های اصلی که شامل (اینترنت اکسپلورر ، فایرفاکس اپرا ، کرم) می شود ، تست و اینجا قرار داده شد.

bade saba

سه شنبه 10 مرداد 1391, 10:18 صبح

ورژن IE من هم 9 هستش اما شکل به صورت ذوزنقه دیده نمیشه ، در مورد کروم هم با تغییر مارجین مشکل حل نشد، شکل کلا متوازی الاضلاعه بیاریدش وسط صفحه کاملا مشخصه اما برای فایر فاکس به این شکل نیست و کلا شکل ذوزنقه هستش

aminghaderi

سه شنبه 10 مرداد 1391, 10:30 صبح

پس درست فهمیدم کرم بود ، کرم شما احتمالا قدیمی هست ، چون برای من شکلش فرق می کنه.
برای ذوزنقه بودن ، درست متوجه شدید ، اصلا چیزی به عنوان ذوزنقه نداریم ، این همون متوازی الاضلاع هست که قستمی از اون رو مخفی کردم و برای همین هم بالا نوشتم :

ولی به راحتی اجرای یک فرمان همچین شکلی بدست نمی آید ، فکر کنم طراح این صفحه کمی خلاق بوده
شاید هم دستوری باشه ، ولی حقیقا من ندیدم.
اتفاقا شکل بالا هم ذوزنقه هست ، الان تصویری می گیرم و در تصویر نشون می دم.
90529

Saber Mogaddas

سه شنبه 10 مرداد 1391, 10:56 صبح

سلام
بله معمولا دستورات css3 در ie با مشکل برخورد میکنند که برای حل اون ما از فایل Pie.htc استفاده می کنیم که در بیشتر دستورات جواب می گیریم..بخصوص در این دستوری که آقای امین براتون قرار دادند..
در مورد Pie می تونید تو همین تالار جستجو کنید آموزش کافی موجود هست ..
روش دیگه که دردسر ساپورت ie رو نداره استفاده از تصاویر در قسمت های غیر عمود هست به این صورت که قسمت هایی که توسط css قابل پیاده سازی نیستند رو برش داده و در قسمت های دیگه از رنگ پس زمینه استفاده کنیم به مثال زیر توجه کنید(دیو های تو در تو) :
90530

توسط سه دیو و یک تصویر :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#Shape-Wraper
{
width:200px;
height:84px;
margin:auto;
}
#SW-L
{
width:144px;
height:84px;
background-color:#ff0000;
float:left;
}
#SW-R
{
width:56px;
height:84px;
background-image:url('Untitled-1_03.png');
background-repeat:no-repeat;
float:left;
}
</style>
</head>
<body>
<div id="Shape-Wraper">
<div id="SW-L"></div>
<div id="SW-R"></div>
</div>
</body>
</html>

موفق باشید..

bade saba

سه شنبه 10 مرداد 1391, 11:36 صبح

خوب یه کدی پیدا کردم که این باگها رو نداره و از کدهایی که دوستان هم لطف کردن گذاشتن راحتتره

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

#trapezoid {
border-top: 100px solid red;
border-left: 0px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
</style>
</head>
<body>
<div id="trapezoid">
</div>
</body>
</html>

تو این پیچ هم کدهای مربوط به انواع و اقسام شکلها در css مثل ستاره و ... پیدا میشه
http://css-tricks.com/examples/ShapesOfCSS/

aminghaderi

سه شنبه 10 مرداد 1391, 21:18 عصر

سلام مجدد.

خوب یه کدی پیدا کردم که این باگها رو نداره و از کدهایی که دوستان هم لطف کردن گذاشتن راحتتره
به نظر شما با این کد شما قرار دادید می شه منوی بالا را طراحی کرد؟؟
اگر پاسختون مثبت هست ، لطفا یه نمونه کوچک بگذارید ، ببینیم امکانپذیر هست .

bade saba

چهارشنبه 11 مرداد 1391, 00:12 صبح

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
background-color:Gray;
}
#_divMain
{
position: relative;
top:100px;
margin-left:auto;
margin-right:auto;
width:800px;
height:1000px;
}
#_divObjectOne
{
position:absolute;
border-top: 500px solid yellow;
border-left: 0px solid transparent;
border-right: 150px solid transparent;
width: 300px;

}
#_divObjectTwo
{
position:absolute;
right: 96px;
top:119px;
border-bottom: 400px solid green;
border-left: 120px solid transparent;
border-right: 0px solid transparent;
width: 300px;

}
</style>
</head>
<body>
<div id="_divMain">
<div id="_divObjectOne"></div>
<div id="_divObjectTwo"></div>

</div>

</body>
</html>

فکر نمیکنم بقیش دیگه مشکل خاصی باشه کافیه فقط یه متوازی الاضلاع با کدایی مشابه کد خودتون بهش اضافه کنید.
موفق باشید

aminghaderi

چهارشنبه 11 مرداد 1391, 02:37 صبح

جالب بود.
نقطه قوتش هم این هست که زیاد پیچیدگی نداره و هم Cross Browser هست.
ممنون.

bahramch

چهارشنبه 20 شهریور 1392, 13:33 عصر

خوب یه کدی پیدا کردم که این باگها رو نداره و از کدهایی که دوستان هم لطف کردن گذاشتن راحتتره

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

#trapezoid {
border-top: 100px solid red;
border-left: 0px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
</style>
</head>
<body>
<div id="trapezoid">
</div>
</body>
</html>

تو این پیچ هم کدهای مربوط به انواع و اقسام شکلها در css مثل ستاره و ... پیدا میشه
http://css-tricks.com/examples/ShapesOfCSS/

با سلام
میشه کد رو توضیح هم بدین که چجور کار میکنه؟ هرچی میخونم درک نمیکنم:ناراحت:

Omid Jackson

چهارشنبه 20 شهریور 1392, 23:14 عصر

از دوست خوبمون bade saba (http://barnamenevis.org/member.php?74551-bade-saba) بابت لینکی که گذاشتن تشکر میکنم
خیلی خوب بود، البته مقدار کمی رو خوندم دیدم عالیه :لبخندساده::تشویق:
حالا خودم اومدم این ماه رو درست کردم:
110497
فقط با استفاده از یک div و بدون استفاده از هیچ عکسی
فقط رنگ

Omid Jackson

پنج شنبه 21 شهریور 1392, 17:57 عصر

من الآن یه کار دیگه هم انجام دادم با CSS
کد رو میذارم ببینین (http://jsfiddle.net/OmidJackson/zqq8p/)

bahramch

جمعه 22 شهریور 1392, 10:32 صبح

ممنون از اینهمه توجه که نشون دادین:افسرده:

Omid Jackson

جمعه 22 شهریور 1392, 12:59 عصر

ممنون از اینهمه توجه که نشون دادین:افسرده:
آخه واقعا اینجوری نمیشه توضیح داد
من هم کلی کد ها رو با inspect element غیرفعال کردم متوجه شدم چیکار کرده
برای border هم میشه قاب عکس رو مثال زد، شما هر سمت رو یه رنگ بدین متوجه میشین

Moien Tajik

یک شنبه 24 شهریور 1392, 21:53 عصر

این یه لینک دیگه شاید به دوستان کمک بکنه : http://www.howtocreate.co.uk/tutorials/css/slopes