ایجاد شیب در عناصر با CSS3

استفاده از عناصر شیب دار و غیر صاف در طراحی وب همیشه جالب و هیجان‌انگیز است. اشکال زاویه دار و خطوط مورب می‌توانند جریان بصری جالبی را ایجاد کرده و هیجان غیر قابل انتظاری در بیننده ایجاد کنند.


در این مقاله از لیداوب با الهام از طرح‌های عالی، چند نمونه مثال ساده از این نوع طراحی و روش‌های انجام آن با استفاده از CSS آورده شده است.

نمونه اول

ایجاد شیب در عناصر با CSS3

در مثال اول، می‌خواهیم یک چینش کاملا نرمال با یک پیچش کوچک داشته باشیم یعنی می‌خواهیم بین عناصر تفکیک مورب ایجاد شود. ما با چرخاندن دربرگیرنده های article‌های محتوا، به این هدف می‌رسیم اما به دلیل اینکه نمی‌خواهیم محتوا هم بچرخد، هر article را به حالت قبل برمی‌گردانیم.

مارک آپ

می‌خواهیم بخشی برای تمام محتوای خود ایجاد کرده و به آن چند واحد با کلاس se-slope اضافه کنیم. هر یک از آن‌ها دارای یک article و تیتر و متن خواهند بود:

<section class="se-container">
	<div class="se-slope">
		<article class="se-content">
			<h3>Some headline</h3>
			<p>Some text</p>
		</article>
	</div>
	<div class="se-slope">
		<!-- ... -->
	</div>
	<!-- ... -->
</section>

حالا استایل را بررسی می‌کنیم.

نقش CSS

بدنه دارای همان رنگ پس زمینه مشابه با تمام عناصر زوج se-slope خواهد بود که صورتی است. این رنگ برخی از لبه‌های عناصر چرخانده شده را مخفی می‌کند:

body{
	background: #e90089;
}

Wrapper اصلی مخفی خواهد بود چون ما می‌خواهیم عناصر چرخیده شده را به روشی قرار دهیم که مجزا باشند بنابراین به این طریق عمل می‌کنیم:

.se-container{
	display: block;
	width: 100%;
	overflow: hidden;
	padding-top: 150px;
}

واحدها همگی چرخیده خواهند شد: واحدهای فرد به رنگ سیاه بوده و پنج درجه خواهند چرخید و واحدهای زوج به رنگ صورتی بوده و منفی پنج درجه می‌چرخند. به دلیل این چرخش، باید جایگذاری عناصر فرد را به همان شکلی که می‌خواهیم انطباق دهیم. بنابراین، یک حاشیه منفی در بالا اضافه می‌کنیم تا آن‌ها را بالا بکشد:

.se-slope{
	margin: 0 -50px;
	transform-origin: left center;
}
.se-slope:nth-child(odd){
	background: #000;
	transform: rotate(5deg);
	margin-top: -200px;
	box-shadow: 0px -1px 3px rgba(0,0,0,0.4);
}
.se-slope:nth-child(even){
	background: #e90089;
	transform: rotate(-5deg);
	box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;
}

حالا می‌خواهیم مقاله را در مرکز قرار دهیم:

.se-content{
	margin: 0 auto;
}

بیایید به تیتر یک ظاهر متفاوت بدهیم. برای این کار شبه عناصر :before و :after را برای ایجاد مثلث نامتقارن روی هر دو طرف با استفاده از مرز نامرئی به کار می‌بریم:

.se-content h3{
	font-size: 60px;
	position: relative;
	display: inline-block;
	padding: 10px 30px 8px 30px;
	height: 80px;
	line-height: 80px;
	margin-bottom: 20px;
	font-family: 'Bitter', 'Trebuchet MS', Arial;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.se-slope:nth-child(odd) .se-content h3{
	background: #e90089;
	color: #000;
}
.se-slope:nth-child(even) .se-content h3{
	background: #000;
	color: #e90089;
}
.se-content h3:before{
	content: '';
	width: 0;
	height: 0;
	border-top: 38px solid transparent;
	border-bottom: 60px solid transparent;
	border-right: 60px solid black;
	position: absolute;
	left: -59px;
	top: 0px;
}
.se-content h3:after{
	content: '';
	width: 0;
	height: 0;
	border-top: 38px solid transparent;
	border-bottom: 60px solid transparent;
	border-left: 60px solid black;
	position: absolute;
	right: -59px;
	top: 0px;
}

حالا رنگ عناصر فرد را تنظیم می‌کنیم:

.se-slope:nth-child(odd) .se-content h3:before,
.se-slope:nth-child(odd) .se-content h3:after{
	border-right-color: #e90089;
	border-left-color: #e90089;
}

استایل پاراگراف به این صورت خواهد بود:

.se-content p{
	width: 75%;
	max-width: 500px;
	margin: 0 auto;
	font-style: italic;
	font-size: 18px;
	line-height: 24px;
	padding-top: 10px;
}

می‌توانیم با سلکتور :first-letter اولین کلمه را به شکل متفاوتی استایل بدهیم:

.se-content p:first-letter{
	font-size: 40px;
	font-family: 'Adobe Garamond Pro', Georgia, serif;
}

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

.se-slope:nth-child(odd) .se-content{
	transform: rotate(-5deg);
	color: #e90089;
	padding: 130px 100px 250px 100px;
}
.se-slope:nth-child(even) .se-content{
	transform: rotate(5deg);
	color: #000;
	padding: 150px 100px 250px 100px;
}

نمونه دوم

ایجاد شیب در عناصر با CSS3

در مثال دوم فقط از ترفند مرز نامرئی و چند شبه عنصر برای ایجاد یک ساختار فلش مانند استفاده می‌کنیم.

مارک آپ

در مثال دوم، همان ساختار مثال اول را داریم به جز برخی از کلاس‌ها یعنی با توجه به رنگی که بخواهیم هر واحد داشته باشد از کلاس‌های sl-slope-black یا sl-slope-pink استفاده می‌کنیم:

<section class="se-container">
	<div class="se-slope sl-slope-black">
		<article class="se-content">
			<h3>Some headline</h3>
			<p>Some text</p>
		</article>
	</div>
	<div class="se-slope sl-slope-pink">
		<!-- ... -->
	</div>
	<!-- ... -->
</section>

ایجاد استایل با CSS

کانتینر دارای همان استایل قبل و بدنه دوباره دارای رنگ پس زمینه صورتی خواهد بود:

body{
	background: #e90089
}
.se-container{
	display: block;
	width: 100%;
	overflow: hidden;
	box-shadow: 0px 0px 10px #000;
}

واحد‌های شیب دار به صورت جاری بوده و آن‌ها را در کنار یکدیگر قرار می‌دهیم بنابراین عرض باید ۵۰ درصد تعیین شود:

.se-slope{
	width: 50%;
	height: 300px;
	position: relative;
	float: left;
	overflow: hidden;
}

حالا به محتوا کمی پدینگ اضافه می‌کنیم:

.se-slope .se-content{
	margin: 50px 100px 0px 100px;
}

حالا به واحدهای سیاه و صورتی، رنگ پس زمینه می‌دهیم:

.se-slope-black{
	background: #000;
}
.se-slope-pink{
	background: #e90089;
}

بنابراین، هر عنصر سیاه دارای استایل شبه عنصر :after برای شکل فلش مانند خود خواهد بود. عناصر سیاه فرد، فلش را به سمت چپ و عناصر زوج آن را به سمت راست نشانه می‌روند:

.se-slope-black:nth-child(odd):after,
.se-slope-black:nth-child(even):after{
	content: '';
	position: absolute;
	bottom: 0px;
	width: 0px;
	height: 0px;
	border-top: 150px solid transparent;
	border-bottom: 150px solid transparent;
}
.se-slope-black:nth-child(odd):after{
	border-right: 60px solid #e90089;
	right: 0px;
}
.se-slope-black:nth-child(even):after{
	border-left: 60px solid #e90089;
	left: 0px;
}

حالا به تیترها استایل داده و به آن‌ها رنگ پس زمینه می‌دهیم:

.se-content h3{
	z-index: 10;
	font-size: 30px;
	margin-top: 60px;
	position: relative;
	display: inline-block;
	padding: 15px 20px;
	line-height: 40px;
	font-family: 'Bitter', 'Trebuchet MS', Arial;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.se-slope.se-slope-black h3{
	background: #e90089;
}
.se-slope.se-slope-pink h3{
	background: #000;
}

حالا با استفاده از :after و :before به انتهای تیتر کمی شکل متفاوت بدهیم:

.se-slope.se-slope-black h3:after,
.se-slope.se-slope-black h3:before,
.se-slope.se-slope-pink h3:after,
.se-slope.se-slope-pink h3:before{
	content: '';
	width: 0px;
	height: 0px;
	top: 0px;
	position: absolute;
}
.se-slope.se-slope-black h3:after{
	border-top: 70px solid transparent;
	border-left: 30px solid #e90089;
	right: -30px;
}
.se-slope.se-slope-black h3:before{
	border-bottom: 70px solid transparent;
	border-right: 30px solid #e90089;
	left: -30px;
}
.se-slope.se-slope-pink h3:after{
	border-top: 70px solid transparent;
	border-right: 30px solid #000;
	left: -30px;
}
.se-slope.se-slope-pink h3:before{
	border-bottom: 70px solid transparent;
	border-left: 30px solid #000;
	right: -30px;
}

ما از پاراگراف به عنوان یک عنصر تزئینی استفاده می‌کنیم. پاراگراف‌هایی که در سمت چپ هستند پانزده درجه چرخیده و آن‌هایی که سمت راست هستند منفی پانزده درجه خواهند چرخید:

.se-content p{
	position: absolute;
	z-index: 9;
	opacity: 0.3;
	font-size: 50px;
	text-align: left;
	transform-origin: top center;
}
.se-slope:nth-child(even) .se-content p{
	transform: rotate(-15deg);
	top: -100px;
	right: -50px;
	text-align: left;
	width: 95%;
}
.se-slope:nth-child(odd) .se-content p{
	transform: rotate(15deg);
	top: -100px;
	left: -50px;
	text-align: right;
	width: 90%;
}
.se-slope.sl-slope-pink .se-content p{
	color: #000;
}

مطالعه مقالات بیشتر در لیداوب:

به همین راحتی. امیدوارم از آموزش امروز لذت برده باشید. مقالات مشابه در زمینه CSS را می‌توانید در لیداوب دنبال کنید.

برچسب ها