Flex Slider

Animated slider of cards with information. Implemented using Vue.

⤷ code


🆔 @htmlcss_channels

از کجا برای فرانت اند مقاله بخونیم؟ این سایت میتونن منبع های خفنی برات باشن

1- css-tricks.com
یکی از بهترین منابع های برای یادگیری css و ترفند های خفن

2- smashingmagazine.com
مقاله های کاربردی فرانت اند , طراحی , UX و .....

3- dev.to
پلتفرم برای توسعه دهنده ها که خودشون مقاله منتشر میکنن

4- frontendmentor.io
مخصوص تمرین واقعی با پروژه های و نکات های طراحی

5- awwwards.com/blog
مخصوص UI,UX و ترند های طراحی سایت های حرفه ای

🆔 @htmlcss_channels

5 Ways to Center a Div in #CSS


🆔 @htmlcss_channels

Image Hover

Cards with a pop-up effect on hover. Implemented using CSS and JavaScript.

⤷Get code


🆔 @htmlcss_channels

Swirl Animation | HTML CSS JavaScript




🆔 @htmlcss_channels

Magnetic Button | HTML CSS JavaScript



🆔 @htmlcss_channels

CSS Generators to save you hours of work:

1. Blob maker
https://blobmaker.app

2. Getwaves
https://getwaves.io

3. CSS Button Generator
https://markodenic.com/tools/buttons-generator/

4. Gradient generator
https://cssgradient.io

5. Glassmorphism
https://glassmorphism.com

6. Neumorphism
https://neumorphism.io

7. Pattern generator
https://patternify.com

8. css3 generator
https://css3generator.com

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


🆔 @htmlcss_channels

Navbar Pure CSS

Cool side menu. Implemented using CSS (Saas).

⤷Get code


🆔 @htmlcss_channels

معرفی چند وبسایت مفید برای توسعه‌دهندگان وبسایت و طراحان

1. Color hunt
https://colorhunt.co

2. Color Palettes
https://colorion.co

3. Mesh gradient
https://meshgradient.com

4. Magic Pattern
https://magicpattern.design/tools

5. Cool backgrounds
https://coolbackgrounds.io

6. Icons
https://thenounproject.com

7. Illustrations
https://undraw.co

8. Images
https://Unsplash.com

9. CSS Snippets
https://cssnippets.shefali.dev/

10. HTML templates
https://htmlrev.com


🆔 @htmlcss_channels

Glowing Blob Effect

A glow effect that follows the cursor. Implemented using CSS and JavaScript.

⤷Get code

💎 @Htmlcss_channels | #css #JavaScript

Building a website from scratch might feel overwhelming at first.

You'll start by coming up with an idea & setting up the project, then move on to building the website, testing the code, & pushing it to GitHub.

https://www.freecodecamp.org/news/how-to-build-a-website-from-scratch-start-to-finish-walkthrough/

💎 @Htmlcss_channels | #css #JavaScript #HTML

🔅 CSS Clamp

clamp(minimum, preferred, maximum);

In this example, the preferred value is 50%.

On the left 50% of the 400px viewport is 200px, which is less than the 300px minimum value that gets used instead.

On the right, 50% of the 1400px viewport equals 700px, which is greater than the minimum value and lower than the 800px maximum value, so it equates to 700px.

💎 @Htmlcss_channels | #css #JavaScript #HTML

🔅 CSS Clamp and font-size

p {
  font-size: clamp(1rem, 4vw, 1.5rem);
}

💎 @Htmlcss_channels | #css #JavaScript #HTML