استفاده از css3 در قالب

[hamid80 10]

من یک موقعیت جدید ایجاد کردم به نام buser حالا قصد دارم از یک box shadow ویژه برای این کار استفاده بکنم

یک چیزی شبیح این عکس بشه

کدی که برای buser در فایل template.css گذاشتم اینه

#b-user4{
 height:200px;
 width:240px;
 border-radius:5px;
 background-color:#fff;  
 float:left;
 margin-left:5px;
 overflow:hidden;    


}

در این سایت اموزشی برای اینکار دیدم ولی متاسفانه موفق به انجام این کار نشدم که یک چیزی شبیح این در بیارم

How to create slick effects with CSS3 box-shadow - RedTeamDesign

ممنون می شوم کد بالا ی که من استفاده کردم را یک جوری ویراش کرد که یک چیزی شبیح این در بیاد باتشکر

[hamid80 10]

دوستان و اساتید ممنون می شوم در این رابطه راهنمایی بکنید که چه طور می شه از این css برای قالب و موقعیتی که من تعریف کردم استفاده کرد با تشکر و تبریک پیشاپیش ولادت

[qaem 10]

سلام

این خط رو اضافه کنید

box-shadow: 3px 3px 10px 5px #000;

[hamid80 10]

مرسی این خط و اضافه کردم اون shadow که می خواستم نشد نشد

[bestboy7 14]

اگه اشتباه نکنم همچین سایه ای نمیتونید بدید با css. این عکسی که گذاشتید در واقع یک تصویر ساخته شده است که به بکگراند دایو اون موقعیت داده میشه و شما به این طریق میتونید این کار رو بکنید. والا با css فقط میشه سایه مستقسم داد نه منحنی

[hamid80 10]

بین این سایت اموزش را دداده ولی من نحوه شخصی سازی این کد برای قالب خودم بلد نیستم

CSS drop-shadows without images – Nicolas Gallagher

[bestboy7 14]

حمیدجان درسته این هم گویا تکنیکی از انقلاب css3 هست. اونقد css3 گسترده و پر کاربرد شده که فک میکنم هر روز چیزهای بهتری اضافه بشه تا جایی که بی نیاز از هر کسی در صفحاب طراحی قالبمون بشه

من لینکی رو که دادید چک کردم و مطالعه کردم. اگه دقیقا همون استایل سایه رو میخواید من استایلش رو واستون نوشتم. کلاسی رو به اسم class1 تعریف کردم که خودت میتونی عوضش کنی. اسن کلاس 3 تیکه کدنویسی داره که هر سه باید وجود داشته باشه تا این حالت از سایه ایجاد بشه

.class1 {
position:relative;
float:left;
width:20%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
border-radius:10px;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.class1:before,
.class1:after {
content:"";
position:absolute;
z-index:-2;
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
max-height:100px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.class1:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}

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

دو قسمت بعد واسه به تولید سایه است که مربوط به :after و :before هست توی تغییرات اون دقت کن و با سعی و خطا سعی کن تنظیماتش رو بفهمی اگه هم همونیه که میخوای که اون دوقسمت رو اصلا دست نزن

ویرایش شده در اردیبهشت 92 توسط bestboy7

[hamid80 10]

ممنون اون کدی که شما دادی من این طوری ویرایش کردم هیچ چیزی نمایش داده نشد

#b-user1{
 height:200px;
 width:240px;
 border-radius:5px;
 background-color:#fff;
 float:left;
 overflow:hidden;  
-moz-border-radius: 5px;
border-radius: 5px;



#b-user1 {
position:relative;
float:left;
width:20%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
border-radius:10px;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
#b-user1:before,
#b-user1:after {
content:"";
position:absolute;
z-index:-2;
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
max-height:100px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
#b-user1:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}


}

ویرایش شده در خرداد 92 توسط hamid80

[bestboy7 14]

دوست عزیز اولا من که موفق نشدم دموی سایت شما رو ببینم تا بررسی کنم واستون. اما:

اول اینکه شما بجای کلاس دارید id تعریف میکنید یعنی باید دایوی رو بسازید که id اون به اسم b-user1 باشه و محتویات خودتون رو درون اون دایو قرار بدید

<div id="b-user1">
</div>

مورد بعدی من عرض کردم اگه میخواید تغییری مثل طول و عرض بدید درون قسمت اون b-user1 # قرار بدید نه اینکه جداگانه به همون اسم استایلی دیگه بنویسید.

در انتها من با همین نامهای خودتون و با همان طول و عرضی که خواستید استایل رو اصلاح کردم و علاوه بر اون یک دایو ساده به همراه یک نوشته درون یک فایل html قرار دادم که با اجرای اون سایه بخوبی اجرا میشه. این نمونه رو ببینید و اگه سوالی داشتید بپرسید

[ATTACH]3646[/ATTACH]