ਬੈਚ CSS ਸਪ੍ਰਾਈਟਸ ਜਨਰੇਟਰ
ਕਈ ਆਈਕਾਨਾਂ ਜਾਂ ਚਿੱਤਰਾਂ ਨੂੰ ਇੱਕ ਫਾਈਲ ਵਿੱਚ ਜੋੜੋ ਤਾਂ ਕਿ HTTP ਬੇਨਤੀਆਂ ਘੱਟ ਹੋਣ ਅਤੇ ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਦੀ ਗਤੀ ਵਧੇ। ਸੰਪੂਰਨ CSS ਕੋਡ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਜਨਰੇਟ ਕਰੋ।
ਸਪ੍ਰਾਈਟ ਬਣਾਉਣ ਲਈ ਆਈਕਾਨ ਇੱਥੇ ਸੁੱਟੋ
PNG, JPG, WebP, AVIF ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ਕਈ ਚਿੱਤਰਾਂ ਨੂੰ ਇੱਕ CSS ਸਪ੍ਰਾਈਟ ਸ਼ੀਟ ਵਿੱਚ ਜੋੜੋ।
ਉਦਾਹਰਨਾਂ ਨਾਲ ਅਜ਼ਮਾਓ
ਲੋਡ ਕੀਤੀ ਗੈਲਰੀ
ਸਪ੍ਰਾਈਟ ਸਟੂਡੀਓ
ਸਪ੍ਰਾਈਟ ਸ਼ੀਟ ਪੂਰਵਦਰਸ਼ਨ
ਵਿਅਕਤੀਗਤ ਆਈਕਾਨ
| ਆਈਕਾਨ | ਕਲਾਸ ਨਾਮ | ਪੋਜ਼ੀਸ਼ਨ | ਸਾਈਜ਼ | ਕਾਰਵਾਈ |
|---|
ਸਪ੍ਰਾਈਟ ਚੋਣਾਂ
ਬੈਚ ਲਾਗੂ ਕਰੋ
ਬਦਲਾਅ 'ਤੇ ਆਟੋ-ਰੀਜਨਰੇਟ
ਪੇਸ਼ੇਵਰ CSS ਸਪ੍ਰਾਈਟਸ ਜਨਰੇਸ਼ਨ
ਆਪਣੀਆਂ ਵੈੱਬ ਸੰਪਤੀਆਂ ਨੂੰ ਆਪਟੀਮਾਈਜ਼ ਕਰੋ, ਕਈ ਛੋਟੀਆਂ ਚਿੱਤਰਾਂ ਨੂੰ ਇੱਕ ਸਪ੍ਰਾਈਟ ਸ਼ੀਟ ਵਿੱਚ ਜੋੜ ਕੇ। ਲੇਟੈਂਸੀ ਘਟਾਓ, ਬੈਂਡਵਿਡਥ ਬਚਾਓ, ਅਤੇ ਆਪਣੇ CSS ਵਰਕਫਲੋ ਨੂੰ ਸਰਲ ਬਣਾਓ।
ਸਾਈਟ ਦੀ ਗਤੀ ਵਧਾਓ
ਘੱਟ HTTP ਬੇਨਤੀਆਂ ਦਾ ਮਤਲਬ ਹੈ ਪੰਨਾ ਲੋਡ ਹੋਣ ਦੀ ਗਤੀ ਤੇਜ਼। 50 ਆਈਕਨਾਂ ਨੂੰ 1 ਸਪ੍ਰਾਈਟ ਸ਼ੀਟ ਵਿੱਚ ਮਿਲਾ ਕੇ, ਤੁਸੀਂ ਸਰਵਰ ਤੱਕ 49 ਰਾਉਂਡ-ਟ੍ਰਿਪਸ ਨੂੰ ਖਤਮ ਕਰਦੇ ਹੋ।
ਆਟੋ-ਜਨਰੇਟਡ CSS
ਹੁਣ ਹੱਥ ਨਾਲ ਪਿਕਸਲ ਗਿਣਨ ਦੀ ਲੋੜ ਨਹੀਂ। ਸਾਡਾ ਟੂਲ ਤੁਹਾਡੀ ਸ਼ੀਟ ਵਿੱਚ ਹਰੇਕ ਆਈਕਾਨ ਲਈ ਬੈਕਗ੍ਰਾਊਂਡ ਪੋਜੀਸ਼ਨਾਂ ਅਤੇ ਆਕਾਰਾਂ ਦੀ ਆਟੋਮੈਟਿਕ ਗਣਨਾ ਕਰਦਾ ਹੈ।
ਸਮਾਰਟ ਲੇਆਉਟ
ਵਰਟੀਕਲ, ਹੋਰੀਜ਼ੋਂਟਲ, ਜਾਂ ਆਪਟੀਮਾਈਜ਼ਡ ਗਰਿੱਡ ਲੇਆਉਟਾਂ ਵਿਚਕਾਰ ਚੁਣੋ। ਸਕੇਲਿੰਗ ਦੌਰਾਨ ਆਈਕਨਾਂ ਵਿਚਕਾਰ "ਬਲੀਡਿੰਗ" ਨੂੰ ਰੋਕਣ ਲਈ ਪੈਡਿੰਗ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ।
ਸੀਐਸਐਸ ਸਪ੍ਰਾਈਟ ਸ਼ੀਟ ਕਿਵੇਂ ਬਣਾਈ ਜਾਵੇ
ਆਪਣੇ ਆਈਕੌਨ ਅੱਪਲੋਡ ਕਰੋ
ਉਹ ਸਾਰੀਆਂ ਛੋਟੀਆਂ ਤਸਵੀਰਾਂ ਜਾਂ ਆਈਕਨਾਂ ਨੂੰ ਖਿੱਚੋ ਅਤੇ ਸੁੱਟੋ ਜੋ ਤੁਸੀਂ ਮਰਜ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਅਸੀਂ PNG, JPG, WebP, ਅਤੇ AVIF ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਾਂ।
ਸਪ੍ਰਾਈਟ ਸੈਟਿੰਗਾਂ ਕੌਂਫਿਗਰ ਕਰੋ
ਲੇਆਉਟ ਸਟਾਈਲ ਚੁਣੋ, ਪੈਡਿੰਗ ਅਨੁਕੂਲਿਤ ਕਰੋ, ਅਤੇ ਆਪਣਾ CSS ਕਲਾਸ ਪ੍ਰੀਫਿਕਸ ਸੈੱਟ ਕਰੋ। ਪੂਰਵ-ਦ੍ਰਿਸ਼ ਤੁਰੰਤ ਅੱਪਡੇਟ ਹੋ ਜਾਂਦਾ ਹੈ।
ਸਪ੍ਰਾਈਟ ਅਤੇ CSS ਨਿਰਯਾਤ ਕਰੋ
ਅੰਤਿਮ ਸਪ੍ਰਾਈਟ ਸ਼ੀਟ ਅਤੇ ਸੰਬੰਧਿਤ CSS ਕੋਡ ਨੂੰ ZIP ਫਾਈਲ ਵਜੋਂ ਡਾਊਨਲੋਡ ਕਰੋ। ਬਸ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕਾਪੀ ਅਤੇ ਪੇਸਟ ਕਰੋ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ
ਮੈਂ CSS ਸਪ੍ਰਾਈਟਸ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰਾਂ?
CSS ਸਪ੍ਰਾਈਟਸ ਇੱਕ ਕਲਾਸਿਕ ਪ੍ਰਦਰਸ਼ਨ ਤਕਨੀਕ ਹੈ। ਇਹ HTTP ਬੇਨਤੀਆਂ ਦੀ ਗਿਣਤੀ ਘਟਾਉਂਦੀ ਹੈ, ਜੋ ਖਾਸ ਤੌਰ 'ਤੇ ਹੌਲੀ ਕਨੈਕਸ਼ਨਾਂ ਜਾਂ ਆਈਕਾਨ ਜਾਂ UI ਤੱਤਾਂ ਵਰਗੀਆਂ ਬਹੁਤ ਸਾਰੀਆਂ ਛੋਟੀਆਂ ਸੰਪਤੀਆਂ ਵਾਲੀਆਂ ਸਾਈਟਾਂ 'ਤੇ ਫਾਇਦੇਮੰਦ ਹੈ।
ਮੈਨੂੰ ਕਿਹੜਾ ਲੇਆਉਟ ਚੁਣਨਾ ਚਾਹੀਦਾ ਹੈ?
ਵਰਟੀਕਲ ਅਤੇ ਹੋਰੀਜ਼ੋਂਟਲ ਲੇਆਉਟ ਡੀਬੱਗ ਕਰਨਾ ਸਭ ਤੋਂ ਆਸਾਨ ਹੈ। ਗਰਿੱਡ ਲੇਆਉਟ ਅੰਤਿਮ ਚਿੱਤਰ ਖੇਤਰ ਅਤੇ ਫਾਈਲ ਆਕਾਰ ਨੂੰ ਘੱਟ ਤੋਂ ਘੱਟ ਕਰਨ ਲਈ ਸਭ ਤੋਂ ਕੁਸ਼ਲ ਹੈ।
ਹਾਈ-ਡੀਪੀਆਈ (ਰੈਟੀਨਾ) ਸਕ੍ਰੀਨਾਂ ਬਾਰੇ ਕੀ?
ਤੁਸੀਂ ਡਬਲ-ਸਾਈਜ਼ਡ ਆਈਕਨਾਂ ਨਾਲ ਇੱਕ ਸਪ੍ਰਾਈਟ ਸ਼ੀਟ ਬਣਾ ਸਕਦੇ ਹੋ ਅਤੇ ਉੱਚ-DPI ਡਿਸਪਲੇਅ 'ਤੇ ਤਿੱਖੀ ਰੈਂਡਰਿੰਗ ਲਈ ਇਸਨੂੰ ਸਕੇਲ ਡਾਊਨ ਕਰਨ ਲਈ ਆਪਣੀ CSS ਵਿੱਚ "ਬੈਕਗ੍ਰਾਊਂਡ-ਸਾਈਜ਼" ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।