ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ CSS ಸ್ಪ್ರೈಟ್ ಜನರೇಟರ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು

← ಎಲ್ಲಾ ಬ್ಲಾಗ್ ಲೇಖನಗಳು

ಮಾರ್ಗದರ್ಶಿ ನವೀಕರಿಸಲಾಗಿದೆ:

ಸಣ್ಣ ಚಿತ್ರಗಳನ್ನು CSS ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗೆ ಸಂಯೋಜಿಸಿ ಮತ್ತು ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ CSS ಸ್ಥಾನಗಳನ್ನು ರಚಿಸಿ.

ಡೆಸ್ಕ್‌ಟಾಪ್ ಮತ್ತು ಫೋನ್ ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳೊಂದಿಗೆ ಪ್ರಾಯೋಗಿಕ ಸೂಚನೆಗಳು, ಸಣ್ಣ ಪ್ರದರ್ಶನಗಳು ಮತ್ತು ಸಾಮಾನ್ಯ ಪ್ರಶ್ನೆಗಳಿಗೆ ಉತ್ತರಗಳು.

ಉಪಕರಣವನ್ನು ತೆರೆಯಿರಿ →

ನೀವು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು

ಮೂಲ ಫೈಲ್ ಅನ್ನು ಇರಿಸಿ ಮತ್ತು ಕೆಳಗೆ ಲಿಂಕ್ ಮಾಡಲಾದ ಸಣ್ಣ ಸಾರ್ವಜನಿಕ ಪ್ರದರ್ಶನ ಫೈಲ್ ಅನ್ನು ಬಳಸಿ. ನಿಮ್ಮ ಸ್ವಂತ ಫೈಲ್ ಅನ್ನು ಆಯ್ಕೆಮಾಡುವ ಮೊದಲು ಸೇವೆಯಲ್ಲಿ ಬೆಂಬಲಿತ ಸ್ವರೂಪಗಳು ಮತ್ತು ಮಿತಿಗಳನ್ನು ಪರಿಶೀಲಿಸಿ.

ಪ್ರದರ್ಶನ ಫೈಲ್‌ನೊಂದಿಗೆ ಪ್ರಯತ್ನಿಸಿ — landscape.png

ಈ ಮಾರ್ಗದರ್ಶಿಗಾಗಿ ಈ ಚಿಕ್ಕ ಫೈಲ್‌ಗಳನ್ನು ರಚಿಸಲಾಗಿದೆ ಮತ್ತು ಯಾವುದೇ ವೈಯಕ್ತಿಕ ಡೇಟಾವನ್ನು ಹೊಂದಿಲ್ಲ.

ಹಂತ ಹಂತದ ಸೂಚನೆಗಳು

  1. ವೀಡಿಯೊದ ಪಕ್ಕದಲ್ಲಿರುವ ಬಟನ್ ಬಳಸಿ ಉಪಕರಣವನ್ನು ತೆರೆಯಿರಿ. ಮುಂದಿನ ಹಂತವು ಬೇರೆಯದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದ ಹೊರತು ಡೀಫಾಲ್ಟ್ ಮೋಡ್ ಅನ್ನು ಇರಿಸಿಕೊಳ್ಳಿ.
  2. ಪ್ರದರ್ಶನ ಫೈಲ್ ಆಯ್ಕೆಮಾಡಿ. ಅದರ ಹೆಸರು ಅಥವಾ ಪೂರ್ವವೀಕ್ಷಣೆ ಕಾಣಿಸಿಕೊಳ್ಳುವವರೆಗೆ ನಿರೀಕ್ಷಿಸಿ, ನಂತರ ಲಭ್ಯವಿರುವ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ.
  3. ನಿಮ್ಮ ಕಾರ್ಯಕ್ಕೆ ಅಗತ್ಯವಿರುವ ಆಯ್ಕೆಗಳನ್ನು ಆರಿಸಿ. ವಿವರಣೆಗಳಿಗಾಗಿ ಪ್ರಶ್ನಾರ್ಥಕ ಚಿಹ್ನೆಗಳನ್ನು ತೆರೆಯಿರಿ; ಪ್ರದರ್ಶನದಲ್ಲಿ ಬಳಸಲಾದ ಮೌಲ್ಯಗಳು ಉದಾಹರಣೆಗಳಾಗಿವೆ.
  4. ಪೂರ್ಣ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ನಿರ್ವಹಿಸಲು, ಮುಖ್ಯ ಸಂಸ್ಕರಣೆ ಬಟನ್ ಒತ್ತಿರಿ. ಸೇವೆಯು ನಿಮ್ಮನ್ನು ಸೈನ್ ಇನ್ ಮಾಡಲು ಅಥವಾ ಬೆಲೆಯನ್ನು ಖಚಿತಪಡಿಸಲು ಕೇಳಿದರೆ, ಮುಂದುವರಿಯುವ ಮೊದಲು ಪ್ರಸ್ತುತ ನಿಯಮಗಳನ್ನು ಪರಿಶೀಲಿಸಿ.
  5. ಯಶಸ್ವಿ ಫಲಿತಾಂಶಕ್ಕಾಗಿ ನಿರೀಕ್ಷಿಸಿ, ಅದನ್ನು ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಪುಟವನ್ನು ತೊರೆಯುವ ಮೊದಲು ಔಟ್ಪುಟ್ ಅನ್ನು ಉಳಿಸಿ. ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಪ್ರದರ್ಶನವು ಪೂರ್ಣಗೊಂಡ ಪ್ರಕ್ರಿಯೆಯ ಫಲಿತಾಂಶವಲ್ಲ.

ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ

ಫೈಲ್ ಪಿಕರ್ ಅನ್ನು ಬಳಸಿ ಅಥವಾ ಪ್ರದರ್ಶನ ಫೈಲ್ ಅನ್ನು ಅಪ್‌ಲೋಡ್ ಪ್ರದೇಶಕ್ಕೆ ಎಳೆಯಿರಿ. ಮೂಲ ಸಿದ್ಧವಾಗುವವರೆಗೆ ನಿರೀಕ್ಷಿಸಿ, ನಂತರ ಆಯ್ಕೆಗಳು ಮತ್ತು ಮುಖ್ಯ ಕ್ರಿಯೆಯನ್ನು ಪರಿಶೀಲಿಸಿ.

ಫೋನ್‌ನಲ್ಲಿ

ಫೈಲ್‌ಗಳು ಅಥವಾ ನಿಮ್ಮ ಗ್ಯಾಲರಿಯಿಂದ ಪ್ರದರ್ಶನ ಫೈಲ್ ಅನ್ನು ಆಯ್ಕೆಮಾಡಿ. ಫೈಲ್ ಲೋಡ್ ಆಗುವವರೆಗೆ ನಿರೀಕ್ಷಿಸಿ ಮತ್ತು ಸೆಟ್ಟಿಂಗ್‌ಗಳಿಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿ. ಕೆಲಸ ಮಾಡುವಾಗ ಟ್ಯಾಬ್ ಅನ್ನು ತೆರೆದಿಡಿ.

iPhone ನಲ್ಲಿ Safari ನಲ್ಲಿ, ಹಂಚಿಕೆ ಮೆನು ತೆರೆಯಿರಿ ಮತ್ತು ಫಲಿತಾಂಶವು ಹೊಸ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ತೆರೆದರೆ ಫೈಲ್‌ಗಳಿಗೆ ಉಳಿಸಿ ಆಯ್ಕೆಮಾಡಿ. Android Chrome ನಲ್ಲಿ, ಡೌನ್‌ಲೋಡ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ. ಪ್ರಕ್ರಿಯೆ ಮುಗಿಯುವವರೆಗೆ ಈ ಟ್ಯಾಬ್ ಅನ್ನು ತೆರೆದಿಡಿ.

ಉತ್ತಮ ಫಲಿತಾಂಶಕ್ಕಾಗಿ

ಸಣ್ಣ ಚಿತ್ರಗಳನ್ನು CSS ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗೆ ಸಂಯೋಜಿಸಿ ಮತ್ತು ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ CSS ಸ್ಥಾನಗಳನ್ನು ರಚಿಸಿ. ಯಶಸ್ವಿ ಫಲಿತಾಂಶಕ್ಕಾಗಿ ನಿರೀಕ್ಷಿಸಿ, ಅದನ್ನು ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಪುಟವನ್ನು ತೊರೆಯುವ ಮೊದಲು ಔಟ್ಪುಟ್ ಅನ್ನು ಉಳಿಸಿ. ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಪ್ರದರ್ಶನವು ಪೂರ್ಣಗೊಂಡ ಪ್ರಕ್ರಿಯೆಯ ಫಲಿತಾಂಶವಲ್ಲ.

ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು ಮತ್ತು ವೀಡಿಯೊ

ಡೆಸ್ಕ್ಟಾಪ್ ಪ್ರದರ್ಶನ

ಈ ರೆಕಾರ್ಡಿಂಗ್ ಮುಖ್ಯ ಕ್ರಿಯೆಯ ಮೊದಲು ಮೂಲ ಮತ್ತು ಲಭ್ಯವಿರುವ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ತೋರಿಸುತ್ತದೆ. ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸಲು ಮತ್ತು ಫಲಿತಾಂಶವನ್ನು ಉಳಿಸಲು ಮೇಲಿನ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ.

ಡೆಸ್ಕ್ಟಾಪ್ ಪ್ರದರ್ಶನ
ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ CSS ಸ್ಪ್ರೈಟ್ ಜನರೇಟರ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು — ಈ ಉಪಕರಣವನ್ನು ಹೇಗೆ ಬಳಸುವುದು (ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ)
ಈ ಉಪಕರಣವನ್ನು ಹೇಗೆ ಬಳಸುವುದು
ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ CSS ಸ್ಪ್ರೈಟ್ ಜನರೇಟರ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು — ಮೂಲವನ್ನು ಆರಿಸುವುದು (ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ)
ಮೂಲವನ್ನು ಆರಿಸುವುದು
ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ CSS ಸ್ಪ್ರೈಟ್ ಜನರೇಟರ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು — ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಮತ್ತು ಮುಂದಿನ ಕ್ರಮ (ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ)
ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಮತ್ತು ಮುಂದಿನ ಕ್ರಮ

ಫೋನ್ ಪ್ರದರ್ಶನ

ಈ ರೆಕಾರ್ಡಿಂಗ್ ಮುಖ್ಯ ಕ್ರಿಯೆಯ ಮೊದಲು ಮೂಲ ಮತ್ತು ಲಭ್ಯವಿರುವ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ತೋರಿಸುತ್ತದೆ. ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸಲು ಮತ್ತು ಫಲಿತಾಂಶವನ್ನು ಉಳಿಸಲು ಮೇಲಿನ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ.

ಫೋನ್ ಪ್ರದರ್ಶನ
ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ CSS ಸ್ಪ್ರೈಟ್ ಜನರೇಟರ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು — ಈ ಉಪಕರಣವನ್ನು ಹೇಗೆ ಬಳಸುವುದು (ಫೋನ್‌ನಲ್ಲಿ)
ಈ ಉಪಕರಣವನ್ನು ಹೇಗೆ ಬಳಸುವುದು
ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ CSS ಸ್ಪ್ರೈಟ್ ಜನರೇಟರ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು — ಮೂಲವನ್ನು ಆರಿಸುವುದು (ಫೋನ್‌ನಲ್ಲಿ)
ಮೂಲವನ್ನು ಆರಿಸುವುದು
ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ CSS ಸ್ಪ್ರೈಟ್ ಜನರೇಟರ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು — ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಮತ್ತು ಮುಂದಿನ ಕ್ರಮ (ಫೋನ್‌ನಲ್ಲಿ)
ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಮತ್ತು ಮುಂದಿನ ಕ್ರಮ

ಪ್ರಶ್ನೆಗಳು ಮತ್ತು ದೋಷನಿವಾರಣೆ

ಈ ಪ್ರದರ್ಶನವು ನನ್ನ ನೈಜ ಡೇಟಾವನ್ನು ಬಳಸುತ್ತದೆಯೇ?

ಇಲ್ಲ. ರೆಕಾರ್ಡಿಂಗ್ ಮಾರ್ಗದರ್ಶಿಗಾಗಿ ರಚಿಸಲಾದ ಸಾರ್ವಜನಿಕ ಉದಾಹರಣೆ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸುತ್ತದೆ. ನಿಮ್ಮ ಸ್ವಂತ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನೀವು ನಮೂದಿಸಿದ ಇನ್‌ಪುಟ್‌ನಲ್ಲಿ ಸೇವೆಯು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಫಲಿತಾಂಶವನ್ನು ಅವಲಂಬಿಸುವ ಮೊದಲು ನಾನು ಏನು ಪರಿಶೀಲಿಸಬೇಕು?

ಸಣ್ಣ ಚಿತ್ರಗಳನ್ನು CSS ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗೆ ಸಂಯೋಜಿಸಿ ಮತ್ತು ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ CSS ಸ್ಥಾನಗಳನ್ನು ರಚಿಸಿ. ಯಶಸ್ವಿ ಫಲಿತಾಂಶಕ್ಕಾಗಿ ನಿರೀಕ್ಷಿಸಿ, ಅದನ್ನು ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಪುಟವನ್ನು ತೊರೆಯುವ ಮೊದಲು ಔಟ್ಪುಟ್ ಅನ್ನು ಉಳಿಸಿ. ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಪ್ರದರ್ಶನವು ಪೂರ್ಣಗೊಂಡ ಪ್ರಕ್ರಿಯೆಯ ಫಲಿತಾಂಶವಲ್ಲ.

ಸೇವೆಯು ಓವರ್‌ಲೋಡ್ ಆಗಿದೆ ಎಂಬ ಸಂದೇಶವನ್ನು ನೀವು ನೋಡಿದರೆ, ನಿರೀಕ್ಷಿಸಿ ಮತ್ತು ನಂತರ ಮತ್ತೆ ಪ್ರಯತ್ನಿಸಿ. ವಿಫಲವಾದ ಪ್ರಯತ್ನವು ನಿಮ್ಮ ಮೂಲ ಫೈಲ್ ಬದಲಾಗಿದೆ ಎಂದು ಅರ್ಥವಲ್ಲ.

ಉಪಕರಣವನ್ನು ತೆರೆಯಿರಿ →