ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್ ಪ್ರಾಪರ್ಟೀಸ್: ವೆಬ್‌ನಲ್ಲಿ ಸೃಜನಾತ್ಮಕ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ಅನಾವರಣಗೊಳಿಸುವುದು

ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್ ಪ್ರಾಪರ್ಟೀಸ್ ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಲ್ಲಿನ ಎಲಿಮೆಂಟ್‌ಗಳ ಗೋಚರತೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು ಒಂದು ಶಕ್ತಿಶಾಲಿ ಮತ್ತು ಬಹುಮುಖಿ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ, ಇದು ಅದ್ಭುತ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು, ಗುಪ್ತ ವಿಷಯವನ್ನು ಬಹಿರಂಗಪಡಿಸಲು, ಮತ್ತು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳಿಗೆ ಒಂದು ಅನನ್ಯ ಶೈಲಿಯನ್ನು ಸೇರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಸಾಂಪ್ರದಾಯಿಕ ಇಮೇಜ್ ಎಡಿಟಿಂಗ್ ಸಾಫ್ಟ್‌ವೇರ್‌ಗೆ ಭಿನ್ನವಾಗಿ, ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕಿಂಗ್ ನೇರವಾಗಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಡೈನಾಮಿಕ್ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಮಾಸ್ಕಿಂಗ್‌ಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ, ಇದು ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅನಿವಾರ್ಯ ಸಾಧನವಾಗಿದೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳ ಜಗತ್ತನ್ನು ಪರಿಶೋಧಿಸುತ್ತದೆ, ಅವುಗಳ ವಿವಿಧ ಪ್ರಾಪರ್ಟೀಸ್, ಬಳಕೆಯ ಪ್ರಕರಣಗಳು, ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ.

ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳು ಎಂದರೇನು?

ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್ ಎಂದರೆ ಮತ್ತೊಂದು ಇಮೇಜ್ ಅಥವಾ ಗ್ರೇಡಿಯೆಂಟ್ ಅನ್ನು ಮಾಸ್ಕ್ ಆಗಿ ಬಳಸಿ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಭಾಗಗಳನ್ನು ಆಯ್ದು ಮರೆಮಾಡಲು ಅಥವಾ ಬಹಿರಂಗಪಡಿಸಲು ಬಳಸುವ ಒಂದು ವಿಧಾನ. ಇದನ್ನು ಒಂದು ಕಾಗದದಿಂದ ಆಕಾರವನ್ನು ಕತ್ತರಿಸಿ ಚಿತ್ರದ ಮೇಲೆ ಇರಿಸಿದಂತೆ ಯೋಚಿಸಿ – ಕತ್ತರಿಸಿದ ಆಕಾರದೊಳಗಿನ ಪ್ರದೇಶಗಳು ಮಾತ್ರ ಗೋಚರಿಸುತ್ತವೆ. ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳು ಇದೇ ರೀತಿಯ ಪರಿಣಾಮವನ್ನು ಒದಗಿಸುತ್ತವೆ, ಆದರೆ ಸಿಎಸ್‌ಎಸ್ ಮೂಲಕ ಡೈನಾಮಿಕ್ ಮತ್ತು ನಿಯಂತ್ರಿಸಬಹುದಾದ ಹೆಚ್ಚುವರಿ ಪ್ರಯೋಜನವನ್ನು ಹೊಂದಿವೆ.

`mask` ಮತ್ತು `clip-path` ನಡುವಿನ ಪ್ರಮುಖ ವ್ಯತ್ಯಾಸವೆಂದರೆ, `clip-path` ಕೇವಲ ಒಂದು ನಿರ್ದಿಷ್ಟ ಆಕಾರದ ಉದ್ದಕ್ಕೂ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕ್ಲಿಪ್ ಮಾಡುತ್ತದೆ, ಆಕಾರದ ಹೊರಗಿನ ಎಲ್ಲವನ್ನೂ ಅದೃಶ್ಯಗೊಳಿಸುತ್ತದೆ. ಮತ್ತೊಂದೆಡೆ, `mask` ಎಲಿಮೆಂಟ್‌ನ ಪಾರದರ್ಶಕತೆಯನ್ನು ನಿರ್ಧರಿಸಲು ಮಾಸ್ಕ್ ಇಮೇಜ್‌ನ ಆಲ್ಫಾ ಚಾನೆಲ್ ಅಥವಾ ಲ್ಯೂಮಿನೆನ್ಸ್ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ಫೆದರ್ಡ್ ಎಡ್ಜ್‌ಗಳು ಮತ್ತು ಅರೆ-ಪಾರದರ್ಶಕ ಮಾಸ್ಕ್‌ಗಳು ಸೇರಿದಂತೆ ಸೃಜನಾತ್ಮಕ ಸಾಧ್ಯತೆಗಳ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯನ್ನು ತೆರೆಯುತ್ತದೆ.

ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್ ಪ್ರಾಪರ್ಟೀಸ್: ಒಂದು ಆಳವಾದ ನೋಟ

ಇಲ್ಲಿ ಪ್ರಮುಖ ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್ ಪ್ರಾಪರ್ಟೀಸ್‌ನ ವಿವರಣೆ ಇದೆ:

• `mask-image`: ಮಾಸ್ಕ್ ಲೇಯರ್ ಆಗಿ ಬಳಸಬೇಕಾದ ಇಮೇಜ್ ಅಥವಾ ಗ್ರೇಡಿಯೆಂಟ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
• `mask-mode`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಹೇಗೆ ಅರ್ಥೈಸಿಕೊಳ್ಳಬೇಕು ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ (ಉದಾ., ಆಲ್ಫಾ ಮಾಸ್ಕ್ ಅಥವಾ ಲ್ಯೂಮಿನೆನ್ಸ್ ಮಾಸ್ಕ್ ಆಗಿ).
• `mask-repeat`: ಮಾಸ್ಕ್ ಇಮೇಜ್, ಮಾಸ್ಕ್ ಮಾಡಲಾಗುತ್ತಿರುವ ಎಲಿಮೆಂಟ್‌ಗಿಂತ ಚಿಕ್ಕದಾಗಿದ್ದರೆ ಅದನ್ನು ಹೇಗೆ ಪುನರಾವರ್ತಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ.
• `mask-position`: ಎಲಿಮೆಂಟ್ ಒಳಗೆ ಮಾಸ್ಕ್ ಇಮೇಜ್‌ನ ಆರಂಭಿಕ ಸ್ಥಾನವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.
• `mask-size`: ಮಾಸ್ಕ್ ಇಮೇಜ್‌ನ ಗಾತ್ರವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
• `mask-origin`: ಮಾಸ್ಕ್‌ನ ಸ್ಥಾನೀಕರಣಕ್ಕೆ ಮೂಲವನ್ನು ಹೊಂದಿಸುತ್ತದೆ.
• `mask-clip`: ಮಾಸ್ಕ್‌ನಿಂದ ಕ್ಲಿಪ್ ಮಾಡಲಾದ ಪ್ರದೇಶವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
• `mask-composite`: ಅನೇಕ ಮಾಸ್ಕ್ ಲೇಯರ್‌ಗಳನ್ನು ಹೇಗೆ ಸಂಯೋಜಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
• `mask`: ಒಂದೇ ಬಾರಿಗೆ ಅನೇಕ ಮಾಸ್ಕ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಬಳಸುವ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಪ್ರಾಪರ್ಟಿ.

`mask-image`

`mask-image` ಪ್ರಾಪರ್ಟಿ ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕಿಂಗ್‌ನ ಅಡಿಪಾಯವಾಗಿದೆ. ಇದು ಮಾಸ್ಕ್ ಆಗಿ ಬಳಸಲಾಗುವ ಇಮೇಜ್ ಅಥವಾ ಗ್ರೇಡಿಯೆಂಟ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ನೀವು PNG, SVG, ಮತ್ತು GIF ಸೇರಿದಂತೆ ವಿವಿಧ ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಡೈನಾಮಿಕ್ ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದಾದ ಮಾಸ್ಕ್‌ಗಳನ್ನು ರಚಿಸಲು ನೀವು ಸಿಎಸ್‌ಎಸ್ ಗ್ರೇಡಿಯೆಂಟ್‌ಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು.

ಉದಾಹರಣೆ: PNG ಇಮೇಜ್ ಅನ್ನು ಮಾಸ್ಕ್ ಆಗಿ ಬಳಸುವುದು

            
.masked-element {
  mask-image: url("mask.png");
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `.masked-element` ಅನ್ನು ಮಾಸ್ಕ್ ಮಾಡಲು `mask.png` ಇಮೇಜ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. PNG ಯ ಪಾರದರ್ಶಕ ಪ್ರದೇಶಗಳು ಎಲಿಮೆಂಟ್‌ನ ಅನುಗುಣವಾದ ಪ್ರದೇಶಗಳನ್ನು ಪಾರದರ್ಶಕವಾಗಿಸುತ್ತವೆ, ಆದರೆ ಅಪಾರದರ್ಶಕ ಪ್ರದೇಶಗಳು ಎಲಿಮೆಂಟ್‌ನ ಅನುಗುಣವಾದ ಪ್ರದೇಶಗಳನ್ನು ಗೋಚರಿಸುವಂತೆ ಮಾಡುತ್ತವೆ.

ಉದಾಹರಣೆ: ಸಿಎಸ್‌ಎಸ್ ಗ್ರೇಡಿಯೆಂಟ್ ಅನ್ನು ಮಾಸ್ಕ್ ಆಗಿ ಬಳಸುವುದು

            
.masked-element {
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು `.masked-element` ಮೇಲೆ ಫೇಡಿಂಗ್ ಪರಿಣಾಮವನ್ನು ರಚಿಸಲು ಲೀನಿಯರ್ ಗ್ರೇಡಿಯೆಂಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ಗ್ರೇಡಿಯೆಂಟ್ ಅಪಾರದರ್ಶಕ ಕಪ್ಪು ಬಣ್ಣದಿಂದ ಪಾರದರ್ಶಕಕ್ಕೆ ಬದಲಾಗುತ್ತದೆ, ಇದು ನಯವಾದ ಫೇಡ್-ಔಟ್ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

`mask-mode`

`mask-mode` ಪ್ರಾಪರ್ಟಿ ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಹೇಗೆ ಅರ್ಥೈಸಿಕೊಳ್ಳಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಇದು ಹಲವಾರು ಸಂಭಾವ್ಯ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿದೆ:

• `alpha`: ಮಾಸ್ಕ್ ಇಮೇಜ್‌ನ ಆಲ್ಫಾ ಚಾನೆಲ್ ಎಲಿಮೆಂಟ್‌ನ ಪಾರದರ್ಶಕತೆಯನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಮಾಸ್ಕ್ ಇಮೇಜ್‌ನ ಅಪಾರದರ್ಶಕ ಪ್ರದೇಶಗಳು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಗೋಚರಿಸುವಂತೆ ಮಾಡುತ್ತವೆ, ಆದರೆ ಪಾರದರ್ಶಕ ಪ್ರದೇಶಗಳು ಅದನ್ನು ಅದೃಶ್ಯವಾಗಿಸುತ್ತವೆ. ಇದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದೆ.
• `luminance`: ಮಾಸ್ಕ್ ಇಮೇಜ್‌ನ ಲ್ಯೂಮಿನೆನ್ಸ್ (ಹೊಳಪು) ಎಲಿಮೆಂಟ್‌ನ ಪಾರದರ್ಶಕತೆಯನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಮಾಸ್ಕ್ ಇಮೇಜ್‌ನ ಪ್ರಕಾಶಮಾನವಾದ ಪ್ರದೇಶಗಳು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಗೋಚರಿಸುವಂತೆ ಮಾಡುತ್ತವೆ, ಆದರೆ ಗಾಢವಾದ ಪ್ರದೇಶಗಳು ಅದನ್ನು ಅದೃಶ್ಯವಾಗಿಸುತ್ತವೆ.
• `match-source`: ಮಾಸ್ಕ್ ಮೋಡ್ ಅನ್ನು ಮಾಸ್ಕ್ ಮೂಲದಿಂದ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ. ಮಾಸ್ಕ್ ಮೂಲವು ಆಲ್ಫಾ ಚಾನೆಲ್ ಹೊಂದಿರುವ ಇಮೇಜ್ ಆಗಿದ್ದರೆ, `alpha` ಬಳಸಲಾಗುತ್ತದೆ. ಮಾಸ್ಕ್ ಮೂಲವು ಆಲ್ಫಾ ಚಾನೆಲ್ ಇಲ್ಲದ ಇಮೇಜ್ ಅಥವಾ ಗ್ರೇಡಿಯೆಂಟ್ ಆಗಿದ್ದರೆ, `luminance` ಬಳಸಲಾಗುತ್ತದೆ.
• `inherit`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ `mask-mode` ಮೌಲ್ಯವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ.
• `initial`: ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ.
• `unset`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಇನ್‌ಹೆರಿಟ್ ಮಾಡಿದರೆ ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಇನ್‌ಹೆರಿಟೆಡ್ ಮೌಲ್ಯಕ್ಕೆ ಅಥವಾ ಇಲ್ಲದಿದ್ದರೆ ಅದರ ಆರಂಭಿಕ ಮೌಲ್ಯಕ್ಕೆ ಮರುಹೊಂದಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: `mask-mode: luminance` ಬಳಸುವುದು

            
.masked-element {
  mask-image: url("grayscale-image.jpg");
  mask-mode: luminance;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಗ್ರೇಸ್ಕೇಲ್ ಇಮೇಜ್ ಅನ್ನು ಮಾಸ್ಕ್ ಆಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಇಮೇಜ್‌ನ ಪ್ರಕಾಶಮಾನವಾದ ಪ್ರದೇಶಗಳು `.masked-element` ನ ಅನುಗುಣವಾದ ಪ್ರದೇಶಗಳನ್ನು ಗೋಚರಿಸುವಂತೆ ಮಾಡುತ್ತವೆ, ಆದರೆ ಗಾಢವಾದ ಪ್ರದೇಶಗಳು ಅವುಗಳನ್ನು ಅದೃಶ್ಯವಾಗಿಸುತ್ತವೆ.

`mask-repeat`

`mask-repeat` ಪ್ರಾಪರ್ಟಿಯು ಮಾಸ್ಕ್ ಇಮೇಜ್, ಮಾಸ್ಕ್ ಮಾಡಲಾಗುತ್ತಿರುವ ಎಲಿಮೆಂಟ್‌ಗಿಂತ ಚಿಕ್ಕದಾಗಿದ್ದರೆ ಅದನ್ನು ಹೇಗೆ ಪುನರಾವರ್ತಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಇದು `background-repeat` ಪ್ರಾಪರ್ಟಿಯಂತೆಯೇ ವರ್ತಿಸುತ್ತದೆ.

• `repeat`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಸಮತಲವಾಗಿ ಮತ್ತು ಲಂಬವಾಗಿ ಪುನರಾವರ್ತಿಸಲಾಗುತ್ತದೆ, ಇದರಿಂದ ಸಂಪೂರ್ಣ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಆವರಿಸುತ್ತದೆ. ಇದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದೆ.
• `repeat-x`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಕೇವಲ ಸಮತಲವಾಗಿ ಪುನರಾವರ್ತಿಸಲಾಗುತ್ತದೆ.
• `repeat-y`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಕೇವಲ ಲಂಬವಾಗಿ ಪುನರಾವರ್ತಿಸಲಾಗುತ್ತದೆ.
• `no-repeat`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಪುನರಾವರ್ತಿಸಲಾಗುವುದಿಲ್ಲ.
• `space`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಕ್ಲಿಪ್ ಮಾಡದೆಯೇ ಸಾಧ್ಯವಾದಷ್ಟು ಬಾರಿ ಪುನರಾವರ್ತಿಸಲಾಗುತ್ತದೆ. ಹೆಚ್ಚುವರಿ ಸ್ಥಳವನ್ನು ಇಮೇಜ್‌ಗಳ ನಡುವೆ ಸಮಾನವಾಗಿ ಹಂಚಲಾಗುತ್ತದೆ.
• `round`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಬಾರಿ ಪುನರಾವರ್ತಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ಎಲಿಮೆಂಟ್‌ಗೆ ಸರಿಹೊಂದುವಂತೆ ಇಮೇಜ್‌ಗಳನ್ನು ಸ್ಕೇಲ್ ಮಾಡಬಹುದು.
• `inherit`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ `mask-repeat` ಮೌಲ್ಯವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ.
• `initial`: ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ.
• `unset`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಇನ್‌ಹೆರಿಟ್ ಮಾಡಿದರೆ ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಇನ್‌ಹೆರಿಟೆಡ್ ಮೌಲ್ಯಕ್ಕೆ ಅಥವಾ ಇಲ್ಲದಿದ್ದರೆ ಅದರ ಆರಂಭಿಕ ಮೌಲ್ಯಕ್ಕೆ ಮರುಹೊಂದಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: `mask-repeat: no-repeat` ಬಳಸುವುದು

            
.masked-element {
  mask-image: url("small-mask.png");
  mask-repeat: no-repeat;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `small-mask.png` ಇಮೇಜ್ ಅನ್ನು ಮಾಸ್ಕ್ ಆಗಿ ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ಅದನ್ನು ಪುನರಾವರ್ತಿಸಲಾಗುವುದಿಲ್ಲ. ಎಲಿಮೆಂಟ್ ಮಾಸ್ಕ್ ಇಮೇಜ್‌ಗಿಂತ ದೊಡ್ಡದಾಗಿದ್ದರೆ, ಮಾಸ್ಕ್ ಮಾಡದ ಪ್ರದೇಶಗಳು ಗೋಚರಿಸುತ್ತವೆ.

`mask-position`

`mask-position` ಪ್ರಾಪರ್ಟಿಯು ಎಲಿಮೆಂಟ್ ಒಳಗೆ ಮಾಸ್ಕ್ ಇಮೇಜ್‌ನ ಆರಂಭಿಕ ಸ್ಥಾನವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಇದು `background-position` ಪ್ರಾಪರ್ಟಿಯಂತೆಯೇ ವರ್ತಿಸುತ್ತದೆ.

ನೀವು `top`, `bottom`, `left`, `right`, ಮತ್ತು `center` ನಂತಹ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಬಳಸಿ ಸ್ಥಾನವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು, ಅಥವಾ ನೀವು ಪಿಕ್ಸೆಲ್ ಅಥವಾ ಶೇಕಡಾವಾರು ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಬಹುದು.

ಉದಾಹರಣೆ: `mask-position: center` ಬಳಸುವುದು

            
.masked-element {
  mask-image: url("small-mask.png");
  mask-repeat: no-repeat;
  mask-position: center;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `small-mask.png` ಇಮೇಜ್ ಅನ್ನು `.masked-element` ನ ಮಧ್ಯದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ.

`mask-size`

`mask-size` ಪ್ರಾಪರ್ಟಿಯು ಮಾಸ್ಕ್ ಇಮೇಜ್‌ನ ಗಾತ್ರವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇದು `background-size` ಪ್ರಾಪರ್ಟಿಯಂತೆಯೇ ವರ್ತಿಸುತ್ತದೆ.

• `auto`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಅದರ ಮೂಲ ಗಾತ್ರದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಇದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದೆ.
• `contain`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಅದರ ಆಸ್ಪೆಕ್ಟ್ ಅನುಪಾತವನ್ನು ಉಳಿಸಿಕೊಂಡು ಎಲಿಮೆಂಟ್ ಒಳಗೆ ಸರಿಹೊಂದುವಂತೆ ಸ್ಕೇಲ್ ಮಾಡಲಾಗುತ್ತದೆ. ಸಂಪೂರ್ಣ ಇಮೇಜ್ ಗೋಚರಿಸುತ್ತದೆ, ಆದರೆ ಅದರ ಸುತ್ತಲೂ ಖಾಲಿ ಜಾಗ ಇರಬಹುದು.
• `cover`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಅದರ ಆಸ್ಪೆಕ್ಟ್ ಅನುಪಾತವನ್ನು ಉಳಿಸಿಕೊಂಡು ಸಂಪೂರ್ಣ ಎಲಿಮೆಂಟ್ ಅನ್ನು ತುಂಬುವಂತೆ ಸ್ಕೇಲ್ ಮಾಡಲಾಗುತ್ತದೆ. ಎಲಿಮೆಂಟ್‌ಗೆ ಸರಿಹೊಂದಿಸಲು ಅಗತ್ಯವಿದ್ದರೆ ಇಮೇಜ್ ಕ್ರಾಪ್ ಆಗಬಹುದು.
• `length`: ಮಾಸ್ಕ್ ಇಮೇಜ್‌ನ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಅಥವಾ ಇತರ ಯೂನಿಟ್‌ಗಳಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
• `percentage`: ಮಾಸ್ಕ್ ಇಮೇಜ್‌ನ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರದ ಶೇಕಡಾವಾರು ಪ್ರಮಾಣದಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
• `inherit`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ `mask-size` ಮೌಲ್ಯವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ.
• `initial`: ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ.
• `unset`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಇನ್‌ಹೆರಿಟ್ ಮಾಡಿದರೆ ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಇನ್‌ಹೆರಿಟೆಡ್ ಮೌಲ್ಯಕ್ಕೆ ಅಥವಾ ಇಲ್ಲದಿದ್ದರೆ ಅದರ ಆರಂಭಿಕ ಮೌಲ್ಯಕ್ಕೆ ಮರುಹೊಂದಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: `mask-size: cover` ಬಳಸುವುದು

            
.masked-element {
  mask-image: url("mask.png");
  mask-size: cover;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `mask.png` ಇಮೇಜ್ ಅನ್ನು ಸಂಪೂರ್ಣ `.masked-element` ಅನ್ನು ಆವರಿಸುವಂತೆ ಸ್ಕೇಲ್ ಮಾಡಲಾಗುತ್ತದೆ, ಅಗತ್ಯವಿದ್ದರೆ ಇಮೇಜ್ ಕ್ರಾಪ್ ಆಗಬಹುದು.

`mask-origin`

`mask-origin` ಪ್ರಾಪರ್ಟಿಯು ಮಾಸ್ಕ್‌ನ ಸ್ಥಾನೀಕರಣಕ್ಕೆ ಮೂಲವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇದು `mask-position` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಯಾವ ಬಿಂದುವಿನಿಂದ ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.

• `border-box`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಬಾರ್ಡರ್ ಬಾಕ್ಸ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಇರಿಸಲಾಗುತ್ತದೆ. ಇದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದೆ.
• `padding-box`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಪ್ಯಾಡಿಂಗ್ ಬಾಕ್ಸ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಇರಿಸಲಾಗುತ್ತದೆ.
• `content-box`: ಮಾಸ್ಕ್ ಇಮೇಜ್ ಅನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಕಂಟೆಂಟ್ ಬಾಕ್ಸ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಇರಿಸಲಾಗುತ್ತದೆ.
• `inherit`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ `mask-origin` ಮೌಲ್ಯವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ.
• `initial`: ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ.
• `unset`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಇನ್‌ಹೆರಿಟ್ ಮಾಡಿದರೆ ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಇನ್‌ಹೆರಿಟೆಡ್ ಮೌಲ್ಯಕ್ಕೆ ಅಥವಾ ಇಲ್ಲದಿದ್ದರೆ ಅದರ ಆರಂಭಿಕ ಮೌಲ್ಯಕ್ಕೆ ಮರುಹೊಂದಿಸುತ್ತದೆ.

`mask-clip`

`mask-clip` ಪ್ರಾಪರ್ಟಿಯು ಮಾಸ್ಕ್‌ನಿಂದ ಕ್ಲಿಪ್ ಮಾಡಲಾದ ಪ್ರದೇಶವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದು ಎಲಿಮೆಂಟ್‌ನ ಯಾವ ಭಾಗಗಳು ಮಾಸ್ಕ್‌ನಿಂದ ಪ್ರಭಾವಿತವಾಗಿವೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.

• `border-box`: ಮಾಸ್ಕ್ ಅನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಸಂಪೂರ್ಣ ಬಾರ್ಡರ್ ಬಾಕ್ಸ್‌ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಇದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದೆ.
• `padding-box`: ಮಾಸ್ಕ್ ಅನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಪ್ಯಾಡಿಂಗ್ ಬಾಕ್ಸ್‌ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.
• `content-box`: ಮಾಸ್ಕ್ ಅನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಕಂಟೆಂಟ್ ಬಾಕ್ಸ್‌ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.
• `text`: ಮಾಸ್ಕ್ ಅನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಟೆಕ್ಸ್ಟ್ ಕಂಟೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಈ ಮೌಲ್ಯವು ಪ್ರಾಯೋಗಿಕವಾಗಿದೆ ಮತ್ತು ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಿಂದ ಬೆಂಬಲಿತವಾಗಿಲ್ಲದಿರಬಹುದು.
• `inherit`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ `mask-clip` ಮೌಲ್ಯವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ.
• `initial`: ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ.
• `unset`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಇನ್‌ಹೆರಿಟ್ ಮಾಡಿದರೆ ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಇನ್‌ಹೆರಿಟೆಡ್ ಮೌಲ್ಯಕ್ಕೆ ಅಥವಾ ಇಲ್ಲದಿದ್ದರೆ ಅದರ ಆರಂಭಿಕ ಮೌಲ್ಯಕ್ಕೆ ಮರುಹೊಂದಿಸುತ್ತದೆ.

`mask-composite`

`mask-composite` ಪ್ರಾಪರ್ಟಿಯು ಅನೇಕ ಮಾಸ್ಕ್ ಲೇಯರ್‌ಗಳನ್ನು ಹೇಗೆ ಸಂಯೋಜಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಒಂದೇ ಎಲಿಮೆಂಟ್‌ಗೆ ಅನೇಕ `mask-image` ಘೋಷಣೆಗಳನ್ನು ಅನ್ವಯಿಸಿದಾಗ ಈ ಪ್ರಾಪರ್ಟಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

• `add`: ಮಾಸ್ಕ್ ಲೇಯರ್‌ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಸೇರಿಸಲಾಗುತ್ತದೆ. ಪರಿಣಾಮವಾಗಿ ಬರುವ ಮಾಸ್ಕ್ ಎಲ್ಲಾ ಮಾಸ್ಕ್ ಲೇಯರ್‌ಗಳ ಯೂನಿಯನ್ ಆಗಿರುತ್ತದೆ.
• `subtract`: ಎರಡನೇ ಮಾಸ್ಕ್ ಲೇಯರ್ ಅನ್ನು ಮೊದಲ ಮಾಸ್ಕ್ ಲೇಯರ್‌ನಿಂದ ಕಳೆಯಲಾಗುತ್ತದೆ.
• `intersect`: ಪರಿಣಾಮವಾಗಿ ಬರುವ ಮಾಸ್ಕ್ ಎಲ್ಲಾ ಮಾಸ್ಕ್ ಲೇಯರ್‌ಗಳ ಇಂಟರ್‌ಸೆಕ್ಷನ್ ಆಗಿರುತ್ತದೆ. ಎಲ್ಲಾ ಲೇಯರ್‌ಗಳಿಂದ ಮಾಸ್ಕ್ ಮಾಡಲಾದ ಪ್ರದೇಶಗಳು ಮಾತ್ರ ಗೋಚರಿಸುತ್ತವೆ.
• `exclude`: ಪರಿಣಾಮವಾಗಿ ಬರುವ ಮಾಸ್ಕ್ ಎಲ್ಲಾ ಮಾಸ್ಕ್ ಲೇಯರ್‌ಗಳ ಎಕ್ಸ್‌ಕ್ಲೂಸಿವ್ ಆರ್ (XOR) ಆಗಿರುತ್ತದೆ.
• `inherit`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ `mask-composite` ಮೌಲ್ಯವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ.
• `initial`: ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ.
• `unset`: ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಇನ್‌ಹೆರಿಟ್ ಮಾಡಿದರೆ ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅದರ ಇನ್‌ಹೆರಿಟೆಡ್ ಮೌಲ್ಯಕ್ಕೆ ಅಥವಾ ಇಲ್ಲದಿದ್ದರೆ ಅದರ ಆರಂಭಿಕ ಮೌಲ್ಯಕ್ಕೆ ಮರುಹೊಂದಿಸುತ್ತದೆ.

`mask` (ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಪ್ರಾಪರ್ಟಿ)

`mask` ಪ್ರಾಪರ್ಟಿಯು ಒಂದೇ ಬಾರಿಗೆ ಅನೇಕ ಮಾಸ್ಕ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಬಳಸುವ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಆಗಿದೆ. ಇದು `mask-image`, `mask-mode`, `mask-repeat`, `mask-position`, `mask-size`, `mask-origin`, ಮತ್ತು `mask-clip` ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಒಂದೇ ಘೋಷಣೆಯಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: `mask` ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸುವುದು

            
.masked-element {
  mask: url("mask.png") no-repeat center / cover;
}

            

              
                Copy
              
            
          

ಇದು ಇದಕ್ಕೆ ಸಮಾನವಾಗಿದೆ:

            
.masked-element {
  mask-image: url("mask.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

            

              
                Copy
              
            
          

ಪ್ರಾಯೋಗಿಕ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳು

ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕಿಂಗ್ ಅನ್ನು ವಿವಿಧ ರೀತಿಯ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು ಬಳಸಬಹುದು. ಇಲ್ಲಿ ಕೆಲವು ಉದಾಹರಣೆಗಳಿವೆ:

1. ಹೋವರ್ ಮಾಡಿದಾಗ ವಿಷಯವನ್ನು ಬಹಿರಂಗಪಡಿಸುವುದು

ಬಳಕೆದಾರರು ಒಂದು ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ ವಿಷಯವು ಬಹಿರಂಗಗೊಳ್ಳುವ ಪರಿಣಾಮವನ್ನು ರಚಿಸಲು ನೀವು ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಇದನ್ನು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳಿಗೆ ಸಂವಾದಾತ್ಮಕತೆ ಮತ್ತು ಕುತೂಹಲವನ್ನು ಸೇರಿಸಲು ಬಳಸಬಹುದು.

            

  

    
Hidden Content
    
This content is revealed on hover.
  


            

              
                Copy
              
            
          

            
.reveal-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.reveal-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #007bff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  mask-image: url("circle-mask.png");
  mask-size: 20px;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: mask-size 0.3s ease;
}

.reveal-container:hover .reveal-content {
  mask-size: 200%;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಆರಂಭದಲ್ಲಿ `.reveal-content` ಗೆ ಒಂದು ಸಣ್ಣ ವೃತ್ತದ ಮಾಸ್ಕ್ ಅನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರು `.reveal-container` ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ಮಾಸ್ಕ್ ಗಾತ್ರವು ಹೆಚ್ಚಾಗುತ್ತದೆ, ಗುಪ್ತ ವಿಷಯವನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.

2. ಆಕಾರದ ಓವರ್‌ಲೇಗಳನ್ನು ರಚಿಸುವುದು

ಇಮೇಜ್‌ಗಳು ಅಥವಾ ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಆಸಕ್ತಿದಾಯಕ ಆಕಾರದ ಓವರ್‌ಲೇಗಳನ್ನು ರಚಿಸಲು ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಇದನ್ನು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳಿಗೆ ಒಂದು ಅನನ್ಯ ದೃಶ್ಯ ಶೈಲಿಯನ್ನು ಸೇರಿಸಲು ಬಳಸಬಹುದು.

            

  


            

              
                Copy
              
            
          

            
.shape-overlay {
  position: relative;
  width: 400px;
  height: 300px;
}

.shape-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shape-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  mask-image: url("triangle-mask.svg");
  mask-size: cover;
  mask-repeat: no-repeat;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಇಮೇಜ್ ಅನ್ನು ಓವರ್‌ಲೇ ಮಾಡುವ ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗೆ ತ್ರಿಕೋನ ಮಾಸ್ಕ್ ಅನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಇದು ಇಮೇಜ್‌ಗೆ ದೃಶ್ಯ ಆಸಕ್ತಿಯನ್ನು ಸೇರಿಸುವ ಆಕಾರದ ಓವರ್‌ಲೇ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

3. ಟೆಕ್ಸ್ಟ್ ಮಾಸ್ಕಿಂಗ್

`mask-clip: text` ಇನ್ನೂ ಪ್ರಾಯೋಗಿಕವಾಗಿದ್ದರೂ, ಟೆಕ್ಸ್ಟ್‌ನ ಹಿಂದೆ ಹಿನ್ನೆಲೆ ಇಮೇಜ್ ಹೊಂದಿರುವ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಇರಿಸುವ ಮೂಲಕ ಮತ್ತು ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಮಾಸ್ಕ್ ಆಗಿ ಬಳಸುವ ಮೂಲಕ ನೀವು ಟೆಕ್ಸ್ಟ್ ಮಾಸ್ಕಿಂಗ್ ಪರಿಣಾಮಗಳನ್ನು ಸಾಧಿಸಬಹುದು. ಈ ತಂತ್ರವು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಟೈಪೋಗ್ರಫಿಯನ್ನು ರಚಿಸಬಹುದು.

            

  
Masked Text


            

              
                Copy
              
            
          

            
.text-mask {
  position: relative;
  width: 500px;
  height: 200px;
  font-size: 72px;
  font-weight: bold;
  color: white;
  background-image: url("background.jpg");
  background-size: cover;
  -webkit-text-fill-color: transparent; /* Required for Safari */
  -webkit-background-clip: text; /* Required for Safari */
  background-clip: text;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಮಾಸ್ಕ್ ಆಗಿ ಬಳಸಲು `background-clip: text` (ವ್ಯಾಪಕ ಹೊಂದಾಣಿಕೆಗಾಗಿ ವೆಂಡರ್ ಪ್ರಿಫಿಕ್ಸ್‌ಗಳೊಂದಿಗೆ) ಅನ್ನು ಬಳಸುತ್ತದೆ, ಅದರ ಹಿಂದಿನ ಹಿನ್ನೆಲೆ ಇಮೇಜ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.

4. ಅನಿಮೇಟೆಡ್ ಮಾಸ್ಕ್‌ಗಳನ್ನು ರಚಿಸುವುದು

`mask-position` ಅಥವಾ `mask-size` ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಡೈನಾಮಿಕ್ ಮತ್ತು ಆಕರ್ಷಕವಾದ ಮಾಸ್ಕ್ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಬಹುದು. ಇದನ್ನು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳಿಗೆ ಚಲನೆ ಮತ್ತು ಸಂವಾದಾತ್ಮಕತೆಯನ್ನು ಸೇರಿಸಲು ಬಳಸಬಹುದು.

            

  


            

              
                Copy
              
            
          

            
.animated-mask {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.animated-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: url("circle-mask.png");
  mask-size: 50px;
  mask-repeat: repeat;
  mask-position: 0 0;
  animation: moveMask 5s linear infinite;
}

@keyframes moveMask {
  0% {
    mask-position: 0 0;
  }
  100% {
    mask-position: 100% 100%;
  }
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `mask-position` ಅನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲಾಗಿದೆ, ಇದು ಕಾಲಾನಂತರದಲ್ಲಿ ಇಮೇಜ್‌ನ ವಿವಿಧ ಭಾಗಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುವ ಚಲಿಸುವ ಮಾಸ್ಕ್ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು

ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ:

• ಕಾರ್ಯಕ್ಷಮತೆ: ಸಂಕೀರ್ಣ ಮಾಸ್ಕ್‌ಗಳು, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಇಮೇಜ್‌ಗಳು ಅಥವಾ ಜಟಿಲವಾದ ಗ್ರೇಡಿಯೆಂಟ್‌ಗಳನ್ನು ಬಳಸುವವುಗಳು, ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ನಿಮ್ಮ ಮಾಸ್ಕ್ ಇಮೇಜ್‌ಗಳು ಮತ್ತು ಗ್ರೇಡಿಯೆಂಟ್‌ಗಳ ಗಾತ್ರ ಮತ್ತು ಸಂಕೀರ್ಣತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಅವುಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ. ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸ್ಕೇಲೆಬಿಲಿಟಿಗಾಗಿ ವೆಕ್ಟರ್-ಆಧಾರಿತ ಮಾಸ್ಕ್‌ಗಳನ್ನು (SVGs) ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ: ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದ್ದರೂ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು ಅವುಗಳನ್ನು ಬೆಂಬಲಿಸದಿರಬಹುದು. ಮಾಸ್ಕ್ ಬೆಂಬಲವನ್ನು ಪರಿಶೀಲಿಸಲು ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್ (ಉದಾ., Modernizr) ಬಳಸಿ ಮತ್ತು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಫಾಲ್‌ಬ್ಯಾಕ್ ಪರಿಹಾರಗಳನ್ನು ಒದಗಿಸಿ. ಕೆಲವು ಬ್ರೌಸರ್‌ಗಳ ಹಳೆಯ ಆವೃತ್ತಿಗಳೊಂದಿಗೆ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೀವು ವೆಂಡರ್ ಪ್ರಿಫಿಕ್ಸ್‌ಗಳನ್ನು (ಉದಾ., `-webkit-mask-image`) ಸಹ ಬಳಸಬಹುದು.
• ಪ್ರವೇಶಸಾಧ್ಯತೆ: ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳ ಬಳಕೆಯು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರದಂತೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಮಾಸ್ಕ್ ಮಾಡಿದ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನೋಡಲು ಸಾಧ್ಯವಾಗದ ಬಳಕೆದಾರರಿಗೆ ಪರ್ಯಾಯ ವಿಷಯ ಅಥವಾ ಶೈಲಿಯನ್ನು ಒದಗಿಸಿ. ಮಾಸ್ಕ್ ಮಾಡಿದ ವಿಷಯದ ಅರ್ಥ ಮತ್ತು ಉದ್ದೇಶವನ್ನು ತಿಳಿಸಲು ಸೂಕ್ತವಾದ ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ.
• ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್: ವೆಬ್ ಬಳಕೆಗಾಗಿ ನಿಮ್ಮ ಮಾಸ್ಕ್ ಇಮೇಜ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ. ಸೂಕ್ತವಾದ ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಬಳಸಿ (ಉದಾ., ಪಾರದರ್ಶಕತೆ ಇರುವ ಇಮೇಜ್‌ಗಳಿಗೆ PNG, ಫೋಟೋಗ್ರಾಫ್‌ಗಳಿಗೆ JPEG) ಮತ್ತು ಅವುಗಳ ಫೈಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಿಮ್ಮ ಇಮೇಜ್‌ಗಳನ್ನು ಕಂಪ್ರೆಸ್ ಮಾಡಿ.
• ಪರೀಕ್ಷೆ: ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್ ಅನುಷ್ಠಾನಗಳು ಸರಿಯಾಗಿ ರೆಂಡರ್ ಆಗುತ್ತವೆ ಮತ್ತು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಅವುಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ.
• ಪ್ರಗತಿಪರ ವರ್ಧನೆ: ಮಾಸ್ಕಿಂಗ್ ಅನ್ನು ಪ್ರಗತಿಪರ ವರ್ಧನೆಯಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಿ. ಸೀಮಿತ ಬ್ರೌಸರ್ ಬೆಂಬಲ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಮೂಲಭೂತ, ಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸವನ್ನು ಒದಗಿಸಿ, ಮತ್ತು ನಂತರ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗಾಗಿ ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳೊಂದಿಗೆ ವಿನ್ಯಾಸವನ್ನು ವರ್ಧಿಸಿ.

ಪರ್ಯಾಯಗಳು ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು

ನೀವು ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸದ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕಾದರೆ, ನೀವು ಈ ಕೆಳಗಿನ ಪರ್ಯಾಯಗಳನ್ನು ಬಳಸಬಹುದು:

• `clip-path`: `clip-path` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಮೂಲಭೂತ ಆಕಾರಗಳಲ್ಲಿ ಕ್ಲಿಪ್ ಮಾಡಲು ಬಳಸಬಹುದು. ಇದು ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳಷ್ಟೇ ನಮ್ಯತೆಯನ್ನು ನೀಡದಿದ್ದರೂ, ಸರಳ ಮಾಸ್ಕಿಂಗ್ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು ಇದನ್ನು ಬಳಸಬಹುದು.
• JavaScript: ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಮಾಸ್ಕಿಂಗ್ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು ನೀವು JavaScript ಅನ್ನು ಬಳಸಬಹುದು. ಈ ವಿಧಾನಕ್ಕೆ ಹೆಚ್ಚು ಕೋಡ್ ಬೇಕಾಗುತ್ತದೆ, ಆದರೆ ಇದು ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣ ಮತ್ತು ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. Fabric.js ನಂತಹ ಲೈಬ್ರರಿಗಳು JavaScript ನೊಂದಿಗೆ ಮಾಸ್ಕ್‌ಗಳನ್ನು ರಚಿಸುವ ಮತ್ತು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸಬಹುದು.
• ಸರ್ವರ್-ಸೈಡ್ ಇಮೇಜ್ ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್: ಮಾಸ್ಕಿಂಗ್ ಪರಿಣಾಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು ಸರ್ವರ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಜ್‌ಗಳನ್ನು ಪೂರ್ವ-ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬಹುದು. ಈ ವಿಧಾನವು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಪ್ರೊಸೆಸಿಂಗ್ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಆದರೆ ಇದಕ್ಕೆ ಹೆಚ್ಚು ಸರ್ವರ್-ಸೈಡ್ ಸಂಪನ್ಮೂಲಗಳು ಬೇಕಾಗುತ್ತವೆ.

ತೀರ್ಮಾನ

ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್ ಪ್ರಾಪರ್ಟೀಸ್ ವೆಬ್‌ನಲ್ಲಿ ಅದ್ಭುತ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಶಾಲಿ ಮತ್ತು ಬಹುಮುಖಿ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ. ವಿವಿಧ ಮಾಸ್ಕ್ ಪ್ರಾಪರ್ಟೀಸ್ ಮತ್ತು ಅವುಗಳ ಬಳಕೆಯ ಪ್ರಕರಣಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಹೊಸ ಮಟ್ಟದ ಸೃಜನಶೀಲತೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಬಹುದು ಮತ್ತು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳಿಗೆ ಒಂದು ಅನನ್ಯ ಶೈಲಿಯನ್ನು ಸೇರಿಸಬಹುದು. ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸುವುದು ಅತ್ಯಗತ್ಯವಾದರೂ, ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳನ್ನು ಬಳಸುವುದರಿಂದಾಗುವ ಸಂಭಾವ್ಯ ಪ್ರತಿಫಲಗಳು ಪ್ರಯತ್ನಕ್ಕೆ ಯೋಗ್ಯವಾಗಿವೆ. ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕಿಂಗ್‌ನ ಅಂತ್ಯವಿಲ್ಲದ ಸಾಧ್ಯತೆಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ವಿನ್ಯಾಸವನ್ನು ಹೊಸ ಎತ್ತರಕ್ಕೆ ಕೊಂಡೊಯ್ಯಲು ವಿವಿಧ ಮಾಸ್ಕ್ ಇಮೇಜ್‌ಗಳು, ಗ್ರೇಡಿಯೆಂಟ್‌ಗಳು ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ. ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳನ್ನು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಅನುಭವಗಳಾಗಿ ಪರಿವರ್ತಿಸಿ.

ಸೂಕ್ಷ್ಮವಾದ ಬಹಿರಂಗಪಡಿಸುವಿಕೆಯಿಂದ ಹಿಡಿದು ಜಟಿಲವಾದ ಆಕಾರದ ಓವರ್‌ಲೇಗಳವರೆಗೆ, ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕಿಂಗ್ ನಿಮಗೆ ಅನನ್ಯ ಮತ್ತು ಆಕರ್ಷಕವಾದ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ರೂಪಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸುಧಾರಿಸುತ್ತಾ ಹೋದಂತೆ, ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್‌ಗಳು ನಿಸ್ಸಂದೇಹವಾಗಿ ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪರ್‌ನ ಟೂಲ್‌ಕಿಟ್‌ನ ಇನ್ನಷ್ಟು ಅವಿಭಾಜ್ಯ ಅಂಗವಾಗುತ್ತವೆ. ಹಾಗಾಗಿ, ಮುಳುಗಿ, ಪ್ರಯೋಗ ಮಾಡಿ, ಮತ್ತು ಸಿಎಸ್‌ಎಸ್ ಮಾಸ್ಕ್ ಪ್ರಾಪರ್ಟೀಸ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ಸೃಜನಶೀಲತೆಯನ್ನು ಅನಾವರಣಗೊಳಿಸಿ!