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

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط noorian
      سلام دوستان
      من درحال طراحی یک افزونه هستم ، و افزونه با فایل استایل با پسوند css سازگار نیست (style.css) پس مجبور شدم فایل استایل رو با پسوند php ایجاد کرده و در فایل اصلی افزونه فراخوانی کنم (include style.php)
       
      اما وقتی افزونه رو نصب میکنم ارور زیر رو میده :
      این افزونه 2405 حرف از خروجی غیرمنتظره در طول فعال‌سازی تولید کرد. اگر پیام اخطار “headers already sent” ، مشکلات مربوط به خوراک‌های پیوند یا مسائل دیگر را دریافت کردید، این افزونه را غیرفعال یا حذف کنید.
      چطوری این مشکل رو رفع کنم؟

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