Overflow

تکنیک های CSS

1 پست در این موضوع قرار دارد

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

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

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

اولین مثال که میخوام بزنم ایجاد روبان با استفاده از CSS3

به عکس زیر توجه کنید :

84706933513907361405.jpg

بنابرین شما در این مثال یاد میگیرید چگونه روبان ایجاد کنید بدون هیچگونه تصویر و حداقل نشانه گذاری HTML

HTML CODE

<html>
<head>
<title></title>
<link href="2.css" type="text/css" rel="stylesheet"></link>
</head>

<body>
<div id="wrapper">
<div id="box">

<h1>WP-Parsi</h1>
</div><!-- ./box -->
</div><!-- ./wrapper -->
</body>
</html>

CSS Code

#wrapper{
position: relative;
margin:0 auto 0 auto;
padding: 75px 0px 0px 0px;
width: 500px;
}
#box{
width: 400px;
padding: 20px;
border: 2px solid black;
border-radius:8px;

}

h1{
text-align: center;
position: relative;
color: #fff;
margin: 0 -30px 30px -30px;
padding: 10px 0;
text-shadow: 0 1px rgba(0,0,0,.8);
background: #5c5c5c;
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
-moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
box-shadow: 0 2px 0 rgba(0,0,0,.3);
}

h1:before, h1:after
{
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
}

h1:before
{
border-width: 0 10px 10px 0;
border-right-color: #222;
left: 0;
}

h1:after
{
border-width: 0 0 10px 10px;
border-left-color: #222;
right: 0;
}

17

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط shayan.m
      سلام
      وقت بخیر
      در فوتر سایت دوستم اگر اشتباه نکرده باشم 4 یا 5 تا ابزارک هست چطوری تعداد ابزارک های فوتر 3 تا کنم و یک اندازه مثل سایت میهن وردپرس
      آدرس سایت دوستم
      srcabad.com
      میخوام مثل فوتر سایت میهن وردپرس تعداد ابزارک های فوتر 3 تا شود و یک اندازه مثل سایت میهن وردپرس
    • توسط shayan.m
      سلام
      وقت بخیر
      ابعاد عرض سایت دوستم نمی دونم چند هست ولی میخوام به 1280px به صورت صحیح و کامل و ریسپانسیو تغییر پیدا کند باید چی کار کنم؟
    • توسط shayan.m
      سلام
      وقت بخیر
      موقعیت سایدبار سایت من هم صفحه محصول و صفحه نوشته ها سمت چپ می باشد میخوام موقیعت سایدبار هر دو سمت راست باشد؟؟
    • توسط shayan.m
      سلام
      وقت بخیر
      دوستان عزیز مشاهده وب سایت میهن وردپرس کنید در قسمت فوتر وب سایت میهن وردپرس یک قسمت هست با نام اجتماعی باشیم می خواهم با توجه به تصویر زیر و اون سایت دقیق و مثل تصویر زیر انجام بدید من کد نویسی بلد نیستم یکی از دوستان لطفا بهم کدش بده و بگه کجا قرار بدم درست کند و بهم بده
      مرسی مرسی مرسی مرسی مرسی مرسی
      مشابه تصویر زیر:

    • توسط chetorir
      با سلام و وقت بخیر خدمت تمام استاتید و دوستان عزیز؛
      من یک وب سایت دارم که موقع بررسی سئو سایت در یک بخشی نوشته نسبت متن به حجم کدهای HTML کم و باید بیشتر بشه. توی فروم های مختلف گشتم و چیز درست حسابی پیدا نکردم. وب سایت بنده با وردپرس نوشته شده و 26 تا افزونه روی سایت نصبه محتوای تولید شده هم معمولا کمتر از 1000 واژه نبوده.
      بعضی ها میگفتن باید فاصله کد ها رو برداری و ... من از افزونه wp-rocket (موشک وردپرس) استفاده میکنم تونستم با کمک همین انجمن گرید A رو بگیرم حالا نمیدونم چه کاری باید انجام بدم.
      ممنون میشم بنده رو راهنمایی کنید یا اینکه منبعی رو معرفی کنید این مشکل رو برطرف کنم.
      آدرس سایت بنده : bonianservice.com
      با تشکر