CSS ਪ੍ਰਾਪਰਟੀ ਜਨਰੇਟਰ: ਗ੍ਰੇਡੀਐਂਟ, ਛਾਂ ਅਤੇ ਬਾਰਡਰ ਬਣਾਓ

ਇੱਕ ਆਸਾਨ-ਉਪਯੋਗ ਵਿਜ਼ੂਅਲ ਇੰਟਰਫੇਸ ਨਾਲ ਗ੍ਰੇਡੀਐਂਟ, ਬਾਕਸ ਛਾਂ, ਬਾਰਡਰ ਰੇਡੀਅਸ ਅਤੇ ਟੈਕਸਟ ਛਾਂ ਲਈ ਕਸਟਮ CSS ਕੋਡ ਜਨਰੇਟ ਕਰੋ। ਸਲਾਈਡਰਾਂ ਨਾਲ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ ਅਤੇ ਜੀਵੰਤ ਪੂਰਵਦਰਸ਼ਨ ਵੇਖੋ।

ਸੀਐੱਸਐੱਸ ਪ੍ਰਾਪਰਟੀ ਜਨਰੇਟਰ

ਗ੍ਰੇਡੀਐਂਟ ਕਿਸਮ

ਰੇਖੀ

ਗੋਲ

ਕੋਣ90°

ਰੰਗ 1

ਸਥਾਨ 10%

ਰੰਗ 2

ਸਥਾਨ 2100%

ਜਨਰੇਟ ਕੀਤਾ ਗਿਆ ਸੀਐੱਸਐੱਸ

ਪ੍ਰੀਵਿਊ

ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਨਕਲ ਕਰੋ

📚

ਦਸਤਾਵੇਜ਼

CSS ਪ੍ਰਾਪਰਟੀ ਜਨਰੇਟਰ: ਸੁੰਦਰ ਗ੍ਰੇਡੀਅੰਟ, ਛਾਂਵਾਂ ਅਤੇ ਗੋਲ ਕੋਨੇ ਬਣਾਓ

CSS ਪ੍ਰਾਪਰਟੀ ਜਨਰੇਟਰ ਦਾ ਪਰਿਚਯ

CSS ਪ੍ਰਾਪਰਟੀ ਜਨਰੇਟਰ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਪਰੰਤੂ ਉਪਯੋਗਕਰਤਾ-ਮਿੱਤਰ ਟੂਲ ਹੈ ਜੋ ਵੈਬ ਵਿਕਾਸਕਾਂ ਅਤੇ ਡਿਜ਼ਾਈਨਰਾਂ ਨੂੰ ਸੁੰਦਰ CSS ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਹੈ ਬਿਨਾਂ ਕੋਡ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਲਿਖਣ ਦੀ ਲੋੜ। ਇਹ ਸਹਿਜ ਜਨਰੇਟਰ ਤੁਹਾਨੂੰ ਗ੍ਰੇਡੀਅੰਟ, ਬਾਕਸ ਛਾਂਵਾਂ, ਬਾਰਡਰ ਰੇਡੀਅਸ ਅਤੇ ਟੈਕਸਟ ਛਾਂਵਾਂ ਸਮੇਤ ਮੁੱਖ CSS ਪ੍ਰਾਪਰਟੀਆਂ ਨੂੰ ਵਿਜ਼ੂਅਲ ਤੌਰ 'ਤੇ ਕਸਟਮਾਈਜ਼ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਫਿਰ ਤੁਰੰਤ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਕਾਪੀ ਅਤੇ ਪੇਸਟ ਕਰਨ ਲਈ ਤਿਆਰ CSS ਕੋਡ ਬਣਾਉਂਦਾ ਹੈ। ਚਾਹੇ ਤੁਸੀਂ ਇੱਕ ਅਨੁਭਵੀ ਵਿਕਾਸਕ ਹੋ ਜੋ ਸਮਾਂ ਬਚਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਾਂ CSS ਸਿੱਖ ਰਹੇ ਸ਼ੁਰੂਆਤੀ ਹੋ, ਇਹ ਟੂਲ ਤੁਹਾਡੇ ਵੈਬ ਤੱਤਾਂ ਲਈ ਪੇਸ਼ੇਵਰ-ਦਿੱਖ ਵਾਲੇ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ।

ਸਾਡੇ CSS ਪ੍ਰਾਪਰਟੀ ਜਨਰੇਟਰ ਨਾਲ, ਤੁਸੀਂ:

ਕਸਟਮ ਰੰਗਾਂ ਅਤੇ ਸਥਾਨਾਂ ਨਾਲ ਰੇਖਾਕਾਰ ਅਤੇ ਗੋਲ ਗ੍ਰੇਡੀਅੰਟ ਬਣਾਓ
ਓਫਸੈਟ, ਧੁੰਦਲਾਪਣ, ਫੈਲਾਅ ਅਤੇ ਰੰਗ 'ਤੇ ਸਹੀ ਨਿਯੰਤਰਣ ਨਾਲ ਬਾਕਸ ਛਾਂਵਾਂ ਡਿਜ਼ਾਈਨ ਕਰੋ
ਸਾਰੇ ਕੋਨਾਂ ਜਾਂ ਵਿਅਕਤੀਗਤ ਕੋਨਾਂ ਲਈ ਬਾਰਡਰ ਰੇਡੀਅਸ ਮੁੱਲ ਬਣਾਓ
ਕਸਟਮਾਈਜ਼ ਕਰਨ ਯੋਗ ਓਫਸੈਟ, ਧੁੰਦਲਾਪਣ ਅਤੇ ਰੰਗ ਵਿਕਲਪਾਂ ਨਾਲ ਟੈਕਸਟ ਛਾਂਵਾਂ ਬਣਾਓ

ਇਹ ਟੂਲ ਤੁਹਾਡੇ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨਾਂ ਦੇ ਰੀਅਲ-ਟਾਈਮ ਪੂਰਵਦਰਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਇਹ ਦੇਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ CSS ਪ੍ਰਭਾਵ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਕਿਵੇਂ ਦਿੱਖ ਦੇਣਗੇ। ਇਹ ਵਿਜ਼ੂਅਲ ਪਹੁੰਚ ਵੱਖ-ਵੱਖ ਸੈਟਿੰਗਾਂ ਨਾਲ eksperiment ਕਰਨ ਅਤੇ ਤੁਹਾਡੇ ਵੈਬ ਤੱਤਾਂ ਲਈ ਬੇਹਤਰੀਨ ਦਿੱਖ ਪ੍ਰਾਪਤ ਕਰਨ ਵਿੱਚ ਆਸਾਨੀ ਕਰਦੀ ਹੈ।

CSS ਪ੍ਰਾਪਰਟੀਆਂ ਨੂੰ ਸਮਝਣਾ

ਗ੍ਰੇਡੀਅੰਟ

CSS ਗ੍ਰੇਡੀਅੰਟ ਦੋ ਜਾਂ ਵੱਧ ਨਿਰਧਾਰਿਤ ਰੰਗਾਂ ਵਿਚਕਾਰ ਸੁਚਾਰੂ ਪਾਰਗਮਨਤਾਂ ਬਣਾਉਣ ਦਾ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਤਰੀਕਾ ਹੈ। ਇਹ ਚਿੱਤਰ ਫਾਈਲਾਂ ਦੀ ਲੋੜ ਨੂੰ ਦੂਰ ਕਰ ਦਿੰਦਾ ਹੈ, ਲੋਡਿੰਗ ਸਮੇਂ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ ਅਤੇ ਹੋਰ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨਾਂ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਸਾਡੇ ਜਨਰੇਟਰ ਦੋ ਕਿਸਮਾਂ ਦੇ ਗ੍ਰੇਡੀਅੰਟਾਂ ਨੂੰ ਸਮਰਥਨ ਕਰਦਾ ਹੈ:

ਰੇਖਾਕਾਰ ਗ੍ਰੇਡੀਅੰਟ

ਰੇਖਾਕਾਰ ਗ੍ਰੇਡੀਅੰਟ ਰੰਗਾਂ ਨੂੰ ਇੱਕ ਸਿੱਧੀ ਰੇਖਾ ਦੇ ਨਾਲ ਬਦਲਦਾ ਹੈ। ਤੁਸੀਂ ਨਿਯੰਤਰਿਤ ਕਰ ਸਕਦੇ ਹੋ:

ਦਿਸ਼ਾ/ਕੋਣ: ਰੰਗਾਂ ਦੇ ਪ੍ਰਵਾਹ ਦੀ ਦਿਸ਼ਾ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ (0-360 ਡਿਗਰੀ)
ਰੰਗ ਰੁਕਾਵਟਾਂ: ਉਹ ਰੰਗ ਜੋ ਬਦਲਣਗੇ
ਰੰਗ ਸਥਾਨ: ਜਿੱਥੇ ਹਰ ਰੰਗ ਗ੍ਰੇਡੀਅੰਟ ਵਿੱਚ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਖਤਮ ਹੁੰਦਾ ਹੈ

ਰੇਖਾਕਾਰ ਗ੍ਰੇਡੀਅੰਟਾਂ ਲਈ CSS ਸਿੰਟੈਕਸ ਇਸ ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

ਉਦਾਹਰਨ ਵਜੋਂ, ਇੱਕ 45 ਡਿਗਰੀ ਕੋਣ 'ਤੇ ਲਾਲ ਤੋਂ ਨੀਲੇ ਤੱਕ ਦਾ ਗ੍ਰੇਡੀਅੰਟ:

1background: linear-gradient(45deg, #ff0000 0%, #0000ff 100%);
2

ਗੋਲ ਗ੍ਰੇਡੀਅੰਟ

ਗੋਲ ਗ੍ਰੇਡੀਅੰਟ ਇੱਕ ਕੇਂਦਰੀ ਬਿੰਦੂ ਤੋਂ ਬਾਹਰ ਵਧਦੇ ਰੰਗਾਂ ਵਿਚਕਾਰ ਬਦਲਾਅ ਕਰਦਾ ਹੈ ਇੱਕ ਗੋਲ ਜਾਂ ਅੰਡਾਕਾਰ ਪੈਟਰਨ ਵਿੱਚ। ਤੁਸੀਂ ਕਸਟਮਾਈਜ਼ ਕਰ ਸਕਦੇ ਹੋ:

ਆਕਾਰ: ਗੋਲ ਜਾਂ ਅੰਡਾਕਾਰ
ਰੰਗ ਰੁਕਾਵਟਾਂ: ਤੁਹਾਡੇ ਗ੍ਰੇਡੀਅੰਟ ਵਿੱਚ ਰੰਗ
ਰੰਗ ਸਥਾਨ: ਜਿੱਥੇ ਹਰ ਰੰਗ ਗ੍ਰੇਡੀਅੰਟ ਵਿੱਚ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਖਤਮ ਹੁੰਦਾ ਹੈ

ਗੋਲ ਗ੍ਰੇਡੀਅੰਟਾਂ ਲਈ CSS ਸਿੰਟੈਕਸ ਇਸ ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ:

1background: radial-gradient(shape, color1 position1%, color2 position2%);
2

ਉਦਾਹਰਨ ਵਜੋਂ, ਕੇਂਦਰ 'ਤੇ ਲਾਲ ਤੋਂ ਕੰਨਾਂ ਤੱਕ ਨੀਲੇ ਤੱਕ ਦਾ ਗੋਲ ਗ੍ਰੇਡੀਅੰਟ:

1background: radial-gradient(circle, #ff0000 0%, #0000ff 100%);
2

ਬਾਕਸ ਛਾਂਵਾਂ

ਬਾਕਸ ਛਾਂਵਾਂ ਤੱਤਾਂ ਨੂੰ ਡੂੰਘਾਈ ਅਤੇ ਆਕਾਰ ਦੇਣ ਲਈ ਛਾਂਵਾਂ ਦੇ ਪ੍ਰਭਾਵ ਬਣਾਉਂਦੀਆਂ ਹਨ। ਸਾਡੇ ਜਨਰੇਟਰ ਨਾਲ, ਤੁਸੀਂ ਨਿਯੰਤਰਿਤ ਕਰ ਸਕਦੇ ਹੋ:

ਹੋਰਜ਼ਾਂਟਲ ਓਫਸੈਟ: ਛਾਂਵ ਕਿੰਨੀ ਦੂਰ ਖੜੀ ਹੋਵੇਗੀ
ਵਰਟੀਕਲ ਓਫਸੈਟ: ਛਾਂਵ ਕਿੰਨੀ ਦੂਰ ਲੰਬੀ ਹੋਵੇਗੀ
ਧੁੰਦਲਾਪਣ ਦਾ ਕੋਣ: ਛਾਂਵ ਕਿੰਨੀ ਧੁੰਦਲੀ ਦਿੱਖ ਦੇਵੇਗੀ
ਫੈਲਾਅ ਦਾ ਕੋਣ: ਛਾਂਵ ਕਿੰਨੀ ਵੱਡੀ ਹੋਵੇਗੀ
ਰੰਗ ਅਤੇ ਓਪਾਸਿਟੀ: ਛਾਂਵ ਦਾ ਰੰਗ ਅਤੇ ਪਾਰਦਰਸ਼ਤਾ
ਇਨਸੈਟ ਵਿਕਲਪ: ਕੀ ਛਾਂਵ ਤੱਤ ਦੇ ਅੰਦਰ ਦਿੱਖ ਦੇਵੇਗੀ

ਬਾਕਸ ਛਾਂਵਾਂ ਲਈ CSS ਸਿੰਟੈਕਸ ਇਸ ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ:

1box-shadow: h-offset v-offset blur spread color;
2

ਇਕ ਇਨਸੈਟ ਛਾਂਵ ਲਈ, inset ਕੀਵਰਡ ਸ਼ਾਮਲ ਕਰੋ:

1box-shadow: inset h-offset v-offset blur spread color;
2

ਉਦਾਹਰਨ ਵਜੋਂ, ਇੱਕ ਹੌਲੀ ਡ੍ਰਾਪ ਛਾਂਵ:

1box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
2

ਬਾਰਡਰ ਰੇਡੀਅਸ

ਬਾਰਡਰ ਰੇਡੀਅਸ ਤੱਤਾਂ 'ਤੇ ਗੋਲ ਕੋਨੇ ਬਣਾਉਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਉਨ੍ਹਾਂ ਦੀ ਦਿੱਖ ਨਰਮ ਹੁੰਦੀ ਹੈ। ਸਾਡੇ ਜਨਰੇਟਰ ਨਾਲ, ਤੁਸੀਂ:

ਸਾਰੇ ਕੋਨਾਂ ਲਈ ਇੱਕੋ ਹੀ ਰੇਡੀਅਸ ਨਿਰਧਾਰਿਤ ਕਰੋ
ਹਰ ਕੋਣ ਨੂੰ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਕਸਟਮਾਈਜ਼ ਕਰੋ (ਟਾਪ-ਲੇਫਟ, ਟਾਪ-ਰਾਈਟ, ਬਾਟਮ-ਰਾਈਟ, ਬਾਟਮ-ਲੇਫਟ)

ਬਾਰਡਰ ਰੇਡੀਅਸ ਲਈ CSS ਸਿੰਟੈਕਸ ਇਨ੍ਹਾਂ ਪੈਟਰਨਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ:

ਇਕਸਾਰ ਕੋਨਾਂ ਲਈ:

1border-radius: value;
2

ਵਿਅਕਤੀਗਤ ਕੋਨਾਂ ਲਈ:

1border-radius: top-left top-right bottom-right bottom-left;
2

ਉਦਾਹਰਨ ਵਜੋਂ, ਇੱਕ ਬਟਨ ਜਿਸਦੇ ਕੋਨੇ ਗੋਲ ਹਨ:

1border-radius: 10px;
2

ਜਾਂ ਇੱਕ ਬੋਲਣ ਵਾਲੀ ਬੁਬਲ ਜਿਸਦੇ ਵੱਖਰੇ ਕੋਣਾਂ ਦੇ ਰੇਡੀਅਸ ਹਨ:

1border-radius: 20px 20px 5px 20px;
2

ਟੈਕਸਟ ਛਾਂਵਾਂ

ਟੈਕਸਟ ਛਾਂਵਾਂ ਟੈਕਸਟ ਨੂੰ ਡੂੰਘਾਈ ਅਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਜੋੜੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਸਾਡੇ ਜਨਰੇਟਰ ਨਾਲ, ਤੁਸੀਂ ਨਿਯੰਤਰਿਤ ਕਰ ਸਕਦੇ ਹੋ:

ਹੋਰਜ਼ਾਂਟਲ ਓਫਸੈਟ: ਛਾਂਵ ਕਿੰਨੀ ਦੂਰ ਖੜੀ ਹੋਵੇਗੀ
ਵਰਟੀਕਲ ਓਫਸੈਟ: ਛਾਂਵ ਕਿੰਨੀ ਦੂਰ ਲੰਬੀ ਹੋਵੇਗੀ
ਧੁੰਦਲਾਪਣ ਦਾ ਕੋਣ: ਛਾਂਵ ਕਿੰਨੀ ਧੁੰਦਲੀ ਦਿੱਖ ਦੇਵੇਗੀ
ਰੰਗ ਅਤੇ ਓਪਾਸਿਟੀ: ਛਾਂਵ ਦਾ ਰੰਗ ਅਤੇ ਪਾਰਦਰਸ਼ਤਾ

ਟੈਕਸਟ ਛਾਂਵਾਂ ਲਈ CSS ਸਿੰਟੈਕਸ ਇਸ ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ:

1text-shadow: h-offset v-offset blur color;
2

ਉਦਾਹਰਨ ਵਜੋਂ, ਇੱਕ ਹੌਲੀ ਟੈਕਸਟ ਛਾਂਵ:

1text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
2

CSS ਪ੍ਰਾਪਰਟੀ ਜਨਰੇਟਰ ਨੂੰ ਵਰਤਣ ਦਾ ਤਰੀਕਾ

ਸਾਡਾ CSS ਪ੍ਰਾਪਰਟੀ ਜਨਰੇਟਰ ਸਹਿਜ ਅਤੇ ਵਰਤਣ ਵਿੱਚ ਆਸਾਨ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਆਪਣੇ ਵੈਬ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਕਸਟਮ CSS ਪ੍ਰਾਪਰਟੀਆਂ ਬਣਾਉਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ:

ਕਦਮ 1: CSS ਪ੍ਰਾਪਰਟੀ ਚੁਣੋ

ਤੁਸੀਂ ਚਾਰ ਟੈਬਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਇੱਕ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ CSS ਪ੍ਰਾਪਰਟੀ ਦੀ ਕਿਸਮ ਚੁਣ ਸਕਦੇ ਹੋ:

ਗ੍ਰੇਡੀਅੰਟ
ਬਾਕਸ ਛਾਂਵ
ਬਾਰਡਰ ਰੇਡੀਅਸ
ਟੈਕਸਟ ਛਾਂਵ

ਕਦਮ 2: ਆਪਣੇ ਸੈਟਿੰਗਾਂ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰੋ

ਹਰ ਪ੍ਰਾਪਰਟੀ ਕਿਸਮ ਦੇ ਆਪਣੇ ਕਸਟਮਾਈਜ਼ ਕਰਨ ਯੋਗ ਪੈਰਾਮੀਟਰਾਂ ਦਾ ਇੱਕ ਸੈੱਟ ਹੈ:

ਗ੍ਰੇਡੀਅੰਟਾਂ ਲਈ:

ਗ੍ਰੇਡੀਅੰਟ ਦੀ ਕਿਸਮ (ਰੇਖਾਕਾਰ ਜਾਂ ਗੋਲ) ਚੁਣੋ
ਰੇਖਾਕਾਰ ਗ੍ਰੇਡੀਅੰਟਾਂ ਲਈ, ਸਲਾਈਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੋਣ ਨੂੰ ਸਮਰਥਨ ਕਰੋ
ਰੰਗ ਚੁਣੋ ਰੰਗ ਚੁਣਨ ਵਾਲਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
ਸਲਾਈਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹਰ ਰੰਗ ਰੁਕਾਵਟ ਦੇ ਸਥਾਨ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰੋ

ਬਾਕਸ ਛਾਂਵਾਂ ਲਈ:

ਸਲਾਈਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੋਰਜ਼ਾਂਟਲ ਅਤੇ ਵਰਟੀਕਲ ਓਫਸੈਟ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰੋ
ਧੁੰਦਲਾਪਣ ਦਾ ਕੋਣ ਅਤੇ ਫੈਲਾਅ ਦਾ ਕੋਣ ਸੈਟ ਕਰੋ
ਛਾਂਵ ਦਾ ਰੰਗ ਚੁਣੋ ਅਤੇ ਓਪਾਸਿਟੀ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰੋ
ਜੇ ਤੁਸੀਂ ਇੱਕ ਅੰਦਰੂਨੀ ਛਾਂਵ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ "ਇਨਸੈਟ ਛਾਂਵ" ਚੈਕਬਾਕਸ ਨੂੰ ਟੌਗਲ ਕਰੋ

ਬਾਰਡਰ ਰੇਡੀਅਸ ਲਈ:

ਇੱਕੋ ਜਿਹੇ ਕੋਨਾਂ ਜਾਂ ਵਿਅਕਤੀਗਤ ਕੋਣ ਸੈਟਿੰਗਾਂ ਵਿੱਚੋਂ ਚੁਣੋ
ਸਲਾਈਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰੇਡੀਅਸ ਮੁੱਲ ਨਿਯੰਤਰਿਤ ਕਰੋ
ਪੂਰਵਦਰਸ਼ਨ ਖੇਤਰ ਵਿੱਚ ਬਦਲਾਵਾਂ ਨੂੰ ਵੇਖੋ

ਟੈਕਸਟ ਛਾਂਵਾਂ ਲਈ:

ਸਲਾਈਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੋਰਜ਼ਾਂਟਲ ਅਤੇ ਵਰਟੀਕਲ ਓਫਸੈਟ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰੋ
ਧੁੰਦਲਾਪਣ ਦਾ ਕੋਣ ਸੈਟ ਕਰੋ
ਛਾਂਵ ਦਾ ਰੰਗ ਚੁਣੋ ਅਤੇ ਓਪਾਸਿਟੀ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰੋ
ਪੂਰਵਦਰਸ਼ਨ ਖੇਤਰ ਵਿੱਚ ਨਮੂਨਾ ਟੈਕਸਟ 'ਤੇ ਪ੍ਰਭਾਵ ਵੇਖੋ

ਕਦਮ 3: ਬਣਾਇਆ ਗਿਆ CSS ਕਾਪੀ ਕਰੋ

ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਨਾਲ ਸੰਤੁਸ਼ਟ ਹੋ ਜਾਓ:

ਕੋਡ ਬਾਕਸ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਬਣਾਏ ਗਏ CSS ਕੋਡ ਦੀ ਸਮੀਖਿਆ ਕਰੋ
"ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਕਰੋ" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ
ਕੋਡ ਨੂੰ ਆਪਣੇ CSS ਫਾਈਲ ਜਾਂ ਇਨਲਾਈਨ ਸ਼ੈਲੀ ਵਿੱਚ ਪੇਸਟ ਕਰੋ

ਜਦੋਂ ਤੁਸੀਂ ਸੈਟਿੰਗਾਂ ਨੂੰ ਸੁਧਾਰਦੇ ਹੋ, ਟੂਲ ਆਪਣੇ ਆਪ CSS ਕੋਡ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਤੁਸੀਂ ਹਮੇਸ਼ਾ ਆਪਣੇ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਦੇ ਸਭ ਤੋਂ ਮੌਜੂਦਾ ਸੰਸਕਰਣ ਨੂੰ ਵੇਖਦੇ ਹੋ।

ਪ੍ਰਯੋਗਾਤਮਕ ਐਪਲੀਕੇਸ਼ਨ ਅਤੇ ਵਰਤੋਂ ਦੇ ਕੇਸ

UI ਤੱਤਾਂ ਲਈ ਗ੍ਰੇਡੀਅੰਟ

ਗ੍ਰੇਡੀਅੰਟ ਵੱਖ-ਵੱਖ UI ਤੱਤਾਂ ਨੂੰ ਸੁਧਾਰ ਸਕਦੇ ਹਨ:

ਬਟਨ: ਗ੍ਰੇਡੀਅੰਟ ਪਿਛੋਕੜਾਂ ਨਾਲ ਦ੍ਰਿਸ਼ਟੀਗੋਚਰ ਕਾਲ ਕਰਨ ਵਾਲੇ ਬਟਨ ਬਣਾਓ

1   .cta-button {
2     background: linear-gradient(45deg, #ff416c 0%, #ff4b2b 100%);
3     color: white;
4     padding: 10px 20px;
5     border: none;
6     border-radius: 5px;
7   }
8

ਹੈਡਰ ਅਤੇ ਫੁੱਟਰ: ਪੰਨਾ ਭਾਗਾਂ ਨੂੰ ਵਿਜ਼ੂਅਲ ਰੂਪ ਵਿੱਚ ਦਿਲਚਸਪ ਬਣਾਓ

1   header {
2     background: linear-gradient(to right, #2c3e50 0%, #4ca1af 100%);
3     color: white;
4     padding: 20px;
5   }
6

ਪ੍ਰਗਤੀ ਪੱਟੀਆਂ: ਪ੍ਰਗਤੀ ਸੰਕੇਤਕਾਂ ਨੂੰ ਹੋਰ ਦਿਲਚਸਪ ਬਣਾਓ

1   .progress-bar {
2     background: linear-gradient(to right, #1fa2ff 0%, #12d8fa 50%, #a6ffcb 100%);
3     height: 10px;
4     border-radius: 5px;
5   }
6

ਡੂੰਘਾਈ ਅਤੇ ਉੱਚਾਈ ਲਈ ਬਾਕਸ ਛਾਂਵਾਂ

ਬਾਕਸ ਛਾਂਵਾਂ ਤੱਤਾਂ ਵਿੱਚ ਹੇਰਾਰਕੀ ਅਤੇ ਡੂੰਘਾਈ ਬਣਾਉਣ ਲਈ ਛਾਂਵਾਂ ਦੇ ਪ੍ਰਭਾਵ ਬਣਾਉਂਦੀਆਂ ਹਨ:

ਕਾਰਡ: ਹੌਲੀ ਛਾਂਵਾਂ ਜੋੜ ਕੇ ਉੱਡਣ ਵਾਲੇ ਪ੍ਰਭਾਵ ਬਣਾਓ

1   .card {
2     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
3     padding: 20px;
4     background: white;
5   }
6

ਡ੍ਰੌਪਡਾਊਨ ਮੈਨੂ: ਓਵਰਲੇਜ਼ ਲਈ ਉੱਚਾਈ ਦਾ ਅਹਿਸਾਸ ਬਣਾਓ

1   .dropdown {
2     box-shadow: 0 6px 12px rgba(0,0,0,0.15);
3     background: white;
4     border-radius: 4px;
5   }
6

ਫਾਰਮ ਇਨਪੁਟ 'ਤੇ ਫੋਕਸ: ਉਪਭੋਗੀ ਸੰਪਰਕ ਫੀਡਬੈਕ ਨੂੰ ਸੁਧਾਰੋ

1   input:focus {
2     box-shadow: 0 0 0 3px rgba(66,153,225,0.5);
3     outline: none;
4     border-color: #4299e1;
5   }
6

ਗੋਲ ਕੋਨਾਂ ਲਈ ਬਾਰਡਰ ਰੇਡੀਅਸ

ਬਾਰਡਰ ਰੇਡੀਅਸ ਇੰਟਰਫੇਸਾਂ ਨੂੰ ਹੋਰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਂਦਾ ਹੈ:

ਪ੍ਰੋਫਾਈਲ ਤਸਵੀਰਾਂ: ਗੋਲ ਜਾਂ ਗੋਲ ਕੋਨੇ ਵਾਲੇ ਚਿੱਤਰ ਕੰਟੇਨਰ ਬਣਾਓ

1   .profile-pic {
2     border-radius: 50%; /* ਪੂਰੀ ਗੋਲ */
3     width: 100px;
4     height: 100px;
5     object-fit: cover;
6   }
7

ਬਟਨ: ਦੋਸਤਾਨਾ ਮਹਿਸੂਸ ਕਰਨ ਲਈ ਬਟਨ ਦੇ ਕੋਨੇ ਨਰਮ ਕਰੋ

1   .button {
2     border-radius: 8px;
3     padding: 10px 20px;
4     background: #4299e1;
5     color: white;
6   }
7

ਸੁਨੇਹਾ ਬੁਬਲ: ਚੈਟ-ਜਿਹੇ ਇੰਟਰਫੇਸ ਬਣਾਓ

1   .message-bubble {
2     border-radius: 18px 18px 18px 4px;
3     background: #e2f5fe;
4     padding: 12px;
5   }
6

ਟੈਕਸਟ ਛਾਂਵਾਂ ਲਈ ਟਾਈਪੋਗ੍ਰਾਫੀ ਸੁਧਾਰ

ਟੈਕਸਟ ਛਾਂਵਾਂ ਪੜ੍ਹਨਯੋਗਤਾ ਨੂੰ ਸੁਧਾਰ ਸਕਦੀਆਂ ਹਨ ਅਤੇ ਸ਼ੈਲੀ ਜੋੜ ਸਕਦੀਆਂ ਹਨ:

ਹੀਰੋ ਟੈਕਸਟ: ਚਿੱਤਰ ਦੇ ਪਿਛੋਕੜਾਂ ਦੇ ਖਿਲਾਫ ਟੈਕਸਟ ਨੂੰ ਖੜਾ ਕਰੋ

1   .hero-title {
2     text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
3     color: white;
4     font-size: 3rem;
5   }
6

ਲੇਟਰਪ੍ਰੈਸ ਪ੍ਰਭਾਵ: ਇੱਕ ਉਭਰੇ ਹੋਏ ਦਿੱਖ ਬਣਾਓ

1   .letterpress {
2     text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
3     color: #444;
4     font-weight: bold;
5   }
6

ਨਿਓਨ ਟੈਕਸਟ: ਚਮਕਦਾਰ ਟੈਕਸਟ ਪ੍ਰਭਾਵ ਬਣਾਓ

1   .neon-text {
2     text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6;
3     color: #fff;
4   }
5

ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਸੰਗਤਤਾ ਅਤੇ ਕਾਰਗੁਜ਼ਾਰੀ ਦੇ ਵਿਚਾਰ

ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਸੰਗਤਤਾ

ਜਦੋਂ ਕਿ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਸਾਡੇ ਜਨਰੇਟਰ ਵਿੱਚ ਸਾਰੇ CSS ਪ੍ਰਾਪਰਟੀਆਂ ਨੂੰ ਸਮਰਥਨ ਕਰਦੇ ਹਨ, ਕੁਝ ਸੰਗਤਤਾ ਦੇ ਵਿਚਾਰ ਹਨ:

ਗ੍ਰੇਡੀਅੰਟ: ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ। ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ, ਵੈਂਡਰ ਪ੍ਰੀਫਿਕਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਜਾਂ ਇੱਕ ਠੋਸ ਰੰਗ ਫੈਲਾਉਣ ਦੀ ਸਿਫਾਰਸ਼ ਕਰੋ:

1   .gradient-element {
2     background: #5433FF; /* ਫੈਲਾਉਣ ਵਾਲਾ ਰੰਗ */
3     background: -webkit-linear-gradient(45deg, #5433FF, #20BDFF);
4     background: linear-gradient(45deg, #5433FF, #20BDFF);
5   }
6

ਬਾਕਸ ਛਾਂਵਾਂ: ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ। ਪੁਰਾਣੇ IE ਵਰਜਨਾਂ ਲਈ, ਬਾਰਡਰ ਇਮੇਜਾਂ ਜਾਂ ਪਿਛੋਕੜ ਇਮੇਜਾਂ ਵਰਗੀਆਂ ਵਿਕਲਪਕ ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸੋਚੋ।
ਬਾਰਡਰ ਰੇਡੀਅਸ: ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਮਰਥਿਤ। ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਥਿਰ ਦਿੱਖ ਲਈ, ਗੋਲ ਕੋਣਾਂ ਲਈ SVG ਆਕਾਰਾਂ ਜਾਂ ਚਿੱਤਰ ਪਿਛੋਕੜਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸੋਚੋ।
ਟੈਕਸਟ ਛਾਂਵਾਂ: ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਚੰਗੀ ਸਮਰਥਤਾ। IE9 ਅਤੇ ਇਸ ਤੋਂ ਹੇਠਾਂ ਲਈ, ਵਿਕਲਪਕ ਸ਼ੈਲੀ ਜਾਂ ਛਾਂਵ ਦੀ ਗੈਰਹਾਜ਼ਰੀ ਨੂੰ ਸੁਵੀਕਾਰ ਕਰੋ।

ਕਾਰਗੁਜ਼ਾਰੀ ਦੇ ਵਿਚਾਰ

ਜਦੋਂ ਕਿ CSS ਪ੍ਰਾਪਰਟੀਆਂ ਆਮ ਤੌਰ 'ਤੇ ਕਾਰਗੁਜ਼ਾਰੀ ਵਾਲੀਆਂ ਹੁੰਦੀਆਂ ਹਨ, ਜਟਿਲ ਪ੍ਰਭਾਵ ਰੇਂਡਰਿੰਗ ਦੀ ਗਤੀ 'ਤੇ ਪ੍ਰਭਾਵ ਪਾ ਸਕਦੇ ਹਨ:

ਕਈ ਬਾਕਸ ਛਾਂਵਾਂ: ਤੱਤਾਂ 'ਤੇ ਕਈ ਬਾਕਸ ਛਾਂਵਾਂ ਲਗਾਉਣ ਨਾਲ ਰੇਂਡਰਿੰਗ ਨੂੰ ਸਲੋ ਕਰ ਸਕਦਾ ਹੈ। ਬਿਹਤਰ ਕਾਰਗੁਜ਼ਾਰੀ ਲਈ ਘੱਟ ਛਾਂਵਾਂ ਦੀਆਂ ਲੇਅਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸੋਚੋ।
ਜਟਿਲ ਗ੍ਰੇਡੀਅੰਟ: ਬਹੁਤ ਸਾਰੀਆਂ ਰੰਗ ਰੁਕਾਵਟਾਂ ਵਾਲੇ ਗ੍ਰੇਡੀਅੰਟ ਕਾਰਗੁਜ਼ਾਰੀ 'ਤੇ ਪ੍ਰਭਾਵ ਪਾ ਸਕਦੇ ਹਨ। ਜਦੋਂ ਸੰਭਵ ਹੋਵੇ, ਗ੍ਰੇਡੀਅੰਟਾਂ ਨੂੰ ਸਧਾਰਨ ਬਣਾਓ ਜਾਂ ਬਹੁਤ ਜਟਿਲ ਪੈਟਰਨਾਂ ਲਈ ਪੂਰਵ-ਰੇਂਡਰ ਕੀਤੀਆਂ ਚਿੱਤਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸੋਚੋ।
ਐਨੀਮੇਸ਼ਨ: ਬਾਕਸ ਛਾਂਵਾਂ ਵਰਗੀਆਂ ਪ੍ਰਾਪਰਟੀਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨਾ ਕਾਰਗੁਜ਼ਾਰੀ ਦੇ ਮੁੱਦੇ ਪੈਦਾ ਕਰ ਸਕਦਾ ਹੈ। ਜਦੋਂ ਸੰਭਵ ਹੋਵੇ, ਮੂਵਮੈਂਟ ਪ੍ਰਭਾਵਾਂ ਲਈ ਟ੍ਰਾਂਸਫਾਰਮ ਅਤੇ ਓਪਾਸਿਟੀ ਨੂੰ ਐਨੀਮੇਟ ਕਰੋ, ਜਾਂ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਅਪਟੀਮਾਈਜ਼ ਕਰਨ ਲਈ will-change ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਮੋਬਾਈਲ ਡਿਵਾਈਸ: ਜਟਿਲ CSS ਪ੍ਰਭਾਵਾਂ ਦਾ ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ 'ਤੇ ਵੱਡਾ ਕਾਰਗੁਜ਼ਾਰੀ ਪ੍ਰਭਾਵ ਹੋ ਸਕਦਾ ਹੈ। ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਆਪਣੇ ਡਿਜ਼ਾਈਨਾਂ ਦੀ ਜਾਂਚ ਕਰੋ ਅਤੇ ਮੋਬਾਈਲ ਸੰਸਕਰਣਾਂ ਲਈ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਸਧਾਰਨ ਬਣਾਉਣ ਦੀ ਸੋਚੋ।

ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ

ਰੇਖਾਕਾਰ ਅਤੇ ਗੋਲ ਗ੍ਰੇਡੀਅੰਟ ਵਿੱਚ ਕੀ ਫਰਕ ਹੈ?

ਰੇਖਾਕਾਰ ਗ੍ਰੇਡੀਅੰਟ ਸਿੱਧੀ ਰੇਖਾ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਦਿਸ਼ਾ (ਕੋਣ) ਦੇ ਨਾਲ ਰੰਗਾਂ ਨੂੰ ਬਦਲਦਾ ਹੈ, ਜਦਕਿ ਗੋਲ ਗ੍ਰੇਡੀਅੰਟ ਕੇਂਦਰੀ ਬਿੰਦੂ ਤੋਂ ਬਾਹਰ ਵਧਦੇ ਰੰਗਾਂ ਵਿਚਕਾਰ ਬਦਲਾਅ ਕਰਦਾ ਹੈ। ਰੇਖਾਕਾਰ ਗ੍ਰੇਡੀਅੰਟ ਪਿਛੋਕੜਾਂ, ਬਟਨ ਅਤੇ ਹੋਰ ਹਾਰਜਾਂ/ਖੜੀਆਂ ਪਾਰਗਮਨਤਾਂ ਲਈ ਵਧੀਆ ਹਨ, ਜਦਕਿ ਗੋਲ ਗ੍ਰੇਡੀਅੰਟ ਸਪੌਟਲਾਈਟ ਪ੍ਰਭਾਵ, ਗੋਲ ਬਟਨ ਜਾਂ ਕੇਂਦਰੀ ਪੁਆਇੰਟ ਬਣਾਉਣ ਲਈ ਚੰਗੇ ਹਨ।

ਕੀ ਮੈਂ ਇੱਕ ਹੀ ਤੱਤ 'ਤੇ ਕਈ ਬਾਕਸ ਛਾਂਵਾਂ ਬਣਾ ਸਕਦਾ ਹਾਂ?

ਹਾਂ, ਤੁਸੀਂ ਇੱਕ ਹੀ ਤੱਤ 'ਤੇ ਕਈ ਬਾਕਸ ਛਾਂਵਾਂ ਲਗਾ ਸਕਦੇ ਹੋ, ਹਰ ਛਾਂਵ ਦੀ ਪਰਿਭਾਸ਼ਾ ਨੂੰ ਕਾਮਾ ਨਾਲ ਵੱਖਰਾ ਕਰਕੇ। ਉਦਾਹਰਨ ਵਜੋਂ:

1box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
2

ਇਹ ਤੱਤ ਦੇ ਹੇਠਾਂ ਇੱਕ ਮੁੱਖ ਛਾਂਵ ਅਤੇ ਇੱਕ ਹੌਲੀ ਉੱਪਰ ਦੀ ਛਾਂਵ ਬਣਾਉਂਦਾ ਹੈ।

ਮੈਂ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਨਾਲ ਸਿਰਫ ਕੁਝ ਕੋਣਾਂ ਨੂੰ ਕਿਵੇਂ ਗੋਲ ਕਰ ਸਕਦਾ ਹਾਂ?

ਤੁਸੀਂ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਚਾਰ ਮੁੱਲਾਂ ਦੇ ਨਾਲ ਨਿਰਧਾਰਿਤ ਕਰਕੇ ਹਰ ਕੋਣ ਲਈ ਵੱਖਰੇ ਰੇਡੀਅਸ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦੇ ਹੋ: ਟਾਪ-ਲੇਫਟ, ਟਾਪ-ਰਾਈਟ, ਬਾਟਮ-ਰਾਈਟ, ਬਾਟਮ-ਲੇਫਟ। ਉਦਾਹਰਨ ਵਜੋਂ:

1border-radius: 10px 0 0 10px;
2

ਇਹ ਸਿਰਫ਼ ਖੱਬੇ ਕੋਣਾਂ (ਟਾਪ-ਲੇਫਟ ਅਤੇ ਬਾਟਮ-ਲੇਫਟ) ਨੂੰ ਗੋਲ ਕਰੇਗਾ, ਜਦਕਿ ਸੱਜੇ ਕੋਣ ਚੋਟੀ ਦੇ ਰਹਿਣਗੇ।

ਮੇਰੀ ਟੈਕਸਟ ਛਾਂਵ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਵੱਖਰੀ ਕਿਉਂ ਦਿੱਖਦੀ ਹੈ?

ਟੈਕਸਟ ਛਾਂਵਾਂ ਦਾ ਰੇਂਡਰਿੰਗ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਹਲਕਾ-ਫੁਲਕਾ ਅੰਤਰ ਹੋ ਸਕਦਾ ਹੈ, ਜੋ ਐਂਟੀ-ਐਲਿਆਸਿੰਗ ਅਤੇ ਰੇਂਡਰਿੰਗ ਇੰਜਣਾਂ ਵਿੱਚ ਅੰਤਰਾਂ ਦੇ ਕਾਰਨ ਹੁੰਦਾ ਹੈ। ਸਭ ਤੋਂ ਸੰਗਤ ਨਤੀਜੇ ਲਈ, ਮੋਡਰੇਟ ਧੁੰਦਲਾਪਣ ਦੇ ਮੁੱਲ (1-3px) ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ 'ਤੇ ਜਾਂਚ ਕਰੋ। ਬਹੁਤ ਹੌਲੀ ਛਾਂਵਾਂ (0-1px ਧੁੰਦਲਾ) ਆਮ ਤੌਰ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਭ ਤੋਂ ਵੱਧ ਵੱਖਰੇ ਪੈਦਾ ਕਰਦੀਆਂ ਹਨ।

ਕੀ ਮੈਂ ਇਹ CSS ਪ੍ਰਭਾਵ ਐਨੀਮੇਟ ਕਰ ਸਕਦਾ ਹਾਂ?

ਹਾਂ, ਜਿਆਦਾਤਰ CSS ਪ੍ਰਾਪਰਟੀਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਕੁਝ ਹੋਰਾਂ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਬਿਹਤਰ ਹੁੰਦੀ ਹੈ:

ਗ੍ਰੇਡੀਅੰਟ: CSS ਟ੍ਰਾਂਜ਼ਿਸ਼ਨ ਨਾਲ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਐਨੀਮੇਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ, ਪਰ ਤੁਸੀਂ ਬੈਕਗ੍ਰਾਊਂਡ-ਪੋਜ਼ੀਸ਼ਨ ਨੂੰ ਐਨੀਮੇਟ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਵੱਖ-ਵੱਖ ਗ੍ਰੇਡੀਅੰਟ ਪਰਿਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਬਦਲਣ ਲਈ CSS ਕੀਫਰੇਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ
ਬਾਕਸ ਛਾਂਵਾਂ: ਐਨੀਮੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਪਰ ਕਾਰਗੁਜ਼ਾਰੀ ਦੇ ਮੁੱਦੇ ਪੈਦਾ ਕਰ ਸਕਦੇ ਹਨ; ਮੂਵਮੈਂਟ ਪ੍ਰਭਾਵਾਂ ਲਈ ਟ੍ਰਾਂਸਫਾਰਮ ਦੀ ਵਰਤੋਂ ਕਰਨ ਜਾਂ ਇਸਦੀ ਥਾਂ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸੋਚੋ
ਬਾਰਡਰ ਰੇਡੀਅਸ: ਸਾਫ਼ ਅਤੇ ਕਾਰਗੁਜ਼ਾਰੀ-ਮਿੱਤਰ ਹੈ
ਟੈਕਸਟ ਛਾਂਵਾਂ: ਐਨੀਮੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਪਰ ਐਨੀਮੇਸ਼ਨ ਦੌਰਾਨ ਟੈਕਸਟ ਰੇਂਡਰਿੰਗ ਦੇ ਮੁੱਦੇ ਪੈਦਾ ਕਰ ਸਕਦਾ ਹੈ

ਮੈਂ ਇਹ ਯਕੀਨੀ ਕਿਵੇਂ ਬਣਾਵਾਂ ਕਿ ਮੇਰੇ CSS ਪ੍ਰਭਾਵ ਪਹੁੰਚਯੋਗ ਹਨ?

CSS ਪ੍ਰਭਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਇਹ ਪਹੁੰਚਯੋਗਤਾ ਦੇ ਨਿਯਮਾਂ 'ਤੇ ਵਿਚਾਰ ਕਰੋ:

ਗ੍ਰੇਡੀਅੰਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਰੰਗਾਂ ਵਿੱਚ ਕਾਫੀ ਵਿਰੋਧ ਹੈ
ਇੰਟਰੈਕਟਿਵ ਤੱਤਾਂ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਛਾਂਵਾਂ ਦੇ ਪ੍ਰਭਾਵਾਂ 'ਤੇ ਨਿਰਭਰ ਨਾ ਕਰੋ
ਟੈਕਸਟ ਛਾਂਵਾਂ ਲਗਾਉਂਦੇ ਸਮੇਂ ਪੜ੍ਹਨਯੋਗਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਓ
ਘਟਕਾਂ ਦੀ ਗੈਰਹਾਜ਼ਰੀ ਨੂੰ ਸਵੀਕਾਰ ਕਰੋ ਜੋ ਘਟਕਾਂ ਨੂੰ ਪੇਸ਼ ਕਰਨ ਲਈ ਪREFER ਕਰਦੇ ਹਨ

ਕੀ ਮੈਂ ਇਸ ਟੂਲ ਨਾਲ ਵੈਂਡਰ ਪ੍ਰੀਫਿਕਸਾਂ ਜਨਰੇਟ ਕਰ ਸਕਦਾ ਹਾਂ?

ਸਾਡਾ ਟੂਲ ਮਿਆਰੀ CSS ਪ੍ਰਾਪਰਟੀਆਂ ਨੂੰ ਵੈਂਡਰ ਪ੍ਰੀਫਿਕਸਾਂ ਦੇ ਬਿਨਾਂ ਬਣਾਉਂਦਾ ਹੈ। ਉਤਪਾਦਨ ਦੀ ਵਰਤੋਂ ਲਈ, ਆਪਣੇ CSS ਨੂੰ ਇੱਕ ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਟੂਲ ਦੇ ਰਾਹੀਂ ਚਲਾਉਣ ਜਾਂ ਇੱਕ CSS ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸੋਚੋ ਜੋ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਵੈਂਡਰ ਪ੍ਰੀਫਿਕਸਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।

ਹਵਾਲੇ ਅਤੇ ਅੱਗੇ ਪੜ੍ਹਨ ਲਈ ਪੜ੍ਹਾਈ

MDN ਵੈਬ ਡੌਕਸ: CSS ਗ੍ਰੇਡੀਅੰਟਾਂ ਦੀ ਵਰਤੋਂ
CSS-Tricks: CSS ਗ੍ਰੇਡੀਅੰਟਾਂ ਦਾ ਪੂਰਾ ਗਾਈਡ
MDN ਵੈਬ ਡੌਕਸ: ਬਾਕਸ ਛਾਂਵ
CSS-Tricks: ਬਾਰਡਰ-ਰੇਡੀਅਸ
MDN ਵੈਬ ਡੌਕਸ: ਟੈਕਸਟ ਛਾਂਵ
Smashing Magazine: CSS ਛਾਂਵਾਂ, ਕਸਟਮਾਈਜ਼ਿੰਗ ਅਤੇ ਐਨੀਮੇਟਿੰਗ
Can I Use: CSS ਫੀਚਰ ਸਹਾਇਤਾ ਟੇਬਲ
Web.dev: CSS ਕਾਰਗੁਜ਼ਾਰੀ ਅਪਟੀਮਾਈਜ਼ੇਸ਼ਨ

ਨਤੀਜਾ

CSS ਪ੍ਰਾਪਰਟੀ ਜਨਰੇਟਰ ਤੁਹਾਡੇ ਵੈਬ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਸੁੰਦਰ, ਕਸਟਮਾਈਜ਼ ਕੀਤੀਆਂ CSS ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। ਗ੍ਰੇਡੀਅੰਟ, ਬਾਕਸ ਛਾਂਵਾਂ, ਬਾਰਡਰ ਰੇਡੀਅਸ ਅਤੇ ਟੈਕਸਟ ਛਾਂਵਾਂ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰਨ ਲਈ ਇੱਕ ਸਹਿਜ ਵਿਜ਼ੂਅਲ ਇੰਟਰਫੇਸ ਪ੍ਰਦਾਨ ਕਰਕੇ, ਇਹ ਜਟਿਲ ਸਿੰਟੈਕਸ ਨੂੰ ਯਾਦ ਰੱਖਣ ਜਾਂ ਮੁੜ-ਮੁੜ ਮੁੱਲਾਂ ਨੂੰ ਸੁਧਾਰਨ ਦੀ ਲੋੜ ਨੂੰ ਦੂਰ ਕਰ ਦਿੰਦਾ ਹੈ।

ਚਾਹੇ ਤੁਸੀਂ ਇੱਕ ਪੇਸ਼ੇਵਰ ਵੈਬਸਾਈਟ ਬਣਾ ਰਹੇ ਹੋ, ਇੱਕ ਪ੍ਰੋਟੋਟਾਈਪ ਬਣਾਉਂਦੇ ਹੋ, ਜਾਂ CSS ਸਿੱਖ ਰਹੇ ਹੋ, ਇਹ ਟੂਲ ਤੁਹਾਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਪੋਲਿਸ਼ ਕੀਤੇ ਨਤੀਜੇ ਪ੍ਰਾਪਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਰੀਅਲ-ਟਾਈਮ ਪੂਰਵਦਰਸ਼ਨ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਤੁਹਾਨੂੰ ਇਹ ਦੇਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ ਕਿ ਤੁਹਾਡੇ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਕਿਵੇਂ ਦਿੱਖ ਦੇਣਗੇ, ਅਤੇ ਇੱਕ-ਕਲਿੱਕ ਕਾਪੀ ਫੰਕਸ਼ਨ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨਾਂ ਨੂੰ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਲਾਗੂ ਕਰਨ ਲਈ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ।

ਆਪਣੇ ਵੈਬ ਡਿਜ਼ਾਈਨਾਂ ਨੂੰ ਸੁਧਾਰਨ ਅਤੇ ਹੋਰ ਦਿਲਚਸਪ ਉਪਭੋਗੀ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ ਅੱਜ ਹੀ ਵੱਖ-ਵੱਖ CSS ਪ੍ਰਾਪਰਟੀਆਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨ ਸ਼ੁਰੂ ਕਰੋ!

💬

ਫੀਡਬੈਕ

💬

ਇਸ ਟੂਲ ਬਾਰੇ ਫੀਡਬੈਕ ਦੇਣ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਫੀਡਬੈਕ ਟੋਸਟ 'ਤੇ ਕਲਿੱਕ ਕਰੋ

🔗

ਸੰਬੰਧਿਤ ਟੂਲ

ਹੋਰ ਟੂਲਾਂ ਦੀ ਖੋਜ ਕਰੋ ਜੋ ਤੁਹਾਡੇ ਕੰਮ ਦੇ ਪ੍ਰਵਾਹ ਲਈ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦੀਆਂ ਹਨ