ವೆಬ್ಪುಟದ ಎಲಿಮೆಂಟ್ಸ್ ಅನ್ನು CSS3 ನೊಂದಿಗೆ ಫೇಡ್ ಮಾಡಿ ಮತ್ತು ಔಟ್ ಮಾಡಿ

CSS3 ಪರಿವರ್ತನೆಗಳು ನೈಸ್ ಫೇಡ್ ಪರಿಣಾಮಗಳು ರಚಿಸಿ

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

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

ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಲ್ಲಿನ ವಿವಿಧ ಅಂಶಗಳನ್ನು ಈ ಸಂವಾದಾತ್ಮಕ ದೃಶ್ಯ ಪರಿಣಾಮವನ್ನು ಸೇರಿಸುವುದು ಎಷ್ಟು ಸುಲಭ ಎಂದು ನೋಡೋಣ.

ಹೋವರ್ನಲ್ಲಿನ ಅಪಾರದರ್ಶಕತೆ ಬದಲಾಯಿಸೋಣ

ಗ್ರಾಹಕರು ಆ ಅಂಶವನ್ನು ತೂಗಾಡುತ್ತಿರುವಾಗ ಚಿತ್ರದ ಅಪಾರದರ್ಶಕತೆ ಅನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುವುದು ಎಂಬುದನ್ನು ನಾವು ನೋಡೋಣ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ (HTML ಕೆಳಗೆ ತೋರಿಸಲಾಗಿದೆ) ನಾನು ಗ್ರೇಡೌಟ್ನ ವರ್ಗ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಚಿತ್ರವನ್ನು ಬಳಸುತ್ತಿದ್ದೇನೆ.

ಇದು ಔಟ್ ಬೂದು ಮಾಡಲು, ನಾವು ನಮ್ಮ ಸಿಎಸ್ಎಸ್ ಸ್ಟೈಲ್ಶೀಟ್ ಕೆಳಗಿನ ಶೈಲಿಯ ನಿಯಮಗಳನ್ನು ಸೇರಿಸಿ:

. ಗ್ರೆಡಿಡೌಟ್ {
-ವೆಬ್ಕಿಟ್-ಅಪಾರದರ್ಶಕತೆ: 0.25;
-moz- ಅಪಾರದರ್ಶಕತೆ: 0.25;
ಅಪಾರದರ್ಶಕತೆ: 0.25;
}

ಈ ಅಪಾರದರ್ಶಕತೆ ಸೆಟ್ಟಿಂಗ್ಗಳು 25% ಗೆ ಭಾಷಾಂತರಿಸುತ್ತವೆ. ಅದರ ಅರ್ಥ ಇದರ ಇಮೇಜ್ ಅನ್ನು ಅದರ ಸಾಮಾನ್ಯ ಪಾರದರ್ಶಕತೆಯ 1/4 ಎಂದು ತೋರಿಸಲಾಗುತ್ತದೆ. ಯಾವುದೇ ಪಾರದರ್ಶಕತೆ ಇಲ್ಲದಿರುವ ಸಂಪೂರ್ಣ ಅಪಾರದರ್ಶಕತೆಯು 100% ಮತ್ತು 0% ಸಂಪೂರ್ಣವಾಗಿ ಪಾರದರ್ಶಕವಾಗಿರುತ್ತದೆ.

ಮುಂದೆ, ಚಿತ್ರವು ಅದರ ಮೇಲೆ ಇಳಿಸಿದಾಗ ಚಿತ್ರವು ಸ್ಪಷ್ಟವಾದ (ಅಥವಾ ಹೆಚ್ಚು ನಿಖರವಾಗಿ, ಸಂಪೂರ್ಣವಾಗಿ ಅಪಾರದರ್ಶಕವಾಗಿರಲು) ಸ್ಪಷ್ಟವಾಗುವಂತೆ ಮಾಡಲು, ನೀವು ಹೀಗೆ ಸೇರಿಸುತ್ತೀರಿ: ಹೂವರ್ ಹುಸಿ ವರ್ಗ:

.ಗ್ರಿಡಿಔಟ್: ಹೋವರ್ {
-ವೆಬ್ಕಿಟ್-ಅಪಾರದರ್ಶಕತೆ: 1;
-moz- ಅಪಾರದರ್ಶಕತೆ: 1;
ಅಪಾರದರ್ಶಕತೆ: 1;
}

ಈ ಉದಾಹರಣೆಗಳಿಗಾಗಿ, ನಾನು ಆ ಬ್ರೌಸರ್ಗಳ ಹಳೆಯ ಆವೃತ್ತಿಗಳಿಗೆ ಹಿಂದುಳಿದ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಯಮದ ಪೂರ್ವವರ್ತಿ ಆವೃತ್ತಿಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದೇನೆ ಎಂದು ನೀವು ಗಮನಿಸಬಹುದು. ಇದು ಒಳ್ಳೆಯ ಅಭ್ಯಾಸವಾಗಿದ್ದರೂ, ಅಪಾರದರ್ಶಕತೆ ನಿಯಮವು ಈಗ ಬ್ರೌಸರ್ಗಳಿಂದ ಬೆಂಬಲಿತವಾಗಿದೆ ಮತ್ತು ಅದು ಆ ಮಾರಾಟಗಾರರ ಆದ್ಯತೆಯ ಸಾಲುಗಳನ್ನು ಬಿಡಲು ಸಾಕಷ್ಟು ಸುರಕ್ಷಿತವಾಗಿದೆ. ಇನ್ನೂ, ನೀವು ಹಳೆಯ ಬ್ರೌಸರ್ ಆವೃತ್ತಿಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಬಯಸಿದರೆ ಈ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಸೇರಿಸದಿರಲು ಯಾವುದೇ ಕಾರಣವೂ ಇಲ್ಲ. ಕೇವಲ ಸಾಮಾನ್ಯ, ಅನ್-ಪೂರ್ವಪ್ರತ್ಯಯದ ಶೈಲಿಯೊಂದಿಗೆ ಘೋಷಣೆಯನ್ನು ಅಂತ್ಯಗೊಳಿಸುವ ಸ್ವೀಕೃತವಾದ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸವನ್ನು ಅನುಸರಿಸುವುದು ಖಚಿತವಾಗಿರಲಿ.

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

ನಿಜವಾಗಿಯೂ ಒಳ್ಳೆಯ ಪರಿಣಾಮವನ್ನು ಸೇರಿಸಲು ಮತ್ತು ಈ ಫೇಡ್ ಕ್ರಮೇಣವಾಗಿ ಮಾಡಲು, ನೀವು ಪರಿವರ್ತನೆ ಆಸ್ತಿ ಅನ್ನು .greydout ವರ್ಗಕ್ಕೆ ಸೇರಿಸಲು ಬಯಸುತ್ತೀರಿ:

. ಗ್ರೆಡಿಡೌಟ್ {
-ವೆಬ್ಕಿಟ್-ಅಪಾರದರ್ಶಕತೆ: 0.25;
-moz- ಅಪಾರದರ್ಶಕತೆ: 0.25;
ಅಪಾರದರ್ಶಕತೆ: 0.25;
-ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲ 3 ಗಳು ಸುಲಭವಾಗಿ;
-ಮೊಝ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲ 3 ಗಳಲ್ಲಿಯೂ ಸುಲಭವಾಗಿ;
-ms- ಪರಿವರ್ತನೆಯನ್ನು: ಎಲ್ಲಾ 3 ಗಳಲ್ಲಿಯೂ ಸುಲಭವಾಗಿ;
-ಆನ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲ 3 ಗಳು ಸುಲಭವಾಗಿ;
ಪರಿವರ್ತನೆಯನ್ನು: ಎಲ್ಲಾ 3 ಸೆ ಸುಲಭವಾಗಿ;
}

ಈ ಕೋಡ್ನೊಂದಿಗೆ, ಬದಲಾವಣೆಯು ಹಠಾತ್ತನೆ ಬದಲಿಸುವ ಬದಲು ಕ್ರಮೇಣ ಪರಿವರ್ತನೆಯಾಗುತ್ತದೆ.

ಮತ್ತೊಮ್ಮೆ, ನಾವು ಇಲ್ಲಿ ಹಲವಾರು ಮಾರಾಟಗಾರರ ಪೂರ್ವನಿರೂಪಿತ ನಿಯಮಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದೇವೆ. ಪರಿವರ್ತನೆ ಅಪಾರದರ್ಶಕತೆಯಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ಈ ಪೂರ್ವಪ್ರತ್ಯಯಗಳು ಅರ್ಥಪೂರ್ಣವಾಗುತ್ತವೆ.

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

ಕಳೆಗುಂದುವುದು ಔಟ್ ಟೂ ಸಾಧ್ಯವಿದೆ

ನೀವು ಮರೆಯಾಗದ ಚಿತ್ರದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಬೇಕಾಗಿಲ್ಲ, ನೀವು ಸಂಪೂರ್ಣ ಅಪಾರದರ್ಶಕ ಚಿತ್ರದಿಂದ ಮಸುಕಾಗಲು ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಅಪಾರದರ್ಶಕತೆಗಳನ್ನು ಬಳಸಬಹುದು. ಅದೇ ಚಿತ್ರವನ್ನು ಬಳಸುವುದರೊಂದಿಗೆ, ಫೇಡ್ಔಟ್ನ ವರ್ಗದೊಂದಿಗೆ ಮಾತ್ರ:

class = "withfadeout">

ಮುಂಚಿನಂತೆ, ನೀವು ಅಪಾರದರ್ಶಕವನ್ನು ಬಳಸಿ: ಹೂವರ್ ಸೆಲೆಕ್ಟರ್:

.withfadeout {
-ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲ 2 ಗಳು ಸುಲಭವಾಗಿ ಔಟ್ ಆಗುತ್ತವೆ;
-ಮೊಝ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲಾ 2 ಸೆಗಳು ಸುಲಭವಾಗಿ ಔಟ್ ಆಗುತ್ತವೆ;
-ms- ಪರಿವರ್ತನೆಯನ್ನು: ಎಲ್ಲ 2 ಗಳು ಸುಲಭವಾಗಿ ಔಟ್ ಆಗುತ್ತವೆ;
-ಆನ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲ 2 ಗಳು ಸುಲಭವಾಗಿ ಔಟ್ ಆಗುತ್ತವೆ;
ಪರಿವರ್ತನೆಯನ್ನು: ಎಲ್ಲಾ 2 ಸೆ ಸುಲಭವಾದ ಔಟ್;
}
.withfadeout: ಹೋವರ್ {
-ವೆಬ್ಕಿಟ್-ಅಪಾರದರ್ಶಕತೆ: 0.25;
-moz- ಅಪಾರದರ್ಶಕತೆ: 0.25;
ಅಪಾರದರ್ಶಕತೆ: 0.25;
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಚಿತ್ರ ಸಂಪೂರ್ಣವಾಗಿ ಅಪಾರದರ್ಶಕದಿಂದ ಸ್ವಲ್ಪ ಪಾರದರ್ಶಕವಾಗಿ ಪರಿವರ್ತನೆಯಾಗುತ್ತದೆ - ನಮ್ಮ ಮೊದಲ ಉದಾಹರಣೆಯ ಹಿಮ್ಮುಖವಾಗಿದೆ.

ಚಿತ್ರಗಳು ಬಿಯಾಂಡ್ ಹೋಗಿ

ನೀವು ಈ ದೃಶ್ಯ ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಮಂಕಾಗುವಿಕೆಗಳನ್ನು ಚಿತ್ರಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು ಎಂದು ಅತ್ಯುತ್ತಮವಾಗಿದೆ, ಆದರೆ ನೀವು ಈ ಸಿಎಸ್ಎಸ್ ಪರಿಣಾಮಗಳೊಂದಿಗೆ ಚಿತ್ರಗಳನ್ನು ಬಳಸುವುದನ್ನು ಸೀಮಿತವಾಗಿಲ್ಲ. ಕ್ಲಿಕ್ ಮಾಡಿದ ಮತ್ತು ನಡೆಯುವಾಗ ನೀವು ಮಸುಕಾಗುವ ಸಿಎಸ್ಎಸ್-ಶೈಲಿಯ ಗುಂಡಿಗಳನ್ನು ಸುಲಭವಾಗಿ ಮಾಡಬಹುದು. ನೀವು ಅಪಾರದರ್ಶಕವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು: ಕ್ರಿಯಾಶೀಲ ಸೂಡೊ-ಕ್ಲಾಸ್ ಮತ್ತು ಗುಂಡಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ವರ್ಗದ ಮೇಲೆ ಪರಿವರ್ತನೆ ಇರಿಸಿ. ಏನಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಲು ಈ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಹಿಡಿದುಕೊಳ್ಳಿ.

ಮೂಲಭೂತವಾಗಿ ಯಾವುದೇ ದೃಷ್ಟಿಗೋಚರ ಅಂಶವು ಮೇಲಿದ್ದು ಅಥವಾ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಫೇಡ್ ಮಾಡಲು ಸಾಧ್ಯವಿದೆ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ನಾನು ಮೌಸ್ ಅಪಾರವಾದಾಗ DIV ನ ಅಪಾರದರ್ಶಕತೆ ಮತ್ತು ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುತ್ತೇನೆ. ಇಲ್ಲಿ ಸಿಎಸ್ಎಸ್:

#myDiv {
ಅಗಲ: 280px;
ಹಿನ್ನೆಲೆ ಬಣ್ಣ: # 557A47;
ಬಣ್ಣ: #dfdfdf;
ಪ್ಯಾಡಿಂಗ್: 10 px;
-ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲಾ 4 ಗಳು ಸುಲಭವಾಗಿ-ಔಟ್ 0 ಸೆ;
-moz- ಪರಿವರ್ತನೆಯನ್ನು: 4s ಎಲ್ಲಾ-ಔಟ್ 0 ಸೆ;
-ms- ಪರಿವರ್ತನೆಯನ್ನು: 4s ಎಲ್ಲಾ-ಔಟ್ 0 ಸೆ;
-ಆನ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲ 4 ಗಳು ಸುಲಭವಾಗಿ ಔಟ್ 0 ಸೆ;
ಪರಿವರ್ತನೆಯನ್ನು: ಎಲ್ಲಾ 4 ಸೆ ಸುಲಭವಾಗಿ ಔಟ್ 0 ಸೆ;
}
#myDiv: ಹೋವರ್ {
-ವೆಬ್ಕಿಟ್-ಅಪಾರದರ್ಶಕತೆ: 0.25;
-moz- ಅಪಾರದರ್ಶಕತೆ: 0.25;
ಅಪಾರದರ್ಶಕತೆ: 0.25;
ಬಣ್ಣ: # 000;
}

ನ್ಯಾವಿಗೇಶನ್ ಮೆನುಗಳು ಮರೆಯಾಗುತ್ತಿರುವ ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳಿಂದ ಲಾಭವಾಗಬಹುದು

ಈ ಸರಳ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವಿನಲ್ಲಿ ಮೆನು ಐಟಂಗಳ ಮೇಲೆ ಮೌಸ್ನಂತೆ ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಮಂಕಾಗುವಿಕೆಗಳು ನಿಧಾನವಾಗಿ ಮತ್ತು ಹೊರಗೆ ನಿಂತಿದೆ. HTML ಇಲ್ಲಿದೆ:

• • ಮುಖಪುಟ
  • • CSS3 ಬೋಧನೆಗಳು
    • • CSS3 ಗುಣಲಕ್ಷಣಗಳು

ಮತ್ತು ಇಲ್ಲಿ ಸಿಎಸ್ಎಸ್ ಆಗಿದೆ:

ಉಲ್ # ಸ್ಯಾಂಪಲ್ನೇವ್ {list-style: none; }
ಉಲ್ # ಸ್ಯಾಂಪಲ್ನಾವ್ ಲಿ {
ಪ್ರದರ್ಶಿಸು: ಇನ್ಲೈನ್;
ಫ್ಲೋಟ್: ಎಡ;
ಪ್ಯಾಡಿಂಗ್: 5 ಪಿಎಕ್ಸ್ 15 ಪಿಎಕ್ಸ್;
ಅಂಚು: 0 5px;
-ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲಾ 2 ಸೆ ರೇಖೀಯ;
-moz- ಪರಿವರ್ತನೆ: ಎಲ್ಲಾ 2 ಸೆ ರೇಖೀಯ;
-ms- ಪರಿವರ್ತನೆ: ಎಲ್ಲಾ 2 ಸೆ ರೇಖೀಯ;
-ಓ-ಪರಿವರ್ತನೆ: ಎಲ್ಲಾ 2 ಸೆ ರೇಖೀಯ;
ಪರಿವರ್ತನೆ: ಎಲ್ಲಾ 2 ಸೆ ರೇಖೀಯ;
}
ಉಲ್ # ಸ್ಯಾಂಪಲ್ನಾವು {text-decoration: none; }
ಉಲ್ # ಸ್ಯಾಂಪಲ್ ನೇವ್ ಲಿ: ಹೋವರ್ {
ಹಿನ್ನೆಲೆ ಬಣ್ಣ: # DAF197;
}

ಬ್ರೌಸರ್ ಬೆಂಬಲ

ನಾನು ಕೆಲವು ಬಾರಿ ಈಗಾಗಲೇ ಮುಟ್ಟಿದ್ದೇನೆ, ಈ ಶೈಲಿಗಳು ಉತ್ತಮ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ, ಆದ್ದರಿಂದ ನೀವು ಯಾವುದೇ ಟ್ರೆಡಿಡೇಷನ್ ಇಲ್ಲದೆ ಅವುಗಳನ್ನು ಬಳಸಲು ಮುಕ್ತವಾಗಿರಿ. ಇದಕ್ಕೆ ಮಾತ್ರ ವಿನಾಯಿತಿ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ನ ಹಳೆಯ ಆವೃತ್ತಿಗಳು, ಆದರೆ 11 ಕ್ಕಿಂತ ಕಡಿಮೆ ಐಇದ ಎಲ್ಲಾ ಆವೃತ್ತಿಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಕೊನೆಗೊಳಿಸಲು ಮೈಕ್ರೋಸಾಫ್ಟ್ನ ಇತ್ತೀಚಿನ ತೀರ್ಮಾನದೊಂದಿಗೆ, ಈ ಹಳೆಯ ಬ್ರೌಸರ್ಗಳು ಕಡಿಮೆ ಮತ್ತು ಕಡಿಮೆ ಸಮಸ್ಯೆಯನ್ನು ಗಳಿಸುತ್ತಿವೆ - ಮತ್ತು ವಾಸ್ತವಿಕವಾಗಿ, ಹಳೆಯ ಬ್ರೌಸರ್ ಇದ್ದಲ್ಲಿ ಈ ಫೇಡ್ ಸ್ಥಿತ್ಯಂತರವನ್ನು ನೋಡಿ, ಇದು ಒಂದು ಪ್ರಮುಖ ಸಮಸ್ಯೆಯಾಗಿರಬಾರದು. ಈ ರೀತಿಯ ಪರಿಣಾಮಗಳನ್ನು ನೀವು ಆನಂದಿಸಬಹುದಾದ ಸಂವಹನಗಳಿಗೆ ಸೀಮಿತಗೊಳಿಸುವವರೆಗೆ ಮತ್ತು ಕಾರ್ಯವನ್ನು ಚಾಲನೆ ಮಾಡಲು ಅಥವಾ ಕೀ ವಿಷಯವನ್ನು ಬಹಿರಂಗಪಡಿಸಲು ಅವುಗಳನ್ನು ಅವಲಂಬಿಸಿಲ್ಲ, ನಂತರ ಪರಿಣಾಮಗಳನ್ನು ಬೆಂಬಲಿಸದ ಹಳೆಯ ಬ್ರೌಸರ್ಗಳು ಕಡಿಮೆ ಆಹ್ಲಾದಿಸಬಹುದಾದ ಅನುಭವವನ್ನು ಪಡೆಯುತ್ತವೆ, ಆದರೆ ಆ ಬ್ರೌಸರ್ಗಳಲ್ಲಿನ ಬಳಕೆದಾರರು ಸಹ ವ್ಯತ್ಯಾಸವನ್ನು ತಿಳಿಯಿರಿ, ವಿಶೇಷವಾಗಿ ಅವರು ಸೈಟ್ ಅನ್ನು ಸಾಮಾನ್ಯವೆಂದು ಬಳಸಿಕೊಳ್ಳಬಹುದು ಮತ್ತು ಅಗತ್ಯವಿರುವ ಮಾಹಿತಿಯನ್ನು ಪಡೆದುಕೊಳ್ಳಬಹುದು.

ಹೆಚ್ಚುವರಿ ವಿನೋದ; ಎರಡು ಚಿತ್ರಗಳನ್ನು ಸ್ವಾಪ್ ಮಾಡಿ

ಒಂದು ಚಿತ್ರವನ್ನು ಮತ್ತೊಂದು ಚಿತ್ರಕ್ಕೆ ಹೇಗೆ ಮಾಯಿಸುವುದು ಎಂಬುದರ ಒಂದು ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ. HTML ಅನ್ನು ಬಳಸಿ:

ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಒಂದು ಸಂಪೂರ್ಣವಾಗಿ ಪಾರದರ್ಶಕವಾಗಿರುತ್ತದೆ ಆದರೆ ಇತರ ಸಂಪೂರ್ಣವಾಗಿ ಅಪಾರದರ್ಶಕ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಂತರ ಪರಿವರ್ತನೆ ಎರಡು ವಿನಿಮಯ ಮಾಡುತ್ತದೆ ಸಿಎಸ್ಎಸ್:

.swapMe img {-webkit- ಪರಿವರ್ತನೆ: ಎಲ್ಲಾ 1 ಸೆ ಸುಲಭವಾಗಿ ಹೊರಗುಳಿಯುವುದು; -ಮೊಝ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲಾ 1 ಸೆ ಈಸ್-ಇನ್-ಔಟ್; -ms- ಪರಿವರ್ತನೆಯನ್ನು: ಎಲ್ಲ 1 ಗಳು ಸುಲಭವಾಗಿ ಔಟ್ ಆಗುತ್ತವೆ; -ಆನ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲ 1 ಗಳು ಸುಲಭವಾಗಿ ಔಟ್ ಆಗುತ್ತವೆ; ಪರಿವರ್ತನೆಯನ್ನು: ಎಲ್ಲಾ 1 ಸೆ ಸುಲಭಗೊಳಿಸು; } .swap1, .swapMe: ಹೋವರ್ .swap2 {-webkit-opacity: 1; -moz- ಅಪಾರದರ್ಶಕತೆ: 1; ಅಪಾರದರ್ಶಕತೆ: 1; } .swapMe: ಹೋವರ್ .swap1, .swap2 {-webkit-opacity: 0; -moz- ಅಪಾರದರ್ಶಕತೆ: 0; ಅಪಾರದರ್ಶಕತೆ: 0; }