CSS ನ ಕಲೆ: ಕ್ರಿಸಾಂಥಮಮ್ ನಿರ್ಮಿಸುವುದು

CSS ಕಲೆಯು ವಿನ್ಯಾಸವನ್ನು ತಾಂತ್ರಿಕ ಕೌಶಲ್ಯದೊಂದಿಗೆ ಬೆರೆಸುತ್ತದೆ. ನೀವು ಯಾವುದೇ ಚಿತ್ರದ ಫೈಲ್‌ಗಳನ್ನು ಬಳಸದೆ ವಿವರವಾದ ಚಿತ್ರಗಳನ್ನು ರಚಿಸಬಹುದು. ನೀವು ಕೇವಲ HTML ಮತ್ತು CSS ಅನ್ನು ಮಾತ್ರ ಬಳಸುತ್ತೀರಿ.

ಕ್ರಿಸಾಂಥಮಮ್ ಹೂವು ಅನೇಕ ದಟ್ಟವಾದ ದಳಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. ನೀವು ಈ ಕೆಳಗಿನ ನಿರ್ದಿಷ್ಟ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ ಈ ಹೂವನ್ನು ನಿರ್ಮಿಸಬಹುದು:

  • ಮೃದುವಾದ ಆಕಾರಗಳಿಗಾಗಿ border-radius
  • ಬಣ್ಣದ ಆಳಕ್ಕಾಗಿ linear-gradient
  • ಆಯಾಮಕ್ಕಾಗಿ (dimension) box-shadow
  • ತಿರುಗಿಸಲು (rotation) transform

ಹೂವನ್ನು ಮಾಡಲು, ನೀವು ಆಕಾರಗಳನ್ನು ಬಿಡಿಸುತ್ತೀರಿ. ಕ್ರಿಸಾಂಥಮಮ್ ಎಂಬುದು ಪದರವಾದ div ಎಲಿಮೆಂಟ್‌ಗಳು ಮತ್ತು pseudo-elements ಗಳ ಸಮೂಹವಾಗಿದೆ. ನೀವು ಹೂವನ್ನು ವಿವಿಧ ಭಾಗಗಳಾಗಿ ವಿಂಗಡಿಸಬೇಕು: ದಳಗಳು, ಪದರಗಳು ಮತ್ತು ಮಧ್ಯದ ಭಾಗ.

ನೀವು border-radius ಬಳಸಿ ದಳದ ಆಕಾರವನ್ನು ರಚಿಸುತ್ತೀರಿ. ನಂತರ ಅದನ್ನು ಚಲಾಯಿಸಲು transform: rotate() ಅನ್ನು ಬಳಸುತ್ತೀರಿ. ಈ ಆಕಾರಗಳನ್ನು ಒಂದು ಕೇಂದ್ರ ಬಿಂದುವಿನ ಸುತ್ತ ತಿರುಗಿಸುವುದರಿಂದ ಹೂವು ಅರಳಿದ ಮಾದರಿಯನ್ನು ಸೃಷ್ಟಿಸಬಹುದು.

ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಸುಧಾರಿಸಲು ಈ ಸಲಹೆಗಳನ್ನು ಬಳಸಿ:

  • ದಳಗಳನ್ನು ಪದರಗಳಾಗಿ ಜೋಡಿಸಲು z-index ಬಳಸಿ.
  • ಆಳವನ್ನು ಸೇರಿಸಲು opacity ಬದಲಾಯಿಸಿ.
  • ::before ಮತ್ತು ::after pseudo-elements ಬಳಸಿ. ಇದು ನಿಮ್ಮ HTML ಅನ್ನು ಸ್ವಚ್ಛವಾಗಿಡುತ್ತದೆ.

CSS ಕಲೆಯು ಬಾಕ್ಸ್ ಮಾಡೆಲ್ (box model) ಮತ್ತು ಪೋಸಿಷನಿಂಗ್ (positioning) ಕೌಶಲ್ಯಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಬ್ರೌಸರ್‌ಗಳು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹೇಗೆ ರೆಂಡರ್ (render) ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ಇದು ನಿಮಗೆ ಕಲಿಸುತ್ತದೆ.

ನಿಮ್ಮ ಕೋಡ್ ಎಡಿಟರ್ ಅನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಇಂದು ಒಂದು ಹೂವಿನ ವಿನ್ಯಾಸವನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಯತ್ನಿಸಿ.

ಮೂಲ: https://dev.to/jehadurre/the-art-of-css-rendering-a-chrysanthemum-using-only-html-and-css-3j6d