Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS Stripes - Tailwind Plugin


Doğuhan ELMA

94 views

1.png

Kayan arkaplan animasyonu...

HTML:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./output.css" rel="stylesheet">
</head>
<body>
<div class="block grid grid-cols-2 w-[400px] m-8">
    <div class="elm-stripes h-20 w-40 m-8"><span class="text-pink-800 font-bold">Default</span></div>
    <div class="elm-stripes elm-stripes-color-[60_255_255] h-20 w-40 m-8">Color</div>
    <div class="elm-stripes elm-stripes-size-[32px] h-20 w-40 m-8">Size</div>
    <div class="elm-stripes elm-stripes-reverse h-20 w-40 m-8">Reverse</div>
    <div class="elm-stripes elm-stripes-white bg-cyan-500 h-20 w-40 m-8">White</div>
    <div class="elm-stripes elm-stripes-opacity-[0.2] bg-cyan-500 h-20 w-40 m-8">Opacity</div>
</div>
</body>
</html>

 

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [require('./plugins/stripes-plugin.cjs')],
}

 

stripes-plugin.cjs

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function ({addBase, addComponents, addUtilities, matchUtilities, theme}) {

        addBase({
            ":root": {
                "--stripes-rgb": "0 0 0",
                "--stripes-angle": "-45deg",
                '--stripes-opacity': '1',
                '--stripes-size': '10px'
            },
            "@keyframes slide": {
                from: {transform: "translateX(0)"},
                to: {transform: "translateX(var(--stripes-size))"}
            }
        })

        addComponents({
            ".elm-stripes": {
                position: "relative",
                overflow: "hidden",
                isolation: "isolate"
            },
            ".elm-stripes:before": {
                '--stripes-color': 'rgb(var(--stripes-rgb) / var(--stripes-opacity))',
                content: "''",
                zIndex: -1,
                position: "absolute",
                top: "0",
                right: "0",
                height: "100%",
                width: "calc(100% + var(--stripes-size))",
                backgroundImage:
                    "linear-gradient(var(--stripes-angle), var(--stripes-color) 5%, transparent 5% 45%, var(--stripes-color) 45% 55%, transparent 55% 95%, var(--stripes-color) 95%)",
                backgroundSize: "var(--stripes-size) var(--stripes-size)",
                animation: "slide 1s infinite linear"
            }
        })

        addUtilities({
            ".elm-stripes-white": {"--stripes-rgb": "255 255 255"},
            ".elm-stripes-reverse": {"--stripes-angle": "45deg"}
        })

        matchUtilities({
                'elm-stripes-opacity': value => ({
                    '--stripes-opacity': value,
                }),

            },
            {
                values: theme('opacity')
            }
        )
        matchUtilities(
            {
                "elm-stripes-size": (value) => ({
                    "--stripes-size": value,
                }),
            },
            {
                values: theme("stripesSize"),
            }
        )
        matchUtilities(
            {
                "elm-stripes-color": (value) => ({
                    "--stripes-rgb": value,
                }),
            },
            {
                values: theme("stripesColor"),
            }
        )
    },
    {
        // Customising the user's theme
        theme: {
            stripesSize: {
                sm: "12px",
                md: "20px",
                lg: "30px",
                xl: "40px",
            },
            stripesColor: {
                white: "255 255 255",
                black: "0 0 0",
                elm: "0 0 255",
            },
        },
    }
)

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...