body {
    margin: 0;
    padding: 0;
    background: lightblue;
}

div {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background: #3AC371;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.white {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #fff;
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}


.white::before {
    content: "";
    top: 65px;
    left: -15px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    position: absolute;
    transform: rotate(-50deg) rotateX(-55deg);
}

.white::after {
    content: "";
    top: 63px;
    left: -4px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent #3AC371 transparent transparent;
    position: absolute;
    transform: rotate(-51deg) rotateX(-50deg);
}

.fas {
    left: 17px;
    top: 18px;
    position: absolute;
    font-size: 35px;
    color: #fff;
    transform: rotate(90deg);
}

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


💎 Channel: @htmlcss_channels

Smoke | HTML CSS



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

💎 Channel: @htmlcss_channels

HTML & CSS


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

💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels

Simple implementation of Dropdown Menu in HTML & CSS

HTML:

  <div class="dropdown">
    <button class="dropbtn">Menu</button>
    <div class="dropdown-content">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
  </div>

CSS:

.dropdown {
  position: relative;
  left: 200px;
  top: 200px;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

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

💎 Channel: @htmlcss_channels

Instagram Logo |  HTML CSS


اگه این پست برای شما مفید بوده با لایک و ری اکشن بهمون انرژی بدید ❤️

💎 Channel: @htmlcss_channels

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.insta {
  width: 150px;
  height: 150px;
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  border-radius: 35px;
  display: grid;
  place-items: center;
}

.innerbox {
  width: 120px;
  height: 120px;
  border: 10px solid #fff;
  border-radius: 32px;
  display: grid;
  place-items: center;
  position: relative;
}

.innerbox::before {
  content: "";
  width: 45px;
  height: 45px;
  border: 10px solid #fff;
  border-radius: 50%;
  background: transparent;
  position: absolute;
}

.innerbox::after {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 8px;
  right: 10px;
}

💎 Channel: @htmlcss_channels

💻 حفظ کردن کدهای برنامه‌نویسی کار دشواریه و دشوارتر از اون جستجو به دنبال یک تکه کد خاص میان انبوهی از کدهاست ، نیازی به این کارها نیست چون به راحتی می‌تونید با استفاده از یک برگه تقلب به کدهای مورد نظرتون برسید
این چیت شیت ها رو سیو کنید برای پروژه هاتون خیلی مفیده

🔖برگه تقلب HTML و XHTML

HTML XHTML Tag Sheet
HTML Cheat Sheet

🔖برگه تقلب HTML5

HTML5 Cheat Sheet

🔖برگه تقلب HTML5 Canvas

HTML5 Canvas Cheat Sheet

🔖برگه تقلب CSS
CSS Cheat Sheet
CSS 2 Cheat Sheet
CSS 3 Cheat Sheet

🔖برگه تقلب JavaScript

JavaScript Cheat Sheet


♨️ چیت شیتهای بیشتری لازم دارید ؟؟ با لایک اطلاع بدید که بازم بفرستم 👍

#cheat_sheet

💎 Channel: @htmlcss_channels

نقشه راه فرانت‌اند (Front-end) به زبان فارسی

ترجمه از AliRadmanesh


#roadmap


💎 Channel: @htmlcss_channels

New Animation | HTML CSS



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

💎 Channel: @htmlcss_channels

Style Elements | HTML CSS



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

💎 Channel: @htmlcss_channels

♦️از اونجایی که از چیت‌شیت ها استقبال خوبی داشتید و هدف این کانال هم اینه که تمامی ابزارهای طراحی و توسعه سایت در دسترس شما عزیزان باشه که با تمرین و انجام دادن پروژه های مختلف مهارت هاتون رو ارتقا بدید ، یه پکیج کاربردی از برگه های تقلب 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