CSS Box Shadow ಜನರೇಟರ್
CSS Box Shadow ಎಂದರೇನು?
CSS box-shadow ಗುಣವು ಒಂದು ಅಂಶದ ಚೌಕಟ್ಟಿನ ಸುತ್ತ ನೆರಳು ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ. ನೆರಳುಗಳನ್ನು ಆಫ್ಸೆಟ್, ಬ್ಲರ್, ಸ್ಪ್ರೆಡ್, ಬಣ್ಣ ಮಾಡಬಹುದು ಮತ್ತು inset (ಆಂತರಿಕ ನೆರಳು) ಆಗಿ ಹೊಂದಿಸಬಹುದು. ಅಲ್ಪವಿರಾಮದಿಂದ ಬೇರ್ಪಡಿಸಿದ ಬಹು ನೆರಳುಗಳನ್ನು ಸಮೃದ್ಧ ಪರಿಣಾಮಗಳಿಗಾಗಿ ಪದರ ಮಾಡಬಹುದು. ಈ ಜನರೇಟರ್ ನಿಮಗೆ ಸಂಕೀರ್ಣ ಬಹು-ಪದರ ನೆರಳುಗಳನ್ನು ದೃಶ್ಯಾತ್ಮಕವಾಗಿ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕ್ಲಿಪ್ಬೋರ್ಡ್ಗೆ ಅಂಟಿಸಲು ಸಿದ್ಧ CSS ನಕಲು ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.
Box Shadow ಜನರೇಟರ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬೇಕು
-
ನೆರಳನ್ನು ಇರಿಸಲು ಮತ್ತು ಆಕಾರ ನೀಡಲು Offset X/Y, Blur ಮತ್ತು Spread ಸ್ಲೈಡರ್ಗಳನ್ನು ಸರಿಹೊಂದಿಸಿ.
-
ನೆರಳು ಬಣ್ಣ ಆರಿಸಲು ಬಣ್ಣದ ಮಾದರಿಯ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ, ಮತ್ತು ಪಾರದರ್ಶಕತೆಗಾಗಿ Opacity ಸ್ಲೈಡರ್ ಬಳಸಿ.
-
ಆಂತರಿಕ ಹೊಳಪು ಅಥವಾ ಒತ್ತಿದ ಪರಿಣಾಮ ರಚಿಸಲು 'Inset' ಟಾಗಲ್ ಮಾಡಿ.
-
ಬಹು ನೆರಳುಗಳನ್ನು ಪದರ ಮಾಡಲು '+ ಪದರ ಸೇರಿಸಿ' ಕ್ಲಿಕ್ ಮಾಡಿ.
-
ರಚಿಸಿದ CSS ನಕಲಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಸ್ಟೈಲ್ಶೀಟ್ಗೆ ಅಂಟಿಸಿ.
ಸಾಮಾನ್ಯವಾಗಿ ಕೇಳಿಸುವ ಪ್ರಶ್ನೆಗಳು
ಬಾಕ್ಸ್-ಛಾಯೆ ಮತ್ತು ಡ್ರಾಪ್-ಛಾಯೆ ಫಿಲ್ಟರ್ನ ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು? ಬಾಕ್ಸ್-ಛಾಯೆ ಅಂಶದ ಆಯತಾಕಾರದ ಮಿತಿ ಪೆಟ್ಟಿಗೆಯ ಸುತ್ತಲೂ ಛಾಯೆಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು ಒಳಮುಖ ಛಾಯೆಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. CSS ಫಿಲ್ಟರ್: drop-shadow() ಅಂಶದ ದೃಶ್ಯ ಆಕಾರಕ್ಕೆ (ಪಾರದರ್ಶಕತೆ ಸೇರಿದಂತೆ) ಅನ್ವಯ ಮಾಡುತ್ತದೆ, ಪಾರದರ್ಶಕ ಹಿನ್ನೆಲೆಯೊಂದಿಗೆ PNG ಗಳಂತೆ ಆಯತವಲ್ಲದ ರೂಪರೇಖೆಗಳನ್ನು ಅನುಸರಿಸಲು ಸಕ್ಷಮ ಮಾಡುತ್ತದೆ.
ನಾನು ವಸ್ತು ವಿನ್ಯಾಸ ಕಾರ್ಡ್ ಎಲಿವೇಶನ ಪರಿಣಾಮವನ್ನು ಹೇಗೆ ರಚಿಸಬಹುದು? ಎರಡು ಬಾಕ್ಸ್ ಛಾಯೆಗಳನ್ನು ಸ್ಟ್ಯಾಕ್ ಮಾಡಿ: ಮೃದು ಅರ್ಥೀಯ ಛಾಯೆ (ದೊಡ್ಡ ಅಸ್ಪಷ್ಟತೆ, ಕಡಿಮೆ ಅಪಾರದರ್ಶಕತೆ, ಸ್ವಲ್ಪ ಹರಡಿಕೊಳ್ಳುವಿಕೆ) ಮತ್ತು ಮುಖ್ಯ ಛಾಯೆ (ಚಿಕ್ಕ ಅಸ್ಪಷ್ಟತೆ, ಹೆಚ್ಚಿನ ಅಪಾರದರ್ಶಕತೆ, ದಿಕ್ಕಿನ ಆಫ್ಸೆಟ್). ಉದಾಹರಣೆಗೆ: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
ಬಾಕ್ಸ್-ಛಾಯೆ ಪೃಷ್ಠ ಲೇಔಟ್ಅನ್ನು ಪ್ರಭಾವಿತ ಮಾಡುತ್ತದೆಯೇ? ಇಲ್ಲ. ಬಾಕ್ಸ್-ಛಾಯೆ ದಸ್ತಾವೇಜು ಹರಿವಿನಲ್ಲಿ ಅಂಶದ ಗಾತ್ರ ಅಥವಾ ಸ್ಥಾನವನ್ನು ಪ್ರಭಾವಿತ ಮಾಡುವುದಿಲ್ಲ. ರೂಪರೇಖೆಯಿಂದ ಭಿನ್ನವಾಗಿ, ಇದು ಲೇಔಟ್ ಸ್ಥಾನವನ್ನು ತೆಗೆದುಕೊಳ್ಳುವುದಿಲ್ಲ ಮತ್ತು ಇತರ ಅಂಶಗಳನ್ನು ಸುತ್ತುವುದಿಲ್ಲ.
ನಾನು ಬಾಕ್ಸ್-ಛಾಯೆಯನ್ನು ಅಲಂಕರಿಸಬಹುದೇ? ಹೌದು. ಬಾಕ್ಸ್-ಛಾಯೆ CSS ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಅನಿಮೇಷನ್ಗಳೊಂದಿಗೆ ಅಲಂಕೃತ ಸಾಧ್ಯವಾಗಿದೆ. ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ, ಅಗತ್ಯವಾದಾಗ ಮಾತ್ರ ಬಾಕ್ಸ್-ಛಾಯೆ ಪರಿವರ್ತನೆಯನ್ನು ನೆರವೇರಿಸುವುದನ್ನು ಆದ್ಯತೆ ನೀಡಿ—ಬ್ರೌಜರ್ಗಳು ರೂಪಾಂತರ ಅಥವಾ ಅಪಾರದರ್ಶಕತೆಯಂತೆ ಬಾಕ್ಸ್-ಛಾಯೆ ಪರಿವರ್ತನಗಳನ್ನು GPU-ವರಣಿತ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ.
Keywords: CSS box shadow ಜನರೇಟರ್, box-shadow CSS, CSS ನೆರಳು ಉಪಕರಣ, CSS drop shadow, inset shadow, ಬಹು-ಪದರ ನೆರಳು, CSS shadow ಆನ್ಲೈನ್