ಉಚಿತ CSS ಬಾಕ್ಸ್ ಶ್ಯಾಡೋ ಜನರೇಟರ್
ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆ, ಬಹು-ಲೇಯರ್ ಸ್ಟ್ಯಾಕಿಂಗ್, ಬಣ್ಣ ಆಯ್ಕೆಗಾರ, ಇನ್‌ಸೆಟ್ ಟಾಗಲ್, ಮತ್ತು ಒಂದೇ ಕ್ಲಿಕ್ ನಕಲಿನೊಂದಿಗೆ CSS box-shadow ಗಾಗಿ ದೃಶ್ಯ ಬಿಲ್ಡರ್. Material, ನ್ಯೂಮಾರ್ಫಿಸಂ, ಮತ್ತು ಗ್ಲೋ ಪ್ರಿಸೆಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
ಸಕ್ರಿಯ ಪದರದ ನೆರಳನ್ನು ಇರಿಸಲು ಬಾಕ್ಸ್ ಎಳೆಯಿರಿ - ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ Shift ಒತ್ತಿ ಹಿಡಿಯಿರಿ
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);ಪ್ರೀಸೆಟ್‌ಗಳು
ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
ಬಾಕ್ಸ್-ಶ್ಯಾಡೋ ಜನರೇಟರ್ ಸಂಪೂರ್ಣ ಕ್ಲೈಂಟ್-ಸೈಡ್ React ಟೂಲ್ ಆಗಿದೆ — ಯಾವುದೇ ಸರ್ವರ್ ಇಲ್ಲ, ಲೈಬ್ರರಿ ಇಲ್ಲ. ಇದು ಸ್ಥಿತಿಯಲ್ಲಿ ಶ್ಯಾಡೋ ಲೇಯರ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ, ಪ್ರತಿ ಬದಲಾವಣೆಯಲ್ಲಿ ಕೈಯಿಂದ ಬರೆದ rgba() ಫಾರ್ಮ್ಯಾಟರ್ ಬಳಸಿ ಮಾನ್ಯ CSS box-shadow ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಜೋಡಿಸುತ್ತದೆ, ಮತ್ತು React ನ style prop ಮೂಲಕ ಮುನ್ನೋಟ ಎಲಿಮೆಂಟ್‌ಗೆ ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತದೆ ಆದ್ದರಿಂದ ಬ್ರೌಸರ್‌ನ ಸ್ವಂತ ರೆಂಡರಿಂಗ್ ಇಂಜಿನ್ ಫಲಿತಾಂಶವನ್ನು ತಕ್ಷಣ ಎಳೆಯುತ್ತದೆ.
- 1ಲೇಯರ್ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು ಫಾರ್ಮ್ಯಾಟರ್‌ಗೆ ಆಹಾರ ನೀಡುತ್ತವೆಪ್ರತಿ ಶ್ಯಾಡೋ ಲೇಯರ್ x/y ಆಫ್‌ಸೆಟ್‌ಗಳು, ಬ್ಲರ್, ಸ್ಪ್ರೆಡ್, ಹೆಕ್ಸ್ ಬಣ್ಣ, ಮತ್ತು ಅಪಾರದರ್ಶಕತೆ ಮೌಲ್ಯವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ. ಪ್ರತಿ ಬದಲಾವಣೆಯಲ್ಲಿ, ಒಂದು ಚಿಕ್ಕ shadowToCss ಫಂಕ್ಷನ್ ಹೆಕ್ಸ್ ಬಣ್ಣವನ್ನು ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್ ಬಳಸಿ RGB ಘಟಕಗಳಿಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ, ನಂತರ rgba() ಸ್ಟ್ರಿಂಗ್ ಜೋಡಿಸುತ್ತದೆ — ಉದಾಹರಣೆಗೆ, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). ಬಹು ಲೇಯರ್‌ಗಳನ್ನು ಅಲ್ಪವಿರಾಮಗಳೊಂದಿಗೆ ಸೇರಿಸಲಾಗುತ್ತದೆ.
- 2ಬ್ರೌಸರ್ ಲೈವ್ ಮುನ್ನೋಟ ರೆಂಡರ್ ಮಾಡುತ್ತದೆಜೋಡಿಸಿದ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು JSX ನಲ್ಲಿ ನೇರವಾಗಿ div ಎಲಿಮೆಂಟ್‌ನ boxShadow ಶೈಲಿ ಪ್ರಾಪರ್ಟಿಗೆ ನಿಯೋಜಿಸಲಾಗುತ್ತದೆ. React DOM ಗುಣಲಕ್ಷಣವನ್ನು ನವೀಕರಿಸುತ್ತದೆ, ಮತ್ತು ಬ್ರೌಸರ್‌ನ CSS ಇಂಜಿನ್ ಶ್ಯಾಡೋವನ್ನು ತಕ್ಷಣ ಚಿತ್ರಿಸುತ್ತದೆ — ಯಾವುದೇ ಕ್ಯಾನ್ವಾಸ್ ಅಥವಾ WebGL ಒಳಗೊಂಡಿಲ್ಲ, ಕೇವಲ ಸ್ಥಳೀಯ CSS ರೆಂಡರಿಂಗ್.
- 3ಡ್ರ್ಯಾಗ್-ಟು-ಪೊಸಿಷನ್ Pointer Events API ಬಳಸುತ್ತದೆಮುನ್ನೋಟ ಬಾಕ್ಸ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಎಳೆಯುವುದು ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ setPointerCapture ಕರೆಯುತ್ತದೆ, ನಂತರ ಸಕ್ರಿಯ ಲೇಯರ್‌ನ x ಮತ್ತು y ಆಫ್‌ಸೆಟ್‌ಗಳನ್ನು ನೈಜ ಸಮಯದಲ್ಲಿ ನವೀಕರಿಸಲು onPointerMove ಡೆಲ್ಟಾಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ. Shift ಒತ್ತಿ ಹಿಡಿಯುವುದು ಸೂಕ್ಷ್ಮ-ಗ್ರೇನ್ಡ್ ಸ್ಥಾನೀಕರಣಕ್ಕಾಗಿ 0.25x ಸ್ಕೇಲ್ ಫ್ಯಾಕ್ಟರ್ ಅನ್ವಯಿಸುತ್ತದೆ.
- 4ಔಟ್‌ಪುಟ್ ಅನ್ನು ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ಗೆ ನಕಲಿಸಲಾಗುತ್ತದೆಟೂಲ್ ಅದೇ ಲೇಯರ್ ಡೇಟಾದಿಂದ ಎರಡು ಔಟ್‌ಪುಟ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ: ಒಂದು ಮಾನಕ CSS box-shadow ಘೋಷಣೆ, ಮತ್ತು Tailwind ನ ಸಿಂಟ್ಯಾಕ್ಸ್ ನಿಯಮಗಳ ಪ್ರಕಾರ ಸ್ಪೇಸ್‌ಗಳನ್ನು ಅಂಡರ್‌ಸ್ಕೋರ್‌ಗಳಿಂದ ಬದಲಾಯಿಸಲಾದ Tailwind ನಿರಂಕುಶ-ಮೌಲ್ಯ ವರ್ಗ (shadow-[...]). ಒಂದು-ಕ್ಲಿಕ್ ನಕಲು navigator.clipboard.writeText ಬಳಸುತ್ತದೆ.
ಸಂಬಂಧಿತ ಪರಿಕರಗಳು
CSS ಬಾರ್ಡರ್ ರೇಡಿಯಸ್ ಜನರೇಟರ್
ಪ್ರತಿ ಮೂಲೆಯ ಮೇಲೆ ಸ್ವತಂತ್ರ ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಸುತ್ತಿನ ಮೂಲೆಗಳನ್ನು ದೃಶ್ಯವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿ. ಸಾವಯವ ಆಕಾರಗಳಿಗಾಗಿ ಇಲಿಪ್ಟಿಕಲ್ X/Y ಸಿಂಟ್ಯಾಕ್ಸ್ ಬೆಂಬಲಿಸುತ್ತದೆ.
CSS ಗ್ರಿಡ್ ಜನರೇಟರ್
CSS ಗ್ರಿಡ್ ಅನ್ನು ದೃಷ್ಯವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿ — ಟ್ರ್ಯಾಕ್‌ಗಳು, ಯುನಿಟ್‌ಗಳು ಮತ್ತು ಗ್ಯಾಪ್‌ಗಳು — ಮತ್ತು ಜನರೇಟ್ ಆದ CSS ಹಾಗೂ HTML ಅನ್ನು ಕಾಪಿ ಮಾಡಿ.
CSS ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಜನರೇಟರ್
ಲೈವ್ ಐಟಂಗಳ ಮೇಲೆ ಫ್ಲೆಕ್ಸ್ ಡೈರೆಕ್ಷನ್, ವ್ರ್ಯಾಪ್, ಜಸ್ಟಿಫೈ ಮತ್ತು ಅಲೈನ್ ಅನ್ನು ಪ್ರಯೋಗಿಸಿ — ಮತ್ತು CSS ಕಾಪಿ ಮಾಡಿ.