مطالب اصلی

مطالب وبلاگ

آموزش سی اس اس : طراحی روبان گوشه ی باکس

آموزش سی اس اس : طراحی روبان گوشه ی باکس

با سلام در خدمتون هستم با آموزش سی اس اس  در این بخش با هم یک روبان برای گوشه باکس طراحی می کنیم.

قدم اول : کدنویسی ساختار باکس و روبان

<div id="box-wrp">
<div class="rooban-wrp">
<div class="rooban">1coder.blog.ir</div>
</div>
</div>

قدم دوم : استایل باکس 

#box-wrp {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  box-shadow:0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

قدم سوم : استایل روبان 

.rooban-wrp{
  width: 155px;
  height: 155px;
  overflow: hidden;
  position: absolute;
  top: -2px;
  right: -2px;
}

.rooban{
  font: bold 15px iransans;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  right: -32px;
  top: 22px;
  width: 162px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #312b28;
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.rooban:before, .rooban:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.rooban:before {
  left: 0;
}
.rooban:after {
  right: 0;
}   

نظرات۵

  1. http://tarbiyatenafs.ir/

    ملیحه :)

    سلام
    میشه کاری کرد برای کدهایی که فرستادم؟
  1. http://tarbiyatenafs.ir/

    ملیحه :)

    میشه به این کد ها قابلیت ریپلای زدن هم اضافه کنید؟
    که مثلا سایر کاربرا هم بتونن به بقیه نظرات جواب بدن...
  2. author

    ج . محمد

    شدنش که شاید بشه. ولی من نمیتونم فعلا...
  1. http://tarbiyatenafs.ir/

    ملیحه :)

    http://bayanbox.ir/info/5916232059499131302/%DA%A9%D8%AF%D9%86%D8%B8%D8%B1%D8%A7%D8%AA

  2. author

    ج . محمد

    سلام. کدهای بخش نمایش نظرات مشکلی نداره. ولی وقتی سایت تون رو بررسی کردم یه مشکل داشت یعنی اسکرپتی که وبلاگ های بیان برای مشخص کردن اینکه کاربری که داره سایت رو می بینه آیا وارد بخش مدیریت وبلاگ شده یا نه ؛ اگه شده ک از آواتارش استفاده کن برای بخش نظرات اگر نه هم که تصویر پیش فرض رو نشون بده. " این اسکریپت رو سایت تون اجرا نمیشه!!!! یعنی مشخص نمیکنه کاربر نظردهنده وارد سیستم شده یا نه." برا همین قسمت نظرات شما تصویر پیش فرض رو نشون میده.از بخش تنظیمات پیشرفته ؛ فرم نظرات یکی دیگه رو تست کنید.
  1. http://tarbiyatenafs.ir/

    ملیحه :)

    سلام...
    قالب سایت من یه مشکلی داره...کسایی ک تو بیان عضو هستن وقتی برام نظر میذارن با اسم و اواتار خودشون نمیتونن باشن...چکار باید بکنم تا این مشکل حل بشه؟
  2. author

    ج . محمد

    سلام. باید کدهای بخش کامنت قالب تون رو ببینم. می تونید از بخش زیر کپی کنید. برام بفرستید.لطفا کدهای مورد نظر رو توی فایل تکست ذخیره ، آپلود کنید و لینک رو برام بفرستید.(اگه زیاد نیست لازم نیست آپلود کنید همینجا بفرستید. فقط  کدهاتون رو بین دو تگ قرار بدهید بعد بفرستید. تگ <pre><code>codetoon ro inja bezarid</code></pre>)
    ویرایش قالب  : ساختار قالب : قسمت <post_detail>  : قسمت <post_comments>  کدهای مربوط به این بخش زو برام بفرستید.
  1. http://tarbiyatenafs.ir/

    ملیحه :)

    سلام
    یه سوال داشتم میخوام بدونم میشه
    قالب های بیان رو جوری کرد که قابلیت پاسخ دادن به نظرات از طرف کاربرا وجود داشته باشه؟؟اگه اره چطور؟
    لطفا راهنماییم کنید.
    سپاس
  2. author

    ج . محمد

    سلام. 
    خود بلاگ بیان همچین امکانی رو نداره. شاید با کدنویسی میشه همچین کاری کرد.

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی

ابزارک ها

بالا