♦️از اونجایی که از چیت‌شیت ها استقبال خوبی داشتید و هدف این کانال هم اینه که تمامی ابزارهای طراحی و توسعه سایت در دسترس شما عزیزان باشه که با تمرین و انجام دادن پروژه های مختلف مهارت هاتون رو ارتقا بدید ، یه پکیج کاربردی از برگه های تقلب CSS3 براتون پیدا کردم که امیدوارم استفاده کنید و براتون مفید باشه

♨️ چیت شیتهای بیشتری لازم دارید ؟؟ با لایک اطلاع بدید که بازم بفرستم 👍 اگه هم چیت شیتی دارید که می خواهید با دوستاتون به اشتراک بذارید پی وی برام بفرستید

#cheat_sheet

💎 Channel: @htmlcss_channels

Creates a horizontally scrollable image gallery | HTML & CSS


با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

<div class="gallery-container">
  <div class="thumbnails"></div>
  <div class="scrollbar">
    <div class="thumb"></div>
  </div>
  <div class="slides">
    <div><img src="https://picsum.photos/id/1067/540/720"></div>
    <div><img src="https://picsum.photos/id/122/540/720"></div>
    <div><img src="https://picsum.photos/id/188/540/720"></div>
    <div><img src="https://picsum.photos/id/249/540/720"></div>
    <div><img src="https://picsum.photos/id/257/540/720"></div>
    <div><img src="https://picsum.photos/id/259/540/720"></div>
    <div><img src="https://picsum.photos/id/283/540/720"></div>
    <div><img src="https://picsum.photos/id/288/540/720"></div>
    <div><img src="https://picsum.photos/id/299/540/720"></div>
  </div>
</div>
.gallery-container {
  display: flex;
  justify-content: center;
}

.thumbnails {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.thumbnails img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.scrollbar {
  width: 1px;
  height: 720px;
  background: #ccc;
  display: block;
  margin: 0 0 0 8px;
}

.thumb {
  width: 1px;
  position: absolute;
  height: 0;
  background: #000;
}

.slides {
  margin: 0 16px;
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  width: calc(540px + 1rem);
  padding: 0 0.25rem;
  height: 720px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.slides > div {
  scroll-snap-align: start;
}

.slides img {
  width: 540px;
  object-fit: contain;
}

.slides::-webkit-scrollbar {
  display: none;
}
const slideGallery = document.querySelector('.slides');
const slides = slideGallery.querySelectorAll('div');
const scrollbarThumb = document.querySelector('.thumb');
const slideCount = slides.length;
const slideHeight = 720;
const marginTop = 16;

const scrollThumb = () => {
  const index = Math.floor(slideGallery.scrollTop / slideHeight);
  scrollbarThumb.style.height = `${((index + 1) / slideCount) * slideHeight}px`;
};

const scrollToElement = el => {
  const index = parseInt(el.dataset.id, 10);
  slideGallery.scrollTo(0, index * slideHeight + marginTop);
};

document.querySelector('.thumbnails').innerHTML += [...slides]
  .map(
    (slide, i) => `<img src="${slide.querySelector('img').src}" data-id="${i}">`
  )
  .join('');

document.querySelectorAll('.thumbnails img').forEach(el => {
  el.addEventListener('click', () => scrollToElement(el));
});

slideGallery.addEventListener('scroll', e => scrollThumb());

scrollThumb();

با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

Display Emojis Using HTML

➤ <h1> &#128526; </h1> 😎
➤ <h1> &#128578; </h1> 😊
➤ <h1> &#128525; </h1> 😍
➤ <h1> &#129324; </h1> 🤬
➤ <h1> &#128514; </h1> 😂
➤ <h1> &#128520; </h1> 😈
➤ <h1> &#129313; </h1> 🤡
➤ <h1> &#128564; </h1> 😴
➤ <h1> &#129297; </h1> 🤑

با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

پروژه Makar Sankranti با استفاده از Html و Css
  
  
برای ارسال مطالب بیشتر مانند این پست  با ری اکشن بهمون انرژی دهید ❤️


💎 Channel: @htmlcss_channels

نکات و ترفندهای CSS برای حرفه ای ها


💎 Channel: @htmlcss_channels

Buttons | HTML CSS


با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels

صفحه 404 یکی از صفحه های سایت است که کمتر کسی به آن اهمیت می دهد، غافل از اینکه طراحی این صفحه می تواند به سئوی سایت کمک کند. جدا از بحث سئو، هنگامی که به هر دلیلی صفحه مورد نظر مخاطب با مشکل مواجه شد بهتر است به جای دیدن صفحه بی رنگ 404 سرور، با یک صفحه جذاب رو به رو شود که او را به صفحه اصلی سایت هدایت می کند.

در پست بعد فایل های این قالب جذاب رو می فرستم برای حمایت از ما لطفا ری اکشن بذارید❤️

💎 Channel: @htmlcss_channels

با ری اکشن بهمون انرژی بدید❤️

#page404

💎 Channel: @htmlcss_channels

Navigation-tabs | HTML & CSS & JS


💎 Channel: @htmlcss_channels

با ری اکشن بهم انرژی بدید تا پست های هیجان انگیز بیشتری براتون بذارم ❤️

💎 Channel: @htmlcss_channels

نقشه راه توسعه دهنده وب

#roadmap

💎 Channel: @htmlcss_channels

HTML & CSS & JS


💎 Channel: @htmlcss_channels

امیدوارم مطالب کانال براتون مفید باشه🙏

با ری اکشن نظرتون رو اعلام کنید و برای ادامه فعالیت به ما انگیزه بدید❤️

💎 Channel: @htmlcss_channels

HTML & CSS

💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels

با ری اکشن بهم انرژی بدید تا پست های هیجان انگیز بیشتری براتون بذارم ❤️

💎 Channel: @htmlcss_channels

Gradient | HTML CSS


امیدوارم مطالب کانال براتون مفید باشه🙏

با ری اکشن نظرتون رو اعلام کنید ❤️

💎 Channel: @htmlcss_channels