جهت ورود به تالار گفتمان سایت کلیک کنید


ساخت پنل اریب FlexBox با صورت Responsive

در این پست از سایت اسکریپت دات کام , قصد آموزش ساخت یک پنل اریب تمام صفحه با پراپرتی بسیار جدید Flex را دارم .

این بنل بدون استفاده از جی کوئری و جاوا اسکریپت و تمام آن به صورت Html5 و Css3 میباشد .

ضمنا این پنل به صورت کاملا ریسپانسیو میباشد .

در ادامه میتوانید علاوه بر آموزش , دموی آنلاین آن را مشاهده فرمایید .

ساخت پنل اریب FlexBox با صورت Responsive

برای ساخت فقط کافیست ابتدا کد html زیر را در بین تگ body سایت خود قرار دهید .

<main class="vms-flexbox">
  <section>
    <article class="vms-flexbox">
      <h2>اسکریپت دات کام</h2>
      <p>وحید مجیدی صدر</p>
    </article>
  </section>
  <section>
    <article class="vms-flexbox">
      <h2>اسکریپت دات کام</h2>
      <p>وحید مجیدی صدر</p>
    </article>
  </section>
  <section>
    <article class="vms-flexbox">
	  <h2>اسکریپت دات کام</h2>
      <p>وحید مجیدی صدر</p>
    </article>
  </section>
  <section>
    <article class="vms-flexbox">
      <h2>اسکریپت دات کام</h2>
      <p>وحید مجیدی صدر</p>
    </article>
  </section>
  <section>
    <article class="vms-flexbox">
      <h2>اسکریپت دات کام</h2>
      <p>وحید مجیدی صدر</p>
    </article>
  </section>
</main>

حال کد های زیر را در css خود وارد نمایید .

*{
  margin:0;
  padding:0;
}
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  background-color: black;
  font-family:tahoma;
}
main.vms-flexbox *{
	box-sizing:border-box;	
}
main.vms-flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 130%;
  margin-left: -15%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
@media (min-width: 630px) {
  main.vms-flexbox {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
main.vms-flexbox section:not(:first-child):not(:last-child):hover {
  -webkit-box-flex: 2;
  -webkit-flex: 2;
      -ms-flex: 2;
          flex: 2;
}
main.vms-flexbox section:not(:first-child):not(:last-child):hover:after {
  opacity: .8;
}
main.vms-flexbox section:not(:first-child):not(:last-child):hover article.vms-flexbox {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity .2s .2s, -webkit-transform .2s .2s;
  transition: opacity .2s .2s, -webkit-transform .2s .2s;
  transition: opacity .2s .2s, transform .2s .2s;
  transition: opacity .2s .2s, transform .2s .2s, -webkit-transform .2s .2s;
}
@media (min-width: 630px) {
  main.vms-flexbox section:not(:first-child):not(:last-child):hover article.vms-flexbox {
    -webkit-transform: translateY(0) skewX(-15deg);
            transform: translateY(0) skewX(-15deg);
  }
}

main.vms-flexbox section {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  width: 100%;
  height: 20vh;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: flex-grow .2s, opacity .2s, -webkit-box-flex .2s, -webkit-flex-grow .2s;
  transition: flex-grow .2s, opacity .2s, -webkit-box-flex .2s, -webkit-flex-grow .2s;
  transition: flex-grow .2s, opacity .2s;
  transition: flex-grow .2s, opacity .2s, -webkit-box-flex .2s, -webkit-flex-grow .2s, -ms-flex-positive .2s;
}
main.vms-flexbox section:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  -webkit-transition: width .2s, -webkit-transform .2s;
  transition: width .2s, -webkit-transform .2s;
  transition: transform .2s, width .2s;
  transition: transform .2s, width .2s, -webkit-transform .2s;
}
main.vms-flexbox section:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
}
@media (min-width: 630px) {
  main.vms-flexbox section {
    width: 20%;
    height: 100vh;
    margin-right: -1px;
    -webkit-transform: skewX(15deg) translateZ(0);
            transform: skewX(15deg) translateZ(0);
  }
  main.vms-flexbox section:before {
    left: -100%;
    width: 400%;
    -webkit-transform: skewX(-15deg);
            transform: skewX(-15deg);
  }
}
main.vms-flexbox section:nth-child(1):before {
  background-color: #e60000;
  background-image: url(images/bg-section--1.jpg);
}
.hide-images main.vms-flexbox section:nth-child(1):before {
  background-image: none;
}
main.vms-flexbox section:first-child:before, main.vms-flexbox section:last-child:before {
  background-color: #660000;
}
main.vms-flexbox section:first-child:after, main.vms-flexbox section:last-child:after {
  opacity: .5;
}
main.vms-flexbox section:first-child article.vms-flexbox, main.vms-flexbox section:last-child article.vms-flexbox {
  display: none;
}
main.vms-flexbox section:nth-child(2):before {
  background-color: #cc0000;
  background-image: url(images/bg-section--2.jpg);
}
.hide-images main.vms-flexbox section:nth-child(2):before {
  background-image: none;
}
main.vms-flexbox section:first-child:before, main.vms-flexbox section:last-child:before {
  background-color: #660000;
}
main.vms-flexbox section:first-child:after, main.vms-flexbox section:last-child:after {
  opacity: .5;
}
main.vms-flexbox section:first-child article.vms-flexbox, main.vms-flexbox section:last-child article.vms-flexbox {
  display: none;
}
main.vms-flexbox section:nth-child(3):before {
  background-color: #b30000;
  background-image: url(images/bg-section--3.jpg);
}
.hide-images main.vms-flexbox section:nth-child(3):before {
  background-image: none;
}
main.vms-flexbox section:first-child:before, main.vms-flexbox section:last-child:before {
  background-color: #660000;
}
main.vms-flexbox section:first-child:after, main.vms-flexbox section:last-child:after {
  opacity: .5;
}
main.vms-flexbox section:first-child article.vms-flexbox, main.vms-flexbox section:last-child article.vms-flexbox {
  display: none;
}
main.vms-flexbox section:nth-child(4):before {
  background-color: #990000;
  background-image: url(images/bg-section--4.jpg);
}
.hide-images main.vms-flexbox section:nth-child(4):before {
  background-image: none;
}
main.vms-flexbox section:first-child:before, main.vms-flexbox section:last-child:before {
  background-color: #660000;
}
main.vms-flexbox section:first-child:after, main.vms-flexbox section:last-child:after {
  opacity: .5;
}
main.vms-flexbox section:first-child article.vms-flexbox, main.vms-flexbox section:last-child article.vms-flexbox {
  display: none;
}
main.vms-flexbox section:nth-child(5):before {
  background-color: maroon;
  background-image: url(images/bg-section--5.jpg);
}
.hide-images main.vms-flexbox section:nth-child(5):before {
  background-image: none;
}
main.vms-flexbox section:first-child:before, main.vms-flexbox section:last-child:before {
  background-color: #660000;
}
main.vms-flexbox section:first-child:after, main.vms-flexbox section:last-child:after {
  opacity: .5;
}
main.vms-flexbox section:first-child article.vms-flexbox, main.vms-flexbox section:last-child article.vms-flexbox {
  display: none;
}

article.vms-flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  padding: 24px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  z-index: 1;
  -webkit-transition: opacity .2s, -webkit-transform .2s;
  transition: opacity .2s, -webkit-transform .2s;
  transition: opacity .2s, transform .2s;
  transition: opacity .2s, transform .2s, -webkit-transform .2s;
}
@media (min-width: 630px) {
  article.vms-flexbox {
    opacity: 0;
    -webkit-transform: translateY(24px) skewX(-15deg);
            transform: translateY(24px) skewX(-15deg);
  }
}

دموی آماده پنل

دانلود فایل آماده پنل

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

2 پاسخ به “ساخت پنل اریب FlexBox با صورت Responsive”

  1. مهدی گفت:

    سلام
    آقای مجیدی پنل اریب چه جاهایی قابل استفاده است؟

    • وحید مجیدی صدر گفت:

      سلام دوست عزیزم

      فقط به صورت سلیقه ای می باشد و برای جای خاصی نیست

      میتونید برای داشتن یک وب سایت تک صفحه ای از آن استفاده نمایید

پاسخ دادن به مهدی لغو پاسخ

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