سجاد عزیززاده

sajjeo.com

روش ساخت فلیپ باکس (flipbox) ساده فقط با html و css

نحوه ساخت فلیپ باکس | سجاد عزیززاده

خب خیلیا دوست دارن یا بعضی وقتا واقعا نیاز دارن کد html و css رو بزنن و یه سکشنی رو بسازن.

توی این مطلب روش ساخت خیلی ساده با html و css رو میگم که خیلی راحت فلیپ باکس رو بسازین.

خب بدون فوت وقت میرم سروقت ساختنش.

اولین کار اینه که HTML و ساختارشو بسازیم.

کد HTML رو من به صورت زیر نوشتم:

<div class="flip-card-sajjeo">
  <div class="flip-card-inner-sajjeo">
    <div class="flip-card-front-sajjeo">
    
      <img src="https://sajjeo.com/wp-content/uploads/2020/12/DHRM1084-640x640.jpg" alt="sajjad-azizzadeh" style="width:300px;height:300px;filter: grayscale(1);">
<h1 class="h1-flipcard-sajjeo" style="
    /* position: absolute; */
    /* width: 100%; */
    /* height: 100%; */
    /* backdrop-filter: blur(4px); */
">سجاد هستم و این یه فلیپ کارت هستش</h1>
    </div>
    <div class="flip-card-back-sajjeo">
      <h1>سجاد عزیززاده</h1> 
      <p>اینجا یه المان پاراگراف گذاشتم</p> 
      <p>سایت من : sajjeo.com</p>
    </div>
  </div>
</div>

css رو هم به صورت زیر نوشتم:

.flip-card-sajjeo {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  display: block;
  margin: auto;
  border-radius: 10px;
}

.flip-card-inner-sajjeo {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 10px;
}

.flip-card-sajjeo:hover .flip-card-inner-sajjeo {
  transform: rotateY(180deg);
}

.flip-card-front-sajjeo, .flip-card-back-sajjeo {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front-sajjeo {
  background-color: #bbb;
  color: black;
  border-radius: 10px;
  overflow: hidden;
}

.flip-card-back-sajjeo {
  background-color: #eff5fa;
  color: black;
  transform: rotateY(180deg);
  border-radius: 10px;
}

h1 {
  padding-top:20px;
}

.h1-flipcard-sajjeo {
  position: absolute;
  /* width: 100%; */
  /* height: 100%; */
  /* backdrop-filter: blur(4px); */
  color: white;
  bottom: 2%;
  text-shadow: 0px 4px 10px rgba(0,0,0,1);
}

در نتیجه چیزی که خواهید دید به صورت زیر خواهد بود

sajjad-azizzadeh

سجاد هستم و این یه فلیپ کارت هستش

سجاد عزیززاده

اینجا یه المان پاراگراف گذاشتم

سایت من : sajjeo.com

در نتیجه چیزی که خواهید دید به صورت زیر خواهد بود.


میتونید کلاس کدهای css رو عوض کنید (در این صورت باید html رو هم عوض کنید.)


حرف آخر

البته کاملا مشخصه این روزها اینقدر پلاگین و اینها هستش که نیازی نیست شما html و css خام بزنید برای یه flipbox ساده! اما دونستنش و لاجیکش همیشه کمک میکنه بهتر متوجه بشید.


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

می‌خوام کامنت بذارم 👇:

ایمیل شما نمایش داده نمیشه اصلا مطمئن باشین.