ಚಿತ್ರಗಳು ಸಿಎಸ್ಎಸ್ ಬಳಸಿ

ಸ್ಟೈಲ್ಸ್ನಲ್ಲಿ ನಿಮ್ಮ ಚಿತ್ರಗಳು ಮತ್ತು ಚಿತ್ರಗಳನ್ನು ಬಳಸಿ ಶೈಲಿ

ಅನೇಕ ಜನರು ಪಠ್ಯವನ್ನು ಸರಿಹೊಂದಿಸಲು ಫಾಂಟ್, ಬಣ್ಣ, ಗಾತ್ರ ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಬದಲಾಯಿಸುವಂತೆ ಸಿಎಸ್ಎಸ್ ಬಳಸುತ್ತಾರೆ. ಆದರೆ ಅನೇಕ ಜನರು ಸಾಮಾನ್ಯವಾಗಿ ಮರೆಯುವ ಒಂದು ವಿಷಯವೆಂದರೆ ನೀವು ಚಿತ್ರಗಳೊಂದಿಗೆ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಬಳಸಬಹುದು.

ಚಿತ್ರವನ್ನು ಸ್ವತಃ ಬದಲಾಯಿಸುವುದು

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

• ಚಿತ್ರಗಳ ಸುತ್ತಲೂ ಗಡಿ ಅಥವಾ ಬಾಹ್ಯರೇಖೆಯನ್ನು ಸೇರಿಸಿ
• ಲಿಂಕ್ ಮಾಡಿದ ಚಿತ್ರಗಳ ಸುತ್ತ ಬಣ್ಣದ ಗಡಿ ತೆಗೆದುಹಾಕಿ
• ಚಿತ್ರಗಳ ಅಗಲ ಮತ್ತು / ಅಥವಾ ಎತ್ತರವನ್ನು ಸರಿಹೊಂದಿಸುವುದು
• ಡ್ರಾಪ್ ನೆರಳು ಸೇರಿಸಿ
• ಚಿತ್ರವನ್ನು ತಿರುಗಿಸಿ
• ಚಿತ್ರದ ಮೇಲೆ ಹೋದಾಗ ಶೈಲಿಗಳನ್ನು ಬದಲಾಯಿಸಿ

ನಿಮ್ಮ ಚಿತ್ರವನ್ನು ಗಡಿ ನೀಡುವ ಮೂಲಕ ಪ್ರಾರಂಭಿಸಲು ಉತ್ತಮ ಸ್ಥಳವಾಗಿದೆ. ಆದರೆ ನೀವು ಕೇವಲ ಗಡಿಗಿಂತ ಹೆಚ್ಚಿನದನ್ನು ಪರಿಗಣಿಸಬೇಕು - ನಿಮ್ಮ ಚಿತ್ರದ ಸಂಪೂರ್ಣ ಅಂಚಿನ ಬಗ್ಗೆ ಯೋಚಿಸಿ ಮತ್ತು ಅಂಚುಗಳನ್ನು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಿ. ತೆಳುವಾದ ಕಪ್ಪು ಗಡಿ ಹೊಂದಿರುವ ಚಿತ್ರ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತದೆ, ಆದರೆ ಗಡಿ ಮತ್ತು ಚಿತ್ರದ ನಡುವೆ ಕೆಲವು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಇನ್ನಷ್ಟು ಉತ್ತಮಗೊಳಿಸಬಹುದು.

img {
ಗಡಿ: 1 px ಘನ ಕಪ್ಪು;
ಪ್ಯಾಡಿಂಗ್: 5 px;
}

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

img> a {
ಗಡಿ: ಯಾವುದೂ ಇಲ್ಲ;
}

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

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

img {
ಅಗಲ: 50%;
ಎತ್ತರ: ಸ್ವಯಂ;
}

ಹೊಸ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ವಸ್ತು-ಫಿಟ್ ಮತ್ತು ವಸ್ತುವಿನ ಸ್ಥಾನದೊಂದಿಗೆ CSS3 ಈ ಸಮಸ್ಯೆಯ ಪರಿಹಾರವನ್ನು ನೀಡುತ್ತದೆ. ಈ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ನೀವು ಸರಿಯಾದ ಇಮೇಜ್ ಎತ್ತರ ಮತ್ತು ಅಗಲವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಮತ್ತು ಆಕಾರ ಅನುಪಾತವನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸಬೇಕು. ಇದು ನಿಮ್ಮ ಚಿತ್ರಗಳ ಸುತ್ತಲೂ ಲೆಟ್ಬಾಕ್ಸಿಂಗ್ ಪರಿಣಾಮಗಳನ್ನು ಸೃಷ್ಟಿಸಬಹುದು ಅಥವಾ ಅಗತ್ಯವಿರುವ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳಲು ಚಿತ್ರವನ್ನು ಪಡೆಯಲು ಬೆಳೆಸಬಹುದು.

CSS3 ಆಬ್ಜೆಕ್ಟ್-ಫಿಟ್ ಮತ್ತು ಆಬ್ಜೆಕ್ಟ್-ಸ್ಥಾನ ಗುಣಲಕ್ಷಣಗಳು ಇನ್ನೂ ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲವಾದರೂ, ನಿಮ್ಮ ಬ್ರೌಸರ್ಗಳನ್ನು ಮಾರ್ಪಡಿಸಲು ನೀವು ಬಳಸಬಹುದಾದ ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಬೆಂಬಲಿತವಾಗಿರುವ ಇತರ CSS3 ಗುಣಲಕ್ಷಣಗಳಿವೆ. ಹೆಚ್ಚು ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಇದೀಗ ನಿಮ್ಮ ಇಮೇಜ್ಗಳನ್ನು ತಿರುಗಿಸಲು, ತಿರುಗಿಸಲು ಅಥವಾ ಚಲಿಸಲು ಡ್ರಾಪ್ ನೆರಡೋಗಳು, ದುಂಡಾದ ಮೂಲೆಗಳು, ಮತ್ತು ರೂಪಾಂತರಗಳು ಮುಂತಾದವುಗಳು. ನಂತರ ನೀವು ಸಿಎಸ್ಎಸ್ ಪರಿವರ್ತನೆಗಳನ್ನು ಬಳಸಬಹುದು, ಚಿತ್ರಗಳನ್ನು ಮೇಲೆ ಬದಲಾವಣೆ ಮಾಡಿದಾಗ ಕ್ಲಿಕ್ ಮಾಡಿ, ಅಥವಾ ಕ್ಲಿಕ್ ಮಾಡಿ, ಅಥವಾ ಸಮಯದ ನಂತರ.

ಹಿನ್ನೆಲೆಗಳನ್ನು ಚಿತ್ರಗಳು ಬಳಸಿ

ಸಿಎಸ್ಎಸ್ ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಅಲಂಕಾರಿಕ ಹಿನ್ನೆಲೆಗಳನ್ನು ರಚಿಸಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.

ನೀವು ಸಂಪೂರ್ಣ ಪುಟಕ್ಕೆ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕೆ ಹಿನ್ನೆಲೆಗಳನ್ನು ಸೇರಿಸಬಹುದು. ಹಿನ್ನೆಲೆ-ಚಿತ್ರದ ಆಸ್ತಿಯೊಂದಿಗೆ ಪುಟದಲ್ಲಿನ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ರಚಿಸುವುದು ಸುಲಭವಾಗಿದೆ:

ದೇಹ {
ಹಿನ್ನೆಲೆ-ಚಿತ್ರ: url (background.jpg);
}

ಕೇವಲ ಒಂದು ಅಂಶದ ಮೇಲೆ ಹಿನ್ನೆಲೆ ಹಾಕಲು ಪುಟದ ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕೆ ದೇಹದ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬದಲಾಯಿಸಿ.

ಚಿತ್ರಗಳೊಂದಿಗೆ ನೀವು ಮಾಡಬಹುದಾದ ಮತ್ತೊಂದು ವಿನೋದ ವಿಷಯವು ಒಂದು ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ರಚಿಸುತ್ತದೆ - ಇದು ವಾಟರ್ಮಾರ್ಕ್ ನಂತಹ ಪುಟದ ಉಳಿದ ಭಾಗಗಳೊಂದಿಗೆ ಸ್ಕ್ರಾಲ್ ಆಗುವುದಿಲ್ಲ. ನೀವು ಶೈಲಿ ಹಿನ್ನೆಲೆ-ಲಗತ್ತನ್ನು ಬಳಸಿ: ಸ್ಥಿರ; ನಿಮ್ಮ ಹಿನ್ನೆಲೆ ಚಿತ್ರದೊಂದಿಗೆ. ನಿಮ್ಮ ಹಿನ್ನೆಲೆಯ ಇತರ ಆಯ್ಕೆಗಳು ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತಿತ ಆಸ್ತಿಯನ್ನು ಬಳಸಿ ಅಡ್ಡಲಾಗಿ ಅಥವಾ ಲಂಬವಾಗಿ ಅವುಗಳನ್ನು ಟೈಲ್ ಮಾಡುವಂತೆ ಮಾಡುತ್ತವೆ.

ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ ಬರೆಯಿರಿ: ಪುನರಾವರ್ತಿತ- x; ಚಿತ್ರವನ್ನು ಅಡ್ಡಲಾಗಿ ಮತ್ತು ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆಗೆ ಟೈಲ್ ಮಾಡಲು: ಪುನರಾವರ್ತನೆ-ವೈ; ಲಂಬವಾಗಿ ಟೈಲ್ ಮಾಡಲು. ಮತ್ತು ಹಿನ್ನೆಲೆ-ಸ್ಥಾನದ ಆಸ್ತಿಯೊಂದಿಗೆ ನಿಮ್ಮ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ನೀವು ಹೊಂದಿಸಬಹುದು.

ಮತ್ತು CSS3 ನಿಮ್ಮ ಹಿನ್ನೆಲೆಗೆ ಹೆಚ್ಚು ಶೈಲಿಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ. ಯಾವುದೇ ಗಾತ್ರದ ಹಿನ್ನೆಲೆಗೆ ಸರಿಹೊಂದುವಂತೆ ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ನೀವು ವಿಸ್ತರಿಸಬಹುದು ಅಥವಾ ವಿಂಡೋ ಗಾತ್ರದೊಂದಿಗೆ ಸ್ಕೇಲ್ ಮಾಡಲು ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಹೊಂದಿಸಬಹುದು . ನೀವು ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸಬಹುದು ಮತ್ತು ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಕ್ಲಿಪ್ ಮಾಡಬಹುದು. ಆದರೆ CSS3 ಬಗ್ಗೆ ಉತ್ತಮವಾದ ವಿಷಯವೆಂದರೆ ನೀವು ಇದೀಗ ಲೇಯರ್ ಬಹು ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಇನ್ನಷ್ಟು ಸಂಕೀರ್ಣವಾದ ಪರಿಣಾಮಗಳನ್ನು ಸೃಷ್ಟಿಸಬಹುದು.

HTML5 ಶೈಲಿ ಚಿತ್ರಗಳು ಸಹಾಯ ಮಾಡುತ್ತದೆ

HTML5 ನಲ್ಲಿರುವ FIGURE ಅಂಶವು ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಏಕಾಂಗಿಯಾಗಿ ನಿಲ್ಲಬಹುದಾದ ಯಾವುದೇ ಚಿತ್ರಗಳನ್ನು ಸುತ್ತಲೂ ಇಡಬೇಕು. ಚಿತ್ರವು ಅನುಬಂಧದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವುದಾದರೆ ಅದರ ಬಗ್ಗೆ ಯೋಚಿಸುವುದು ಒಂದು ಮಾರ್ಗವಾಗಿದೆ, ಅದು FIGURE ಅಂಶದ ಒಳಗೆ ಇರಬೇಕು. ನಿಮ್ಮ ಚಿತ್ರಗಳಿಗೆ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಲು ಆ ಅಂಶ ಮತ್ತು FIGCAPTION ಅಂಶವನ್ನು ನೀವು ಬಳಸಬಹುದು.