استفاده از باکس شدو برای قسمت مطالب

[hamid80 0]

با سلام عرض تبریک به مناسبت ولادت امام حسين(ع)

بنده قصد دارم برای قسمت contents  یک باکس شدو ویژه تعریف کنم ولی متاسفانه موفق به انجام این کار نشدم یکی به من گفت باید حتما جکوری تعریف کنید ایا با استفاده از css  این امکان نیست بشه قسمت مطالب سایت یک با کس شدو به این صورت بگیره

قصد دارم شبیح این عکس بشه قسمت مطالبم

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

 
#contents {
background:none repeat scroll 0 0 #FFFFFF
  width:495px;
  height:auto;
  margin:0 auto;
  border-radius:1px;  
  float:left;
  margin-left:5px;
  overflow:hidden;
       padding-left:2.3px;



    border-radius: 5px 5px 5px 5px;


    /*overflow: hidden;*/

    position: relative;

  
}
#contents:before {
    transform: skew(0deg, 4deg);
    -moz-transform: skew(0deg, 4deg);
    -webkit-transform: skew(0deg, 4deg);
    box-shadow: 5px 5px 5px #000000;
    -moz-box-shadow: 5px 5px 5px #000000;
    -webkit-box-shadow: 5px 5px 5px #000000;
    background-color: black;
    bottom: 0px;
    content: "";
    height: auto;
    position: absolute;
    right: 9px;
    width: 477px;
    z-index: -1;
}

#contents:after {
    transform: skew(0deg,-4deg);
    -moz-transform: skew(0deg,-4deg);
    -webkit-transform: skew(0deg,-4deg);
    box-shadow: -5px 5px 5px #000000;
    -moz-box-shadow: -5px 5px 5px #000000;
    -webkit-box-shadow: -5px 5px 5px #000000;
    background-color: black;
    bottom: 0;
    position: absolute;
    content: "";
    width: 477px;
    height: auto;
    left: 9px;
    z-index: -1;
}

ادرس سایت

persian-learn.ir/demo

[mortaza_max 57]

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

[محمدحسین میری 3,094]

درود

 

قبلن چنین سوالی رو پاسخ داده شده

جستجو کنید...

[hamid80 0]

من میخواهم اگه شد با استفاده از css این کارو بکنم

[hamid80 0]

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

خوب ممنون می شوم این کار برای سایت منم بکنید و بگین از چه کدی برای این کار استفاده کردین

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

[mortaza_max 57]

دوست عزیز ابتدا یه چنین عکسی با فتوشاپ بسازین و با فرمت png ذخیره کنید.

 

یادتون باشه عرض این عکس باید هم عرض با باکسمون باشه. , و در پوشه عکس قالبتون قرار بدین

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

 

#box{
background: #fff url(../images/boxbg.png) no-repeat bottom
};

 box رو که نوشتم نام موقعیتمونه.

boxbg نام عکسیه که ساختیم.

#fffهم رنگ زمینه بالایی عکس هست که بهتره هم رنگ با زمینه عکسی که به قسمت پایین موقعیت میدیم باشه.

[hamid80 0]

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

[mortaza_max 57]

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

[hamid80 0]

من بخش contents را به عنوان موقعیت تعریف نکردم بلکه برای گذاشتن مطلب تعریف کردم فکر کنم اگر موقعیت بود با کد بالا مشکلم حل می شد

[mortaza_max 57]

خب میونی برای content هم بک گراند تعریف کنی!!!!

[hamid80 0]

من امدم تو قسمت contents این ویژگی دادم چیزینمایش داده نشد

#contents {
background:none repeat scroll 0 0 #FFFFFF
  width:495px;
  height:auto;
  margin:0 auto;
  border-radius:1px;  
  float:left;
  margin-left:5px;
  overflow:hidden;
       padding-left:2.3px;



    border-radius: 5px 5px 5px 5px;


    /*overflow: hidden;*/

    position: relative;

  
}
#contents:before {
    transform: skew(0deg, 4deg);
    -moz-transform: skew(0deg, 4deg);
    -webkit-transform: skew(0deg, 4deg);
    box-shadow: 5px 5px 5px #000000;
    -moz-box-shadow: 5px 5px 5px #000000;
    -webkit-box-shadow: 5px 5px 5px #000000;
    background-color: black;
    bottom: 0px;
    content: "";
    height: auto;
    position: absolute;
    right: 9px;
    width: 477px;
    z-index: -1;
}

#contents:after {
    transform: skew(0deg,-4deg);
    -moz-transform: skew(0deg,-4deg);
    -webkit-transform: skew(0deg,-4deg);
    box-shadow: -5px 5px 5px #000000;
    -moz-box-shadow: -5px 5px 5px #000000;
    -webkit-box-shadow: -5px 5px 5px #000000;
    background-color: black;
    bottom: 0;
    position: absolute;
    content: "";
    width: 477px;
    height: auto;
    left: 9px;
    z-index: -1;
}

 

[mortaza_max 57]

background:none repeat scroll 0 0 #FFFFFF

 

تو این قسمت عکست رو معرفی نکردی که.

به این شکل وارد کن.

 

background: #ffffff url(../images/box.bg) no-repeat bottom;

 اینطوری عکست فقط در قسمت پایین contents قرار میگیره و تکرار نمیشه و قسمت های دیگه سفید میشه.

[hamid80 0]

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

[mortaza_max 57]

با Css هم میشه باکس شادو داد ولی فک نکنم بشه به این شکل گوشه ها را شادو داد.

 

برای شادو دادن با سی اس اس از دستور box-shadow استفاده میکنند.

[hamid80 0]

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

#contents

#contents:before

#contents:after

کد از نظر منطقی اروری نداره کد بالا ولی نمایش داده نمیشه دلیلش را نمی دانم