PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : افکت دادن به گوشه ها به شکل فوق العاده زیبا ( کاغذ در کاغذ) !



jcs.w
2012/08/26, 03:07 AM
دورد . با یک آموزش اختصاصی و عالی دیگر در خدمت شما هستیمb-)
شما میتونید نمونه کد های دیکه ای رو در اینجا Tucked Corners | CSS-Tricks (http://css-tricks.com/snippets/css/tucked-corners/) ببینید اما تو این فقط گوشه های بالایی گرد شدن .
اما دمو : Awsome CSS Thucked Corners - jsFiddle (http://jsfiddle.net/vbiran/gjKxZ/)

__________________________________________________ _______________-

ما در اینجا دو تا div در نظر گرفتیم که یکیش برای بالا ها و یکیش هم برای پایین هاست.
div اول سلکتور after برای گوشه سمت چپ و سکلتور before برای گوشه سمت راست.
تو div دوم هم به همین شکل هست .
تگ p هم فقط جهت استایل دادن به نوشته استفاده شده .

__________________________________________________ ______________

استایل ها :


body {
background: #e6e6e6;
}

.balaha {
background: #f6f6f6;
height: 300px;
margin: 65px auto;
width: 300px;
position: relative;

}
.balaha:after,
.balaha:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
Bottom:285px;
width: 60px;

}
.balaha:after {
left: -40px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow:#666 0px 12px 10px -12px;
-moz-box-shadow:#666 0px 12px 10px -12px;
box-shadow:#666 0px 12px 10px -12px;
}
.balaha:before {
right: -40px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow:#666 0px 12px 10px -12px;
-moz-box-shadow:#666 0px 12px 10px -12px;
box-shadow:#666 0px 12px 10px -12px;
}
.paiinha:after,
.paiinha:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
top:285px;
width: 60px;
}
.paiinha:after {
left: -40px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-box-shadow:#666 0px 12px 10px -12px;
-moz-box-shadow:#666 0px 12px 10px -12px;
box-shadow:#666 0px 12px 10px -12px;
}
.paiinha:before {
right: -40px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-box-shadow:#666 0px 12px 10px -12px;
-moz-box-shadow:#666 0px 12px 10px -12px;
box-shadow:#666 0px 12px 10px -12px;
}


و سورس :

<div class="balaha"><div class="paiinha">
<center>
<p>وی بی ایران اولین و تنها مرجع ویبولتین در ایران </p>
</center>
</div></div>
موفق باشید :x

VBIran
2012/08/26, 08:37 AM
:o عالی بود :-bd

rkm4
2012/08/26, 09:46 AM
عالی بود ممنون

علی آقا اگه امکانش باشه به این پستم یه سر بزنید بد جوری توش موندم.
مشکل در زرین پال - صفحه 2 (http://www.vbiran.ir/thread39184-2.html#post295559)

2012/09/15, 10:09 PM
اول از همه بايد بگم عالي بود !


و بعد از اون من سايت وردپرس دارم براي اين كه تصاوير سايتم همه اين طوري شن بايد كد رو كدوم قسمت بگذارم ؟

style.css ?

jcs.w
2012/09/15, 10:20 PM
اول از همه بايد بگم عالي بود !


و بعد از اون من سايت وردپرس دارم براي اين كه تصاوير سايتم همه اين طوري شن بايد كد رو كدوم قسمت بگذارم ؟

style.css ?
این position چون relative هست ممکنه برای استفاده در همه عکس های سایت مشکل ایجاد کنه ولی میتونید برای تک عکس ازش استفاده کنید.
استایل هارو داخل style.css و سورس رو هرجا که میخواید قرار بدید.

savadkoohy
2012/09/15, 10:51 PM
من رو قالب نصب کردم اما اندازش بزرگه . بخوام طول و عرض رو تغییر بدم کدام کد رو تغییر بدم ؟

Xperian
2012/09/15, 11:01 PM
این چی هست؟ یه توضیح به ما که آماتوریم میدید ؟ :دی

P4NiSh3R
2012/09/15, 11:03 PM
این چی هست؟ یه توضیح به ما که آماتوریم میدید ؟ :دی


افکت دادن به گوشه ها به شکل فوق العاده زیبا

اما دمو : Awsome CSS Thucked Corners - jsFiddle (http://jsfiddle.net/vbiran/gjKxZ/)

Xperian
2012/09/15, 11:06 PM
یه توضیح دقیقتر میدید که این اسکریپتها رو دقیقا کجا باید بزاریم

jcs.w
2012/09/15, 11:13 PM
من رو قالب نصب کردم اما اندازش بزرگه . بخوام طول و عرض رو تغییر بدم کدام کد رو تغییر بدم ؟
این عدد هارو تغییر بدید :
.balaha


width:300px;



height:300px;

این رو هر چقدر تغییر دادید :

height:300px;

همون قدر که به 300 اضافه یا کم کردید تغییر رو به این دو هم اعمال کنید :
.paiinha:after,
.paiinha:before
.balaha:after,
.balaha:before


top:285px;
bottom:285px;

binam2012
2013/01/26, 07:12 PM
این کدهارو باید کجا بذاریم؟

tarenoco
2014/01/22, 12:58 PM
میشه توضیح بدید اگه من بخوام حالت این افکت رو تغییر بدم به چه صور میشه ممنون میشم