رفتن به مطلب

تکنیک های CSS


پست های پیشنهاد شده

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

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

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

اولین مثال که میخوام بزنم ایجاد روبان با استفاده از 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;
}

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...