CSS ಮತ್ತು jQuery ನೊಂದಿಗೆ ಚಿತ್ರಗಳನ್ನು ಸುಧಾರಿಸಲು 25 ಟ್ಯುಟೋರಿಯಲ್

ಸಿಎಸ್ಎಸ್ -3-ಬಾಕ್ಸ್-ನೆರಳು-ಚಿತ್ರ-ಹೂವರ್-ಪರಿಣಾಮಗಳು-ಚಿತ್ರ-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆಗಳು-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳು-ನಿಂತುಕೊಳ್ಳಿ

ಚಿತ್ರಗಳನ್ನು ಸುಧಾರಿಸುವಾಗ ನಾವು ಅದನ್ನು ಫೋಟೋಶಾಪ್‌ನೊಂದಿಗೆ ಮಾಡಲು ಆಯ್ಕೆ ಮಾಡಬಹುದು ಮತ್ತು ನಂತರ ಅದನ್ನು ವೆಬ್ ಪುಟದಲ್ಲಿ ಆರೋಹಿಸಬಹುದು ಅಥವಾ ನಾವು ಬಿ ಆಯ್ಕೆಯನ್ನು ಸಹ ಆಯ್ಕೆ ಮಾಡಬಹುದು: ಲಭ್ಯವಿರುವ HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ತಂತ್ರಗಳೊಂದಿಗೆ ಇದನ್ನು ಮಾಡಿ.

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

ಅವರು ಇಂಗ್ಲಿಷ್ನಲ್ಲಿದ್ದಾರೆ ಆದರೆ ಅವರು ಹಾರಾಡುತ್ತಾರೆ, ಭರವಸೆ ನೀಡುತ್ತಾರೆ :)

ಮೂಲ | 1 ನೇ ಡಬ್ಲ್ಯೂಡಿ

ಸಿಎಸ್ಎಸ್ 3 ದುಂಡಾದ ಚಿತ್ರ jQuery ನೊಂದಿಗೆ

ದುಂಡಾದ ಚಿತ್ರಗಳನ್ನು ಸಾಧಿಸಲು ಚಿತ್ರದ ಅಂಶದ ಸುತ್ತಲೂ ಸ್ಪ್ಯಾನ್ ಟ್ಯಾಗ್ ಅನ್ನು ಕಟ್ಟಲು ಕಲಿಯಿರಿ, ಅದು ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ -3-ದುಂಡಾದ-ಇಮೇಜ್-ವಿತ್-ಜೆಕ್ವೆರಿ-ಇಮೇಜ್-ಹೂವರ್-ಎಫೆಕ್ಟ್ಸ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮೇಕ್-ಇಮೇಜ್-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

2.

ಸಿಎಸ್ಎಸ್ 2.1 ನೊಂದಿಗೆ ಬಹು ಹಿನ್ನೆಲೆಗಳು ಮತ್ತು ಗಡಿಗಳು

ಒಂದೇ HTML ಅಂಶಕ್ಕಾಗಿ 2.1 ಹಿನ್ನೆಲೆ ಕ್ಯಾನ್ವಾಸ್‌ಗಳು, 3 ಸ್ಥಿರ ಗಾತ್ರದ ಪ್ರಸ್ತುತಿ ಚಿತ್ರಗಳು ಮತ್ತು ಬಹು ಸಂಕೀರ್ಣ ಗಡಿಗಳನ್ನು ಒದಗಿಸಲು CSS 2 ಹುಸಿ ಅಂಶಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ.

ಬಹು-ಹಿನ್ನೆಲೆ-ಗಡಿಗಳು-ಸಿಎಸ್ಎಸ್-2-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳನ್ನು-ಎದ್ದು-ಹೊರಗುಳಿಯಿರಿ

3.

ತ್ವರಿತ ಸಲಹೆ: ಸರಳ ಸಿಎಸ್‌ಎಸ್‌ನೊಂದಿಗೆ ಬಹು ಗಡಿಗಳು

ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳಿಗೆ ಹೆಚ್ಚಿನ ಆಳವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಸರಳ ಸಿಎಸ್‌ಎಸ್‌ನೊಂದಿಗೆ ಬಹು ಗಡಿಗಳನ್ನು ಹೇಗೆ ಸಾಧಿಸುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುವ ತ್ವರಿತ ಸ್ಕ್ರೀನ್‌ಕಾಸ್ಟ್. ಹಿಂದಿನ ಟ್ಯುಟೋರಿಯಲ್ ನ ಹೆಚ್ಚು ಸರಳವಾದ ಆವೃತ್ತಿ.

ತ್ವರಿತ-ತುದಿ-ಬಹು-ಗಡಿಗಳು-ಸರಳ-ಸಿಎಸ್ಎಸ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆಗಳು-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

4.

CSS2 ನೊಂದಿಗೆ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಗಾತ್ರದ ಅಂಶಗಳ ಮೇಲೆ ಬಹು ಗಡಿಗಳು

ನ ಮೂರನೇ ಆವೃತ್ತಿ ನಿಕೋಲಸ್ ಗಲ್ಲಾಘರ್ ನೀವು ಅಂಶದ ಗಾತ್ರವನ್ನು ಮಾಡದಿದ್ದರೆ ಏನು ಮಾಡಬೇಕೆಂದು ನಿಮಗೆ ತೋರಿಸುತ್ತದೆ.

ಬಹು-ಗಡಿಗಳು-ಕ್ರಿಯಾತ್ಮಕವಾಗಿ-ಗಾತ್ರದ-ಅಂಶಗಳು-ಸಿಎಸ್ಎಸ್-2-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳನ್ನು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

5.

ಮೋಜು w / ಗಡಿಗಳನ್ನು ಹೊಂದಿರಿ - ಬೆವೆಲ್ಡ್, ಪ್ರೆಸ್ಡ್ ಮತ್ತು ಇನ್ನಷ್ಟು!

ವಿವಿಧ ಪರಿಣಾಮಗಳನ್ನು ಪಡೆಯಲು ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಕೆಲವು ಸರಳ ಗಡಿ ಶೈಲಿಯ ತಂತ್ರಗಳೊಂದಿಗೆ ಒತ್ತಿದ ಪರಿಣಾಮವನ್ನು ಹೇಗೆ ಸಾಧಿಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ.

ಗಡಿಗಳು-ಬೆವೆಲ್-ಒತ್ತಿದರೆ-ಹೆಚ್ಚು-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳನ್ನು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್ ಮಾಡಿ

6.

ಸಿಎಸ್ಎಸ್ 3 ನೊಂದಿಗೆ ಪೋಲರಾಯ್ಡ್ಗಳು

ಇಲ್ಲದಿದ್ದರೆ ಅದ್ಭುತವಾದ ಚಿತ್ರಗಳ ಪಟ್ಟಿಯನ್ನು ಪೂರ್ಣ ಪ್ರಮಾಣದ ಪೋಲರಾಯ್ಡ್ ಚಿತ್ರಗಳಾಗಿ ಪರಿವರ್ತಿಸಲು ಕೆಲವು ಅದ್ಭುತ CSS2 ಮತ್ತು CSS3 ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ.

ಪೋಲರಾಯ್ಡ್ಸ್-ಸಿಎಸ್ಎಸ್ -3-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮಾಡಿ-ಚಿತ್ರಗಳು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

7.

ಪರಿಪೂರ್ಣ ಪೂರ್ಣ ಪುಟ ಹಿನ್ನೆಲೆ ಚಿತ್ರ

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

ಪರಿಪೂರ್ಣ-ಪೂರ್ಣ-ಪುಟ-ಹಿನ್ನೆಲೆ-ಚಿತ್ರ-ಹೂವರ್-ಪರಿಣಾಮಗಳು-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳನ್ನು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

8.

CSS3 ಬಾಕ್ಸ್ ನೆರಳು ಮತ್ತು ಇಮೇಜ್ ಹೋವರ್ ಪರಿಣಾಮಗಳು

ಸ್ಟೈಲ್ ಶೀಟ್ ಅನ್ನು ಸಂಪಾದಿಸುವ ಮೂಲಕ ಡ್ರಾಪ್ ನೆರಳು ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸುವ ಹೊಸ ವಿಧಾನವನ್ನು ಅನ್ವೇಷಿಸಿ.

ಸಿಎಸ್ಎಸ್ -3-ಬಾಕ್ಸ್-ನೆರಳು-ಚಿತ್ರ-ಹೂವರ್-ಪರಿಣಾಮಗಳು-ಚಿತ್ರ-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆಗಳು-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳು-ನಿಂತುಕೊಳ್ಳಿ

9.

ಫ್ಯಾನ್ಸಿ ಥಂಬ್‌ನೇಲ್ ಹೂವರ್ ಎಫೆಕ್ಟ್ w / jQuery

CSS ಮತ್ತು jQuery ನೊಂದಿಗೆ ಅಚ್ಚುಕಟ್ಟಾಗಿ ಫ್ಲ್ಯಾಷ್-ಶೈಲಿಯ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸಿ.

ಫ್ಯಾನ್ಸಿ-ಥಂಬ್‌ನೇಲ್-ಹೂವರ್-ಎಫೆಕ್ಟ್-ವಿತ್ jquery- ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮೇಕ್-ಇಮೇಜ್‌ಗಳು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

10.

ಸರಳ ಸಿಎಸ್ಎಸ್ ಇಮೇಜ್ ರೋಲ್ಓವರ್ ಪರಿಣಾಮವನ್ನು ಹೇಗೆ ರಚಿಸುವುದು

ಈ ಟ್ಯುಟೋರಿಯಲ್ ನಲ್ಲಿ ನೀವು ಮೂಲ ಎಚ್ಟಿಎಮ್ಎಲ್ ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಸ್ಟೈಲಿಂಗ್ನೊಂದಿಗೆ ಸರಳ ಸಿಎಸ್ಎಸ್ ಇಮೇಜ್ ರೋಲ್ಓವರ್ ಪರಿಣಾಮವನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂದು ಕಲಿಯಲಿದ್ದೀರಿ.

ಹೇಗೆ-ಹೇಗೆ-ರಚಿಸುವುದು-ಸರಳ-ಸಿಎಸ್ಎಸ್-ಇಮೇಜ್-ರೋಲ್‌ಓವರ್-ಎಫೆಕ್ಟ್-ಇಮೇಜ್-ಹೂವರ್-ಎಫೆಕ್ಟ್ಸ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮೇಕ್-ಇಮೇಜ್-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

11.

ಫ್ಲೋಟುಟೋರಿಯಲ್

ಫ್ಲೋಟೂಟೋರಿಯಲ್ ಚಿತ್ರಗಳು, ಡ್ರಾಪ್ ಕ್ಯಾಪ್ಸ್, ಮುಂದಿನ ಮತ್ತು ಹಿಂದಿನ ಗುಂಡಿಗಳು, ಇಮೇಜ್ ಗ್ಯಾಲರಿಗಳು, ಇನ್ಲೈನ್ ​​ಪಟ್ಟಿಗಳು ಮತ್ತು ಬಹು-ಕಾಲಮ್ ವಿನ್ಯಾಸಗಳಂತಹ ತೇಲುವ ಅಂಶಗಳ ಮೂಲಗಳ ಮೂಲಕ ನಿಮ್ಮನ್ನು ಕರೆದೊಯ್ಯುತ್ತದೆ. ಇಮೇಜ್ ಫ್ಲೋಟಿಂಗ್‌ಗೆ ಮೀಸಲಾಗಿರುವ 4 ಟ್ಯುಟೋರಿಯಲ್ ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ.

ಫ್ಲೋಟ್ಯುಟೋರಿಯಲ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮೇಕ್-ಇಮೇಜ್-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

12.

ಸಿಎಸ್ಎಸ್ ಬಳಸಿ ಸ್ನ್ಯಾಜಿ ಹೋವರ್ ಪರಿಣಾಮಗಳು

ಈ ಟ್ಯುಟೋರಿಯಲ್ ನಲ್ಲಿ, ನೀವು CSS2.1 ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಹೊಂದಿಕೊಳ್ಳುವ ಸುಧಾರಿತ ಹೂವರ್ ತಂತ್ರಗಳನ್ನು ರಚಿಸುತ್ತೀರಿ.

ಸ್ನ್ಯಾಜಿ-ಹೂವರ್-ಎಫೆಕ್ಟ್-ಯೂಸಿಂಗ್-ಸಿಎಸ್ಎಸ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳನ್ನು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

13.

ಇಲ್ಲದೆ ವೇಗದ ರೋಲ್‌ಓವರ್‌ಗಳು

ಪೂರ್ವ ಲೋಡ್

ಸಿಎಸ್ಎಸ್ ಇಮೇಜ್ ರೋಲ್‌ಓವರ್‌ಗಳನ್ನು ಬಳಸುವಾಗ, ಎರಡು, ಮೂರು ಅಥವಾ ಹೆಚ್ಚಿನ ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡಬೇಕು (ಮತ್ತು ಉತ್ತಮ ಫಲಿತಾಂಶಗಳಿಗಾಗಿ ಇದನ್ನು ಮೊದಲೇ ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ). ಎಲ್ಲಾ ರಾಜ್ಯಗಳನ್ನು ಒಂದೇ ಚಿತ್ರಕ್ಕೆ ಹೇಗೆ ಸೇರಿಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ ಕ್ರಿಯಾತ್ಮಕ ಬದಲಾವಣೆಗಳನ್ನು ವೇಗವಾಗಿ ಮಾಡುತ್ತದೆ ಮತ್ತು ಯಾವುದೇ ಪೂರ್ವ ಲೋಡ್ ಅಗತ್ಯವಿಲ್ಲ.

ವೇಗದ-ರೋಲ್‌ಓವರ್‌ಗಳು-ಪೂರ್ವ-ಲೋಡ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮಾಡಿ-ಚಿತ್ರಗಳು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

14.

jQuery ದುಂಡಾದ ಮೂಲೆಗಳು

ದುಂಡಾದ ಮೂಲೆಗಳು ಮತ್ತು ಹೆಚ್ಚಿನ ಮಾದರಿಗಳಿಗಾಗಿ ಸಾಕಷ್ಟು jQuery ಪರಿಣಾಮಗಳು.

ದುಂಡಾದ-ಮೂಲೆಗಳು-jquery- ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆಗಳು-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮಾಡಿ-ಚಿತ್ರಗಳು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

15.

JQuery ಬಳಸಿ ಸುಲಭವಾದ ಟೂಲ್ಟಿಪ್ ಮತ್ತು ಇಮೇಜ್ ಪೂರ್ವವೀಕ್ಷಣೆ

JQuery ರೋಲ್‌ಓವರ್ ಪೂರ್ವವೀಕ್ಷಣೆ ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವ 3 ಉದಾಹರಣೆಗಳನ್ನು ನೋಡಿ. ಈ ಸರಳ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ವಿವಿಧ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಅನ್ವಯಿಸಬಹುದು.

ಸುಲಭ-ಟೂಲ್ಟಿಪ್-ಪೂರ್ವವೀಕ್ಷಣೆ-ಬಳಸುವುದು-jquery- ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆಗಳು-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳನ್ನು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

16.

ಸೂಪರ್‌ಸೈಜ್ಡ್ - ಪೂರ್ಣ ಪರದೆ ಹಿನ್ನೆಲೆ /

ಸ್ಲೈಡ್ಶೋ

jQuery ಪ್ಲಗಿನ್

ಸೂಪರ್‌ಜೈಡೆಡ್ ಎನ್ನುವುದು jQuery ಪ್ಲಗಿನ್ ಆಗಿದ್ದು, ಇಮೇಜ್ ಆಯಾಮ ಅನುಪಾತ ಮತ್ತು ಚಕ್ರಗಳನ್ನು ನಿರ್ವಹಿಸುವಾಗ ಬ್ರೌಸರ್ ಅನ್ನು ತುಂಬಲು ಚಿತ್ರಗಳನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಪೂರ್ವ ಲೋಡಿಂಗ್‌ನೊಂದಿಗೆ ಸ್ಲೈಡ್‌ಶೋ ಮೂಲಕ ಚಿತ್ರಗಳು / ಹಿನ್ನೆಲೆಗಳು.

ಸೂಪರ್‌ಸೈಜ್ಡ್-ಫುಲ್-ಸ್ಕ್ರೀನ್-ಹಿನ್ನೆಲೆ-ಸ್ಲೈಡ್‌ಶೋ-ಜುವೆರಿ-ಪ್ಲಗಿನ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳನ್ನು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

17.

ಪಿಎನ್‌ಜಿ ಓವರ್‌ಲೇ

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

Png- ಓವರ್‌ಲೇ-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮಾಡಿ-ಚಿತ್ರಗಳು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

18.

ಬೆ Z ೂಮ್

ಕಡಿಮೆ ತೂಕ

JQuery

O ೂಮ್ ಪ್ಲಗಿನ್

ಬೆ Z ೂಮ್ ಸರಳ ಮತ್ತು ಹಗುರವಾದ ಪರ್ಯಾಯವಾಗಿದೆ ಜೆಕ್ಯೂ Z ೂಮ್. ಇದು ಹಗುರವಾಗಿದೆ ಮತ್ತು ಅದನ್ನು ಬಳಸಲು ಸುಲಭವಾಗಿದೆ.

ಬೆ z ೂಮ್-ಹಗುರವಾದ-jquery- ಜೂಮ್-ಪ್ಲಗಿನ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳನ್ನು-ಎದ್ದು-ಹೊರಗುಳಿಯಿರಿ

19.

ಹಿನ್ನೆಲೆ ಚಿತ್ರ ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ jQuery ಅನ್ನು ಬಳಸುವುದು

ನೀವು ಹುಡುಕುತ್ತಿರುವ ಪರಿಣಾಮದ ಪ್ರಕಾರವನ್ನು ರಚಿಸಲು jQuery ನೊಂದಿಗೆ ಪ್ಲೇ ಮಾಡಿ ಮತ್ತು ಹಿನ್ನೆಲೆ ಚಿತ್ರದ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸಿ. "ಸಕ್ರಿಯ ರಾಜ್ಯಗಳನ್ನು ನಾನು ಹೇಗೆ ನಿಭಾಯಿಸುತ್ತೇನೆ?" ಎಂದು ಉತ್ತರಿಸುವ ಹೊಸ ಲೇಖನವಿದೆ. - JQuery ಅನಿಮೇಟೆಡ್ ಹಿನ್ನೆಲೆಗಳಿಗಾಗಿ ಸಕ್ರಿಯ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವುದು.

ಹಿನ್ನೆಲೆ-ಚಿತ್ರ-ಅನಿಮೇಷನ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿ-ತಯಾರಿಕೆ-ಚಿತ್ರಗಳು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

20.

ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಮಸಾಲೆಯುಕ್ತಗೊಳಿಸಲು 5 ಮಾರ್ಗಗಳು

ನಿಮ್ಮ ವಿಶಿಷ್ಟ ಬ್ಲಾಂಡ್ ಚಿತ್ರಗಳಿಗೆ ಸ್ವಲ್ಪ ಪರಿಮಳವನ್ನು ಸೇರಿಸಲು ಕೆಲವು ಸರಳ ತಂತ್ರಗಳು ಇಲ್ಲಿವೆ. ಪ್ರತಿ ಚಿತ್ರವನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಫೋಟೋಶಾಪ್ ಬಳಸುವುದು ಬೇಸರದ ಮತ್ತು ದೀರ್ಘಾವಧಿಯಲ್ಲಿ ನಿರ್ವಹಿಸಲು ಕಷ್ಟವಾಗುತ್ತದೆ. ಈ ಕೆಳಗಿನ ಸಿಎಸ್ಎಸ್ ತಂತ್ರಗಳು ಆ ನೋವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳನ್ನು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್ ಮಾಡುವ ಮಾರ್ಗಗಳು-ಮಸಾಲೆ-ಅಪ್

21.

ಹೇಗೆ:

ಮರುಗಾತ್ರಗೊಳಿಸಬಹುದಾಗಿದೆ

ಹಿನ್ನೆಲೆ ಚಿತ್ರ

ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಮರುಗಾತ್ರಗೊಳಿಸಬಹುದಾದ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಹೇಗೆ ಹೊಂದಿಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ. ನೀವು ಆಯ್ಕೆ ಮಾಡಲು 3 ಆಯ್ಕೆಗಳಿವೆ.

ಹೇಗೆ-ಮರುಗಾತ್ರಗೊಳಿಸಬಹುದಾದ-ಹಿನ್ನೆಲೆ-ಚಿತ್ರ-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮಾಡಿ-ಚಿತ್ರಗಳು-ಎದ್ದು-

22.

ನಿಮ್ಮ ಇಮೇಜ್ ಲಿಂಕ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ

ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ನಿರ್ದಿಷ್ಟ ವಿಭಾಗವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಬೇಕೆಂದು ಬಳಕೆದಾರರಿಗೆ ತಿಳಿಸುವುದರಿಂದ ಮೌಸ್ ಓವರ್ ಎಫೆಕ್ಟ್ ಮೂಲಕ ಉತ್ತಮವಾಗಿ ಸಾಧಿಸಬಹುದು. ಆ “ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದ” ವಿಭಾಗಗಳು ಖಂಡಿತವಾಗಿಯೂ ವಿಷಯ ಚಿತ್ರಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ಇಮೇಜ್ ಲಿಂಕ್ ಎನ್ನುವುದು ನಿಮ್ಮ ಇಮೇಜ್ ಲಿಂಕ್‌ಗಳಿಗೆ ಹೆಚ್ಚುವರಿ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುವ ಸ್ಕ್ರಿಪ್ಟ್ ಆಗಿದೆ.

ಶೈಲಿ-ನಿಮ್ಮ-ಇಮೇಜ್-ಲಿಂಕ್‌ಗಳು-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮಾಡಿ-ಚಿತ್ರಗಳು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

23.

ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಬಹು ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು

ಕೆಲವೊಮ್ಮೆ, ಪುಟವನ್ನು ನೇರವಾಗಿ ಪುಟಕ್ಕೆ ಸೇರಿಸುವುದಕ್ಕಿಂತ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಬಳಸುವುದು ಹೆಚ್ಚು ಅರ್ಥಪೂರ್ಣವಾಗಿದೆ. ಮತ್ತು ಪ್ರತಿ ಅಂಶವು - ನಿಮ್ಮ ಬಾಡಿ ಟ್ಯಾಗ್‌ನಂತೆ - ಕೇವಲ ಒಂದು ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಮಾತ್ರ ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳಬಹುದು, ಅವುಗಳನ್ನು ಹಲವಾರು ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು.

ಬಹು-ಹಿನ್ನೆಲೆ-ಚಿತ್ರಗಳು-ಸಿಎಸ್ಎಸ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮಾಡಿ-ಚಿತ್ರಗಳು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

24.

ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಚಿತ್ರ ಗಡಿಗಳು

ಸಿಎಸ್ಎಸ್ ಬಳಸಿ ಚಿತ್ರಗಳಿಗೆ ಘನ ಗಡಿಯನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುವ ನಿಜವಾಗಿಯೂ ಸುಲಭವಾದ ಟ್ಯುಟೋರಿಯಲ್.

ಚಿತ್ರ-ಗಡಿಗಳು-ಸಿಎಸ್ಎಸ್-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆ-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಮಾಡಿ-ಚಿತ್ರಗಳು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್

25.

ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಬಳಸದೆ ಸಿಎಸ್ಎಸ್ ಸ್ಪ್ರೈಟ್‌ಗಳು

ಸಿಎಸ್ಎಸ್ ಸ್ಪ್ರೈಟ್‌ಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಜ್ಞಾನವಿಲ್ಲದೆ ಹೂವರ್ ಪರಿಣಾಮವನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸಬೇಕು ಎಂದು ತಿಳಿಯಿರಿ.

ಸಿಎಸ್ಎಸ್-ಸ್ಪ್ರೈಟ್‌ಗಳು-ಬಳಸದೆ-ಹಿನ್ನೆಲೆ-ಚಿತ್ರಗಳು-ಇಮೇಜ್-ಸ್ಟೈಲಿಂಗ್-ಹಿನ್ನೆಲೆಗಳು-ನೋಟ-ಸ್ಫೂರ್ತಿ-ಆಡ್-ನೆರಳು-ಗಡಿಗಳು-ಚಿತ್ರಗಳು-ಸ್ಟ್ಯಾಂಡ್- out ಟ್


ನಿಮ್ಮ ಅಭಿಪ್ರಾಯವನ್ನು ಬಿಡಿ

ನಿಮ್ಮ ಈಮೇಲ್ ವಿಳಾಸ ಪ್ರಕಟವಾದ ಆಗುವುದಿಲ್ಲ. ಅಗತ್ಯವಿರುವ ಜಾಗ ಗುರುತಿಸಲಾಗಿದೆ *

*

*

  1. ಡೇಟಾಗೆ ಜವಾಬ್ದಾರಿ: ಮಿಗುಯೆಲ್ ಏಂಜೆಲ್ ಗಟಾನ್
  2. ಡೇಟಾದ ಉದ್ದೇಶ: ನಿಯಂತ್ರಣ SPAM, ಕಾಮೆಂಟ್ ನಿರ್ವಹಣೆ.
  3. ಕಾನೂನುಬದ್ಧತೆ: ನಿಮ್ಮ ಒಪ್ಪಿಗೆ
  4. ಡೇಟಾದ ಸಂವಹನ: ಕಾನೂನುಬದ್ಧ ಬಾಧ್ಯತೆಯನ್ನು ಹೊರತುಪಡಿಸಿ ಡೇಟಾವನ್ನು ಮೂರನೇ ವ್ಯಕ್ತಿಗಳಿಗೆ ಸಂವಹನ ಮಾಡಲಾಗುವುದಿಲ್ಲ.
  5. ಡೇಟಾ ಸಂಗ್ರಹಣೆ: ಆಕ್ಸೆಂಟಸ್ ನೆಟ್‌ವರ್ಕ್‌ಗಳು (ಇಯು) ಹೋಸ್ಟ್ ಮಾಡಿದ ಡೇಟಾಬೇಸ್
  6. ಹಕ್ಕುಗಳು: ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಮಾಹಿತಿಯನ್ನು ಮಿತಿಗೊಳಿಸಬಹುದು, ಮರುಪಡೆಯಬಹುದು ಮತ್ತು ಅಳಿಸಬಹುದು.