Html and Css & Jsآموزش

Electric Border Effect ⚡ | HTML & CSS

💎 @Htmlcss_channels | #css #JavaScript #HTML

Icon library with 3000 icons for web and mobile

https://github.com/Richard9394/MingCute


💎 @Htmlcss_channels | #css #JavaScript #HTML

Rotating 3D Slider

The logic of the slider is implemented in JS. Stylized and animated in SCSS.

👉  code


💎 @Htmlcss_channels | #css #JavaScript #HTML

🔰 Container queries in CSS

If you have not tried out container queries yet, would highly recommend that you do

This is a relatively new CSS feature, which is similar to media queries. While media queries are based on the dimension of the entire page, container queries are specific to individual elements in a page.

👉 Here we define a "container" and conditionally style elements inside the container based on the dimensions of the container

👉 Some other examples include, when you want to style an individual card based on its size

💎 @Htmlcss_channels | #css #JavaScript #HTML

◀️ابزارهای آنلاین CSS

ساختن وب‌سایت‌های زیبا لازم نیست کار سختی باشه این ابزارهای آنلاین CSS آنلاین کار توسعه‌دهندگان را راحت می‌کنه


💎 @Htmlcss_channels | #css #JavaScript #HTML

🎮 CSS Hell: 15 challenging CSS puzzles

Test your CSS skills with 15 tricky puzzles where you need to align pegs with their corresponding holes by adding the right CSS properties to divs. Each puzzle presents a visual challenge that requires creative use of CSS to solve.

👉Think you know CSS? This game will put your skills to the test with increasingly difficult challenges that will make you think outside the box.

Try it out and see how many puzzles you can solve!

https://csshell.com/

💎 @Htmlcss_channels | #css #JavaScript #HTML

You can make the UI cleaner by reducing or removing scrollbars using the scrollbar-width property

Example of a thin scrollbar :

ul {
  scrollbar-width: thin;
}

Example of a hidden scrollbar (the area remains scrollable):

.cards-container {
  scrollbar-width: none;
}

Suitable for sidebars, data tables, chat panels, dashboards with lots of scrolls, carousels, touch interfaces.

As a result, the scroll works, but the UI looks neater.


💎 @Htmlcss_channels | #css #JavaScript #HTML

Social media card


💎 @Htmlcss_channels | #css #JavaScript #HTML

💡با این ابزار هر مدل چیدمان‌ CSS Grid را بدون یک خط کد بسازید


ردیف‌ها، ستون‌ها، فاصله‌ها رو تنظیم می‌کنی و در لحظه کد آماده CSS رو برمی‌داری و استفاده می‌کنی.


https://cssgridgenerator.io/

💎 @Htmlcss_channels | #css #JavaScript #HTML

Dots in Circle | HTML CSS JavaScript



💎 @Htmlcss_channels | #css #JavaScript #HTML

⭐️ Container Queries — a new way to make layouts responsive.

Before: @media rules reacted to screen width (e.g. under 768px → smaller font).
Problem: components behave differently in cards, sidebars, modals — viewport alone isn’t enough.

Container Queries let CSS adapt to a parent’s size, not the whole screen.

➡️ Example:

.card { container-type: inline-size; }

@container (max-width: 400px) {
.card-title { font-size: 1rem; }
}

How it works
• Mark a container with container-type.
• Use @container to style elements inside it.
• Components adapt to parent width, no global media hacks.
• Cleaner CSS, fewer JS tweaks, local responsive behavior.

📌 Supported natively in modern browsers — truly component-based CSS.


💎 @Htmlcss_channels | #css #JavaScript #HTML

⏩The :empty pseudo-class in CSS is used to select elements that do not contain child elements or text content.

This pseudo-class is useful for styling elements that have no content within them.

➡️For example, you can use :empty to hide or change the style of elements that do not contain text or other content


💎 @Htmlcss_channels | #css #JavaScript #HTML

➡️Racing Car | HTML CSS JavaScript



💎 @Htmlcss_channels | #css #JavaScript #HTML

⏩CSS Generators to save you hours of work:

1. Blob maker
http://blobmaker.app

2. Getwaves
http://getwaves.io

3. CSS Button Generator
http://markodenic.com/tools/buttons-…

4. Gradient generator
http://cssgradient.io

5. Glassmorphism
http://glassmorphism.com

6. Neumorphism
http://neumorphism.io

7. Pattern generator
http://patternify.com

8. css3 generator
http://css3generator.com

9. Clip Path Maker
http://bennettfeely.com/clippy


💎 @Htmlcss_channels | #css #JavaScript #HTML

❇️Creative Glowing Loader | CSS Animation



💎 @Htmlcss_channels | #css #JavaScript #HTML

➡️Hover to reveal part of background image

As the mouse moves, JavaScript updates the position of the .magic element to center it relative to the cursor, and CSS provides styling and animation.


👉 code


💎 @Htmlcss_channels | #css #JavaScript #HTML

Javascript shorthands


💎 @Htmlcss_channels | #css #JavaScript #HTML