السبت، 27 يناير 2018

احصل على هذة الاداة من هنا

هيدر قابل للتعديل بتقنية css



السلام عليكم ورحمة
الله وبركاته
--
 نقدم لكم في هذه التدوينة هيدر احترافي يمكنك تعديل كما تشاء فقط عن طريق css






طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    2. ضع الكود التالي فوق الناف بار navbar (اختياري)

<div class="Header">
  <div class="Header-background"></div>
  <div class="Header-content">
    <div class="Header-hero">
<h1>هذا النص هو مثال لنص يمكن<br>أن يستبدل...</h1>
      <p>هناك حقيقة مثبتة منذ زمن طويل</p>
      <button class="Button">انضم الينا</button>
    </div>
    <div class="Header-visuals">
      <div class="Iphone"></div>
    </div>
  </div>
</div>


      1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي
    .Header {
      position: relative;
      height: 80vh;
      display: block;
    }
    .Header-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(https://cdn.lynda.com/course/124401/124401-636413470858176166-16x9.jpg);
      -webkit-transform-origin: 0px 0px;
              transform-origin: 0px 0px;
      -webkit-transform: skewY(-10deg);
              transform: skewY(-10deg);
      overflow: hidden;
      z-index: -1;
    }
    .Header-background::before,
    .Header-background::after {
      display: block;
      position: absolute;
      content: '';
      width: 80%;
      height: 33.333333333333336%;
      opacity: 0.3;
      -webkit-filter: blur(15px);
              filter: blur(15px);
    }
    .Header-background::before {
      background: var(--color-1);
      right: 0;
    }
    .Header-background::after {
      background: var(--color-2);
      bottom: 0;
    }
    .Header-content {
      text-align: center;
      padding: 4rem 4rem;
      margin: 0 auto;
    }
    @media (min-width: 58rem) {
      .Header-content {
        text-align: right;
        padding: 10rem 4rem;
        max-width: 68rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }
    }
    .Header-hero h1,
    .Header-hero p {
      color: #fff;
      text-shadow: 0 0.5rem 1rem rgba(50,0,100,0.1);
    }
    .Header-hero h1 {
      margin: 0;
      font-size: 3rem;
      direction: rtl;
    }
    .Header-hero p {
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }
    .Header-visuals {
      position: relative;
      margin-top: 5rem;
      -webkit-transform: rotate(-10deg);
              transform: rotate(-10deg);
    }
    @media (min-width: 58rem) {
      .Header-visuals {
        margin: 0;
        -webkit-transform: translateY(-5rem) rotate(-10deg);
                transform: translateY(-5rem) rotate(-10deg);
      }
    }
    .Button {
      font-family: droid arabic kufi;
      padding: 1.5rem 2rem;
      border: 0;
      color: var(--color-3);
      font-size: 1.2rem;
      font-weight: bold;
      background: #fff;
      border-radius: 3px;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      cursor: pointer;
      -webkit-box-shadow: 0 1.75rem 2rem -0.4rem rgba(50,0,100,0.15);
              box-shadow: 0 1.75rem 2rem -0.4rem rgba(50,0,100,0.15);
    }
    .Button:hover {
      color: var(--color-4);
      -webkit-box-shadow: 0 1.75rem 3rem 0rem rgba(50,0,100,0.1);
              box-shadow: 0 1.75rem 3rem 0rem rgba(50,0,100,0.1);
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
    }
    .Button:active {
      -webkit-box-shadow: 0 1.75rem 2.5rem -0.2rem rgba(50,0,100,0.125);
              box-shadow: 0 1.75rem 2.5rem -0.2rem rgba(50,0,100,0.125);
      -webkit-transform: scale(1.025);
              transform: scale(1.025);
    }
    .Iphone {
      display: inline-block;
      background: #fff;
      padding: 4rem 0.6rem 0;
      border-radius: 2rem;
      -webkit-box-shadow: -1rem 1.75rem 2rem -0.4rem rgba(50,0,100,0.1), -0.2rem 0.2rem 0.5rem rgba(50,0,100,0.05), inset 0.5rem -0.5rem 0.5rem -0.4rem rgba(50,0,100,0.1);
              box-shadow: -1rem 1.75rem 2rem -0.4rem rgba(50,0,100,0.1), -0.2rem 0.2rem 0.5rem rgba(50,0,100,0.05), inset 0.5rem -0.5rem 0.5rem -0.4rem rgba(50,0,100,0.1);
      text-align: center;
    }
    .Iphone::before,
    .Iphone::after {
      content: '';
      display: block;
    }
    .Iphone::before {
      background-color: var(--color-3);
         background-image: url(https://s-media-cache-ak0.pinimg.com/originals/5c/df/8b/5cdf8bc59aec34ba665a832176eeeadd.jpg);
        width: 16rem;
        padding-top: 177.5%;
        background-size: 100% 100%;
    }
    .Iphone::after {
      display: inline-block;
      margin: 0.6rem;
      padding: 1.4rem;
      border: 1px solid #f1f1f1;
      border-radius: 2rem;
      -webkit-box-shadow: inset -0.05rem 0.05rem 0.5rem 0rem rgba(50,0,100,0.05);
              box-shadow: inset -0.05rem 0.05rem 0.5rem 0rem rgba(50,0,100,0.05);
    }
    




    EmoticonEmoticon