آموزش طراحی یک تصویر Hero در سایت
تکنیک Hero header در طراحی سایت چیست؟
در این مقاله می آموزید که چطور با استفاده از CSS و Html یک تصویر Hero ایجاد کنید.
توجه : تصویر Hero ، یک تصویر بزرگ بهمراه متن می باشد ، و اغلب در بالای صفحه وب قرار میگیرد:
قدم اول : کد HTML را اضافه کنید.
مثال :
آموزش حرفه ای طراحی سایت
آنلاین و حضوری
Page Content..
قدم دوم : کد CSS را اضافه کنید.
مثال :
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://articles.tahlildadeh.com/image.axd?picture=1_15.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-text button:hover {
background-color: #555;
color: white;
}
نمونه مثال Hero Image:
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">آموزش حرفه ای طراحی سایت</h1>
<p>آنلاین و حضوری</p>
<button>ثبت نام</button>
</div>
</div><p>سرفصل دوره..</p>
خروجی Hero Image
