سودو المنت

طراحی منحنی المنت های HTML

احتمالا طراحی ها زیادی را دیده اید که قسمت پایین یا بالای آن به صورت شب دار طراحی شده است. سعی می کنم واضح تر بیان کنم. فرض کنید یک header دارید و پس از آن یک div. در حالت پیش فرض وقتی header تمام می شود به صورت یک خط صاف با div جدا می شود. حالا ما می خواهیم از یک خط صاف معمولی به شکل یک منحنی شیب دار باشد. با استفاده از روش های مختلف می شود این کار را انجام داد. یکی از متداول ترین روش ها استفاده از pseudo-element است روش دیگر استفاده از css clip است و البته روش های دیگر. روش اول یا همان pseudo-element از بهترین هاست که در اینجا سعی می کنم به طور کامل توضیح دهم.

اگر هنوز متوجه منظورم نشده اید عکس زیر را ببینید.

 

آنچه که باید انجام دهیم

اول از همه به صورت تئوری توضیح می دهم که برای رسیدن به این هدف چه کاری باید انجام دهیم.فرض کنید که در ابتدای صفحه المنت header داریم. (فرقی نمی کند نام المنت ما چی باشد مثلا div یا section یا هر چیز دیگری.) می خواهیم انتهای این المنت به جای یک خط صاف به صورت شیب دار باشد. مقدار مهمی که باید به المنت header بدهیم relative است. بعد از آن برای header سودو المنت after تعریف می کنیم که باید مقدار absolute داشته باشد و با استفاده از ویژگی هایی مانند transform مدلی را که می خواهیم را بدست می آوریم.
نگران نباشید، می دونم که به نظر پیچیده شد! به صورت عملی کدها را می نویسم و توضیح میدهم و پس از آن کاملا روش کار را درک خواهید کرد.

تگ های اچ تی ام ال را به صورت زیر داریم


    <header>
      <h2>انتهای هدر شیب دار</h2>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </header> 
  

کدهای استایل


header{
	position: relative;
	background-color: #5d8aa8;
	padding: 50px;
}
/* سودو المنت بعد از هدر */
header::after{
	content: "";
	position: absolute; /* فیکس کردن المنت */
	top: 0; /* فاصله از بالا */
	left: 0; /* فاصله از چپ */
	width: 100%; /* کل عرض هدر را پوشش می دهد */
	height: 100%; /* کل ارتفاع هدر را پوشش می دهد */
	background-color: #5d8aa8; /* رنگ پس زمینه همرنگ هدر */
	transform-origin: bottom left; /* مبدا شروع پایین چپ */
	transform: skewY(4deg); /* چهار درجه چرخش */
	z-index: -5; /* المنت در زیر قرار می گیرد */
}
h2 {
	margin: 0;
	padding-bottom: 20px;
	text-align: center;
	color: #fff;
}

p {
	line-height: 2;
	text-align: center;
	color: #fff;
} 

پیشنهاد می کنم که خودتان کدها را تست کنید و نتیجه کار را به صورت عملی ببینید. این نوع طراحی در سایت های زیادی استفاده شده است و دانستن آن برای توسعه دهنده ی فرانت اند ضروری است.
دراین آموزش سعی کرده ام که فقط تگ ها و استایل های ضروری را بنویسم. اما برای زیباتر شدن کار چندتا تگ اضافی و استایل اضافی هم نوشتم که مطمئنا خودتان متوجه آن ها شده اید. تگ های h2 و p در HTML و ویژگی padding که به header داده شده است صرفا جهت زیباتر شدن کار است.

نویسنده: سعید پناهی

طراح و توسعه دهنده وب، رابط کاربری. فرانت اند. علاقه مند به یادگیری و آموزش

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

احتمالا از اینها هم خوشتون بیاد

آموزش css3

آموزش دستورات خاص و کاربردی در CSS3

در این مقاله تعدادی از دستورات جالب و کاربردی در CSS3 را بررسی می کنیم. دستوراتی که کمتر در مورد آن ها صحبت می شود اما دانستن آنها مهم و در طراحی کمک بزرگی به ما می کند. خوب پس در ادامه با من همراه باشید.

کارگاه آموزشی طراحی وب

کارگاه آموزشی طراحی و توسعه وب سایت به صورت پروژه محور و کارگاهی

بررسی واحدهای REM -EM – VH- VW و تفاوت بین آنها

برای مدت های طولانی طراحان و توسعه دهندگان وب سایت ها برای اندازه گذاری فونت، حاشیه و یا هر عنصر دیگری از واحد px که نشان دهنده پیکسل بود استفاده می کردند. اما امروزه با توجه به گسترش استفاده از دستگاه های مختلف مانند موبایل و تبلت برای نمایش وب سایت ها لزوم استفاده از واحدهایی که کنترل بیشتری به توسعه دهنده و طراح بدهد بیشتر شد. از این رو واحدهای rem و em تقریبا جای واحد px را گرفت.