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

تکنیک Hero header در طراحی سایت چیست؟

آموزش CSS

آموزش طراحی یک تصویر 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  

 تکنیک Hero header در طراحی سایت چیست؟
  • 77
  •    0
  • تاریخ ارسال :   1400/01/11

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .