تکنیک های CSS

Overflow · اردیبهشت 91

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

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

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

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

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

بنابرین شما در این مثال یاد میگیرید چگونه روبان ایجاد کنید بدون هیچگونه تصویر و حداقل نشانه گذاری 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;
	}

ورود

تکنیک های CSS

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

Overflow 57

لینک به ارسال

لطفا برای ارسال دیدگاه وارد شوید

فهرست بخش ها

فعالیت ها