20931
ادمین : @Maryam3771 تعرفه تبلیغات: https://t.me/alloadv/822
HTML & CSS & JS
💎 Channel: @htmlcss_channels
با ری اکشن بهم انرژی بدید تا پست های هیجان انگیز بیشتری براتون بذارم ❤️
💎 Channel: @htmlcss_channels
با ری اکشن بهمون انرژی بدید❤️
#page404
💎 Channel: @htmlcss_channels
Buttons | HTML CSS
با ری اکشن بهمون انرژی بدید❤️
💎 Channel: @htmlcss_channels
پروژه Makar Sankranti با استفاده از 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();
♦️از اونجایی که از چیتشیت ها استقبال خوبی داشتید و هدف این کانال هم اینه که تمامی ابزارهای طراحی و توسعه سایت در دسترس شما عزیزان باشه که با تمرین و انجام دادن پروژه های مختلف مهارت هاتون رو ارتقا بدید ، یه پکیج کاربردی از برگه های تقلب CSS3 براتون پیدا کردم که امیدوارم استفاده کنید و براتون مفید باشه
♨️ چیت شیتهای بیشتری لازم دارید ؟؟ با لایک اطلاع بدید که بازم بفرستم 👍 اگه هم چیت شیتی دارید که می خواهید با دوستاتون به اشتراک بذارید پی وی برام بفرستید
#cheat_sheet
💎 Channel: @htmlcss_channels
Style Elements | HTML CSS
با ری اکشن بهمون انرژی بدید❤️
💎 Channel: @htmlcss_channels
نقشه راه فرانتاند (Front-end) به زبان فارسی
ترجمه از AliRadmanesh
#roadmap
💎 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;
}
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>
.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;
}
Smoke | HTML CSS
با ری اکشن بهمون انرژی بدید❤️
💎 Channel: @htmlcss_channels
امیدوارم مطالب کانال براتون مفید باشه🙏
با ری اکشن نظرتون رو اعلام کنید و برای ادامه فعالیت به ما انگیزه بدید❤️
💎 Channel: @htmlcss_channels
نقشه راه توسعه دهنده وب
#roadmap
💎 Channel: @htmlcss_channels
Navigation-tabs | HTML & CSS & JS
💎 Channel: @htmlcss_channels
صفحه 404 یکی از صفحه های سایت است که کمتر کسی به آن اهمیت می دهد، غافل از اینکه طراحی این صفحه می تواند به سئوی سایت کمک کند. جدا از بحث سئو، هنگامی که به هر دلیلی صفحه مورد نظر مخاطب با مشکل مواجه شد بهتر است به جای دیدن صفحه بی رنگ 404 سرور، با یک صفحه جذاب رو به رو شود که او را به صفحه اصلی سایت هدایت می کند.
در پست بعد فایل های این قالب جذاب رو می فرستم برای حمایت از ما لطفا ری اکشن بذارید❤️
💎 Channel: @htmlcss_channels
نکات و ترفندهای CSS برای حرفه ای ها
💎 Channel: @htmlcss_channels
Display Emojis Using HTML
➤ <h1> 😎 </h1> 😎
➤ <h1> 🙂 </h1> 😊
➤ <h1> 😍 </h1> 😍
➤ <h1> 🤬 </h1> 🤬
➤ <h1> 😂 </h1> 😂
➤ <h1> 😈 </h1> 😈
➤ <h1> 🤡 </h1> 🤡
➤ <h1> 😴 </h1> 😴
➤ <h1> 🤑 </h1> 🤑
Creates a horizontally scrollable image gallery | HTML & CSS
با ری اکشن بهمون انرژی بدید❤️
💎 Channel: @htmlcss_channels
😀کولاک تخفیفات تا 2 روز دیگر پابرجاست🎁
جامعترین دوره علم داده با گواهینامه دانشگاه تهران
🔤🔤🔤🔤 🔤🔤🔤🔤🔤🔤🔤
برای بیست و هشتمین بار با ۳۵۰ ساعت آموزش کاربردی❤️
15 سرفصل و 12 نرم افزار و ابزار تخصصی
شروع دوره 0️⃣1⃣اسفند2⃣0️⃣4⃣1⃣
روز های برگزاری:پنجشنبه ها از ۸:۳۰ الی ۱۷:۳۰
با تدریس مطرحترین اساتید دیتایی کشور
🎓گواهینامه معتبر دو زبانه با قابلیت ترجمه رسمی و امکان استعلام از دانشگاه تهران✔️
🌐اطلاعات بیشتر
➡️https://tehrandata.org/courses/datascience
⁉️دریافت مشاوره رایگان و ثبت نام✔️
📞 09377516759
💬 t.me/tehrandata_admin
🌐 t.me/tehran_data
📷 instagram.com/tehran_datascience
New Animation | HTML CSS
با ری اکشن بهمون انرژی بدید❤️
💎 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
Instagram Logo | HTML CSS
اگه این پست برای شما مفید بوده با لایک و ری اکشن بهمون انرژی بدید ❤️
💎 Channel: @htmlcss_channels
HTML & CSS
با ری اکشن بهمون انرژی بدید❤️
💎 Channel: @htmlcss_channels
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);
}