├── .editorconfig ├── .github └── workflows │ ├── build-and-deploy.yml │ └── build.yml ├── .gitignore ├── .nojekyll ├── .nvmrc ├── CNAME ├── README.md ├── _data └── metadata.js ├── _includes ├── Montserrat-Bold.woff ├── layouts │ ├── base.njk │ ├── home.njk │ └── post.njk ├── og-image.njk └── postslist.njk ├── content ├── 3d-image-effect │ ├── d.png │ └── index.md ├── 3d-parallax-effect │ ├── image.png │ └── index.md ├── 3d-parallax-image │ ├── image.png │ └── index.md ├── 3d-shine-animation │ ├── image.png │ └── index.md ├── 3d-shine-effect │ ├── image.png │ └── index.md ├── 3d-style-text-2 │ ├── image.png │ └── index.md ├── 3d-style-text-3 │ ├── image.png │ └── index.md ├── 3d-style-text │ ├── image.png │ └── index.md ├── 3d-trailing-shadow │ ├── image.png │ └── index.md ├── 3d-zig-zag-edge │ ├── image.png │ └── index.md ├── 404.md ├── about │ └── index.md ├── accelerate-rotation │ └── index.md ├── adhesive-tape-image │ ├── image-alt.png │ ├── image.png │ └── index.md ├── advertise │ ├── image.png │ └── index.njk ├── align-content-center │ ├── image.png │ ├── image1.png │ └── index.md ├── animate-height-auto │ └── index.md ├── animation-without-keyframes │ └── index.md ├── arc-shape-rounded │ ├── image.png │ └── index.md ├── arc-shape │ ├── image.png │ └── index.md ├── archive.njk ├── arrow-like-box │ ├── image.png │ └── index.md ├── assemble-image │ ├── image.png │ └── index.md ├── avatar-hover-effect-2 │ ├── image.png │ └── index.md ├── avatar-hover-effect-3 │ ├── image.png │ └── index.md ├── avatar-hover-effect │ ├── image.png │ └── index.md ├── avatar-rhombus │ ├── image.png │ └── index.md ├── back-to-top │ └── index.md ├── better-modern-css │ └── index.md ├── blob-hover │ ├── image.png │ └── index.md ├── border-gradient │ ├── image.png │ └── index.md ├── border-only-breadcrumb │ ├── image.png │ └── index.md ├── border-only-tooltip-mask │ ├── css-tooltip.png │ ├── image.png │ └── index.md ├── border-reveal-animation │ ├── image.png │ └── index.md ├── bouncy-input │ └── index.md ├── broken-image │ ├── image.png │ └── index.md ├── card-reveal-animation │ ├── image.png │ └── index.md ├── center-block-element │ └── index.md ├── center-max-width │ ├── image.png │ └── index.md ├── center-uppercase │ ├── image.png │ ├── image2.png │ └── index.md ├── checkbox-mask │ ├── image.png │ └── index.md ├── circle-hover-effect │ ├── image.png │ └── index.md ├── circular-progress │ ├── image.png │ └── index.md ├── circular-reveal-effect │ ├── image.png │ └── index.md ├── circular-stack-avatars │ ├── image.png │ └── index.md ├── clock │ └── index.md ├── color-reveal-hover-effect │ ├── image.png │ └── index.md ├── color-shades-color-mix │ ├── color-shades.png │ └── index.md ├── color-switch-color-mix │ └── index.md ├── color-wheel-gradient │ ├── color-wheel.png │ └── index.md ├── color-wheel │ ├── image.png │ └── index.md ├── colors-array │ ├── image.png │ └── index.md ├── corner-only-border-image │ ├── image.png │ └── index.md ├── corner-only-border │ ├── image.png │ └── index.md ├── count-lines │ └── index.md ├── css-custom-cursor │ └── index.md ├── css-cut-corners │ ├── cut-corners.png │ └── index.md ├── css-dashed-border │ ├── dash.png │ └── index.md ├── css-dashed-lines │ ├── dashes.png │ └── index.md ├── css-functions │ ├── image.png │ ├── image2.png │ └── index.md ├── css-gradient-shadows │ ├── image.png │ └── index.md ├── css-graph-paper │ ├── graph.png │ └── index.md ├── css-menu-icon │ ├── index.md │ └── menu.png ├── css-pattern │ ├── image.png │ └── index.md ├── css-plus-symbol │ ├── image.png │ └── index.md ├── css-ribbon-2 │ ├── image.png │ └── index.md ├── css-ribbon │ ├── index.md │ └── ribbon.png ├── css-scrolling-shadow │ ├── index.md │ └── scrol.png ├── css-shapes │ ├── image.jpg │ └── index.md ├── css-speech-bubble │ ├── index.md │ └── speech-bubble.png ├── css-variables-range-slider │ └── index.md ├── css-wavy-shape │ ├── index.md │ └── wavy-shape.png ├── css-zig-zag-edge │ ├── image.png │ └── index.md ├── css-zig-zag-panel │ ├── image-panels.png │ └── index.md ├── css-zoom-effect │ ├── index.md │ └── zoom.png ├── curved-ribbon │ ├── image.png │ └── index.md ├── custom-numbered-list │ ├── image.png │ └── index.md ├── custom-progress │ ├── image.png │ └── index.md ├── custom-range-slider │ ├── image.png │ └── index.md ├── cut-out-shapes │ ├── image.png │ └── index.md ├── dashed-rounded-border │ ├── dash.png │ └── index.md ├── diagonal-reveal-effect │ ├── hover-effect.png │ └── index.md ├── element-dimension │ └── index.md ├── equal-height-column │ ├── image.png │ └── index.md ├── equal-width-button │ ├── image.png │ └── index.md ├── fade-content-border-mask │ ├── fade-content-inside-border.png │ └── index.md ├── fancy-avatar-header │ ├── image.png │ └── index.md ├── fancy-circular-hover │ ├── image.png │ └── index.md ├── fancy-corner-decoration │ ├── image.png │ └── index.md ├── fancy-frame-image │ ├── image.png │ └── index.md ├── fancy-title-divider-2 │ ├── index.md │ └── title-divider.png ├── fancy-title-divider │ ├── index.md │ └── title-divider.png ├── feed │ ├── feed.11tydata.js │ ├── feed.njk │ └── json.njk ├── filling-loader │ ├── image.png │ └── index.md ├── first-element-dom │ └── index.md ├── first-last-element-with-class │ └── index.md ├── flex-wrap │ ├── image.png │ └── index.md ├── float-bottom-corner │ ├── float.png │ └── index.md ├── flower-shape │ ├── image.png │ └── index.md ├── fluid-typography │ └── index.md ├── folded-rectangle │ ├── image.png │ └── index.md ├── folded-ribbon-hover-2 │ ├── image.png │ └── index.md ├── folded-ribbon-hover │ ├── image.png │ └── index.md ├── folded-ribbon │ ├── image.png │ └── index.md ├── fragmentation-effect │ ├── image.png │ └── index.md ├── full-bleed-layout │ ├── image.png │ └── index.md ├── full-screen-height │ └── index.md ├── glowing-border │ ├── image.png │ └── index.md ├── gradient-border-hover │ ├── image.png │ └── index.md ├── gradient-overlay-border-image │ ├── image.png │ └── index.md ├── grainy-texture │ ├── image.png │ ├── image2.png │ └── index.md ├── grid-dashed-lines │ ├── dash.png │ ├── image.png │ └── index.md ├── heart-shape-animation │ ├── heart.png │ └── index.md ├── heart-shape-hover-2 │ ├── image.png │ └── index.md ├── heart-shape-hover │ ├── image.png │ └── index.md ├── heart │ ├── image.png │ └── index.md ├── hexagon-shape │ ├── image.png │ └── index.md ├── horizontal-line-title │ ├── index.md │ └── lines.png ├── horizontal-stack-avatars │ ├── image.png │ └── index.md ├── hover-anchor-positionning │ └── index.md ├── hue-manipulation-color-mix │ └── index.md ├── image-3d-effect │ ├── image.png │ └── index.md ├── image-color-overlay │ ├── index.md │ └── overlay.png ├── image-gift-box-2 │ ├── image.png │ └── index.md ├── image-gift-box │ ├── image.png │ └── index.md ├── image-heart-shape │ ├── heart.png │ └── index.md ├── image-thumbnail │ ├── image.png │ └── index.md ├── image-wavy-borders-2 │ ├── image.png │ └── index.html ├── image-wavy-borders │ ├── image.png │ └── index.md ├── index.njk ├── infinite-borders │ ├── image.png │ └── index.md ├── infinite-image-slider │ └── index.md ├── infinite-logos-animation │ ├── image.png │ └── index.md ├── infinite-ribbon-shape │ ├── image.png │ └── index.md ├── infinite-shadow-image │ ├── image.png │ └── index.md ├── infinite-shadow │ ├── image.png │ └── index.md ├── infinite-stripes-shadow │ ├── image.png │ └── index.md ├── initial-containing-block │ ├── image.png │ ├── image1.png │ └── index.md ├── inline-if │ └── index.md ├── inner-border-radius │ ├── image.png │ └── index.md ├── inner-border │ ├── image.png │ └── index.md ├── inner-curve-notch │ ├── image.png │ └── index.md ├── inner-outer-display │ └── index.md ├── inner-radius-image │ ├── image.png │ └── index.md ├── inverted-radius-hover │ ├── image.png │ └── index.md ├── inverted-radius │ ├── image.png │ └── index.md ├── last-element-dom │ └── index.md ├── length-to-integer │ └── index.md ├── line-rounded-dashes │ ├── image.png │ └── index.md ├── manual-typography │ └── index.md ├── matrix-cube │ ├── cube.png │ └── index.md ├── matrix-image │ ├── index.md │ └── matrix.png ├── min-max │ ├── image.png │ └── index.md ├── multi-line-ribbon-shape-2 │ ├── image.png │ └── index.md ├── multi-line-ribbon-shape │ ├── image.png │ └── index.md ├── multi-line-text-decoration │ ├── image.jpeg │ └── index.md ├── nesting-selector │ ├── image-2.png │ ├── image.png │ └── index.md ├── number-elements-has-selector │ └── index.md ├── number-inside-box │ ├── index.md │ └── number-box.png ├── octagon-shape │ ├── image.png │ └── index.md ├── one-color-gradient │ └── index.md ├── outline-hover-effect │ ├── hover-effect.png │ └── index.md ├── overflow-detection │ └── index.md ├── overflowing-background │ ├── background.png │ └── index.md ├── overflowing-underline-2 │ ├── index.md │ └── line.png ├── overflowing-underline │ ├── index.md │ └── line.png ├── overlapping-border-image │ ├── image.png │ └── index.md ├── overlay-reveal-image │ ├── image.png │ └── index.md ├── pixel-rounding │ └── index.md ├── pixelated-corner │ ├── image.png │ └── index.md ├── polygon-starburst-shapes │ ├── css-shapes.png │ └── index.md ├── postage-stamp │ ├── image.png │ └── index.md ├── progress-bar-dynamic-color │ ├── image.png │ └── index.md ├── progress-with-tooltip │ ├── image.png │ └── index.md ├── progress-with-tootlip │ └── index.html ├── puzzle-shape │ ├── image.png │ └── index.md ├── quantity-queries │ └── index.md ├── rainbow-gradient-animation │ └── index.md ├── range-slider-tooltip-2 │ ├── image.png │ └── index.md ├── range-slider-tooltip │ ├── image.png │ └── index.md ├── responsive-hexagon-grid │ ├── hexagone.png │ └── index.md ├── responsive-slanted-coloration │ ├── image.png │ └── index.md ├── reveal-hover-effect-2 │ ├── image.png │ └── index.md ├── reveal-hover-effect │ └── index.md ├── reveal-hover-mask-2 │ ├── image-2.png │ ├── image.png │ └── index.md ├── reveal-hover-mask-3 │ ├── image.png │ └── index.md ├── reveal-hover-mask │ ├── image.png │ └── index.md ├── rgb-channels │ └── index.md ├── rhombus-hover-effect │ ├── image.png │ └── index.md ├── rhombus-image │ ├── image.png │ └── index.md ├── ribbon-reveal-effect │ ├── image.png │ └── index.md ├── ribbon-style-title │ ├── image.png │ └── index.md ├── root-selector │ └── index.md ├── rotated-ribbon-hover │ ├── image.png │ └── index.md ├── rotating-square-hover-effect │ ├── image.png │ └── index.md ├── rounded-dashed-underline │ ├── dash.png │ └── index.md ├── rounded-frame-image │ ├── fancy-frame.png │ └── index.md ├── rounded-hexagon │ ├── image.png │ └── index.md ├── rounded-polygon │ ├── image.png │ └── index.md ├── rounded-tab │ ├── image.png │ └── index.md ├── screen-dimension │ └── index.md ├── scroll-progress-2 │ └── index.md ├── scroll-progress │ └── index.md ├── scrollbar-width │ └── index.md ├── section-divider │ ├── divider.png │ └── index.md ├── select-elements-between-two-class │ └── index.md ├── simple-css-loader │ ├── index.md │ └── loader.png ├── simple-tooltip │ ├── image.png │ └── index.md ├── single-digit-inputs │ ├── image.png │ └── index.md ├── sitemap │ └── sitemap.xml.njk ├── slanted-underline │ ├── image.png │ └── index.md ├── sliding-navigation-menu │ └── index.md ├── sliding-reveal-image │ ├── image.png │ └── index.md ├── slow-down-rotation │ └── index.md ├── smooth-rotation │ ├── image.png │ └── index.md ├── sparkle-shape │ ├── image.png │ └── index.md ├── stanled-background-full-screen │ ├── image.jpeg │ └── index.md ├── star-rating │ ├── image.png │ └── index.md ├── star-shape │ ├── image.png │ ├── image2.png │ └── index.md ├── starburst-image │ ├── image.png │ └── index.md ├── status-indicator │ ├── image.png │ └── index.md ├── steps │ ├── image.png │ └── index.md ├── stick-element-grid │ ├── float.png │ └── index.md ├── stop-animation │ └── index.md ├── stop-rotation │ └── index.md ├── svg-to-css │ └── index.md ├── text-box │ └── index.md ├── text-indent │ ├── image.png │ └── index.md ├── text-wrap │ ├── image.png │ └── index.md ├── tools │ ├── blob.png │ ├── custom-borders.png │ ├── custom-corners.png │ ├── flowers.png │ ├── gradient-shadow.png │ ├── index.md │ ├── loaders.png │ ├── patterns.png │ ├── polygon.png │ ├── quantity-query.png │ ├── ribbons.png │ ├── section-divider.png │ ├── shapes.png │ ├── starburst.png │ ├── svg-to-css.png │ ├── tooltip.png │ ├── triangles.png │ ├── wavy-circle.png │ └── wavy-shapes.png ├── tooltip-mask │ ├── index.md │ └── tooltip.png ├── triangle-rounded-corner │ ├── image.png │ └── index.md ├── triangle-shape │ ├── image.png │ └── index.md ├── typed-variables │ ├── image.png │ └── index.md ├── value-input │ └── index.md ├── vertical-rounded-tab │ ├── image.png │ └── index.md ├── volume-control │ ├── image.png │ └── index.md ├── wavy-circle │ ├── image.png │ └── index.md ├── wavy-circles │ ├── image.png │ └── index.md ├── wavy-divider │ ├── image.png │ └── index.md ├── wavy-text-animation-2 │ ├── index.md │ └── wave.png ├── wavy-text-animation │ ├── index.md │ └── wave.png ├── width-scrollbar │ └── index.md ├── wiggly-borders │ ├── image.png │ └── index.md ├── zig-zag-box │ ├── image.png │ └── index.md ├── zig-zag-edge │ ├── image.png │ ├── image2.png │ └── index.md ├── zig-zag-image-seperation │ ├── image.png │ └── index.md ├── zoom-hover-effect │ └── index.md └── zoom │ ├── image.png │ └── index.md ├── eleventy.config.drafts.js ├── eleventy.config.images.js ├── eleventy.config.mjs ├── netlify.toml ├── package-lock.json ├── package.json └── public ├── css ├── index.css ├── message-box.css └── prism-diff.css └── img ├── .gitkeep ├── avatar.png ├── css-loader.jpg ├── css-pattern.jpg ├── css-shape.jpg ├── css-tip.jpg ├── fav.png ├── kofi.png ├── launchfast-symbol.svg ├── statamic-logo-lime.svg ├── statamic-logo-pink.svg └── statamic-mark-pink.svg /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | indent_size = 2 6 | end_of_line = lf 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | charset = utf-8 10 | -------------------------------------------------------------------------------- /.github/workflows/build-and-deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build & Deploy 2 | 3 | on: 4 | push: 5 | branches: ['main'] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | 11 | strategy: 12 | matrix: 13 | node-version: ['20.17.0'] 14 | 15 | steps: 16 | - uses: actions/checkout@v3 17 | 18 | - name: Use Node.js ${{ matrix.node-version }} 19 | uses: actions/setup-node@v3 20 | with: 21 | node-version: ${{ matrix.node-version }} 22 | cache: 'npm' 23 | 24 | - name: Install packages 25 | run: npm ci 26 | 27 | - name: Run npm build 28 | run: npm run build-ghpages 29 | 30 | - name: Deploy to gh-pages 31 | uses: peaceiris/actions-gh-pages@v3 32 | with: 33 | publish_dir: ./_site 34 | deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build on PR 2 | 3 | on: 4 | pull_request: 5 | branches: ['main'] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | 11 | strategy: 12 | matrix: 13 | node-version: ['20.17.0'] 14 | 15 | steps: 16 | - uses: actions/checkout@v3 17 | 18 | - name: Use Node.js ${{ matrix.node-version }} 19 | uses: actions/setup-node@v3 20 | with: 21 | node-version: ${{ matrix.node-version }} 22 | cache: 'npm' 23 | 24 | - name: Install packages 25 | run: npm ci 26 | 27 | - name: Run npm build 28 | run: npm run build -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site/ 2 | node_modules/ 3 | gh-page* -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/.nojekyll -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16 2 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | css-tip.com -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | CSS Pattern -------------------------------------------------------------------------------- /_data/metadata.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "title": "CSS Tip: Learn CSS the easy way", 3 | "url": "https://css-tip.com/", 4 | "image" : "https://css-tip.com/img/css-tip.jpg", 5 | "language": "en", 6 | "description": "The best place to keep up to date with the new CSS features. Daily CSS tips and tricks to become a better web developer.", 7 | "author": { 8 | "name": "Temani Afif", 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /_includes/Montserrat-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/_includes/Montserrat-Bold.woff -------------------------------------------------------------------------------- /_includes/layouts/home.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/base.njk 3 | --- 4 | {{ content | safe }} 5 | -------------------------------------------------------------------------------- /_includes/layouts/post.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/base.njk 3 | --- 4 | 5 | {%- if collections.posts %} 6 | {%- set previousPost = collections.posts | getPreviousCollectionItem %} 7 | {%- set nextPost = collections.posts | getNextCollectionItem %} 8 | {%- if nextPost or previousPost %} 9 | 13 | {%- endif %} 14 | {%- endif %} 15 | 16 | 17 |

{{ title }}

18 | 19 | 20 | 21 | {{ content | safe }} 22 | 23 |
24 | 25 |

More CSS Tips

26 | 27 | {%- set index = collections.posts | getCollectionItemIndex %} 28 | 29 | -------------------------------------------------------------------------------- /_includes/og-image.njk: -------------------------------------------------------------------------------- 1 | 36 | 37 |
38 | CSS Tip 39 |

{{ title | safe }}

40 |
Temani Afif
41 | 42 |
-------------------------------------------------------------------------------- /_includes/postslist.njk: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /content/3d-image-effect/d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/3d-image-effect/d.png -------------------------------------------------------------------------------- /content/3d-parallax-effect/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/3d-parallax-effect/image.png -------------------------------------------------------------------------------- /content/3d-parallax-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/3d-parallax-image/image.png -------------------------------------------------------------------------------- /content/3d-shine-animation/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/3d-shine-animation/image.png -------------------------------------------------------------------------------- /content/3d-shine-effect/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/3d-shine-effect/image.png -------------------------------------------------------------------------------- /content/3d-shine-effect/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: 3D shine effect on hover 4 | description: A fancy 3D effect with a shiny animation on hover 5 | date: 2023-06-01 6 | tags: posts 7 | --- 8 | 9 | Add a 3D effect to your image with a shiny animation on hover ✨ 10 | * No extra element (only the `` tag) 11 | * No pseudo-element 12 | * Less than 10 CSS declrations 13 | 14 | 15 | {% image "./image.png", "A 3D shine effect on image" %} 16 | 17 | ```css 18 | img { 19 | --a: 8deg; /* control the angle of rotation (the smaller, the better) */ 20 | aspect-ratio: 1; 21 | transform: perspective(400px) rotate3d(var(--i,1,-1),0,var(--a)); 22 | mask: 23 | linear-gradient(135deg,#000c 40%,#000,#000c 60%) 24 | 100% 100%/240% 240%; 25 | transition: .4s; 26 | } 27 | img:hover { 28 | --i:-1,1; 29 | mask-position: 0 0; 30 | } 31 | ``` 32 | 33 |

34 | See the Pen 35 | 3D Shine effect on hover by Temani Afif (@t_afif) 36 | on CodePen. 37 |

38 | 39 | 40 | More detail: [smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images](https://www.smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images/) -------------------------------------------------------------------------------- /content/3d-style-text-2/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/3d-style-text-2/image.png -------------------------------------------------------------------------------- /content/3d-style-text-3/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/3d-style-text-3/image.png -------------------------------------------------------------------------------- /content/3d-style-text/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/3d-style-text/image.png -------------------------------------------------------------------------------- /content/3d-style-text/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Add a 3D style to your text 4 | description: Add a touch of 3D to your text with some gradients tricks 5 | date: 2023-11-15 6 | tags: posts 7 | --- 8 | 9 | Add a touch of 3D to your text using a few lines of code 10 | * Minimal HTML 11 | * Works with multi-line text 12 | * Less than 10 CSS declarations 13 | 14 | 15 | {% image "./image.png", "A 3D text using CSS" %} 16 | 17 | ```css 18 | h2 { 19 | --d: .3em; /* control the depth */ 20 | line-height: 2; /* control the distance between boxes */ 21 | } 22 | h2 span { 23 | padding-block: .1em calc(.1em + var(--d)); 24 | padding-inline:.2em calc(.2em + var(--d)); 25 | box-decoration-break: clone; 26 | background: 27 | conic-gradient(at right var(--d) bottom var(--d),#0004 37.5%,#0008 0 75%,#0000 0) 28 | #d81a14; /* the main color */ 29 | mask: linear-gradient(45deg,#0000 calc(var(--d)*cos(45deg)),#000 0 calc(100% - var(--d)*cos(45deg)),#0000 0); 30 | } 31 | ``` 32 | 33 |

34 | See the Pen 35 | CSS only 3D multi-line text by Temani Afif (@t_afif) 36 | on CodePen. 37 |

38 | 39 | -------------------------------------------------------------------------------- /content/3d-trailing-shadow/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/3d-trailing-shadow/image.png -------------------------------------------------------------------------------- /content/3d-zig-zag-edge/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/3d-zig-zag-edge/image.png -------------------------------------------------------------------------------- /content/404.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/home.njk 3 | permalink: 404.html 4 | eleventyExcludeFromCollections: true 5 | --- 6 | 7 | 8 |
404
9 | 10 | 11 |

Get another CSS Tip!

-------------------------------------------------------------------------------- /content/about/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/base.njk 3 | title: About CSS Tip 4 | --- 5 | 6 |

About

7 | 8 | My name is **Temani Afif** and I made this website to share with you a few CSS Tips. No complex tutorial, No lengthy video, No boring streaming. Read a tip per day and become a CSS expert. 9 | 10 | Want more CSS fun? Check my other websites: 11 | * [CSS Challenges](https://css-challenges.com/) 12 | * [CSS Generators](https://css-generators.com/) 13 | * [CSS Articles](https://css-articles.com/) 14 | * [CSS Loaders](https://css-loaders.com/) 15 | * [CSS Pattern](https://css-pattern.com/) 16 | * [CSS Shape](https://css-shape.com/) 17 | * [CSS Arts](https://css-only.art/) 18 | * [CSS Games](https://css-games.com/) 19 | 20 | If you like this website [You can support me](https://support.temani-afif.com/) (I know you will do before leaving this page because you are a great person!) 21 | 22 | 23 | Find me on: 24 | * [X (Twitter)](https://x.com/ChallengesCss) 25 | * [Mastodon](https://front-end.social/@css) 26 | * [Bluesky](https://bsky.app/profile/css-only.dev) 27 | * [Github](https://github.com/Afif13/) 28 | * [Stack Overflow](https://stackoverflow.com/users/8620333/temani-afif) 29 | 30 | 31 |
32 | 33 | This site is a member of [CS.Sjoy.lol](https://cs.sjoy.lol/) webring. Cool websites doing CSS stuff! 34 | 35 | Explore the Ring: [Previous Site](https://webri.ng/webring/cssjoy/previous?via=https://css-tip.com) | 36 | [Random Site](https://webri.ng/webring/cssjoy/random?via=https://css-tip.com) | 37 | [Next Site](https://webri.ng/webring/cssjoy/next?via=https://css-tip.com) -------------------------------------------------------------------------------- /content/accelerate-rotation/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Accelerate a rotation on hover 4 | description: A simple CSS trick to speed up of your rotating element 5 | date: 2024-03-19 6 | tags: posts 7 | --- 8 | 9 | Do you want to accelerate the rotation of your element on hover? Here is a simple CSS trick using `animation-composition` and a few lines of code 10 | * No extra element 11 | * No pseudo-element 12 | * One animation 13 | 14 | 15 | ```css 16 | .box { 17 | --_a: rotate 5s linear infinite; 18 | animation: var(--_a),var(--_a) paused; 19 | animation-composition: add; 20 | } 21 | .box:hover { 22 | animation-play-state: running; 23 | } 24 | @keyframes rotate { 25 | to {rotate: 1turn} 26 | } 27 | ``` 28 |

29 | See the Pen 30 | Accelerate a rotation on hover by Temani Afif (@t_afif) 31 | on CodePen. 32 |

33 | 34 | 35 | The same trick can be used [to slow down the rotation](/slow-down-rotation/) -------------------------------------------------------------------------------- /content/adhesive-tape-image/image-alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/adhesive-tape-image/image-alt.png -------------------------------------------------------------------------------- /content/adhesive-tape-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/adhesive-tape-image/image.png -------------------------------------------------------------------------------- /content/advertise/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/advertise/image.png -------------------------------------------------------------------------------- /content/align-content-center/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/align-content-center/image.png -------------------------------------------------------------------------------- /content/align-content-center/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/align-content-center/image1.png -------------------------------------------------------------------------------- /content/animate-height-auto/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Animate to height/width auto (without hacks) 4 | description: A new CSS feature to easily animate to height/width auto with no complex code 5 | date: 2024-09-25 6 | tags: posts 7 | --- 8 | 9 | Only three lines of code and you have a smooth transition to `height: auto` 10 | 11 | ```css 12 | & { 13 | interpolate-size: allow-keywords; 14 | } 15 | p { 16 | transition: 1s; 17 | } 18 | p:not(:hover) { 19 | height: 5lh; 20 | } 21 | ``` 22 | 23 | The `interpolate-size: allow-keywords` is doing all the magic. Read [Animate to height: auto; (and other intrinsic sizing keywords) in CSS](https://developer.chrome.com/docs/css-ui/animate-to-height-auto) for more detail. 24 | 25 | Try the below using the lastest version of chrome: 26 | 27 |

28 | See the Pen 29 | Animating to height: auto by Temani Afif (@t_afif) 30 | on CodePen. 31 |

32 | -------------------------------------------------------------------------------- /content/arc-shape-rounded/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/arc-shape-rounded/image.png -------------------------------------------------------------------------------- /content/arc-shape/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/arc-shape/image.png -------------------------------------------------------------------------------- /content/archive.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/home.njk 3 | title: Archive of CSS Tip 4 | eleventyNavigation: 5 | key: Archive 6 | order: 3 7 | --- 8 |

Archive

9 | 10 | {% set postslist = collections.posts %} 11 | {% set postsCount = collections.posts | length %} 12 | 13 |

Find below {{ postsCount }} CSS Tips. Don't know what to read? Get a random CSS Tip!

14 | 15 | 16 | 17 | {% include "postslist.njk" %} 18 | 19 | -------------------------------------------------------------------------------- /content/arrow-like-box/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/arrow-like-box/image.png -------------------------------------------------------------------------------- /content/assemble-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/assemble-image/image.png -------------------------------------------------------------------------------- /content/avatar-hover-effect-2/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/avatar-hover-effect-2/image.png -------------------------------------------------------------------------------- /content/avatar-hover-effect-3/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/avatar-hover-effect-3/image.png -------------------------------------------------------------------------------- /content/avatar-hover-effect/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/avatar-hover-effect/image.png -------------------------------------------------------------------------------- /content/avatar-rhombus/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/avatar-rhombus/image.png -------------------------------------------------------------------------------- /content/avatar-rhombus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Avatar hover effect with a rhombus shape 4 | description: Add a fancy hover effect to your image with a simple code 5 | date: 2024-10-18 6 | tags: posts 7 | --- 8 | 9 | Place you image inside a [rhombus shape](https://css-shape.com/rhombus/) with a cool hover effect 10 | * No extra element (only the `` tag) 11 | * No pseudo-element 12 | * Less than 15 CSS declarations 13 | 14 | 15 | {% image "./image.png", "CSS-only images with a rhombus shape" %} 16 | 17 | ```css 18 | img { 19 | --s: 300px; /* control the size */ 20 | 21 | width: var(--s); 22 | aspect-ratio: 1; 23 | object-fit: cover; 24 | object-position: top; 25 | padding: calc(var(--s)/4) calc(var(--s)/8) 0; 26 | box-sizing: border-box; 27 | background: conic-gradient(from 135deg at 50% 15%,#e0dee1,#28a6b5 25%,#0000 0); 28 | clip-path: polygon(-50% 0,150% 0,50% 100%); 29 | transition: .5s; 30 | } 31 | img:hover { 32 | padding: 0; 33 | } 34 | ``` 35 | 36 |

37 | See the Pen 38 | Hover to select your character by Temani Afif (@t_afif) 39 | on CodePen. 40 |

41 | -------------------------------------------------------------------------------- /content/back-to-top/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: CSS-only back to top button 4 | description: A few CSS trick to create a back to top button 5 | date: 2022-07-27 6 | tags: posts 7 | --- 8 | 9 | Create a CSS-only "Back To Top" button with a simple code 10 | * No JavaScript 11 | * Control when the button appears 12 | * Smooth scroll on click 13 | * Powered by CSS grid and sticky position 14 | 15 | 16 |

17 | See the Pen 18 | CSS only back to top button by Temani Afif (@t_afif) 19 | on CodePen. 20 |

21 | 22 | 23 | More detail: [www.freecodecamp.org/news/css-only-back-to-top-button](https://www.freecodecamp.org/news/css-only-back-to-top-button/) -------------------------------------------------------------------------------- /content/better-modern-css/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Write better CSS with modern CSS 4 | description: Optimize your code and reduce redundancy using modern CSS. 5 | date: 2024-04-24 6 | tags: posts 7 | --- 8 | 9 | A lot of new CSS features can help you optimize your code and reduce redundancy. 10 | * CSS Nesting 11 | * CSS Variables 12 | * Media Query range features 13 | 14 | 15 | Here is an example of a CSS code with a lot of redundancy 16 | 17 | ```css 18 | /* 19 | The same selector 3 times!! 🤮 20 | max-width? does it mean bigger or smaller?? 🫣 21 | grid-template-columns everywhere !! 😬 22 | */ 23 | .container { 24 | display: grid; 25 | grid-template-columns: repeat(3,1fr); 26 | gap: 10px; 27 | } 28 | @media (max-width: 800px) { 29 | .container { 30 | grid-template-columns: repeat(2,1fr); 31 | } 32 | } 33 | @media (max-width: 400px) { 34 | .container { 35 | grid-template-columns: 1fr; 36 | } 37 | } 38 | ``` 39 | 40 | It can be optimized like below using the modern features 41 | 42 | ```css 43 | /* 44 | one selector 🤩 45 | one property 🤩 46 | clear media queries 🤩 47 | */ 48 | .container { 49 | display: grid; 50 | grid-template-columns: repeat(var(--n,3),1fr); 51 | gap: 10px; 52 | @media (width < 800px) { 53 | --n: 2; 54 | } 55 | @media (width < 400px) { 56 | --n: 1; 57 | } 58 | } 59 | ``` 60 | -------------------------------------------------------------------------------- /content/blob-hover/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/blob-hover/image.png -------------------------------------------------------------------------------- /content/border-gradient/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/border-gradient/image.png -------------------------------------------------------------------------------- /content/border-only-breadcrumb/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/border-only-breadcrumb/image.png -------------------------------------------------------------------------------- /content/border-only-tooltip-mask/css-tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/border-only-tooltip-mask/css-tooltip.png -------------------------------------------------------------------------------- /content/border-only-tooltip-mask/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/border-only-tooltip-mask/image.png -------------------------------------------------------------------------------- /content/border-reveal-animation/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/border-reveal-animation/image.png -------------------------------------------------------------------------------- /content/broken-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/broken-image/image.png -------------------------------------------------------------------------------- /content/broken-image/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: How to style a broken image 4 | description: Give a nice visual touch to images that fail to load 5 | date: 2025-05-22 6 | tags: posts 7 | --- 8 | 9 | When an image fails to load the browser will simply show you the alt text but you can change this using a cool CSS trick. Broken images accept pseudo-elements such as `::before` and `::after` so we can tweak them to add a custom error message or any visual you want. 10 | 11 | {% image "./image.png", "Custom error message for broken images" %} 12 | 13 | 14 | ```css 15 | img { 16 | position: relative; 17 | } 18 | img::after { 19 | content: "We failed to load the image of \A'" attr(alt) "'\A 😞"/""; 20 | position: absolute; 21 | inset: 0; 22 | display: grid; 23 | place-items: center; 24 | text-align: center; 25 | border: 2px dashed; 26 | font: bold 1.6em/1.5 system-ui; 27 | white-space: pre-wrap; 28 | } 29 | ``` 30 | 31 | The above style will not apply to correctly loaded images so no need for any specific selector to exclude them 32 | 33 |

34 | See the Pen 35 | Style broken images by Temani Afif (@t_afif) 36 | on CodePen. 37 |

38 | -------------------------------------------------------------------------------- /content/card-reveal-animation/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/card-reveal-animation/image.png -------------------------------------------------------------------------------- /content/card-reveal-animation/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Card reveal animation 4 | description: A few mask trick to create a fancy reveal animation on hover 5 | date: 2023-01-23 6 | tags: posts 7 | --- 8 | 9 | Add a cool text reveal animation to your image card 10 | * Minimal HTML 11 | * No pseudo-element 12 | * Powered by CSS Mask (with fallback for old browsers) 13 | 14 | {% image "./image.png", "Card reveal animation" %} 15 | 16 | 17 |

18 | See the Pen 19 | Card hover effect by Temani Afif (@t_afif) 20 | on CodePen. 21 |

22 | 23 | -------------------------------------------------------------------------------- /content/center-max-width/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/center-max-width/image.png -------------------------------------------------------------------------------- /content/center-max-width/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: max-width + centering with one instruction 4 | description: Use max() to center your element and set a max-width 5 | date: 2021-12-10 6 | tags: posts 7 | --- 8 | 9 | Set `max-width` and center your block element with one CSS declaration using `margin-inline` and `max()`. 10 | 11 | {% image "./image.png", "Centering and settin a max-width using max()" %} 12 | 13 | 14 | ```css 15 | margin-inline: max(0px,50% - 800px/2); 16 | ``` 17 | 18 | You can also set a minimum margin for small screen by replacing `0px` with any value 19 | 20 | ```css 21 | margin-inline: max(1rem,50% - 800px/2); 22 | ``` 23 | 24 |

25 | See the Pen 26 | margin-inline by Temani Afif (@t_afif) 27 | on CodePen. 28 |

29 | -------------------------------------------------------------------------------- /content/center-uppercase/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/center-uppercase/image.png -------------------------------------------------------------------------------- /content/center-uppercase/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/center-uppercase/image2.png -------------------------------------------------------------------------------- /content/checkbox-mask/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/checkbox-mask/image.png -------------------------------------------------------------------------------- /content/circle-hover-effect/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/circle-hover-effect/image.png -------------------------------------------------------------------------------- /content/circle-hover-effect/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A reveal hover effect with an expanding circle 4 | description: A simple but nice hover effect to reveal your image 5 | date: 2023-06-29 6 | tags: posts 7 | --- 8 | 9 | Add a reveal animation to your image with a simple and nice hover effect 10 | * No extra element (only the `` tag) 11 | * No pseudo-element 12 | * 10 CSS declarations 13 | 14 | 15 | {% image "./image.png", "A reveal hover effect with an expanding circle" %} 16 | 17 | ```css 18 | img { 19 | --s: 300px; /* size of the image*/ 20 | 21 | width: var(--s); 22 | aspect-ratio: 1; 23 | border-radius: 50%; 24 | margin: calc(-.14*var(--s)); 25 | outline: var(--s) solid #FFC48C; 26 | outline-offset: calc(var(--s)/-2); 27 | clip-path: inset(14.65% round 20px); 28 | transition: .7s; 29 | } 30 | img:hover { 31 | outline-offset: 0; 32 | } 33 | ``` 34 | 35 |

36 | See the Pen 37 | Hover Reveal Animation by Temani Afif (@t_afif) 38 | on CodePen. 39 |

40 | 41 | 42 | More detail: [verpex.com/blog/website-tips/css-effects-on-images-ii](https://verpex.com/blog/website-tips/css-effects-on-images-ii) -------------------------------------------------------------------------------- /content/circular-progress/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/circular-progress/image.png -------------------------------------------------------------------------------- /content/circular-reveal-effect/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/circular-reveal-effect/image.png -------------------------------------------------------------------------------- /content/circular-stack-avatars/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/circular-stack-avatars/image.png -------------------------------------------------------------------------------- /content/clock/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A CSS-only clock showing the current time 4 | description: Use modern CSS (and some hacks) to show the current time using only CSS 5 | date: 2025-01-07 6 | tags: posts 7 | --- 8 | 9 | What time is it? We can answer this question using only CSS! The demo below is a clock that shows you the current time (You can compare with your smartwatch, it's accurate!). It's a single-element implementation powered by modern CSS. 10 | 11 | A chrome-only experimentation for now: 12 | 13 |

14 | See the Pen 15 | What time is it? (A CSS-only clock with the current time) by Temani Afif (@t_afif) 16 | on CodePen. 17 |

18 | 19 | 20 | Based on [a clever idea by Jane Ori](https://dev.to/janeori/getting-your-ip-address-with-css-and-other-32-bit-api-responses-without-javascript-402h) -------------------------------------------------------------------------------- /content/color-reveal-hover-effect/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/color-reveal-hover-effect/image.png -------------------------------------------------------------------------------- /content/color-shades-color-mix/color-shades.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/color-shades-color-mix/color-shades.png -------------------------------------------------------------------------------- /content/color-shades-color-mix/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Color shades using color-mix() 4 | description: Mix your color with black or white to create color shades 5 | date: 2023-03-28 6 | tags: posts 7 | --- 8 | 9 | Use the new `color-mix()` to create different shades from one color. 10 | 11 | Mix with ⚫️ black for a darker color and ⚪️ white for a lighter color 12 | 13 | {% image "./color-shades.png", "3 color shades from one color" %} 14 | 15 | ```css 16 | html { 17 | --color: #8A9B0F; /* the main color */ 18 | --color-light: color-mix(in srgb,var(--color),#fff 25%); 19 | --color-dark: color-mix(in srgb,var(--color),#000 25%); 20 | } 21 | ``` 22 | 23 | 24 |

25 | See the Pen 26 | Color shades using color-mix() by Temani Afif (@t_afif) 27 | on CodePen. 28 |

29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /content/color-switch-color-mix/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Color switch using color-mix() 4 | description: Use the new color-mix() to create a simple color switch 5 | date: 2023-03-27 6 | tags: posts 7 | --- 8 | 9 | Use the new `color-mix()` function to create a color switch with a compact code 10 | 11 | * No color duplication 12 | * Define your colors using one variable 13 | * Easy switch between colors 14 | * Suitable for dark/light mode 15 | 16 | ```css 17 | :root { 18 | --colors: black, white; /* define your colors like an array */ 19 | --i: 0; /* black text / white background */ 20 | 21 | --_color: color-mix(in hsl, var(--colors) calc(var(--i)*100%)); 22 | --_bg-color: color-mix(in hsl, calc(var(--i)*100%) var(--colors)); 23 | } 24 | @media (prefers-color-scheme: dark) { 25 | :root { 26 | --i: 1; /* white text / black background */ 27 | } 28 | } 29 | 30 | body { 31 | color: var(--_color); 32 | background: var(--_bg-color); 33 | } 34 | ``` 35 | 36 |

37 | See the Pen 38 | A color switch using color-mix() by Temani Afif (@t_afif) 39 | on CodePen. 40 |

41 | 42 | 43 | -------------------------------------------------------------------------------- /content/color-wheel-gradient/color-wheel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/color-wheel-gradient/color-wheel.png -------------------------------------------------------------------------------- /content/color-wheel-gradient/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A color wheel with gradient 4 | description: Use the new color interpolation to create a color wheel using conic-gradient() 5 | date: 2023-04-03 6 | tags: posts 7 | --- 8 | 9 | Use `conic-gradient()` and the new color interpolation to create a nice color wheel 🤩 10 | 11 | {% image "./color-wheel.png", "A color wheel made conic-gradient" %} 12 | 13 | ```css 14 | .box { 15 | background: conic-gradient(in hsl longer hue,red 0 100%); 16 | } 17 | ``` 18 | 19 | ✅ Tell the browser to take the longer route between red and red 20 | 21 | ❌ No complex color combination 22 | 23 | 24 |

25 | See the Pen 26 | Color wheel by Temani Afif (@t_afif) 27 | on CodePen. 28 |

29 | 30 | 31 | -------------------------------------------------------------------------------- /content/color-wheel/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/color-wheel/image.png -------------------------------------------------------------------------------- /content/color-wheel/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A color wheel with an array of colors 4 | description: A simple conic-gradient() trick to create a color wheel 5 | date: 2023-07-18 6 | tags: posts 7 | --- 8 | 9 | Create a perfect color wheel with multiple colors using `conic-gradient()` 10 | * One variable to define all the colors 11 | * No color duplication 12 | * Smooth transition between all the colors 13 | 14 | 15 | {% image "./image.png", "A color wheel using conic-gradient" %} 16 | 17 | ```css 18 | .box { 19 | /* your colors without duplication */ 20 | --colors: green,yellow,red,blue,pink; 21 | 22 | background: conic-gradient(var(--colors) 0,var(--colors)); 23 | } 24 | ``` 25 | 26 |

27 | See the Pen 28 | Color wheel with colors array by Temani Afif (@t_afif) 29 | on CodePen. 30 |

31 | 32 | -------------------------------------------------------------------------------- /content/colors-array/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/colors-array/image.png -------------------------------------------------------------------------------- /content/corner-only-border-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/corner-only-border-image/image.png -------------------------------------------------------------------------------- /content/corner-only-border/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/corner-only-border/image.png -------------------------------------------------------------------------------- /content/corner-only-border/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Corner-only border around an image 4 | description: Use CSS gradient and mask to create a Corner-only border around your image 5 | date: 2021-11-03 6 | tags: posts 7 | --- 8 | 9 | Create a corner-only border around an image (or any element) using a few lines of code. 10 | 11 | * No extra element 12 | * No Pseudo-element 13 | * Only three properties 14 | 15 | {% image "./image.png", "image with corner-only border" %} 16 | 17 | 18 | ```css 19 | img { 20 | --s: 80px; /* corner size */ 21 | padding: 15px; /* the gap */ 22 | border: 8px solid #69D2E7; 23 | mask: 24 | conic-gradient(at var(--s) var(--s),#0000 75%,#000 0) 25 | 0 0/calc(100% - var(--s)) calc(100% - var(--s)), 26 | conic-gradient(#000 0 0) content-box; 27 | } 28 | ``` 29 | 30 |

31 | See the Pen 32 | Corner-only borders by Temani Afif (@t_afif) 33 | on CodePen. 34 |

35 | 36 | 37 | Another idea: [Corner-only borders with hover effect](/corner-only-border-image/) -------------------------------------------------------------------------------- /content/css-custom-cursor/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A CSS-only custom cursor 4 | description: Combine CSS and SVG to create any kind of fancy cursor 5 | date: 2022-06-14 6 | tags: posts 7 | --- 8 | 9 | Create a custom cursor using CSS without external resources. Style your cursor like you do with a simple `
`! 10 | 11 | Powered by CSS-in-SVG-in-CSS 12 | 13 | 14 | ```css 15 | html { 16 | /* 17 | - adjust the width,height and viewbox to control the size 18 | - minify your CSS 19 | - change all the # to %23 20 | */ 21 | cursor: url('data:image/svg+xml;utf8,
%3Cstyle%3E.c{ ADD YOUR CSS HERE }%3C/style%3E') 22 | 24 24 /* control the offset */ , 23 | auto; /* the fallback cursor */ 24 | } 25 | 26 | ``` 27 | 28 |

29 | See the Pen 30 | CSS only Custom cursor by Temani Afif (@t_afif) 31 | on CodePen. 32 |

33 | 34 | 35 | More detail: [verpex.com/blog/website-tips/creating-a-custom-cursor-using-css](https://verpex.com/blog/website-tips/creating-a-custom-cursor-using-css) -------------------------------------------------------------------------------- /content/css-cut-corners/cut-corners.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-cut-corners/cut-corners.png -------------------------------------------------------------------------------- /content/css-cut-corners/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Cut the corners of your element 4 | description: Use CSS mask to cut the four corners of an element with a circular shapes 5 | date: 2022-09-08 6 | tags: posts 7 | --- 8 | 9 | How much code is needed to cut the four corners of an element? Also known as inverted `border-radius` 10 | * One Property 11 | * One Gradient 12 | 13 | Use an online generator to easily get the code: [css-generators.com/custom-corners](https://css-generators.com/custom-corners/) 14 | 15 | {% image "./cut-corners.png", "An element with 4 cut corners" %} 16 | 17 | ```css 18 | .corner { 19 | --s: 60px; /* control the radius of the cut */ 20 | mask: radial-gradient(var(--s) at var(--s) var(--s),#0000 98%,#000) calc(-1*var(--s)) calc(-1*var(--s)); 21 | } 22 | ``` 23 | 24 |

25 | See the Pen 26 | CSS Only cut corners by Temani Afif (@t_afif) 27 | on CodePen. 28 |

29 | 30 | 31 | 32 | More detail: [css-tricks.com/cut-corners-using-css-mask-and-clip-path-properties](https://css-tricks.com/cut-corners-using-css-mask-and-clip-path-properties/) -------------------------------------------------------------------------------- /content/css-dashed-border/dash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-dashed-border/dash.png -------------------------------------------------------------------------------- /content/css-dashed-border/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Custom dashed border 4 | description: Use gradient and CSS mask to create a dashed border 5 | date: 2022-08-10 6 | tags: posts 7 | --- 8 | 9 | Create a custom dashed border using a few lines of code. 10 | * No extra element 11 | * Less than 8 CSS properties 12 | * Easy to update using CSS variables 13 | 14 | 15 | {% image "./dash.png", "A custom dashed border" %} 16 | 17 | ```css 18 | .dashed { 19 | --b: 5px; /* border thickness */ 20 | --s: 30px; /* size of the dashes */ 21 | --c1: #215A6D; 22 | --c2: #92C7A3; 23 | 24 | position: relative; 25 | } 26 | .dashed::before { 27 | content:""; 28 | position: absolute; 29 | inset: 0; 30 | padding: var(--b); 31 | background: 32 | repeating-conic-gradient(var(--c1) 0 25%,var(--c2) 0 50%) 33 | 0 0/var(--s) var(--s) round; 34 | mask: 35 | linear-gradient(#000 0 0) content-box, 36 | linear-gradient(#000 0 0); 37 | mask-composite: exclude; 38 | } 39 | ``` 40 | 41 |

42 | See the Pen 43 | Custom dashed border by Temani Afif (@t_afif) 44 | on CodePen. 45 |

46 | -------------------------------------------------------------------------------- /content/css-dashed-lines/dashes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-dashed-lines/dashes.png -------------------------------------------------------------------------------- /content/css-dashed-lines/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Dashed lines using CSS gradient 4 | description: Ceate dashed lines using one gradient and CSS variables 5 | date: 2022-07-13 6 | tags: posts 7 | --- 8 | 9 | Create dashed lines using only one gradient 10 | 11 | 12 | {% image "./dashes.png", "A background with dashed lines" %} 13 | 14 | ```css 15 | html { 16 | --t: 2px; /* thickness of the lines */ 17 | --g: 50px; /* gap between lines */ 18 | --s: 12px; /* size of the dashes*/ 19 | 20 | background: 21 | conic-gradient(at var(--t),#0000 75%,#000 0) 22 | var(--g)/calc(var(--g) + var(--t)) var(--s); 23 | } 24 | ``` 25 | 26 |

27 | See the Pen 28 | CSS Only dashed lines by Temani Afif (@t_afif) 29 | on CodePen. 30 |

31 | 32 | 33 | -------------------------------------------------------------------------------- /content/css-functions/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-functions/image.png -------------------------------------------------------------------------------- /content/css-functions/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-functions/image2.png -------------------------------------------------------------------------------- /content/css-gradient-shadows/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-gradient-shadows/image.png -------------------------------------------------------------------------------- /content/css-gradient-shadows/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: CSS-only gradient shadows 4 | description: Use an online tool to generate your gradient shadow 5 | date: 2023-02-10 6 | tags: posts 7 | --- 8 | 9 | An online tool to create fancy CSS shadows with gradients coloration. Get the code in One click 🌟 10 | * Works with transparency 11 | * Works with `border-radius` 12 | 13 | [css-generators.com/gradient-shadows](https://css-generators.com/gradient-shadows/) 14 | 15 | {% image "./image.png", "CSS-only gradient shadows" %} 16 | 17 | 18 |

19 | See the Pen 20 | Updating inset instead of 3D transform by Temani Afif (@t_afif) 21 | on CodePen. 22 |

23 | 24 | 25 | More detail: [css-tricks.com/different-ways-to-get-css-gradient-shadows](https://css-tricks.com/different-ways-to-get-css-gradient-shadows/) -------------------------------------------------------------------------------- /content/css-graph-paper/graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-graph-paper/graph.png -------------------------------------------------------------------------------- /content/css-graph-paper/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: CSS Graph paper pattern 4 | description: Use CSS gradients to create a Graph paper pattern 5 | date: 2022-06-07 6 | tags: posts 7 | --- 8 | 9 | Create a [Graph Paper](https://css-pattern.com/graph-paper) design using only 2 gradients 10 | 11 | {% image "./graph.png", "A graph paper pattern" %} 12 | 13 | ```css 14 | html { 15 | --s: 100px; /* control the size */ 16 | 17 | --_g: #0000 90deg,#366 0; 18 | background: 19 | conic-gradient(from 90deg at 2px 2px,var(--_g)) 20 | 0 0/var(--s) var(--s), 21 | conic-gradient(from 90deg at 1px 1px,var(--_g)) 22 | 0 0/calc(var(--s)/5) calc(var(--s)/5); 23 | } 24 | ``` 25 | 26 |

27 | See the Pen 28 | CSS only Graph Paper by Temani Afif (@t_afif) 29 | on CodePen. 30 |

31 | 32 | -------------------------------------------------------------------------------- /content/css-menu-icon/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Hamburger menu icon 4 | description: Use CSS gradients to create a menu icon 5 | date: 2021-12-07 6 | tags: posts 7 | --- 8 | 9 | Create a CSS-only hamburger menu icon with 2 gradients. Adjust one value to control the size. 10 | 11 | {% image "./menu.png", "A CSS-only menu icon" %} 12 | 13 | 14 | ```css 15 | .menu { 16 | width:80px; /* update this to control the size */ 17 | aspect-ratio:1; 18 | background: 19 | radial-gradient(closest-side at 50% 25%,#000 96%,#0000) top/20% 40%, 20 | linear-gradient(#000 50%,#0000 0) top/80% 40% repeat-y; 21 | } 22 | ``` 23 | 24 |

25 | See the Pen 26 | Hamburger menu by Temani Afif (@t_afif) 27 | on CodePen. 28 |

29 | 30 | 31 | More detail: [verpex.com/blog/website-tips/how-to-create-a-responsive-sidebar-menu-using-css](https://verpex.com/blog/website-tips/how-to-create-a-responsive-sidebar-menu-using-css) -------------------------------------------------------------------------------- /content/css-menu-icon/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-menu-icon/menu.png -------------------------------------------------------------------------------- /content/css-pattern/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-pattern/image.png -------------------------------------------------------------------------------- /content/css-pattern/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: CSS-only background patterns with a minimal code 4 | description: The biggest collection of CSS patterns. One-click to get the code 5 | date: 2024-05-21 6 | tags: posts 7 | --- 8 | 9 | [css-pattern.com](https://css-pattern.com): The Biggest Collection Of Background Patterns 10 | * A unique URL per pattern 11 | * Controls to adjust the size & colors 12 | * Easy navigation between the patterns 13 | * Optimized with CSS variables 14 | * One-click to copy the code 15 | 16 | You can also surprise yourself with [a random CSS Pattern!](https://random.css-pattern.com) 17 | 18 | [{% image "./image.png", "CSS patterns made with CSS gradients" %}](https://css-pattern.com) -------------------------------------------------------------------------------- /content/css-plus-symbol/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-plus-symbol/image.png -------------------------------------------------------------------------------- /content/css-plus-symbol/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: CSS-only plus/cross icon 4 | description: Use one element and one gradient to create a plus/cross icon 5 | date: 2021-11-04 6 | tags: posts 7 | --- 8 | 9 | Create a plus icon ➕ or a cross icon ✖️ 10 | 11 | * One element 12 | * No Pseudo element 13 | * One gradient 14 | * Easily adjust the size and coloration 15 | 16 | {% image "./image.png", "CSS-only cross/plus icon" %} 17 | 18 | 19 | ```css 20 | .plus { 21 | --b: 10px; /* the thickness*/ 22 | --c: #0000 90deg,#000 0; /* the coloration */ 23 | width: 50px; /* the size */ 24 | aspect-ratio: 1; 25 | background: 26 | conic-gradient(from 90deg at var(--b) var(--b),var(--c)) 27 | calc(100% + var(--b)/2) calc(100% + var(--b)/2)/ 28 | calc(50% + var(--b)) calc(50% + var(--b)); 29 | } 30 | ``` 31 | 32 |

33 | See the Pen 34 | Plus symbol /Cross Symbol by Temani Afif (@t_afif) 35 | on CodePen. 36 |

37 | 38 | 39 | More CSS Shapes: [css-shape.com](https://css-shape.com) -------------------------------------------------------------------------------- /content/css-ribbon-2/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-ribbon-2/image.png -------------------------------------------------------------------------------- /content/css-ribbon/ribbon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-ribbon/ribbon.png -------------------------------------------------------------------------------- /content/css-scrolling-shadow/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: CSS-only scrolling shadow 4 | description: Create a scrolling shadow effect using only CSS gradients 5 | date: 2021-11-24 6 | tags: posts 7 | --- 8 | 9 | Create a CSS-only Scrolling Shadow effect with a few lines of code. 10 | * No JavaScript 11 | * No extra element 12 | * No pseudo element 13 | * Only background properties. 14 | 15 | {% image "./scrol.png", "CSS-only scrolling shadow" %} 16 | 17 | 18 | ```css 19 | .scrollbox { 20 | overflow: auto; 21 | 22 | --g: radial-gradient(55% 20px, #0009, #0000); 23 | background: 24 | linear-gradient(#fff 10px, #0000 40px calc(100% - 40px),#fff calc(100% - 10px)) local, 25 | var(--g) top /100% 200%, 26 | var(--g) bottom/100% 200%; 27 | } 28 | ``` 29 | 30 |

31 | See the Pen 32 | CSS only Scrolling shadow by Temani Afif (@t_afif) 33 | on CodePen. 34 |

35 | 36 | 37 | More detail: [How does this scrolling shadows CSS-magic work?](https://stackoverflow.com/a/59431975/8620333) -------------------------------------------------------------------------------- /content/css-scrolling-shadow/scrol.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-scrolling-shadow/scrol.png -------------------------------------------------------------------------------- /content/css-shapes/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-shapes/image.jpg -------------------------------------------------------------------------------- /content/css-shapes/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Create CSS Shapes with a single element 4 | description: An online resource to grab the code of any CSS shape with one click 5 | date: 2024-04-29 6 | tags: posts 7 | --- 8 | 9 | [css-shape.com](https://css-shape.com): The Ultimate Collection of CSS-Only shapes 10 | * Single-element implementation 11 | * Optimized CSS code 12 | * Easy to customize 13 | * One click to copy the code 14 | 15 | The modern way to create CSS Shapes 16 | 17 | [{% image "./image.jpg", "CSS Shapes The modern way" %}](https://css-shape.com) -------------------------------------------------------------------------------- /content/css-speech-bubble/speech-bubble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-speech-bubble/speech-bubble.png -------------------------------------------------------------------------------- /content/css-wavy-shape/wavy-shape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-wavy-shape/wavy-shape.png -------------------------------------------------------------------------------- /content/css-zig-zag-edge/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-zig-zag-edge/image.png -------------------------------------------------------------------------------- /content/css-zig-zag-edge/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A CSS-only Zig-Zag edge 4 | description: Use CSS mask to create an easy to adjust Zig-Zag edge/border 5 | date: 2022-09-02 6 | tags: posts 7 | --- 8 | 9 | How much code is needed to create a Zig-Zag edge? 10 | * One Property 11 | * One Gradient 12 | 13 | Use an online generator to easily get the code: [css-generators.com/custom-borders](https://css-generators.com/custom-borders/) 14 | 15 | 16 | {% image "./image.png", "A CSS-only zig-zag border" %} 17 | 18 | ```css 19 | .zig-zag { 20 | --a: 90deg; /* the angle of the spikes */ 21 | --s: 60px; /* the size of the spikes */ 22 | 23 | mask: 24 | conic-gradient(from calc(var(--a)/-2) at bottom, 25 | #000 var(--a),#0000 0) 50%/var(--s); 26 | } 27 | ``` 28 | 29 |

30 | See the Pen 31 | CSS only Zig-Zag edge by Temani Afif (@t_afif) 32 | on CodePen. 33 |

34 | -------------------------------------------------------------------------------- /content/css-zig-zag-panel/image-panels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-zig-zag-panel/image-panels.png -------------------------------------------------------------------------------- /content/css-zoom-effect/zoom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/css-zoom-effect/zoom.png -------------------------------------------------------------------------------- /content/curved-ribbon/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/curved-ribbon/image.png -------------------------------------------------------------------------------- /content/custom-numbered-list/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/custom-numbered-list/image.png -------------------------------------------------------------------------------- /content/custom-numbered-list/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Customize your numbered list 4 | description: A simple CSS trick to customize your ol list 5 | date: 2023-04-17 6 | tags: posts 7 | --- 8 | 9 | Use `@counter-style` to customize your `
    ` list with a simple code 10 | * No extra markup 11 | * No pseudo-element 12 | * No need for `counter()` 13 | * Keep the default browser algorithm 14 | 15 | {% image "./image.png", "A numbered list" %} 16 | 17 | ```css 18 | @counter-style new-style { 19 | system: extends decimal; 20 | suffix: ") "; 21 | prefix: "("; 22 | } 23 | ol { 24 | list-style-type: new-style; 25 | } 26 | ``` 27 | 28 | 29 |

    30 | See the Pen 31 | Custom numbered list by Temani Afif (@t_afif) 32 | on CodePen. 33 |

    34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /content/custom-progress/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/custom-progress/image.png -------------------------------------------------------------------------------- /content/custom-range-slider/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/custom-range-slider/image.png -------------------------------------------------------------------------------- /content/custom-range-slider/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: CSS-only custom range slider 4 | description: Use CSS mask to create a border-only tooltip with a gradient coloration 5 | date: 2023-04-10 6 | tags: posts 7 | --- 8 | 9 | Use modern CSS tricks to create fancy range sliders with a little code 10 | * No extra element (only the `` element) 11 | * Optimized with CSS variables 12 | * Transparent gap around the thumb 13 | 14 | {% image "./image.png", "CSS-only range slider" %} 15 | 16 | 17 |

    18 | See the Pen 19 | CSS only custom range sliders by Temani Afif (@t_afif) 20 | on CodePen. 21 |

    22 | 23 | 24 | Related [sitepoint.com/css-custom-range-slider/](https://www.sitepoint.com/css-custom-range-slider/) -------------------------------------------------------------------------------- /content/cut-out-shapes/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/cut-out-shapes/image.png -------------------------------------------------------------------------------- /content/dashed-rounded-border/dash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/dashed-rounded-border/dash.png -------------------------------------------------------------------------------- /content/diagonal-reveal-effect/hover-effect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/diagonal-reveal-effect/hover-effect.png -------------------------------------------------------------------------------- /content/equal-height-column/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/equal-height-column/image.png -------------------------------------------------------------------------------- /content/equal-width-button/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/equal-width-button/image.png -------------------------------------------------------------------------------- /content/equal-width-button/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Equal width buttons to the widest one 4 | description: A few lines of code ot create equal width buttons 5 | date: 2022-01-20 6 | tags: posts 7 | --- 8 | 9 | Make a set of buttons equal in width to the widest one using a few lines of code. 10 | * No JavaScript 11 | * Works with any number of button 12 | * Easily switch between the horizontal and vertical configuration 13 | 14 | {% image "./image.png", "equal width buttons" %} 15 | 16 | ```css 17 | .container { 18 | display: inline grid; 19 | grid-auto-flow: column; 20 | grid-auto-columns: 1fr; 21 | } 22 | ``` 23 | 24 |

    25 | See the Pen 26 | Equal width buttons by Temani Afif (@t_afif) 27 | on CodePen. 28 |

    29 | -------------------------------------------------------------------------------- /content/fade-content-border-mask/fade-content-inside-border.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/fade-content-border-mask/fade-content-inside-border.png -------------------------------------------------------------------------------- /content/fancy-avatar-header/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/fancy-avatar-header/image.png -------------------------------------------------------------------------------- /content/fancy-circular-hover/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/fancy-circular-hover/image.png -------------------------------------------------------------------------------- /content/fancy-corner-decoration/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/fancy-corner-decoration/image.png -------------------------------------------------------------------------------- /content/fancy-frame-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/fancy-frame-image/image.png -------------------------------------------------------------------------------- /content/fancy-title-divider-2/title-divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/fancy-title-divider-2/title-divider.png -------------------------------------------------------------------------------- /content/fancy-title-divider/title-divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/fancy-title-divider/title-divider.png -------------------------------------------------------------------------------- /content/feed/feed.11tydata.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | eleventyExcludeFromCollections: true 3 | } 4 | -------------------------------------------------------------------------------- /content/feed/feed.njk: -------------------------------------------------------------------------------- 1 | --- 2 | # Metadata comes from _data/metadata.js 3 | permalink: /feed/feed.xml 4 | --- 5 | 6 | 7 | {{ metadata.title }} 8 | {{ metadata.description }} 9 | 10 | 11 | {{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }} 12 | {{ metadata.url }} 13 | 14 | {{ metadata.author.name }} 15 | 16 | {%- for post in collections.posts | reverse %} 17 | {% set absolutePostUrl %}{{ post.url | htmlBaseUrl(metadata.url) }}{% endset %} 18 | 19 | {{ post.data.title }} 20 | 21 | {{ post.date | dateToRfc3339 }} 22 | {{ absolutePostUrl }} 23 | Read more

    ]]>     24 |     25 | {%- endfor %} 26 |     27 | -------------------------------------------------------------------------------- /content/feed/json.njk: -------------------------------------------------------------------------------- 1 | --- 2 | # Metadata comes from _data/metadata.js 3 | permalink: /feed/feed.json 4 | --- 5 | { 6 | "version": "https://jsonfeed.org/version/1.1", 7 | "title": "{{ metadata.title }}", 8 | "language": "{{ metadata.language }}", 9 | "home_page_url": "{{ metadata.url | addPathPrefixToFullUrl }}", 10 | "feed_url": "{{ permalink | htmlBaseUrl(metadata.url) }}", 11 | "description": "{{ metadata.description }}", 12 | "author": { 13 | "name": "{{ metadata.author.name }}", 14 | "url": "{{ metadata.author.url }}" 15 | }, 16 | "items": [ 17 | {%- for post in collections.posts | reverse %} 18 | {%- set absolutePostUrl = post.url | htmlBaseUrl(metadata.url) %} 19 | { 20 | "id": "{{ absolutePostUrl }}", 21 | "url": "{{ absolutePostUrl }}", 22 | "title": "{{ post.data.title }}", 23 | "content_html": {% if post.templateContent %}{{ post.templateContent | transformWithHtmlBase(absolutePostUrl, post.url) | dump | safe }}{% else %}""{% endif %}, 24 | "date_published": "{{ post.date | dateToRfc3339 }}" 25 | } 26 | {% if not loop.last %},{% endif %} 27 | {%- endfor %} 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /content/filling-loader/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/filling-loader/image.png -------------------------------------------------------------------------------- /content/filling-loader/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: The Filling CSS loaders Collection 4 | description: 20 CSS-only single element loaders 5 | date: 2024-10-04 6 | tags: posts 7 | --- 8 | 9 | Adding a new set of loaders to [the biggest collection of loading animations](https://css-loaders.com/). 10 | 11 | ### [The Filling CSS Loaders Collection](https://css-loaders.com/filling/) 12 | 13 | {% image "./image.png", "CSS-only single element loaders" %} 14 | 15 | One example: 16 | 17 |

    18 | See the Pen 19 | Filling the loading (single element) by Temani Afif (@t_afif) 20 | on CodePen. 21 |

    22 | 23 | -------------------------------------------------------------------------------- /content/first-last-element-with-class/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: "Select the first & last element with a class" 4 | description: "Two methods to select the first & last element with a specific class" 5 | date: 2023-04-18 6 | tags: posts 7 | --- 8 | 9 | Do you want to select the first and last element with a specific class? It's possible and you can do it using 2 different methods! 10 | 11 | 12 | ```css 13 | /* First element with class "cat" */ 14 | .cat:not(.cat ~ *) {} 15 | /* OR */ 16 | :nth-child(1 of .cat) {} 17 | 18 | 19 | /* Last element with class "bird" */ 20 | .bird:not(:has(~ .bird)) {} 21 | /* OR */ 22 | :nth-last-child(1 of .bird) {} 23 | ``` 24 | 25 | 26 |

    27 | See the Pen 28 | Untitled by Temani Afif (@t_afif) 29 | on CodePen. 30 |

    31 | 32 | 33 | -------------------------------------------------------------------------------- /content/flex-wrap/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/flex-wrap/image.png -------------------------------------------------------------------------------- /content/flex-wrap/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: The unknown behavior of flex-wrap 4 | description: flex-wrap doesn't only control the wrapping of items but also affects the alignment 5 | date: 2025-04-14 6 | tags: posts 7 | --- 8 | 9 | `flex-wrap: wrap` allows items to wrap onto multiple lines but it has another function. It transforms your flex container from a single-line to a multi-line container even if at the end you have only one flex line. This means we can use `align-content` to align the content. 10 | 11 | In other words, you need to use `flex-wrap: wrap` to align the content using `align-content` even if there is no wrapping. 12 | 13 | {% image "./image.png", "flex-wrap & align-content" %} 14 | 15 | It's different from `align-items` which aligns the items inside the line whereas `align-content` aligns the whole line. Here is an interactive demo to see the behavior of each property: 16 | 17 |

    18 | See the Pen 19 | flex-wrap & alignment by Temani Afif (@t_afif) 20 | on CodePen. 21 |

    22 | -------------------------------------------------------------------------------- /content/float-bottom-corner/float.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/float-bottom-corner/float.png -------------------------------------------------------------------------------- /content/float-bottom-corner/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Float an element to the bottom corner 4 | description: Use shape-outside to place an element on the bottom corner 5 | date: 2022-06-22 6 | tags: posts 7 | --- 8 | 9 | Make an element float to the bottom corner of your text content 10 | * Minimal HTML code 11 | * No JavaScript 12 | * No media query 13 | 14 | {% image "./float.png", "An image float at the bottom corner of the text" %} 15 | 16 | ```html 17 |
    18 |

    19 | 20 | .... 21 |

    22 |
    23 | ``` 24 | 25 | ```css 26 | .wrapper { 27 | display: flex; 28 | } 29 | .float { 30 | float: right; 31 | height: 100%; 32 | width: 100px; 33 | shape-outside: inset(calc(100% - 100px /*height */) 0 0); 34 | object-fit: contain; 35 | object-position: bottom; 36 | } 37 | ``` 38 | 39 |

    40 | See the Pen 41 | Float element to bottom corner by Temani Afif (@t_afif) 42 | on CodePen. 43 |

    44 | 45 | 46 | More detail: [css-tricks.com/float-an-element-to-the-bottom-corner](https://css-tricks.com/float-an-element-to-the-bottom-corner/) -------------------------------------------------------------------------------- /content/flower-shape/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/flower-shape/image.png -------------------------------------------------------------------------------- /content/flower-shape/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Create a flower shape using CSS mask 4 | description: Use an online generator to create a fancy flower shape using mask 5 | date: 2024-02-20 6 | tags: posts 7 | --- 8 | 9 | Create a fancy flower shape using an online generator 🌺 10 | 11 | [css-generators.com/flower-shapes](https://css-generators.com/flower-shapes/) 12 | 13 | Get an optimized code in no time. Adjust the setting and then click! 14 | * Only one element 15 | * Works with images 16 | * Powered by CSS Mask 17 | 18 | 19 | {% image "./image.png", "CSS-only flower shapes" %} 20 | 21 | More CSS Shapes: [css-shape.com](https://css-shape.com) -------------------------------------------------------------------------------- /content/fluid-typography/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Fluid typography with discrete steps 4 | description: Improve your fluid typography implementation using the round() function 5 | date: 2024-04-03 6 | tags: posts 7 | --- 8 | 9 | Use the `round()` function and create a fluid typography with a discrete function instead of a continuous one. 10 | 11 | Define the step and get precise values within a specific range. Very useful if you have some calculation based on the `font-size` like using the `em` unit. No more rounding issue! 12 | 13 | 14 | ```css 15 | /* Instead of */ 16 | p { 17 | font-size: clamp(1rem,1rem + 3vw,2.5rem); 18 | } 19 | /* use */ 20 | p { 21 | font-size: clamp(1rem,round(down,1rem + 3vw,2px),2.5rem); 22 | 23 | /* 24 | 1rem = 16px | 2.5rem = 40px 25 | we go from 16px to 40px with a 2px step 26 | 16px,18px,20px,22px,24px,..,38px,40px 27 | */ 28 | 29 | /* OR a more friendly syntax*/ 30 | --fluid: clamp(1rem,1rem + 3vw,2.5rem); /* the original function */ 31 | font-size: round(down,var(--fluid),2px); 32 | } 33 | ``` 34 | 35 |

    36 | See the Pen 37 | Fluid typography with steps by Temani Afif (@t_afif) 38 | on CodePen. 39 |

    40 | -------------------------------------------------------------------------------- /content/folded-rectangle/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/folded-rectangle/image.png -------------------------------------------------------------------------------- /content/folded-ribbon-hover-2/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/folded-ribbon-hover-2/image.png -------------------------------------------------------------------------------- /content/folded-ribbon-hover/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/folded-ribbon-hover/image.png -------------------------------------------------------------------------------- /content/folded-ribbon/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/folded-ribbon/image.png -------------------------------------------------------------------------------- /content/fragmentation-effect/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/fragmentation-effect/image.png -------------------------------------------------------------------------------- /content/fragmentation-effect/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A CSS-only fragmentation effect 4 | description: Add a fancy framentation effect to images using CSS mask 5 | date: 2024-03-25 6 | tags: posts 7 | --- 8 | 9 | Add a hover aniamtion with a fancy fragmentation effect using only the `` tag. Powered by CSS Mask, `@property` and optimized with CSS mask 10 | 11 | {% image "./image.png", "CSS-only fragmentation effect" %} 12 | 13 |

    14 | See the Pen 15 | CSS-only fragmentation effect on hover by Temani Afif (@t_afif) 16 | on CodePen. 17 |

    18 | 19 | 20 | More detail [css-tricks.com/image-fragmentation-effect-with-css-masks-and-custom-properties](https://css-tricks.com/image-fragmentation-effect-with-css-masks-and-custom-properties/) -------------------------------------------------------------------------------- /content/full-bleed-layout/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/full-bleed-layout/image.png -------------------------------------------------------------------------------- /content/full-screen-height/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Full screen height container 4 | description: Make your container fill all the screen height 5 | date: 2021-12-15 6 | tags: posts 7 | --- 8 | 9 | Make your container fill all the screen height 10 | * No cascading `height:100%` 11 | * No side effects of the `100vh` 12 | * Works with the default margin of `` 13 | * No overflow issue. The height will grow to fit the content. 14 | 15 | ```css 16 | html { 17 | display: grid; 18 | min-height: 100%; 19 | } 20 | .box { 21 | height: 100%; 22 | } 23 | ``` 24 | 25 |

    26 | See the Pen 27 | Full height element by Temani Afif (@t_afif) 28 | on CodePen. 29 |

    30 | 31 | 32 | 33 | More detail: [verpex.com/blog/website-tips/modern-layouts-using-css-grid](https://verpex.com/blog/website-tips/modern-layouts-using-css-grid) -------------------------------------------------------------------------------- /content/glowing-border/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/glowing-border/image.png -------------------------------------------------------------------------------- /content/gradient-border-hover/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/gradient-border-hover/image.png -------------------------------------------------------------------------------- /content/gradient-overlay-border-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/gradient-overlay-border-image/image.png -------------------------------------------------------------------------------- /content/gradient-overlay-border-image/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Add a gradient overlay using border-image 4 | description: One line of code to add a gradient overlay above your background 5 | date: 2023-05-18 6 | tags: posts 7 | --- 8 | 9 | Do you want to add a gradient overlay above your background but you cannot edit the background property, add an extra element or use pseudo-element? 10 | 11 | You can do it with `border-image`! 12 | 13 | Only one line of code and you have your overlay 🤩 14 | 15 | {% image "./image.png", "A gradient overaly above a background" %} 16 | 17 | ```css 18 | .container { 19 | border-image: fill 0 20 | linear-gradient(#0003,#000); /* your gradient here */ 21 | } 22 | ``` 23 | 24 |

    25 | See the Pen 26 | Gradient Overlay with border-image by Temani Afif (@t_afif) 27 | on CodePen. 28 |

    29 | 30 | 31 | 32 | Related: [smashingmagazine.com/2024/01/css-border-image-property/](https://www.smashingmagazine.com/2024/01/css-border-image-property/) -------------------------------------------------------------------------------- /content/grainy-texture/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/grainy-texture/image.png -------------------------------------------------------------------------------- /content/grainy-texture/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/grainy-texture/image2.png -------------------------------------------------------------------------------- /content/grid-dashed-lines/dash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/grid-dashed-lines/dash.png -------------------------------------------------------------------------------- /content/grid-dashed-lines/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/grid-dashed-lines/image.png -------------------------------------------------------------------------------- /content/grid-dashed-lines/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Grid with dashed lines 4 | description: Two gradients to create a grid with dashed lines 5 | date: 2022-02-28 6 | tags: posts 7 | --- 8 | 9 | Create [a grid of dashed lines](https://css-shape.com/grid-lines/) using a few lines of code 10 | * One property 11 | * Two gradients 12 | * Easy to adjust using CSS variables 13 | 14 | {% image "./image.png", "A grid of dashed lines" %} 15 | 16 | ```css 17 | html { 18 | --s: 100px; /* control the size of the grid */ 19 | --n: 4; /* control the granularity */ 20 | --t: 2px; /* the thickness */ 21 | --g: 10px; /* the gap between dashes */ 22 | 23 | --c:#556270 25%,#0000 0; 24 | background: 25 | conic-gradient(at var(--g) var(--t),var(--c)) 26 | calc((var(--s)/var(--n) - var(--g) + var(--t))/2) 0/ 27 | calc(var(--s)/var(--n)) var(--s), 28 | conic-gradient(from 180deg at var(--t) var(--g),var(--c)) 29 | 0 calc((var(--s)/var(--n) - var(--g) + var(--t))/2)/ 30 | var(--s) calc(var(--s)/var(--n)); 31 | } 32 | ``` 33 | 34 |

    35 | See the Pen 36 | CSS-only Grid of dashed lines by Temani Afif (@t_afif) 37 | on CodePen. 38 |

    39 | -------------------------------------------------------------------------------- /content/heart-shape-animation/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/heart-shape-animation/heart.png -------------------------------------------------------------------------------- /content/heart-shape-animation/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Heart shape animation using outline 4 | description: Turn your image into a heart with a cool animation 5 | date: 2022-07-04 6 | tags: posts 7 | --- 8 | 9 | Add a beautiful animation to a [Heart shape](/image-heart-shape/) and reveal your best images 🥰 😍 10 | * No extra element (only the `` tag) 11 | * No pseudo-element 12 | * Less than 10 declarations 13 | 14 | 15 | {% image "./heart.png", "An image with a heart shape" %} 16 | 17 | ```css 18 | img { 19 | width: 250px; 20 | aspect-ratio: 1; 21 | object-fit: cover; 22 | mask-border: radial-gradient(#000 69%,#0000 70%) 84.5%/50%; 23 | clip-path: polygon(-41% 0,50% 91%, 141% 0); 24 | outline: 100vmax solid #ff3e60; 25 | outline-offset: -100vmax; 26 | transition: .7s; 27 | } 28 | img:hover { 29 | outline-color: #0000; 30 | } 31 | ``` 32 | 33 |

    34 | See the Pen 35 | CSS only heart hover effect by Temani Afif (@t_afif) 36 | on CodePen. 37 |

    38 | 39 | 40 | Related Article: [verpex.com/blog/website-tips/css-shapes-the-heart](https://verpex.com/blog/website-tips/css-shapes-the-heart) -------------------------------------------------------------------------------- /content/heart-shape-hover-2/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/heart-shape-hover-2/image.png -------------------------------------------------------------------------------- /content/heart-shape-hover-2/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Heart shape with a sliding hover effect II 4 | description: A lovely animation to your heart shape image 5 | date: 2024-02-15 6 | tags: posts 7 | --- 8 | 9 | Another variation of [the previous effect](/heart-shape-hover/) using the same code structure 10 | * No extra element (only the `` tag) 11 | * No pseudo-elements 12 | 13 | 14 | {% image "./image.png", "A CSS only heart shape" %} 15 | 16 | ```css 17 | img { 18 | --s: 300px; /* image size */ 19 | 20 | width: var(--s); 21 | aspect-ratio: 1; 22 | padding: calc(.09*var(--s)) calc(var(--s)/2 - var(--_p)); 23 | box-sizing: border-box; 24 | object-fit: cover; 25 | border-image: 26 | radial-gradient(#e5414e 69%,#0000 70%) 27 | 84.5%/calc(var(--s)/2)/0 var(--_p); 28 | clip-path: polygon( 29 | calc(-41% - var(--_p)) 0, 30 | calc(50% - var(--_p)) 91%, 31 | calc(50% + var(--_p)) 91%, 32 | calc(141% + var(--_p)) 0); 33 | transition: .5s; 34 | --_p: 0px; 35 | } 36 | img:hover { 37 | --_p: calc(var(--s)/2); 38 | } 39 | ``` 40 | 41 |

    42 | See the Pen 43 | Heart shape image reveal II ❤️ by Temani Afif (@t_afif) 44 | on CodePen. 45 |

    46 | -------------------------------------------------------------------------------- /content/heart-shape-hover/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/heart-shape-hover/image.png -------------------------------------------------------------------------------- /content/heart/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/heart/image.png -------------------------------------------------------------------------------- /content/heart/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A heart shape with modern CSS 4 | description: Use the new shape() function to create a heart shape with minimal code 5 | date: 2025-04-23 6 | tags: posts 7 | --- 8 | 9 | Another classic shape made easy with the new `shape()` function. A heart shape with a simple code. 10 | 11 | {% image "./image.png", "CSS-only heart shape" %} 12 | 13 | ```css 14 | .heart { 15 | aspect-ratio: 1; 16 | clip-path: 17 | shape( 18 | from 50% 91%, 19 | line to 90% 50%, 20 | arc to 50% 9% of 1%, 21 | arc to 10% 50% of 1% 22 | ); 23 | } 24 | ``` 25 | 26 |

    27 | See the Pen 28 | Heart shape using shape() by Temani Afif (@t_afif) 29 | on CodePen. 30 |

    31 | 32 | 33 | For better support check this: [Turn your image into a heart](/image-heart-shape/) -------------------------------------------------------------------------------- /content/hexagon-shape/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/hexagon-shape/image.png -------------------------------------------------------------------------------- /content/hexagon-shape/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A Modern way to create hexagon shapes 4 | description: Two lines of CSS code an no magic number for an hexagon shape 5 | date: 2024-01-11 6 | tags: posts 7 | --- 8 | 9 | An easy and modern way to create Hexagon Shapes 10 | * Only 2 CSS declarations 11 | * No magic numbers 12 | * A simple 4-point polygon for the clip-path 13 | 14 | 15 | {% image "./image.png", "CSS-only hexagon shapes" %} 16 | 17 | ```css 18 | .hex { 19 | aspect-ratio: 1/cos(30deg); 20 | clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); 21 | } 22 | 23 | .hex-alt { 24 | aspect-ratio: cos(30deg); 25 | clip-path: polygon(-50% 50%,50% 100%,150% 50%,50% 0); 26 | /* Notice how I simply switched the x/y 27 | of the previous polygon, easy! */ 28 | } 29 | ``` 30 | 31 |

    32 | See the Pen 33 | CSS-only hexagon shapes (the modern way) by Temani Afif (@t_afif) 34 | on CodePen. 35 |

    36 | 37 | 38 | More CSS Shapes: [css-shape.com](https://css-shape.com) -------------------------------------------------------------------------------- /content/horizontal-line-title/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Horizontal lines around your title 4 | description: Use border-image to create Horizontal lines around a title 5 | date: 2022-06-24 6 | tags: posts 7 | --- 8 | 9 | Add horizontal lines around your title using `border-image` 10 | * No extra element 11 | * No pseudo-element 12 | * No overflow issue 13 | * Only two CSS properties 14 | * Optimized with CSS variables 15 | 16 | 17 | {% image "./lines.png", "Titles with horizontal lines on the sides" %} 18 | 19 | ```css 20 | h2 { 21 | --s: 3px; /* the thickness */ 22 | --c: red; /* the color */ 23 | --w: 100px; /* the width */ 24 | --g: 10px; /* the gap */ 25 | border-image: 26 | linear-gradient( 27 | #0000 calc(50% - var(--s)/2), 28 | var(--c) 0 calc(50% + var(--s)/2), 29 | #0000 0) 30 | 0 1/0 var(--w)/0 calc(var(--w) + var(--g)); 31 | } 32 | ``` 33 | 34 |

    35 | See the Pen 36 | Horizontal lines around your title by Temani Afif (@t_afif) 37 | on CodePen. 38 |

    39 | 40 | 41 | Related: [smashingmagazine.com/2024/01/css-border-image-property/](https://www.smashingmagazine.com/2024/01/css-border-image-property/) -------------------------------------------------------------------------------- /content/horizontal-line-title/lines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/horizontal-line-title/lines.png -------------------------------------------------------------------------------- /content/horizontal-stack-avatars/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/horizontal-stack-avatars/image.png -------------------------------------------------------------------------------- /content/hover-anchor-positionning/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Fancy hover effect with anchor positioning 4 | description: Create a navigation menu with a cool hover effect 5 | date: 2024-06-21 6 | tags: posts 7 | --- 8 | 9 | A few experiemntation usign Anchor Positioning to create fancy hover effects. Highlight the menu items with a sliding effect. 10 | 11 |

    12 | See the Pen 13 | Menu hover effect (with Anchor Positioning) by Temani Afif (@t_afif) 14 | on CodePen. 15 |

    16 | 17 | Or jumping effect. 18 | 19 |

    20 | See the Pen 21 | Menu hover effect (with Anchor Positioning) by Temani Afif (@t_afif) 22 | on CodePen. 23 |

    24 | -------------------------------------------------------------------------------- /content/hue-manipulation-color-mix/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Hue manipulation using color-mix() 4 | description: Use the new color-mix() to manipulate the Hue of a color in the HSL color space 5 | date: 2023-03-29 6 | tags: posts 7 | --- 8 | 9 | Use the new `color-mix()` to manipulate the Hue of a color in the HSL color space 10 | 11 | ```css 12 | .box { 13 | --color: red; 14 | --h: 0; /* angle (from 0 to 360 without unit) */ 15 | 16 | --new-color: 17 | color-mix(in hsl longer hue, 18 | var(--color), var(--color) calc(var(--h)*1%/3.6) 19 | ); 20 | } 21 | ``` 22 | 23 | The same can be done using relative colors but the support is still low: 24 | 25 | ```css 26 | .box { 27 | --color: red; 28 | --h: 0; /* angle (from 0 to 360 without unit) */ 29 | 30 | --new-color: hsl(from var(--color) calc(h + var(--h)*1deg) s l) 31 | } 32 | ``` 33 | 34 |

    35 | See the Pen 36 | hue manipulation using color-mix() by Temani Afif (@t_afif) 37 | on CodePen. 38 |

    39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /content/image-3d-effect/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/image-3d-effect/image.png -------------------------------------------------------------------------------- /content/image-color-overlay/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A color overlay above your images 4 | description: Use outline to add an overlay to your image 5 | date: 2022-04-07 6 | tags: posts 7 | --- 8 | 9 | Add a color overlay above your image using only 3 declarations 10 | * No extra element (only the `` tag) 11 | * No pseudo element 12 | * Works with rounded image 13 | 14 | You can also have a cool transition on hover 15 | 16 | {% image "./overlay.png", "A color overlay above an image" %} 17 | 18 | ```css 19 | img { 20 | outline: 100vmax solid rgb(0 0 0/var(--_o,50%)); 21 | outline-offset: -100vmax; 22 | /* keep only the image area visible */ 23 | mask: linear-gradient(#000 0 0); 24 | 25 | transition: outline-color .4s; 26 | } 27 | img:hover { 28 | --_o: 0%; 29 | } 30 | ``` 31 | 32 |

    33 | See the Pen 34 | Overlay image (no extra element) by Temani Afif (@t_afif) 35 | on CodePen. 36 |

    37 | 38 | -------------------------------------------------------------------------------- /content/image-color-overlay/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/image-color-overlay/overlay.png -------------------------------------------------------------------------------- /content/image-gift-box-2/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/image-gift-box-2/image.png -------------------------------------------------------------------------------- /content/image-gift-box/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/image-gift-box/image.png -------------------------------------------------------------------------------- /content/image-heart-shape/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/image-heart-shape/heart.png -------------------------------------------------------------------------------- /content/image-heart-shape/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Turn your image into a heart 4 | description: Create a CSS heart shape using any image 5 | date: 2022-07-01 6 | tags: posts 7 | --- 8 | 9 | Turn your favorite image into a [Heart 💖](https://css-shape.com/heart/) using a few lines of code 10 | * No extra element (only the `` tag) 11 | * No pseudo-element 12 | * Only two CSS declarations 13 | 14 | 15 | {% image "./heart.png", "An image with a heart shape" %} 16 | 17 | ```css 18 | img { 19 | mask-border: radial-gradient(#000 69%,#0000 70%) 84.5%/50%; 20 | clip-path: polygon(-41% 0,50% 91%, 141% 0); 21 | } 22 | ``` 23 | 24 | For better support we can rely on `mask` 25 | 26 | ```css 27 | img { 28 | mask: 29 | radial-gradient(at 70% 31%,#000 29%,#0000 30%), 30 | radial-gradient(at 30% 31%,#000 29%,#0000 30%), 31 | linear-gradient(#000 0 0) bottom/100% 50% no-repeat; 32 | clip-path: polygon(-41% 0,50% 91%, 141% 0); 33 | } 34 | ``` 35 | 36 |

    37 | See the Pen 38 | CSS only heart images by Temani Afif (@t_afif) 39 | on CodePen. 40 |

    41 | 42 | 43 | Related Article: [verpex.com/blog/website-tips/css-shapes-the-heart](https://verpex.com/blog/website-tips/css-shapes-the-heart) -------------------------------------------------------------------------------- /content/image-thumbnail/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/image-thumbnail/image.png -------------------------------------------------------------------------------- /content/image-thumbnail/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: "One big image + thumbnails" 4 | description: A CSS grid with a big image and thumbnails 5 | date: 2021-12-15 6 | tags: posts 7 | --- 8 | 9 | A big image + thumbnails using CSS Grid. Same code for both the horizontal and vertical layout. 10 | 11 | {% image "./image.png", "A big image plus thumbnail" %} 12 | 13 | 14 | ```html 15 |
    16 | 17 | 18 | 19 |
    20 | ``` 21 | 22 | ```css 23 | .grid { 24 | display: grid; 25 | grid-auto-flow: row; /* it's the default value (can be omitted) */ 26 | } 27 | .horizontal { 28 | grid-auto-flow: column; 29 | } 30 | .grid img:first-child { 31 | grid-area: span 3 / span 3; 32 | } 33 | ``` 34 | 35 | 36 |

    37 | See the Pen 38 | Big Image + thumbnails by Temani Afif (@t_afif) 39 | on CodePen. 40 |

    41 | 42 | 43 | More detail: [css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers](https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/) -------------------------------------------------------------------------------- /content/image-wavy-borders-2/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/image-wavy-borders-2/image.png -------------------------------------------------------------------------------- /content/image-wavy-borders-2/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /content/image-wavy-borders/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/image-wavy-borders/image.png -------------------------------------------------------------------------------- /content/index.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/home.njk 3 | eleventyNavigation: 4 | key: Home 5 | order: 1 6 | numberOfLatestPostsToShow: 15 7 | --- 8 | {% set postsCount = collections.posts | length %} 9 | {% set latestPostsCount = postsCount | min(numberOfLatestPostsToShow) %} 10 |

    Learn CSS the easy way

    11 |

    Discover a new CSS Trick every day and enhance your web development skills. CSS Tip helps you stay up to date with the latest and modern web features. It takes a few minutes to unlock all the CSS secrets!

    12 |

    Do you want to surprise yourself? Read a random CSS Tip!

    13 |
    14 | {% set postslist = collections.posts | head(-1 * numberOfLatestPostsToShow) %} 15 | {% set postslistCounter = postsCount %} 16 | {% include "postslist.njk" %} 17 | 18 | {% set morePosts = postsCount - numberOfLatestPostsToShow %} 19 | {% if morePosts > 0 %} 20 |

    {{ morePosts }} more CSS Tips can be found in the archive.

    21 | {% endif %} 22 | 23 | {# List every content page in the project #} 24 | {# 25 | 30 | #} 31 | 32 |
    33 | 34 |

    This site is a member of CS.Sjoy.lol webring. Cool websites doing CSS stuff!

    35 |

    Explore the Ring: Previous Site | 36 | Random Site | 37 | Next Site

    -------------------------------------------------------------------------------- /content/infinite-borders/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/infinite-borders/image.png -------------------------------------------------------------------------------- /content/infinite-logos-animation/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/infinite-logos-animation/image.png -------------------------------------------------------------------------------- /content/infinite-ribbon-shape/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/infinite-ribbon-shape/image.png -------------------------------------------------------------------------------- /content/infinite-ribbon-shape/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: An Infinite Ribbon Shape for your title 4 | description: Transform your title into an infinite ribbon shape using CSS 5 | date: 2023-11-03 6 | tags: posts 7 | --- 8 | 9 | Transform your title into an Infinite Ribbon Shape using a few lines of code 10 | * Only one element 11 | * No pseudo-elements 12 | * No overflow issue 13 | 14 | {% image "./image.png", "CSS only infinite ribbon shapes" %} 15 | 16 | ```css 17 | .ribbon { 18 | --r: .8em; /* control the cutout */ 19 | --c: #bd1550; 20 | 21 | padding-inline: 1lh calc(var(--r) + .25em); 22 | border-image: conic-gradient(var(--c) 0 0) fill 0//9999px; 23 | outline: 9999px solid #0004; 24 | } 25 | .top { 26 | clip-path: polygon(1lh 100%,100% 100%,calc(100% - var(--r)) 50%,100% 0,1lh 0,1lh -9999px,0 -9999px,0 0); 27 | } 28 | .bottom { 29 | clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,1lh 100%,1lh 9999px,0 9999px,0 100%); 30 | } 31 | ``` 32 | 33 |

    34 | See the Pen 35 | Infinite Ribbon Shapes by Temani Afif (@t_afif) 36 | on CodePen. 37 |

    38 | 39 | 40 | More Ribbon Shapes: [css-generators.com/ribbon-shapes](https://css-generators.com/ribbon-shapes/) -------------------------------------------------------------------------------- /content/infinite-shadow-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/infinite-shadow-image/image.png -------------------------------------------------------------------------------- /content/infinite-shadow/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/infinite-shadow/image.png -------------------------------------------------------------------------------- /content/infinite-stripes-shadow/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/infinite-stripes-shadow/image.png -------------------------------------------------------------------------------- /content/initial-containing-block/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/initial-containing-block/image.png -------------------------------------------------------------------------------- /content/initial-containing-block/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/initial-containing-block/image1.png -------------------------------------------------------------------------------- /content/inner-border-radius/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/inner-border-radius/image.png -------------------------------------------------------------------------------- /content/inner-border-radius/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: An inner border-radius with one property 4 | description: Use a magic border-image trick to create an inner border-radius 5 | date: 2023-05-03 6 | tags: posts 7 | --- 8 | 9 | Do you want to have a radius inside the element but not outside? You can do it using only one property 🤩 10 | 11 | 12 | {% image "./image.png", "A box with an inner border-radius" %} 13 | 14 | ```css 15 | .box { 16 | --c: orange; 17 | --r: 50px; /* control the inner radius */ 18 | --b: 15%; /* control the border thickness*/ 19 | 20 | border-image: 21 | radial-gradient( 22 | #0000 calc(71% - var(--b)), 23 | var(--c) calc(72% - var(--b)) 24 | ) 49.9%/var(--r); 25 | } 26 | ``` 27 | 28 |

    29 | See the Pen 30 | Inner border-radius by Temani Afif (@t_afif) 31 | on CodePen. 32 |

    33 | 34 | 35 | 36 | There are easier way to achieve the same result with more properties and accurate values but I wanted to share this magic one-property trick. 37 | 38 | Related: [smashingmagazine.com/2024/01/css-border-image-property/](https://www.smashingmagazine.com/2024/01/css-border-image-property/) -------------------------------------------------------------------------------- /content/inner-border/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/inner-border/image.png -------------------------------------------------------------------------------- /content/inner-curve-notch/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/inner-curve-notch/image.png -------------------------------------------------------------------------------- /content/inner-outer-display/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Inner display vs Outer display 4 | description: Learn the modern way to use the display property 5 | date: 2024-10-16 6 | tags: posts 7 | --- 8 | 9 | Do you know that the below declarations are the same? 10 | 11 | ```css 12 | element { 13 | /* old way (always supported for backward compatibility) */ 14 | display: inline-grid; 15 | /* new way */ 16 | display: inline grid; 17 | display: grid inline; 18 | /* The two values correspond to the 19 | Outer display: I am seen as an "inline" element from the outside 20 | Inner display: I create a "grid" layout inside me 21 | */ 22 | } 23 | ``` 24 | 25 | The display property can take two values in any order: 26 | - The Outer display tells how the element is seen from the outside 27 | - The Inner display tells what kind of layout the element will generate (flexbox, grid, table, etc) 28 | 29 | 30 | You may ask why making the display property complex? 31 | 32 | The reason is simple: If in the future we add new layouts, we don't have to define two values ("x", "inline-x") but only one value ("x") 33 | 34 | A masonry layout? We define `masonry` and we use `display: inline masonry` and `display: block masonry` 35 | 36 | More detail: [Using the multi-keyword syntax with CSS display](https://developer.mozilla.org/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display) -------------------------------------------------------------------------------- /content/inner-radius-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/inner-radius-image/image.png -------------------------------------------------------------------------------- /content/inner-radius-image/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Border with inner radius for your images 4 | description: Two lines of code to add an inner radius to your images 5 | date: 2024-01-03 6 | tags: posts 7 | --- 8 | 9 | Add a border with an inner radius to your image using a simple code. 10 | * No extra element 11 | * No pseudo-element 12 | * Only 2 CSS declarations 13 | 14 | 15 | {% image "./image.png", "images with inner border radius" %} 16 | 17 | ```css 18 | img { 19 | border-radius: 20%; /* works with any value or without */ 20 | border-image: 21 | conic-gradient(#A7DBD8 0 0) /* border color */ 22 | fill 0//20px; /* border thickness */ 23 | } 24 | ``` 25 | 26 |

    27 | See the Pen 28 | Inner radius to image element by Temani Afif (@t_afif) 29 | on CodePen. 30 |

    31 | 32 | 33 | Another syntax 34 | 35 | ```css 36 | img { 37 | border-radius: 20%; /* works with any value or without */ 38 | border-image: conic-gradient(#A7DBD8 /* border color */ 0 0) fill 0; 39 | padding: 20px; /* border thickness */ 40 | } 41 | ``` 42 | 43 | Related: [smashingmagazine.com/2024/01/css-border-image-property/](https://www.smashingmagazine.com/2024/01/css-border-image-property/) -------------------------------------------------------------------------------- /content/inverted-radius-hover/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/inverted-radius-hover/image.png -------------------------------------------------------------------------------- /content/inverted-radius/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/inverted-radius/image.png -------------------------------------------------------------------------------- /content/line-rounded-dashes/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/line-rounded-dashes/image.png -------------------------------------------------------------------------------- /content/line-rounded-dashes/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A decorative line with rounded dashes 4 | description: A few lines of code to create a nice decoratinve line with rounded dashes 5 | date: 2024-08-15 6 | tags: posts 7 | --- 8 | 9 | Create a nice decorative line with rounded dashes using a few lines of code 10 | * Only one element 11 | * Responsive (no cut or partial dash) 12 | * You can easily switch to the vertical version 13 | * Optimized with CSS variables 14 | 15 | {% image "./image.png", "CSS-only decorative lines with rounded dashes" %} 16 | 17 | Code available here: [css-shape.com/rounded-dashes](https://css-shape.com/rounded-dashes/) 18 | 19 | Resize the below demo to notice the responsive part 20 | 21 |

    22 | See the Pen 23 | Line with rounded dashes by Temani Afif (@t_afif) 24 | on CodePen. 25 |

    26 | 27 | 28 | More CSS Shapes: [css-shape.com](https://css-shape.com) -------------------------------------------------------------------------------- /content/matrix-cube/cube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/matrix-cube/cube.png -------------------------------------------------------------------------------- /content/matrix-image/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Cut your image into pieces 4 | description: Use CSS mask to cut your image into small pieces 5 | date: 2022-01-02 6 | tags: posts 7 | --- 8 | 9 | Cut your image into small pieces using one CSS instruction. 10 | 11 | 12 | {% image "./matrix.png", "A image cut into small pieces" %} 13 | 14 | 15 | ```css 16 | img { 17 | --n: 10; /* number of rows */ 18 | --m: 15; /* number of columns */ 19 | --gap: 3px; 20 | mask: 21 | conic-gradient(from 90deg at var(--gap) var(--gap),#000 90deg,#0000 0) 22 | calc(-1*var(--gap)) calc(-1*var(--gap))/ 23 | calc((100% + var(--gap))/var(--m)) 24 | calc((100% + var(--gap))/var(--n)) 25 | } 26 | ``` 27 | 28 | 29 |

    30 | See the Pen 31 | cut image into small pieces by Temani Afif (@t_afif) 32 | on CodePen. 33 |

    34 | -------------------------------------------------------------------------------- /content/matrix-image/matrix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/matrix-image/matrix.png -------------------------------------------------------------------------------- /content/min-max/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/min-max/image.png -------------------------------------------------------------------------------- /content/multi-line-ribbon-shape-2/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/multi-line-ribbon-shape-2/image.png -------------------------------------------------------------------------------- /content/multi-line-ribbon-shape/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/multi-line-ribbon-shape/image.png -------------------------------------------------------------------------------- /content/multi-line-text-decoration/image.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/multi-line-text-decoration/image.jpeg -------------------------------------------------------------------------------- /content/multi-line-text-decoration/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Multi-line text decoration 4 | description: Use CSS gradients to decorate your text 5 | date: 2021-11-30 6 | tags: posts 7 | --- 8 | 9 | Give your your text a fancy looking using `box-decoration-break: clone` and CSS gradients. 10 | 11 | {% image "./image.jpeg", "A CSS-only menu icon" %} 12 | 13 | 14 |

    15 | See the Pen 16 | gradient + box-decoration-break by Temani Afif (@t_afif) 17 | on CodePen. 18 |

    19 | -------------------------------------------------------------------------------- /content/nesting-selector/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/nesting-selector/image-2.png -------------------------------------------------------------------------------- /content/nesting-selector/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/nesting-selector/image.png -------------------------------------------------------------------------------- /content/number-inside-box/number-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/number-inside-box/number-box.png -------------------------------------------------------------------------------- /content/octagon-shape/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/octagon-shape/image.png -------------------------------------------------------------------------------- /content/octagon-shape/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A Modern way to create an octagon shape 4 | description: Two lines of CSS code an no magic number for an octagon shape 5 | date: 2024-01-16 6 | tags: posts 7 | --- 8 | 9 | An easy and modern way to create Octagon shapes 10 | * Only 2 CSS declarations 11 | * No magic numbers 12 | * A 4-point polygon (instead of 8) for the clip-path 13 | 14 | 15 | {% image "./image.png", "CSS-only octagon shapes" %} 16 | 17 | ```css 18 | .octa { 19 | width: 200px; 20 | 21 | aspect-ratio: 1; 22 | --o:calc(50%*tan(-22.5deg)); 23 | clip-path: polygon( 24 | var(--o) 50%,50% var(--o), 25 | calc(100% - var(--o)) 50%, 26 | 50% calc(100% - var(--o)) 27 | ); 28 | } 29 | ``` 30 | 31 |

    32 | See the Pen 33 | CSS-only octagon shapes (the modern way) by Temani Afif (@t_afif) 34 | on CodePen. 35 |

    36 | 37 | 38 | More CSS Shapes: [css-shape.com](https://css-shape.com) -------------------------------------------------------------------------------- /content/outline-hover-effect/hover-effect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/outline-hover-effect/hover-effect.png -------------------------------------------------------------------------------- /content/outline-hover-effect/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A fancy hover effect using outline 4 | description: Use outline to create a simple but nice hover effect 5 | date: 2022-08-24 6 | tags: posts 7 | --- 8 | 9 | Add a cool hover effect to your images using a few lines of code 10 | * No extra element (only the `` tag) 11 | * No pseudo element 12 | * Using only the outline property 13 | * Optimized with CSS variables 14 | 15 | 16 | {% image "./hover-effect.png", "A fancy hover effect using CSS outline" %} 17 | 18 | ```css 19 | img { 20 | --s: 250px; /* the size of the image */ 21 | --b: 8px; /* the border thickness*/ 22 | --g: 14px; /* the gap */ 23 | --c: #4ECDC4; /* the color */ 24 | 25 | width: var(--s); 26 | aspect-ratio: 1; 27 | outline: calc(var(--s)/2) solid #0009; 28 | outline-offset: calc(var(--s)/-2); 29 | transition: 0.3s; 30 | } 31 | img:hover { 32 | outline: var(--b) solid var(--c); 33 | outline-offset: var(--g); 34 | } 35 | ``` 36 | 37 |

    38 | See the Pen 39 | Frame hover effect with one element by Temani Afif (@t_afif) 40 | on CodePen. 41 |

    42 | 43 | 44 | -------------------------------------------------------------------------------- /content/overflowing-background/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/overflowing-background/background.png -------------------------------------------------------------------------------- /content/overflowing-underline-2/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Extend your underline to the edge of the screen II 4 | description: Use a border-image trick to create an overflowing underline 5 | date: 2022-06-20 6 | tags: posts 7 | --- 8 | 9 | Improving [the previous effect](/overflowing-underline/) to consider an underline with a gradient coloration that extend to the edge of the screen 10 | * No extra element 11 | * No pseudo-element 12 | * No overflow issue 13 | * Optimized with CSS variables 14 | 15 | {% image "./line.png", "An extended underline to left and the right" %} 16 | 17 | ```css 18 | .full-line { 19 | --b: 8px; /* border thickness */ 20 | --g: repeating-linear-gradient(45deg,#BD1550 0 10px,#E97F02 0 20px,#F8CA00 0 30px); 21 | border-image: var(--g) fill 0/calc(100% - var(--b)) 0 0/0 100vw 0 0 repeat; 22 | padding-block: 10px; 23 | } 24 | .left { 25 | border-image-outset: 0 0 0 100vw; 26 | } 27 | ``` 28 | 29 |

    30 | See the Pen 31 | CSS only extended underline with gradient by Temani Afif (@t_afif) 32 | on CodePen. 33 |

    34 | 35 | 36 | Related: [smashingmagazine.com/2024/01/css-border-image-property/](https://www.smashingmagazine.com/2024/01/css-border-image-property/) -------------------------------------------------------------------------------- /content/overflowing-underline-2/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/overflowing-underline-2/line.png -------------------------------------------------------------------------------- /content/overflowing-underline/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Extend your underline to the edge of the screen 4 | description: Use a border-image trick to create an overflowing underline 5 | date: 2022-06-16 6 | tags: posts 7 | --- 8 | 9 | Add an underline to your title and extend it to the right (or left) edge of the screen whatever the element/container size 10 | * No extra element 11 | * No pseudo-element 12 | * No overflow issue 13 | * Only one CSS property 14 | 15 | {% image "./line.png", "An extended underline to left and the right" %} 16 | 17 | ```css 18 | .full-line-right { 19 | border-image: 20 | linear-gradient(0deg, 21 | #1095c1 5px, /* color and thickness */ 22 | #0000 0) fill 0//0 100vw 0 0; 23 | 24 | } 25 | .full-line-left { 26 | border-image: 27 | linear-gradient(0deg, 28 | #c32e2e 5px, 29 | #0000 0) fill 0//0 0 0 100vw; 30 | } 31 | ``` 32 |

    33 | See the Pen 34 | CSS only extended underline by Temani Afif (@t_afif) 35 | on CodePen. 36 |

    37 | 38 | 39 | Related: [smashingmagazine.com/2024/01/css-border-image-property/](https://www.smashingmagazine.com/2024/01/css-border-image-property/) -------------------------------------------------------------------------------- /content/overflowing-underline/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/overflowing-underline/line.png -------------------------------------------------------------------------------- /content/overlapping-border-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/overlapping-border-image/image.png -------------------------------------------------------------------------------- /content/overlay-reveal-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/overlay-reveal-image/image.png -------------------------------------------------------------------------------- /content/pixel-rounding/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: No more pixel rounding issues! 4 | description: One line of code to fix all your pixel rounding issues 5 | date: 2024-05-25 6 | tags: posts 7 | --- 8 | 9 | One line of code that looks strange and confusing. You may think it's not even CSS but it will save you many times in the future: 10 | 11 | ```css 12 | .container { 13 | width: calc-size(auto,round(down,size,1px)); 14 | /* works with height as well */ 15 | } 16 | ``` 17 | 18 | It will make sure the width of your element is always an integer! No more decimal and rounding issues! 19 | 20 | The behavior of `width:auto` with an upgrade. 21 | 22 | No browser support yet but you can test it on the latest Chrome with the experimental flag enabled: 23 | 24 |

    25 | See the Pen 26 | width: auto with pixel rounding by Temani Afif (@t_afif) 27 | on CodePen. 28 |

    29 | 30 | 31 | If you are explicitly setting a size you can use the following which is widely supported: 32 | 33 | ```css 34 | .container { 35 | width: round(down,X,1px); /* instead of width: X */ 36 | 37 | /* X can be anything (100%,10rem,50vw,45cqi, etc) */ 38 | } 39 | ``` -------------------------------------------------------------------------------- /content/pixelated-corner/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/pixelated-corner/image.png -------------------------------------------------------------------------------- /content/polygon-starburst-shapes/css-shapes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/polygon-starburst-shapes/css-shapes.png -------------------------------------------------------------------------------- /content/polygon-starburst-shapes/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: "CSS shapes: Polygon & Starburst" 4 | description: Use online geneartors to create Polygon and Starburst shapes using clip-path 5 | date: 2023-03-08 6 | tags: posts 7 | --- 8 | 9 | Use online generators to create CSS shapes using clip-path in no time! 10 | 11 | * Polygon Shapes: [css-generators.com/polygon-shape](https://css-generators.com/polygon-shape) 12 | * Starburst Shapes: [css-generators.com/starburst-shape](https://css-generators.com/starburst-shape) 13 | 14 | 15 | {% image "./css-shapes.png", "Starburst & polygon shapes" %} 16 | 17 |

    18 | See the Pen 19 | CSS Shapes using clip-path by Temani Afif (@t_afif) 20 | on CodePen. 21 |

    22 | 23 | 24 | Related Article: [verpex.com/blog/website-tips/css-shapes-polygon-starburst](https://verpex.com/blog/website-tips/css-shapes-polygon-starburst) -------------------------------------------------------------------------------- /content/postage-stamp/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/postage-stamp/image.png -------------------------------------------------------------------------------- /content/postage-stamp/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Turn an image into a postage stamp 4 | description: A few lines of code to create a cool postage stamp shape 5 | date: 2024-03-14 6 | tags: posts 7 | --- 8 | 9 | Transform your image into a cool postage stamp with a few lines of code 10 | * No extra element (only the `` tag) 11 | * Only two CSS gradients 12 | * Works with any image size 13 | * Easy to adjust using CSS variables 14 | 15 | 16 | {% image "./image.png", "CSS-only overlay reveal animation" %} 17 | 18 | ```css 19 | img { 20 | --r: 20px; /* control the radius of the circles */ 21 | padding: var(--r); 22 | filter: grayscale(.4) drop-shadow(0 0 1px #0005) drop-shadow(0 0 1px #0005); 23 | background: 24 | radial-gradient(50% 50%,#0000 65%,#fff 67%) round 25 | var(--r) var(--r)/calc(2*var(--r)) calc(2*var(--r)); 26 | } 27 | ``` 28 | 29 |

    30 | See the Pen 31 | CSS-only Stamp effect by Temani Afif (@t_afif) 32 | on CodePen. 33 |

    34 | -------------------------------------------------------------------------------- /content/progress-bar-dynamic-color/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/progress-bar-dynamic-color/image.png -------------------------------------------------------------------------------- /content/progress-with-tooltip/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/progress-with-tooltip/image.png -------------------------------------------------------------------------------- /content/progress-with-tootlip/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /content/puzzle-shape/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/puzzle-shape/image.png -------------------------------------------------------------------------------- /content/rainbow-gradient-animation/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A rainbow gradient animation 4 | description: Use the new color interpolation to create an infinite rainbow gradient animation 5 | date: 2023-01-31 6 | tags: posts 7 | --- 8 | 9 | 10 | Use the new color interpolation to easily create an infinite rainbow animation using CSS gradients 🌈 11 | 12 | * One color declaration 13 | * A simple animation 14 | 15 | 16 | ```css 17 | html { 18 | background: repeating-linear-gradient(90deg in hsl longer hue, red 0 50%) 0/200%; 19 | animation: r 6s linear infinite; 20 | } 21 | @keyframes r { 22 | to {background-position: 100%} 23 | } 24 | ``` 25 | 26 | 27 |

    28 | See the Pen 29 | rainbow gradient animation by Temani Afif (@t_afif) 30 | on CodePen. 31 |

    32 | -------------------------------------------------------------------------------- /content/range-slider-tooltip-2/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/range-slider-tooltip-2/image.png -------------------------------------------------------------------------------- /content/range-slider-tooltip-2/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Custom range slider with tooltip II 4 | description: Using modern CSS features to create a fancy range slider with tooltop 5 | date: 2024-06-11 6 | tags: posts 7 | --- 8 | 9 | After [the previous concept](/range-slider-tooltip/), here is another idea of range slider. The tooltip will adjust its shape to stay within the boundaries of the slider. Even the radius will adjust when the tail get closer to the corners. 10 | 11 | {% image "./image.png", "CSS-only range slider with tooltip" %} 12 | 13 | Powered by modern CSS features: 14 | * Scroll-Driven animations 15 | * Anchor Positioning 16 | * `@property` & CSS variables 17 | 18 | 19 |

    20 | See the Pen 21 | CSS-only Custom range slider by Temani Afif (@t_afif) 22 | on CodePen. 23 |

    24 | 25 | 26 | -------------------------------------------------------------------------------- /content/range-slider-tooltip/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/range-slider-tooltip/image.png -------------------------------------------------------------------------------- /content/responsive-hexagon-grid/hexagone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/responsive-hexagon-grid/hexagone.png -------------------------------------------------------------------------------- /content/responsive-hexagon-grid/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Responsive grid of Hexagon shapes 4 | description: Using a shape-outside trick to create a reponsive grid of hexagon shapes 5 | date: 2022-06-03 6 | tags: posts 7 | --- 8 | 9 | Create a fully responsive grid of Hexagon shapes (and more!) 10 | * No media query 11 | * No JavaScript 12 | * Minimal HTML code 13 | * Easy to control using CSS variables 14 | 15 | {% image "./hexagone.png", "responsive grid of Hexagon shapes" %} 16 | 17 |

    18 | See the Pen 19 | Responsive Grid of Hexagon shapes by Temani Afif (@t_afif) 20 | on CodePen. 21 |

    22 | 23 | 24 | More detail: [github.com/Afif13/responsive-grid-shapes](https://github.com/Afif13/responsive-grid-shapes) -------------------------------------------------------------------------------- /content/responsive-slanted-coloration/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/responsive-slanted-coloration/image.png -------------------------------------------------------------------------------- /content/reveal-hover-effect-2/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/reveal-hover-effect-2/image.png -------------------------------------------------------------------------------- /content/reveal-hover-effect-2/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A reveal hover effect with a single element II 4 | description: Add a reveal animation to your image with a minimal code 5 | date: 2023-05-01 6 | tags: posts 7 | --- 8 | 9 | Adding more variations to [the previous reveal animation](/reveal-hover-effect/) using the same tricks 10 | * No extra element (only the `` tag) 11 | * No pseudo-element 12 | * Powered by object-fit & object-position 13 | * A lot of possible combination 14 | 15 | {% image "./image.png", "CSS reveal animation using padding and object-fit" %} 16 | 17 | 18 |

    19 | See the Pen 20 | A reveal hover effect with one element II by Temani Afif (@t_afif) 21 | on CodePen. 22 |

    23 | 24 | 25 | Related Article: [www.sitepoint.com/css-image-reveal-animation](https://www.sitepoint.com/css-image-reveal-animation/) 26 | -------------------------------------------------------------------------------- /content/reveal-hover-mask-2/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/reveal-hover-mask-2/image-2.png -------------------------------------------------------------------------------- /content/reveal-hover-mask-2/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/reveal-hover-mask-2/image.png -------------------------------------------------------------------------------- /content/reveal-hover-mask-3/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/reveal-hover-mask-3/image.png -------------------------------------------------------------------------------- /content/reveal-hover-mask/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/reveal-hover-mask/image.png -------------------------------------------------------------------------------- /content/rgb-channels/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: How to extract R,G,B Channels from a color 4 | description: Use the relative color syntax to extract R,G,B Channels 5 | date: 2024-05-08 6 | tags: posts 7 | --- 8 | 9 | Using the new [relative color syntax](https://developer.chrome.com/blog/css-relative-color-syntax), you can easily extract the R,G,B channels of any color and use them as separate colors. 10 | 11 | Useful when you want to do some color manipulation. 12 | 13 | 14 | ```css 15 | :root { 16 | --c: #BD1550; /* the main color */ 17 | 18 | /* the R,G,B channels as separate colors */ 19 | --R: rgb(from var(--c) r 0 0); 20 | --G: rgb(from var(--c) 0 g 0); 21 | --B: rgb(from var(--c) 0 0 b); 22 | } 23 | ``` 24 | 25 | You can do the same thing with a different syntax using the `color()` function. 26 | 27 | ```css 28 | :root { 29 | --c: #BD1550; /* the main color */ 30 | 31 | /* the R,G,B channels as separate colors */ 32 | --R: color(from var(--c) srgb r 0 0); 33 | --G: color(from var(--c) srgb 0 g 0); 34 | --B: color(from var(--c) srgb 0 0 b); 35 | } 36 | ``` 37 | 38 | In both cases, you can either use "none" or "0". "none" is equivalent to "0" but has a special behavior when color interpolation is in play. -------------------------------------------------------------------------------- /content/rhombus-hover-effect/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/rhombus-hover-effect/image.png -------------------------------------------------------------------------------- /content/rhombus-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/rhombus-image/image.png -------------------------------------------------------------------------------- /content/ribbon-reveal-effect/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/ribbon-reveal-effect/image.png -------------------------------------------------------------------------------- /content/ribbon-style-title/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/ribbon-style-title/image.png -------------------------------------------------------------------------------- /content/ribbon-style-title/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A Ribbon title to the edge of the screen 4 | description: A magic border-image trick to add a ribbon shape to your title that extends to the endge of the screen 5 | date: 2023-05-08 6 | tags: posts 7 | --- 8 | 9 | Add a ribbon style to your title that extend to the edge of the screen. 10 | * Only one CSS property 🤩 11 | * No extra element 12 | * No pseudo-element 13 | * No scrollbar issue 14 | 15 | {% image "./image.png", "Titles having a ribbon style that extend to the left edge of the screen" %} 16 | 17 | ```css 18 | .ribbon { 19 | border-image: 20 | conic-gradient( 21 | from 45deg at calc(100% - 1lh), 22 | #0000 25%,#C7F464 0 23 | ) fill 0//0 0 0 100vw; 24 | } 25 | ``` 26 | 27 | 28 |

    29 | See the Pen 30 | Full screen Ribbon title by Temani Afif (@t_afif) 31 | on CodePen. 32 |

    33 | 34 | 35 | Related: [smashingmagazine.com/2024/01/css-border-image-property/](https://www.smashingmagazine.com/2024/01/css-border-image-property/) -------------------------------------------------------------------------------- /content/root-selector/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: The shortest selector for the root element 4 | description: Only one charater is need to target the html element 5 | date: 2024-05-06 6 | tags: posts 7 | --- 8 | 9 | To target the `html` element, you either use "`html{}`" or "`:root{}`" but thanks to CSS nesting you can simply use "`&{}`" 10 | 11 | When used alone, the nesting selector will match the root element! 12 | 13 | A one-character selector 🤯 14 | 15 | ⚠️ It has a lower specificity than html and :root 16 | 17 | 18 | ```css 19 | & { 20 | font-family: sans-serif; 21 | background: #25fca4; 22 | --variable: value; 23 | /* and so on */ 24 | } 25 | /* same as html {} and :root {} 26 | with a lower specificity! 27 | */ 28 | ``` 29 | -------------------------------------------------------------------------------- /content/rotated-ribbon-hover/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/rotated-ribbon-hover/image.png -------------------------------------------------------------------------------- /content/rotating-square-hover-effect/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/rotating-square-hover-effect/image.png -------------------------------------------------------------------------------- /content/rounded-dashed-underline/dash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/rounded-dashed-underline/dash.png -------------------------------------------------------------------------------- /content/rounded-frame-image/fancy-frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/rounded-frame-image/fancy-frame.png -------------------------------------------------------------------------------- /content/rounded-hexagon/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/rounded-hexagon/image.png -------------------------------------------------------------------------------- /content/rounded-polygon/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/rounded-polygon/image.png -------------------------------------------------------------------------------- /content/rounded-tab/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/rounded-tab/image.png -------------------------------------------------------------------------------- /content/scroll-progress-2/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Calculate the scroll progress of an arbitrary element 4 | description: A few lines of CSS to get the scroll progress of any element in the page 5 | date: 2024-07-24 6 | tags: posts 7 | --- 8 | 9 | The same code of [the previous trick](/scroll-progress/) can also be used to get the scroll progress of any element on the page. The only difference is the use of `self` inside the `scroll()` value. 10 | 11 | ```css 12 | @property --s { 13 | syntax: ''; 14 | inherits: true; 15 | initial-value: 0; 16 | } 17 | .scroll { 18 | animation: scroll 1s linear; 19 | animation-timeline: scroll(self); 20 | } 21 | @keyframes scroll { 22 | to {--s: 100} 23 | } 24 | 25 | .scroll:before { 26 | content: "Scroll Progress: " counter(s) "%"; 27 | counter-reset: s var(--s); 28 | } 29 | ``` 30 | 31 |

    32 | See the Pen 33 | CSS only scroll progress II by Temani Afif (@t_afif) 34 | on CodePen. 35 |

    36 | -------------------------------------------------------------------------------- /content/scroll-progress/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Calculate the scroll progress of the page 4 | description: A few lines of CSS to get the scroll progress of the page inside a CSS variable 5 | date: 2024-07-23 6 | tags: posts 7 | --- 8 | 9 | Get the scroll progress of the page as a CSS variable using a few lines of code 10 | * Powered by Scroll-Driven animations 11 | * Defined at the `:root` level (avaiable to all the elements) 12 | * Typed using @property 13 | * You can easily use it within any formula 14 | 15 | 16 | ```css 17 | @property --s { 18 | syntax: ''; 19 | inherits: true; 20 | initial-value: 0; 21 | } 22 | :root { 23 | animation: scroll 1s linear; 24 | animation-timeline: scroll(); 25 | } 26 | @keyframes scroll { 27 | to {--s: 100} 28 | } 29 | 30 | element:before { 31 | content: counter(s) "%"; 32 | counter-reset: s var(--s); 33 | } 34 | ``` 35 | 36 |

    37 | See the Pen 38 | CSS only scroll progress by Temani Afif (@t_afif) 39 | on CodePen. 40 |

    41 | -------------------------------------------------------------------------------- /content/section-divider/divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/section-divider/divider.png -------------------------------------------------------------------------------- /content/section-divider/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Section divider 4 | description: Use clip-path and CSS mask to create a section divider 5 | date: 2022-03-07 6 | tags: posts 7 | --- 8 | 9 | Create a cool divider between your sections in no time using an online generator. 10 | 11 | [css-generators.com/section-divider](http://css-generators.com/section-divider/) 12 | 13 | {% image "./divider.png", "different section dividers" %} 14 | 15 | 16 |

    17 | See the Pen 18 | Section divider by Temani Afif (@t_afif) 19 | on CodePen. 20 |

    21 | 22 | 23 | More detail: [www.freecodecamp.org/news/section-divider-using-css](https://www.freecodecamp.org/news/section-divider-using-css/) -------------------------------------------------------------------------------- /content/select-elements-between-two-class/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Select all elemens between two class names 4 | description: A simple selector to select all the elements between two given classes 5 | date: 2023-05-02 6 | tags: posts 7 | --- 8 | 9 | Do you want to select all the elements between two different class names? Use the :not() selector to do it 10 | 11 | 12 | ```css 13 | .start ~ :not(.end,.end ~ *) { 14 | 15 | } 16 | ``` 17 | 18 | 19 |

    20 | See the Pen 21 | Select elements between two classes by Temani Afif (@t_afif) 22 | on CodePen. 23 |

    24 | 25 | -------------------------------------------------------------------------------- /content/simple-css-loader/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A single-element spinner loader 4 | description: A mask trick to create a simple CSS loader with a single element 5 | date: 2022-02-02 6 | tags: posts 7 | --- 8 | 9 | Create a spinner loader using one element and less than 10 CSS declarations 10 | 11 | {% image "./loader.png", "A CSS-sonly spinner loader" %} 12 | 13 | ```css 14 | .loader { 15 | width: 120px; /* the size */ 16 | padding: 15px; /* the border thickness */ 17 | background: #07e8d6; /* the color */ 18 | 19 | aspect-ratio: 1; 20 | border-radius: 50%; 21 | mask: 22 | conic-gradient(#0000,#000) subtract, 23 | conic-gradient(#000 0 0) content-box; 24 | animation: load 1s linear infinite; 25 | } 26 | @keyframes load { 27 | to{rotate: 1turn} 28 | } 29 | ``` 30 | 31 |

    32 | See the Pen 33 | Spinner loader by Temani Afif (@t_afif) 34 | on CodePen. 35 |

    36 | 37 | 38 | More loaders: [css-loaders.com](https://css-loaders.com/) -------------------------------------------------------------------------------- /content/simple-css-loader/loader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/simple-css-loader/loader.png -------------------------------------------------------------------------------- /content/simple-tooltip/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/simple-tooltip/image.png -------------------------------------------------------------------------------- /content/simple-tooltip/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A Tooltip Shape using 2 CSS properties 4 | description: Only 2 CSS properties to create a simple Tooltip shape 5 | date: 2023-11-21 6 | tags: posts 7 | --- 8 | 9 | The smallest code to create a simple Tooltip Shape 10 | * One element (No pseudo-elements) 11 | * Only 2 CSS Properties 12 | * Optimized with CSS Variables 13 | 14 | 15 | {% image "./image.png", "A CSS-only tooltip shape" %} 16 | 17 | ```css 18 | .tooltip { 19 | /* triangle dimension */ 20 | --b: 2em; /* base */ 21 | --h: 1em; /* height*/ 22 | 23 | border-image: fill 0//var(--h) 24 | conic-gradient(#CC333F 0 0); /* the color */ 25 | clip-path: 26 | polygon(0 100%,0 0,100% 0,100% 100%, 27 | calc(50% + var(--b)/2) 100%, 28 | 50% calc(100% + var(--h)), 29 | calc(50% - var(--b)/2) 100%); 30 | } 31 | ``` 32 | 33 |

    34 | See the Pen 35 | A simple Tooltip using 2 CSS properties by Temani Afif (@t_afif) 36 | on CodePen. 37 |

    38 | 39 | 40 | More Tooltip shapes: [css-generators.com/tooltip-speech-bubble](https://css-generators.com/tooltip-speech-bubble/) -------------------------------------------------------------------------------- /content/single-digit-inputs/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/single-digit-inputs/image.png -------------------------------------------------------------------------------- /content/sitemap/sitemap.xml.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /sitemap.xml 3 | eleventyExcludeFromCollections: true 4 | --- 5 | 6 | 7 | {%- for page in collections.all %} 8 | {% set absoluteUrl %}{{ page.url | htmlBaseUrl(metadata.url) }}{% endset %} 9 | 10 | {{ absoluteUrl }} 11 | {{ page.date | htmlDateString }} 12 | 13 | {%- endfor %} 14 | 15 | -------------------------------------------------------------------------------- /content/slanted-underline/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/slanted-underline/image.png -------------------------------------------------------------------------------- /content/sliding-reveal-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/sliding-reveal-image/image.png -------------------------------------------------------------------------------- /content/sliding-reveal-image/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Sliding reveal animation for your images 4 | description: A cool reveal effect on hover with a sliding animation 5 | date: 2023-06-10 6 | tags: posts 7 | --- 8 | 9 | Add a reveal effect to your image with a sliding animation on hover 10 | * No extra element (only the `` tag) 11 | * No pseudo element 12 | * Less than 10 CSS declarations 13 | 14 | 15 | {% image "./image.png", "Sliding reveal animation" %} 16 | 17 | ```css 18 | img { 19 | --s: 200px; /* the size of the image */ 20 | 21 | width: var(--s); 22 | aspect-ratio: 1; 23 | box-sizing: border-box; 24 | object-fit: cover; 25 | /* 8px = thickness 13px = gap (5px) + thickness (8px) */ 26 | border-image: linear-gradient(#53777A 0 0) 1/8px/13px; 27 | object-position: top; 28 | padding-top: calc(2*var(--s)/3); 29 | transition: .5s; 30 | } 31 | img:hover { 32 | padding: 0; 33 | } 34 | ``` 35 | 36 |

    37 | See the Pen 38 | Sliding reveal hover effect by Temani Afif (@t_afif) 39 | on CodePen. 40 |

    41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /content/smooth-rotation/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/smooth-rotation/image.png -------------------------------------------------------------------------------- /content/sparkle-shape/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/sparkle-shape/image.png -------------------------------------------------------------------------------- /content/stanled-background-full-screen/image.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/stanled-background-full-screen/image.jpeg -------------------------------------------------------------------------------- /content/star-rating/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/star-rating/image.png -------------------------------------------------------------------------------- /content/star-shape/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/star-shape/image.png -------------------------------------------------------------------------------- /content/star-shape/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/star-shape/image2.png -------------------------------------------------------------------------------- /content/starburst-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/starburst-image/image.png -------------------------------------------------------------------------------- /content/status-indicator/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/status-indicator/image.png -------------------------------------------------------------------------------- /content/steps/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/steps/image.png -------------------------------------------------------------------------------- /content/steps/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: How to correctly use steps() with animations 4 | description: The default behavior of steps() is not intuitive so learn how to use it correctly 5 | date: 2024-11-18 6 | tags: posts 7 | --- 8 | 9 | You want to create a discrete animation using `steps()` but you struggle with its value, right? You never know how many steps it requires and it never works as expected! 10 | 11 | In most cases, adding an extra value will fix your issue. 12 | 13 | 14 | ```css 15 | /* Don't ❌ */ 16 | .element { 17 | animation: anime 3s steps(3); 18 | } 19 | /* Do ✅ */ 20 | .element { 21 | animation: anime 3s steps(3,jump-none); 22 | } 23 | ``` 24 | 25 | By default, `steps()` uses `jump-end` which is not very intuitive. The behavior you are looking for is the one of `jump-none` 26 | 27 | 28 | {% image "./image.png", "Illustrating the steps() function" %} 29 | 30 | Here is a demo with some common examples (see the comments in the CSS code) 31 | 32 |

    33 | See the Pen 34 | Using steps(N,jump-none) by Temani Afif (@t_afif) 35 | on CodePen. 36 |

    37 | -------------------------------------------------------------------------------- /content/stick-element-grid/float.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/stick-element-grid/float.png -------------------------------------------------------------------------------- /content/stick-element-grid/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Stick an element to the top-right corner 4 | description: Place an element on the top-right corner of your CSS grid 5 | date: 2022-01-13 6 | tags: posts 7 | --- 8 | 9 | Make an element stay at the top-right corner of your responsive grid using one instruction. 10 | 11 | 12 | {% image "./float.png", "A grid with an element anchored on the top right corner" %} 13 | 14 | ```css 15 | grid-area: 1/auto/auto/-1; 16 | /* OR 17 | grid-row-start:1; 18 | grid-column-end:-1 19 | */ 20 | ``` 21 | 22 | The element can be anywhere in your HTML code. 23 | 24 | 25 |

    26 | See the Pen 27 | Float element to top/right corner by Temani Afif (@t_afif) 28 | on CodePen. 29 |

    30 | -------------------------------------------------------------------------------- /content/text-indent/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/text-indent/image.png -------------------------------------------------------------------------------- /content/text-indent/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Indent each line of your text 4 | description: A new value of text-indent that allows you to indent each line of text 5 | date: 2024-11-04 6 | tags: posts 7 | --- 8 | 9 | Do you know that `text-indent` can take an extra value `each-line`? It allows you to have an indentation after each line! Useful if you rely on `
    ` to add new lines. 10 | 11 | 12 | ```css 13 | p { 14 | text-indent: 2em each-line; 15 | } 16 | ``` 17 | 18 | {% image "./image.png", "text-indent each-line" %} 19 | 20 | ⚠️ It has limited support. Only Firefox and Safari for now ⚠️ 21 | 22 | 23 |

    24 | See the Pen 25 | Untitled by Temani Afif (@t_afif) 26 | on CodePen. 27 |

    28 | -------------------------------------------------------------------------------- /content/text-wrap/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/text-wrap/image.png -------------------------------------------------------------------------------- /content/text-wrap/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Better text wrapping using text-wrap 4 | description: The text-wrap property allows you to control how text is wrapped 5 | date: 2024-06-10 6 | tags: posts 7 | --- 8 | 9 | 10 | Enhance your text wrapping using `text-wrap`. No more lonely words at the end of paragraphs, and titles will look much better. 11 | 12 | ```css 13 | * { 14 | text-wrap: pretty; 15 | } 16 | h1,h2,h3,h4,h5,h6 { 17 | text-wrap: balance; 18 | /* it works well with text-align: center */ 19 | } 20 | ``` 21 | 22 | {% image "./image.png", "Showing the effect of text-wrap" %} 23 | -------------------------------------------------------------------------------- /content/tools/blob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/blob.png -------------------------------------------------------------------------------- /content/tools/custom-borders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/custom-borders.png -------------------------------------------------------------------------------- /content/tools/custom-corners.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/custom-corners.png -------------------------------------------------------------------------------- /content/tools/flowers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/flowers.png -------------------------------------------------------------------------------- /content/tools/gradient-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/gradient-shadow.png -------------------------------------------------------------------------------- /content/tools/loaders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/loaders.png -------------------------------------------------------------------------------- /content/tools/patterns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/patterns.png -------------------------------------------------------------------------------- /content/tools/polygon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/polygon.png -------------------------------------------------------------------------------- /content/tools/quantity-query.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/quantity-query.png -------------------------------------------------------------------------------- /content/tools/ribbons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/ribbons.png -------------------------------------------------------------------------------- /content/tools/section-divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/section-divider.png -------------------------------------------------------------------------------- /content/tools/shapes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/shapes.png -------------------------------------------------------------------------------- /content/tools/starburst.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/starburst.png -------------------------------------------------------------------------------- /content/tools/svg-to-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/svg-to-css.png -------------------------------------------------------------------------------- /content/tools/tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/tooltip.png -------------------------------------------------------------------------------- /content/tools/triangles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/triangles.png -------------------------------------------------------------------------------- /content/tools/wavy-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/wavy-circle.png -------------------------------------------------------------------------------- /content/tools/wavy-shapes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tools/wavy-shapes.png -------------------------------------------------------------------------------- /content/tooltip-mask/tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/tooltip-mask/tooltip.png -------------------------------------------------------------------------------- /content/triangle-rounded-corner/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/triangle-rounded-corner/image.png -------------------------------------------------------------------------------- /content/triangle-shape/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/triangle-shape/image.png -------------------------------------------------------------------------------- /content/triangle-shape/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Create a triangle shape with 2 CSS properties 4 | description: Only two CSS properties to create a triangle shape 5 | date: 2024-02-11 6 | tags: posts 7 | --- 8 | 9 | Creating a basic triangle shape is as simple as using two CSS properties 10 | 11 | * `aspect-ratio` 12 | * `clip-path` (with a 3-point polygon) 13 | 14 | That's it, and it works with any kind of elements including images. 15 | 16 | 17 | {% image "./image.png", "A diagram showing to create CSS-only triangle shapes" %} 18 | 19 | 20 | Get the CSS code from: [css-generators.com/triangle-shapes](https://css-generators.com/triangle-shapes/) -------------------------------------------------------------------------------- /content/typed-variables/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/typed-variables/image.png -------------------------------------------------------------------------------- /content/typed-variables/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Typed CSS variables using @property 4 | description: Upgrade your CSS variables by registring them using the @property 5 | date: 2024-07-17 6 | tags: posts 7 | --- 8 | 9 | Stop defining your variables inside `:root`! 10 | 11 | Use the `@property` instead and create "Typed CSS Variables" 12 | * Easy to debug using Dev tools 13 | * Implicit data validation 14 | * Can be animated if the type allows it 15 | * Available globally with a default value 16 | 17 | Instead of doing this: 18 | 19 | ```css 20 | /* 21 | We don't know the type of the variables 🤔 22 | Valid or invalid? We don't know! 🫣 23 | Hard to debug & the browser won't help you 😖 24 | */ 25 | :root { 26 | --color: #586de7; 27 | --size: 20px; 28 | --cols: 12; 29 | } 30 | ``` 31 | 32 | Do this: 33 | 34 | ```css 35 | /* 36 | Typed CSS variables! 🤩 37 | Easy to debug and the browser will help you 😃 38 | */ 39 | @property --color { 40 | syntax: ''; 41 | inherits: true; 42 | initial-value: #586de7; 43 | } 44 | @property --size { 45 | syntax: ''; 46 | inherits: true; 47 | initial-value: 20px; 48 | } 49 | @property --cols { 50 | syntax: ''; 51 | inherits: true; 52 | initial-value: 12; 53 | } 54 | ``` 55 | 56 | ---- 57 | 58 | Example of a data validation through the Dev tools. 59 | 60 | "darkpink" could have been a valid color. The browser will show you a warning and use the initial-value as a fallback. Without `@property`, there is no way to know the issue. 61 | 62 | 63 | {% image "./image.png", "Dev tools CSS variables" %} -------------------------------------------------------------------------------- /content/vertical-rounded-tab/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/vertical-rounded-tab/image.png -------------------------------------------------------------------------------- /content/volume-control/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/volume-control/image.png -------------------------------------------------------------------------------- /content/wavy-circle/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/wavy-circle/image.png -------------------------------------------------------------------------------- /content/wavy-circle/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A wavy circle with cool hover effect 4 | description: Place your image inside a fancy wavy frame with a cool hover effect 5 | date: 2024-03-13 6 | tags: posts 7 | --- 8 | 9 | Place you image inside a wavy circular frame powered by modern CSS (mask, trigonometric functions, `@property`, `animation-composition` and more) 10 | * No extra element (only the `` tag) 11 | * No pseudo element 12 | * A cool animation on hover 13 | * Optimized with Sass and CSS variables 14 | 15 | {% image "./image.png", "CSS-only wavy circles" %} 16 | 17 | 18 |

    19 | See the Pen 20 | Wavy circles with hover effect by Temani Afif (@t_afif) 21 | on CodePen. 22 |

    23 | 24 | 25 | More detail: [frontendmasters.com/blog/creating-wavy-circles-with-fancy-animations](https://frontendmasters.com/blog/creating-wavy-circles-with-fancy-animations/) -------------------------------------------------------------------------------- /content/wavy-circles/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/wavy-circles/image.png -------------------------------------------------------------------------------- /content/wavy-circles/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: A CSS generator for wavy circle shapes 4 | description: Use modern CSS to create a wavy circle shape in no time 5 | date: 2024-08-13 6 | tags: posts 7 | --- 8 | 9 | Use an online generator to create fancy wavy circles in no time! 10 | 11 | [css-generators.com/wavy-circle](https://css-generators.com/wavy-circle/) 12 | 13 | * Only one element (no pseudo-elements) 14 | * Works with `` element 15 | * Supports gradient coloration 16 | * Powered by CSS mask 17 | 18 | {% image "./image.png", "CSS only wavy circles shape" %} 19 | 20 | Related: [css-tip.com/wavy-circle](https://css-tip.com/wavy-circle/) -------------------------------------------------------------------------------- /content/wavy-divider/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/wavy-divider/image.png -------------------------------------------------------------------------------- /content/wavy-text-animation-2/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Wavy text animation II 4 | description: Use CSS gradients to create a wavy text animation 5 | date: 2022-04-20 6 | tags: posts 7 | --- 8 | 9 | Improving [the previous CSS-only Wavy animation](/wavy-text-animation) 10 | * Adding another wave 11 | * Support multi-line of text 12 | 13 | {% image "./wave.png", "A text with a wavy background coloration" %} 14 | 15 | 16 |

    17 | See the Pen 18 | Multi-line CSS only wavy text by Temani Afif (@t_afif) 19 | on CodePen. 20 |

    21 | 22 | -------------------------------------------------------------------------------- /content/wavy-text-animation-2/wave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/wavy-text-animation-2/wave.png -------------------------------------------------------------------------------- /content/wavy-text-animation/wave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/wavy-text-animation/wave.png -------------------------------------------------------------------------------- /content/wiggly-borders/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/wiggly-borders/image.png -------------------------------------------------------------------------------- /content/zig-zag-box/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/zig-zag-box/image.png -------------------------------------------------------------------------------- /content/zig-zag-edge/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/zig-zag-edge/image.png -------------------------------------------------------------------------------- /content/zig-zag-edge/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/zig-zag-edge/image2.png -------------------------------------------------------------------------------- /content/zig-zag-edge/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Zig-Zag edges using CSS mask 4 | description: One line of code to add Zig-Zag edges to any element using the mask property 5 | date: 2025-03-20 6 | tags: posts 7 | --- 8 | 9 | Add Zig-Zag edges to your element using the `mask` property and one gradient. 10 | 11 | {% image "./image.png", "zig-zag edges using mask" %} 12 | 13 | ```css 14 | .zig-zag { 15 | --s: 30px; /* control the size (height of the spikes) */ 16 | --a: 90deg; /* control the angle */ 17 | 18 | mask: 19 | repeating-conic-gradient(from calc(180deg - var(--a)/2) at 50% var(--s),#000 0 var(--a),#0000 0 180deg) 20 | 50% calc(-1*var(--s))/calc(2*var(--s)*tan(var(--a)/2)); 21 | } 22 | ``` 23 | 24 |

    25 | See the Pen 26 | Zig-Zag edges by Temani Afif (@t_afif) 27 | on CodePen. 28 |

    29 | 30 | 31 | Use my online generator to get the code of the different variations: [css-generators.com/custom-borders](https://css-generators.com/custom-borders/) 32 | 33 | 34 | {% image "./image2.png", "CSS-only zig-zag borders" %} 35 | 36 | 37 | More detail: [css-tricks.com/css-borders-using-masks](https://css-tricks.com/css-borders-using-masks/) -------------------------------------------------------------------------------- /content/zig-zag-image-seperation/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/zig-zag-image-seperation/image.png -------------------------------------------------------------------------------- /content/zoom-hover-effect/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: Zoom effect on hover 4 | description: A few lines of code to add for a zoom effect on hover 5 | date: 2023-07-14 6 | tags: posts 7 | --- 8 | 9 | Add a simple zoom effect on hover for your images with a small code 10 | * No extra element (only the `` tag) 11 | * 5 CSS declarations 12 | 13 | 14 | ```css 15 | img { 16 | --f: 1.15; /* the scale factor */ 17 | 18 | clip-path: inset(0); 19 | transition: .4s; 20 | } 21 | img:hover { 22 | clip-path: inset(calc((1 - 1/var(--f)) * 50%)); 23 | scale: var(--f) 24 | } 25 | ``` 26 | 27 |

    28 | See the Pen 29 | Zoom effect on hover (single element) by Temani Afif (@t_afif) 30 | on CodePen. 31 |

    32 | 33 | 34 | More detail: [verpex.com/blog/website-tips/css-effects-on-images-ii](https://verpex.com/blog/website-tips/css-effects-on-images-ii) -------------------------------------------------------------------------------- /content/zoom/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/content/zoom/image.png -------------------------------------------------------------------------------- /content/zoom/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/post.njk 3 | title: The difference between zoom and scale 4 | description: Learn about the zoom property and how it works 5 | date: 2025-02-17 6 | tags: posts 7 | --- 8 | 9 | Do you know the `zoom` property? It works the same way as a scale transformation but unlike `scale`, it affects the page layout. In other words, the page layout is recalculated considering the new dimension of the scaled element. 10 | 11 | 12 | {% image "./image.png", "difference between the zoom property and the scale property" %} 13 | 14 | 15 |

    16 | See the Pen 17 | Scale vs Zoom by Temani Afif (@t_afif) 18 | on CodePen. 19 |

    20 | -------------------------------------------------------------------------------- /eleventy.config.images.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const eleventyImage = require("@11ty/eleventy-img"); 3 | 4 | module.exports = eleventyConfig => { 5 | function relativeToInputPath(inputPath, relativeFilePath) { 6 | let split = inputPath.split("/"); 7 | split.pop(); 8 | 9 | return path.resolve(split.join(path.sep), relativeFilePath); 10 | } 11 | 12 | // Eleventy Image shortcode 13 | // https://www.11ty.dev/docs/plugins/image/ 14 | eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) { 15 | // Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats 16 | // Warning: Avif can be resource-intensive so take care! 17 | let formats = ["avif", "webp", "auto"]; 18 | let file = relativeToInputPath(this.page.inputPath, src); 19 | let metadata = await eleventyImage(file, { 20 | widths: widths || ["auto"], 21 | formats, 22 | outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin. 23 | }); 24 | 25 | // TODO loading=eager and fetchpriority=high 26 | let imageAttributes = { 27 | alt, 28 | sizes, 29 | loading: "lazy", 30 | decoding: "async", 31 | }; 32 | return eleventyImage.generateHTML(metadata, imageAttributes); 33 | }); 34 | }; 35 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "_site" 3 | command = "npm run build" 4 | 5 | [[plugins]] 6 | 7 | # Opt-in to the Netlify Lighthouse plugin (choose one): 8 | 9 | # 1. Go to your site on https://app.netlify.com and navigate to the Integrations tab, search for the `Lighthouse` plugin 10 | # 2. Or via `npm install -D @netlify/plugin-lighthouse` 11 | 12 | # Read more: https://github.com/netlify/netlify-plugin-lighthouse 13 | 14 | package = "@netlify/plugin-lighthouse" 15 | 16 | # optional, fails build when a category is below a threshold 17 | [plugins.inputs.thresholds] 18 | performance = 1.0 19 | accessibility = 1.0 20 | best-practices = 1.0 21 | seo = 1.0 22 | 23 | [plugins.inputs] 24 | output_path = "reports/lighthouse/index.html" 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CSS Tip", 3 | "version": "2.0.0", 4 | "description": "A little CSS blog", 5 | "scripts": { 6 | "build": "npx @11ty/eleventy", 7 | "build-ghpages": "npx @11ty/eleventy", 8 | "start": "npx @11ty/eleventy --serve --quiet", 9 | "debug": "DEBUG=Eleventy* npx @11ty/eleventy", 10 | "debugstart": "DEBUG=Eleventy* npx @11ty/eleventy --serve --quiet", 11 | "benchmark": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy" 12 | }, 13 | "devDependencies": { 14 | "@11ty/eleventy": "^3.0.0", 15 | "@11ty/eleventy-img": "^5.0.0", 16 | "@11ty/eleventy-navigation": "^0.3.5", 17 | "@11ty/eleventy-plugin-bundle": "^1.0.4", 18 | "@11ty/eleventy-plugin-rss": "^1.2.0", 19 | "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0", 20 | "clean-css": "^5.3.2", 21 | "eleventy-plugin-external-links": "^1.1.2", 22 | "eleventy-plugin-og-image": "^4.0.0-beta.8", 23 | "luxon": "^3.3.0", 24 | "markdown-it-anchor": "^8.6.7" 25 | }, 26 | "dependencies": { 27 | "sharp": "^0.33.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /public/css/message-box.css: -------------------------------------------------------------------------------- 1 | /* Message Box */ 2 | .message-box { 3 | --color-message-box: #ffc; 4 | 5 | display: block; 6 | background-color: var(--color-message-box); 7 | color: var(--color-gray-90); 8 | padding: 1em 0.625em; /* 16px 10px /16 */ 9 | } 10 | .message-box ol { 11 | margin-top: 0; 12 | } 13 | 14 | @media (prefers-color-scheme: dark) { 15 | .message-box { 16 | --color-message-box: #082840; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /public/css/prism-diff.css: -------------------------------------------------------------------------------- 1 | /* 2 | * New diff- syntax 3 | */ 4 | 5 | pre[class*="language-diff-"] { 6 | --eleventy-code-padding: 1.25em; 7 | padding-left: var(--eleventy-code-padding); 8 | padding-right: var(--eleventy-code-padding); 9 | } 10 | .token.deleted { 11 | background-color: hsl(0, 51%, 37%); 12 | color: inherit; 13 | } 14 | .token.inserted { 15 | background-color: hsl(126, 31%, 39%); 16 | color: inherit; 17 | } 18 | 19 | /* Make the + and - characters unselectable for copy/paste */ 20 | .token.prefix.unchanged, 21 | .token.prefix.inserted, 22 | .token.prefix.deleted { 23 | -webkit-user-select: none; 24 | user-select: none; 25 | display: inline-flex; 26 | align-items: center; 27 | justify-content: center; 28 | padding-top: 2px; 29 | padding-bottom: 2px; 30 | } 31 | .token.prefix.inserted, 32 | .token.prefix.deleted { 33 | width: var(--eleventy-code-padding); 34 | background-color: rgba(0,0,0,.2); 35 | } 36 | 37 | /* Optional: full-width background color */ 38 | .token.inserted:not(.prefix), 39 | .token.deleted:not(.prefix) { 40 | display: block; 41 | margin-left: calc(-1 * var(--eleventy-code-padding)); 42 | margin-right: calc(-1 * var(--eleventy-code-padding)); 43 | text-decoration: none; /* override del, ins, mark defaults */ 44 | color: inherit; /* override del, ins, mark defaults */ 45 | } 46 | -------------------------------------------------------------------------------- /public/img/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/public/img/.gitkeep -------------------------------------------------------------------------------- /public/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/public/img/avatar.png -------------------------------------------------------------------------------- /public/img/css-loader.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/public/img/css-loader.jpg -------------------------------------------------------------------------------- /public/img/css-pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/public/img/css-pattern.jpg -------------------------------------------------------------------------------- /public/img/css-shape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/public/img/css-shape.jpg -------------------------------------------------------------------------------- /public/img/css-tip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/public/img/css-tip.jpg -------------------------------------------------------------------------------- /public/img/fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/public/img/fav.png -------------------------------------------------------------------------------- /public/img/kofi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Tip/7898c20bdfc9284ed086efd50af1caa3e8648b41/public/img/kofi.png -------------------------------------------------------------------------------- /public/img/statamic-mark-pink.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------