01 ನ 04
CSS3 ನೊಂದಿಗೆ ಕ್ರಾಸ್ ಬ್ರೌಸರ್ ಲೀನಿಯರ್ ಗ್ರೇಡಿಯೆಂಟ್ಗಳನ್ನು ರಚಿಸಲಾಗುತ್ತಿದೆ
ಲೀನಿಯರ್ ಗ್ರೇಡಿಯೆಂಟ್ಗಳು
ನೀವು ಕಾಣುವ ಸಾಮಾನ್ಯ ವಿಧದ ಗ್ರೇಡಿಯಂಟ್ ಎರಡು ಬಣ್ಣಗಳ ರೇಖೀಯ ಗ್ರೇಡಿಯಂಟ್ ಆಗಿದೆ. ಇದರರ್ಥ ಗ್ರೇಡಿಯಂಟ್ ನೇರ ರೇಖೆಯಲ್ಲಿ ಚಲಿಸುವ ಕ್ರಮೇಣ ಕ್ರಮೇಣ ಮೊದಲ ಬಣ್ಣದಿಂದ ಎರಡನೆಯವರೆಗೂ ಬದಲಾಗುತ್ತದೆ. ಈ ಪುಟದಲ್ಲಿನ ಚಿತ್ರವು # 999 (ಗಾಢ ಬೂದು) ನ ಸರಳ ಎಡದಿಂದ ಬಲಕ್ಕೆ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು #fff (ಬಿಳಿ) ಗೆ ತೋರಿಸುತ್ತದೆ.
ಲೀನಿಯರ್ ಇಳಿಜಾರುಗಳು ವ್ಯಾಖ್ಯಾನಿಸಲು ಸುಲಭ, ಮತ್ತು ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಹೆಚ್ಚಿನ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ. ಆಂಡ್ರಾಯ್ಡ್ 2.3+, ಕ್ರೋಮ್ 1+, ಫೈರ್ಫಾಕ್ಸ್ 3.6 +, ಒಪೇರಾ 11.1+ ಮತ್ತು ಸಫಾರಿ 4+ ನಲ್ಲಿ CSS3 ರೇಖಾತ್ಮಕ ಇಳಿಜಾರುಗಳನ್ನು ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ. ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ ಫಿಲ್ಟರ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಇಳಿಜಾರುಗಳನ್ನು ಸೇರಿಸಬಹುದು ಮತ್ತು ಅವುಗಳನ್ನು ಐಇ 5.5 ಗೆ ಮತ್ತೆ ಬೆಂಬಲಿಸುತ್ತದೆ. ಇದು CSS3 ಅಲ್ಲ, ಆದರೆ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಗೆ ಇದು ಒಂದು ಆಯ್ಕೆಯಾಗಿದೆ.
ನೀವು ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದಾಗ ನೀವು ಹಲವಾರು ವಿಭಿನ್ನ ವಿಷಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕಾಗಿದೆ:
- ಇದು ಯಾವ ರೀತಿಯ ಗ್ರೇಡಿಯಂಟ್-ರೇಖಾತ್ಮಕ ಅಥವಾ ರೇಡಿಯಲ್
- ಗ್ರೇಡಿಯಂಟ್ ಎಲ್ಲಿ ಪ್ರಾರಂಭಿಸಬೇಕು
- ಗ್ರೇಡಿಯಂಟ್ ನಿಲ್ಲಿಸಬೇಕಾದರೆ
- ಯಾವ ಬಣ್ಣಗಳು ಗ್ರೇಡಿಯಂಟ್ನಲ್ಲಿವೆ ಮತ್ತು ಎಲ್ಲಿ ಅವರು ಪ್ರಾರಂಭಿಸಬೇಕು ಮತ್ತು ನಿಲ್ಲಿಸಬೇಕು
CSS3 ಬಳಸಿ ರೇಖೀಯ ಇಳಿಜಾರುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು, ನೀವು ಬರೆಯಿರಿ:
ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ ( ಕೋನ ಅಥವಾ ಅಡ್ಡ ಅಥವಾ ಮೂಲೆಯಲ್ಲಿ , ಬಣ್ಣದ ನಿಲುಗಡೆ , ಬಣ್ಣ ನಿಲುಗಡೆ )
- ಮೊದಲು ನೀವು ಹೆಸರಿನ ರೇಖಾತ್ಮಕ- ಗ್ರೇಡಿಯಾಂಟ್ನ ಗ್ರೇಡಿಯಂಟ್ನ ಪ್ರಕಾರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ.
- ನಂತರ, ನೀವು ಆರಂಭದ ವ್ಯಾಖ್ಯಾನವನ್ನು ಮತ್ತು ಎರಡು ಹಂತಗಳಲ್ಲಿ ಒಂದು ಗ್ರೇಡಿಯಂಟ್ ಅಂಕಗಳನ್ನು ನಿಲ್ಲಿಸಿ: 0 ರಿಂದ 359 ವರೆಗೆ ಡಿಗ್ರಿಯಲ್ಲಿನ ಕೋನವು 0 ಡಿಗ್ರಿಗಳಷ್ಟು ನೇರವಾಗಿರುತ್ತದೆ. ಅಥವಾ ಎಡ, ಬಲ, ಕೆಳಗೆ, ಮತ್ತು ಮೇಲಿರುವಂತಹ "ಅಡ್ಡ ಅಥವಾ ಮೂಲೆ" ಕಾರ್ಯದೊಂದಿಗೆ. ಮುಂದಿನ ಪುಟದಲ್ಲಿ ಇವುಗಳನ್ನು ಹೆಚ್ಚು ವಿವರವಾಗಿ ವಿವರಿಸಲಾಗುತ್ತದೆ. ನೀವು ಇದನ್ನು ಹೊರಬಿಟ್ಟರೆ, ಗ್ರೇಡಿಯಂಟ್ ಮೇಲ್ಭಾಗದಿಂದ ಅಂಶದ ಕೆಳಭಾಗಕ್ಕೆ ಹರಿಯುತ್ತದೆ.
- ನಂತರ ನೀವು ಬಣ್ಣವನ್ನು ನಿಲ್ಲಿಸಿ. ಬಣ್ಣದ ಕೋಡ್ ಮತ್ತು ಐಚ್ಛಿಕ ಶೇಕಡಾವಾರು ಬಣ್ಣವನ್ನು ನಿಲ್ಲಿಸಿ ನೀವು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ. ಶೇಕಡಾವಾರು ಆ ಬಣ್ಣದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲು ಅಥವಾ ಕೊನೆಗೊಳ್ಳುವ ಬ್ರೌಸರ್ನಲ್ಲಿ ಹೇಳುತ್ತದೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಬಣ್ಣವನ್ನು ಬಣ್ಣದಲ್ಲಿ ಇರಿಸಿ. ಪುಟ 3 ರಲ್ಲಿ ಬಣ್ಣದ ನಿಲುಗಡೆಗಳ ಬಗ್ಗೆ ನೀವು ಇನ್ನಷ್ಟು ತಿಳಿದುಕೊಳ್ಳುತ್ತೀರಿ.
ಆದ್ದರಿಂದ, CSS3 ನೊಂದಿಗೆ ಮೇಲಿನ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು, ನೀವು ಬರೆಯಿರಿ:
ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, # 999999 0%, #ffffff 100%);
ಮತ್ತು ಡಿಐವಿನ ಹಿನ್ನೆಲೆಯಂತೆ ನೀವು ಹೊಂದಿಸಲು ನೀವು ಬರೆಯಿರಿ:
div {
ಹಿನ್ನೆಲೆ-ಚಿತ್ರ: ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, # 999999 0%, #ffffff 100%;
}
CSS3 ಲೀನಿಯರ್ ಗ್ರೇಡಿಯೆಂಟ್ಗಳಿಗಾಗಿ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗಳು
ಕ್ರಾಸ್ ಬ್ರೌಸರ್ ಕೆಲಸ ಮಾಡಲು ನಿಮ್ಮ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ಪಡೆಯಲು, ನೀವು ಹೆಚ್ಚಿನ ಬ್ರೌಸರ್ಗಳಿಗೆ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗಳನ್ನು ಮತ್ತು ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 9 ಮತ್ತು ಕಡಿಮೆ (ನಿಜವಾಗಿ 2 ಶೋಧಕಗಳು) ಫಿಲ್ಟರ್ ಅನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ. ಇವುಗಳೆಲ್ಲವೂ ನಿಮ್ಮ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಅದೇ ಅಂಶಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ (ಹೊರತುಪಡಿಸಿ ನೀವು ಐಇನಲ್ಲಿ 2-ಬಣ್ಣದ ಇಳಿಜಾರುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು).
ಮೈಕ್ರೋಸಾಫ್ಟ್ ಫಿಲ್ಟರ್ಗಳು ಮತ್ತು ವಿಸ್ತರಣೆ -ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ ಬೆಂಬಲಿಸಲು ಹೆಚ್ಚು ಸವಾಲಿನದಾಗಿದೆ, ಏಕೆಂದರೆ ನೀವು ವಿಭಿನ್ನ ಬ್ರೌಸರ್ ಆವೃತ್ತಿಗಳನ್ನು ಬೆಂಬಲಿಸಲು ಮೂರು ವಿಭಿನ್ನ ಮಾರ್ಗಗಳ ಅಗತ್ಯವಿದೆ. ಮೇಲೆ ಬೂದು ಬಿಳಿ ಗ್ರೇಡಿಯಂಟ್ ಪಡೆಯಲು ನೀವು ಬರೆಯಬಹುದು:
/ * ಐಇ 5.5-7 * /
ಫಿಲ್ಟರ್: ಪ್ರೊಜಿಡ್: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', ಗ್ರೇಡಿಯಂಟ್ಟೈಪ್ = 1);
/ * ಐಇ 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', ಗ್ರೇಡಿಯಂಟ್ಟೈಪ್ = 1)";
/ * ಐಇ 10 * /
-ms- ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, # 999999 0%, #ffffff 100%);
Mozilla Extension -Themoz- ವಿಸ್ತರಣೆ CSS3-ಆಸ್ತಿಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಕೇವಲ -moz- ವಿಸ್ತರಣೆಯೊಂದಿಗೆ. ಫೈರ್ಫಾಕ್ಸ್ಗೆ ಮೇಲಿನ ಗ್ರೇಡಿಯಂಟ್ ಪಡೆಯಲು, ಬರೆಯಲು:
-moz- ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, # 999999 0%, #ffffff 100%);
ಒಪೆರಾ ವಿಸ್ತರಣೆ -ಒಂದು ವಿಸ್ತರಣೆಯು ಒಪೇರಾ 11.1+ ಗೆ ಇಳಿಜಾರುಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ. ಮೇಲಿನ ಗ್ರೇಡಿಯಂಟ್ ಪಡೆಯಲು, ಬರೆಯಿರಿ:
-ಒ-ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, # 999999 0%, #ffffff 100%);
ವೆಬ್ಕಿಟ್ ವಿಸ್ತರಣೆ -ವೆಬ್ಕಿಟ್- ವಿಸ್ತರಣೆ CSS3 ಆಸ್ತಿಯಂತೆ ಬಹಳಷ್ಟು ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಸಫಾರಿ 5.1+ ಅಥವಾ ಕ್ರೋಮ್ 10+ ಗಾಗಿ ಮೇಲಿನ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನೀವು ಬರೆಯುತ್ತೀರಿ:
-ವೆಬ್ಕಿಟ್-ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, # 999999 0%, #ffffff 100%);
Chrome 2+ ಮತ್ತು Safari 4+ ನೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ವೆಬ್ಕಿಟ್ ವಿಸ್ತರಣೆಯ ಹಳೆಯ ಆವೃತ್ತಿ ಕೂಡ ಇದೆ. ಇದರಲ್ಲಿ ನೀವು ಆಸ್ತಿ ಹೆಸರಿನ ಬದಲಾಗಿ ಗ್ರೇಡಿಯಂಟ್ನ ಮೌಲ್ಯವನ್ನು ಮೌಲ್ಯವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ಈ ವಿಸ್ತರಣೆಯೊಂದಿಗೆ ಬೂದು ಬಣ್ಣದ ಗ್ರೇಡಿಯಂಟ್ ಪಡೆಯಲು, ಬರೆಯಿರಿ:
-ವೆಬ್ಕಿಟ್-ಗ್ರೇಡಿಯಂಟ್ (ರೇಖೀಯ, ಎಡ ಮೇಲಿನ, ಬಲ ಮೇಲ್ಭಾಗ, ಬಣ್ಣ-ನಿಲುಗಡೆ (0%, # 999999), ಬಣ್ಣ-ನಿಲುಗಡೆ (100%, # ffffff));
ಪೂರ್ಣ CSS3 ಲೀನಿಯರ್ ಗ್ರೇಡಿಯಂಟ್ ಸಿಎಸ್ಎಸ್ ಕೋಡ್
ನಿಮ್ಮ ಮೇಲೆ ಬಿಳಿ ಗ್ರೇಡಿಯಂಟ್ ಗೆ ಬೂದು ಬಣ್ಣವನ್ನು ಪಡೆಯಲು ಸಂಪೂರ್ಣ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಬೆಂಬಲಕ್ಕಾಗಿ ಇಳಿಜಾರುಗಳನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್ಗಳಿಗೆ ಹಿಮ್ಮುಖವಾಗಿ ಘನ ಬಣ್ಣವನ್ನು ಸೇರಿಸಬೇಕು, ಮತ್ತು ಕೊನೆಯ ಐಟಂ ಸಂಪೂರ್ಣವಾಗಿ ಅನುಸರಣೆ ಹೊಂದಿದ ಬ್ರೌಸರ್ಗಳಿಗೆ CSS3 ಶೈಲಿಯಾಗಿರಬೇಕು. ಆದ್ದರಿಂದ, ನೀವು ಬರೆಯಿರಿ:
ಹಿನ್ನೆಲೆ: # 999999;
ಹಿನ್ನೆಲೆ: -moz- ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, # 999999 0%, #ffffff 100%);
ಹಿನ್ನೆಲೆ: -ವೆಬ್ಕಿಟ್-ಗ್ರೇಡಿಯಂಟ್ (ರೇಖೀಯ, ಎಡ ಮೇಲ್ಭಾಗ, ಬಲ ಮೇಲ್ಭಾಗ, ಬಣ್ಣ-ನಿಲುಗಡೆ (0%, # 999999), ಬಣ್ಣ-ನಿಲುಗಡೆ (100%, # ffffff));
ಹಿನ್ನೆಲೆ: -ವೆಬ್ಕಿಟ್-ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, # 999999 0%, #ffffff 100%);
ಹಿನ್ನೆಲೆ: -ಒ-ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, # 999999 0%, #ffffff 100%);
ಹಿನ್ನೆಲೆ: -ms- ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, # 999999 0%, #ffffff 100%);
ಫಿಲ್ಟರ್: ಪ್ರೊಜಿಡ್: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', ಗ್ರೇಡಿಯಂಟ್ಟೈಪ್ = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', ಗ್ರೇಡಿಯಂಟ್ಟೈಪ್ = 1);
ಹಿನ್ನೆಲೆ: ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, # 999999 0%, #ffffff 100%);
ಈ ಟ್ಯುಟೋರಿಯಲ್ನಲ್ಲಿನ ಮುಂದಿನ ಪುಟಗಳು ಗ್ರೇಡಿಯಂಟ್ನ ಭಾಗಗಳನ್ನು ಹೆಚ್ಚು ವಿವರವಾಗಿ ವಿವರಿಸುತ್ತದೆ ಮತ್ತು ಕೊನೆಯ ಪುಟವು ನಿಮ್ಮನ್ನು CSS3 ಇಳಿಜಾರುಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರಚಿಸಲು ಅತ್ಯುತ್ತಮವಾದ ಸಾಧನವಾಗಿ ಸೂಚಿಸುತ್ತದೆ.
ಕೇವಲ ಸಿಎಸ್ಎಸ್ ಬಳಸಿ ಕ್ರಿಯೆಯಲ್ಲಿ ಈ ರೇಖೀಯ ಗ್ರೇಡಿಯಂಟ್ ನೋಡಿ.
02 ರ 04
ಕರ್ಣೀಯ ಗ್ರೇಡಿಯೆಂಟ್ಗಳನ್ನು ರಚಿಸುವುದು-ಗ್ರೇಡಿಯಂಟ್ನ ಆಂಗಲ್
ಆರಂಭ ಮತ್ತು ನಿಲುಗಡೆ ಅಂಕಗಳು ಗ್ರೇಡಿಯಂಟ್ ಕೋನವನ್ನು ನಿರ್ಧರಿಸುತ್ತವೆ. ಹೆಚ್ಚಿನ ರೇಖಾತ್ಮಕ ಇಳಿಜಾರುಗಳು ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಅಥವಾ ಎಡದಿಂದ ಬಲಕ್ಕೆ ಇವೆ. ಆದರೆ ಕರ್ಣೀಯ ರೇಖೆಯ ಮೇಲೆ ಚಲಿಸುವ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಸಾಧ್ಯವಿದೆ. ಈ ಪುಟದಲ್ಲಿನ ಚಿತ್ರವು ಚಿತ್ರದ ಅಡ್ಡಲಾಗಿ 45 ಡಿಗ್ರಿ ಕೋನದಲ್ಲಿ ಬಲದಿಂದ ಎಡಕ್ಕೆ ಚಲಿಸುವ ಸರಳ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ.
ಗ್ರೇಡಿಯಂಟ್ ಲೈನ್ ವಿವರಿಸಲು ಕೋನಗಳು
ಕೋನವು ಅಂಶದ ಮಧ್ಯಭಾಗದಲ್ಲಿರುವ ಕಾಲ್ಪನಿಕ ವೃತ್ತದ ಮೇಲೆ ಒಂದು ಸಾಲುಯಾಗಿದೆ. 0deg ಅಂಕಗಳು, 90deg ಅಂಕಗಳು ಬಲಕ್ಕೆ, 180deg ಅಂಕಗಳನ್ನು ಕೆಳಗೆ, ಮತ್ತು ಎಡಕ್ಕೆ 270deg ಅಂಕಗಳು. 0 ರಿಂದ 359 ಡಿಗ್ರಿಗಳಿಂದ ಯಾವುದೇ ಕೋನವನ್ನು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.
ಒಂದು ಚೌಕದಲ್ಲಿ, 45 ಡಿಗ್ರಿ ಕೋನವು ಮೇಲಿನ ಎಡ ಮೂಲೆಯಿಂದ ಕೆಳಕ್ಕೆ ಬಲಕ್ಕೆ ಚಲಿಸುತ್ತದೆ, ಆದರೆ ಒಂದು ಆಯತದಲ್ಲಿ ಆರಂಭದಲ್ಲಿ ಮತ್ತು ಅಂತ್ಯದ ಬಿಂದುಗಳು ಆಕಾರದಲ್ಲಿ ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಇರುತ್ತದೆ, ನೀವು ಚಿತ್ರದಲ್ಲಿ ನೋಡಬಹುದು ಎಂದು ನೀವು ಗಮನಿಸಬೇಕು.
ಒಂದು ಕರ್ಣೀಯ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಹೆಚ್ಚು ಸಾಮಾನ್ಯವಾದ ವಿಧಾನವೆಂದರೆ ಮೇಲಿನ ಬಲ, ಒಂದು ಮೂಲೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು ಮತ್ತು ಗ್ರೇಡಿಯಂಟ್ ಆ ಮೂಲೆಯಿಂದ ಆ ವಿರುದ್ಧ ಮೂಲೆಯಲ್ಲಿದೆ. ನೀವು ಈ ಕೆಳಗಿನ ಕೀವರ್ಡ್ಗಳೊಂದಿಗೆ ಆರಂಭಿಕ ಪೋಸ್ಟನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು:
- ಅಗ್ರ
- ಸರಿ
- ಕೆಳಗೆ
- ಎಡಕ್ಕೆ
- ಕೇಂದ್ರ
ಮತ್ತು ಅವುಗಳನ್ನು ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದಂತೆ ಸಂಯೋಜಿಸಬಹುದು: ಉದಾಹರಣೆಗೆ:
- ಮೇಲಿನಿಂದ ಬಲ
- ಮೇಲಿನ ಎಡ
- ಉನ್ನತ ಕೇಂದ್ರ
- ಕೆಳಗಿನ ಬಲ
- ಕೆಳಗೆ ಎಡಕ್ಕೆ
- ಕೆಳಭಾಗದ ಕೇಂದ್ರ
- ಬಲ ಕೇಂದ್ರ
- ಎಡ ಕೇಂದ್ರ
ಇಲ್ಲಿ ಚಿತ್ರವೊಂದಕ್ಕೆ ಹೋಲುವ ಗ್ರೇಡಿಯಂಟ್ಗೆ ಸಿಎಸ್ಎಸ್, ಕೆಂಪು ಬಲದಿಂದ ಕೆಳಭಾಗದ ಬಲ ಮೂಲದವರೆಗೆ ಕೆಳಕ್ಕೆ ಎಡಕ್ಕೆ ಚಲಿಸುತ್ತದೆ:
ಹಿನ್ನೆಲೆ: ## 901A1C;
ಹಿನ್ನೆಲೆ-ಚಿತ್ರ: -moz- ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಬಲ ಟಾಪ್, # 901A1C 0%, # FFFFFF 100%);
ಹಿನ್ನೆಲೆ-ಚಿತ್ರ: -ವೆಬ್ಕಿಟ್-ಗ್ರೇಡಿಯಂಟ್ (ರೇಖೀಯ, ಬಲ ಮೇಲ್ಭಾಗ, ಎಡಭಾಗದ ಕೆಳಭಾಗ, ಬಣ್ಣ-ನಿಲುಗಡೆ (0, # 901A1C), ಬಣ್ಣ-ನಿಲುಗಡೆ (1, #FFFFFF));
ಹಿನ್ನೆಲೆ: -ವೆಬ್ಕಿಟ್-ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಬಲ ಟಾಪ್, # 901A1C 0%, #ffffff 100%);
ಹಿನ್ನೆಲೆ: -ಒ-ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಬಲ ಟಾಪ್, # 901A1C 0%, #ffffff 100%);
ಹಿನ್ನೆಲೆ: -ಎಮ್-ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಬಲ ಟಾಪ್, # 901A1C 0%, #ffffff 100%);
ಹಿನ್ನೆಲೆ: ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಬಲ ಟಾಪ್, # 901A1C 0%, #ffffff 100%);
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಯಾವುದೇ ಐಇ ಫಿಲ್ಟರ್ಗಳಿಲ್ಲ ಎಂದು ನೀವು ಗಮನಿಸಿರಬಹುದು. ಅಂದರೆ, ಐಇ ಕೇವಲ ಎರಡು ವಿಧದ ಫಿಲ್ಟರ್ಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ: ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ (ಡೀಫಾಲ್ಟ್) ಮತ್ತು ಎಡದಿಂದ ಬಲಕ್ಕೆ (ಗ್ರೇಡಿಯಂಟ್ಟೈಪ್ = 1 ಸ್ವಿಚ್ನೊಂದಿಗೆ).
ಕೇವಲ ಸಿಎಸ್ಎಸ್ ಬಳಸಿ ಕ್ರಿಯೆಯಲ್ಲಿ ಈ ಕರ್ಣೀಯ ರೇಖೀಯ ಗ್ರೇಡಿಯಂಟ್ ನೋಡಿ.
03 ನೆಯ 04
ಬಣ್ಣ ನಿಲ್ಲುತ್ತದೆ
CSS3 ರೇಖಾತ್ಮಕ ಇಳಿಜಾರುಗಳೊಂದಿಗೆ, ನಿಮ್ಮ ಫ್ಯಾನ್ಸಿ ಪ್ರಭಾವಗಳನ್ನು ರಚಿಸಲು ನಿಮ್ಮ ಗ್ರೇಡಿಯಂಟ್ಗೆ ನೀವು ಬಹು ಬಣ್ಣಗಳನ್ನು ಸೇರಿಸಬಹುದು. ಈ ಬಣ್ಣಗಳನ್ನು ಸೇರಿಸಲು, ನಿಮ್ಮ ಆಸ್ತಿಯ ಕೊನೆಯಲ್ಲಿ ನೀವು ಹೆಚ್ಚುವರಿ ಬಣ್ಣಗಳನ್ನು ಸೇರಿಸಿ, ಅಲ್ಪವಿರಾಮದಿಂದ ಬೇರ್ಪಡಿಸಲಾಗಿರುತ್ತದೆ. ಬಣ್ಣಗಳು ಎಲ್ಲಿ ಪ್ರಾರಂಭಿಸಬೇಕು ಅಥವಾ ಅಂತ್ಯಗೊಳ್ಳಬೇಕು ಎಂಬುದನ್ನು ನೀವು ಎಲ್ಲಿ ಸೇರಿಸಬೇಕು.
ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ ಫಿಲ್ಟರ್ಗಳು ಎರಡು ಬಣ್ಣದ ನಿಲುಗಡೆಗಳನ್ನು ಮಾತ್ರ ಬೆಂಬಲಿಸುತ್ತವೆ, ಆದ್ದರಿಂದ ನೀವು ಈ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ನಿರ್ಮಿಸಿದಾಗ, ನೀವು ಪ್ರದರ್ಶಿಸಲು ಬಯಸುವ ಮೊದಲ ಮತ್ತು ಎರಡನೆಯ ಬಣ್ಣಗಳನ್ನು ಮಾತ್ರ ಸೇರಿಸಬೇಕು.
ಮೇಲಿನ 3-ಬಣ್ಣ ಗ್ರೇಡಿಯಂಟ್ಗಾಗಿ ಸಿಎಸ್ಎಸ್ ಇಲ್ಲಿದೆ:
ಹಿನ್ನೆಲೆ: #ffffff;
ಹಿನ್ನೆಲೆ: -moz- ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
ಹಿನ್ನೆಲೆ: -ವೆಬ್ಕಿಟ್-ಗ್ರೇಡಿಯಂಟ್ (ರೇಖೀಯ, ಎಡ ಮೇಲಿನ, ಬಲ ಮೇಲ್ಭಾಗ, ಬಣ್ಣ-ನಿಲುಗಡೆ (0%, # ffffff), ಬಣ್ಣ-ನಿಲುಗಡೆ (51%, # 901A1C), ಬಣ್ಣ-ನಿಲುಗಡೆ (100%, # ffffff));
ಹಿನ್ನೆಲೆ: -ವೆಬ್ಕಿಟ್-ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ಹಿನ್ನೆಲೆ: -ಒ-ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ಹಿನ್ನೆಲೆ: -ms- ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ಫಿಲ್ಟರ್: ಪ್ರೊಜಿಡ್: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', ಗ್ರೇಡಿಯಂಟ್ಟೈಪ್ = 1);
ಹಿನ್ನೆಲೆ: ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್ (ಎಡ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ಕೇವಲ ಸಿಎಸ್ಎಸ್ ಬಳಸಿ ಕ್ರಿಯೆಯಲ್ಲಿ ಮೂರು ಬಣ್ಣ ನಿಲುಗಡೆಗಳೊಂದಿಗೆ ಈ ರೇಖೀಯ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ನೋಡಿ.
04 ರ 04
ಬಿಲ್ಡಿಂಗ್ ಗ್ರೇಡಿಯೆಂಟ್ಗಳನ್ನು ಸುಲಭವಾಗಿ ಮಾಡಿ
ನಿಮಗೆ ಇಳಿಜಾರುಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಹಾಯ ಮಾಡುವ ಎರಡು ಸೈಟ್ಗಳು ಇವೆ, ಅವುಗಳಿಗೆ ಪ್ರತಿಯೊಂದೂ ಪ್ರಯೋಜನಗಳನ್ನು ಮತ್ತು ನ್ಯೂನತೆಗಳನ್ನು ಹೊಂದಿವೆ, ನಾನು ಇನ್ನೂ ಎಲ್ಲವನ್ನೂ ಮಾಡುವ ಗ್ರೇಡಿಯಂಟ್ ಬಿಲ್ಡರ್ ಅನ್ನು ಕಂಡುಹಿಡಿಯಲಿಲ್ಲ.
ಅಲ್ಟಿಮೇಟ್ ಸಿಎಸ್ಎಸ್ ಗ್ರೇಡಿಯಂಟ್ ಜನರೇಟರ್
ಈ ಗ್ರೇಡಿಯಂಟ್ ಜನರೇಟರ್ ಬಹಳ ಜನಪ್ರಿಯವಾಗಿದೆ ಏಕೆಂದರೆ ಇದು ಫೋಟೋಶಾಪ್ ರೀತಿಯ ಕಾರ್ಯಕ್ರಮಗಳಲ್ಲಿ ಗ್ರೇಡಿಯಂಟ್ ಬಿಲ್ಡರ್ಗಳಿಗೆ ಇದೇ ರೀತಿಯಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ನಾನು ಇಷ್ಟಪಡುತ್ತೇನೆ ಏಕೆಂದರೆ ಅದು ನಿಮಗೆ ಎಲ್ಲಾ ಸಿಎಸ್ಎಸ್ ವಿಸ್ತರಣೆಗಳನ್ನು ಮಾತ್ರ ನೀಡುತ್ತದೆ, ಕೇವಲ ವೆಬ್ಕಿಟ್ ಮತ್ತು ಮೊಜಿಲ್ಲಾ ಅಲ್ಲ. ಈ ಜನರೇಟರ್ನ ಸಮಸ್ಯೆ ಅದು ಸಮತಲ ಮತ್ತು ಲಂಬ ಇಳಿಜಾರುಗಳನ್ನು ಮಾತ್ರ ಬೆಂಬಲಿಸುತ್ತದೆ. ನೀವು ಕರ್ಣೀಯ ಇಳಿಜಾರುಗಳನ್ನು ಮಾಡಲು ಬಯಸಿದರೆ, ನಾನು ಶಿಫಾರಸು ಮಾಡುವ ಇತರ ಜನರೇಟರ್ಗೆ ನೀವು ಹೋಗಬೇಕಾಗುತ್ತದೆ.
CSS3 ಗ್ರೇಡಿಯಂಟ್ ಜನರೇಟರ್
ಈ ಜನರೇಟರ್ ಮೊದಲನೆಯದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ನನಗೆ ಸ್ವಲ್ಪ ಸಮಯ ತೆಗೆದುಕೊಂಡಿತು, ಆದರೆ ಇದು ಕರ್ಣೀಯ ದಿಕ್ಕನ್ನು ಬದಲಾಯಿಸುವುದಕ್ಕೆ ಬೆಂಬಲವನ್ನು ನೀಡುತ್ತದೆ.
ಇವುಗಳಿಗಿಂತ ನೀವು ಉತ್ತಮವಾಗಿ ಇಷ್ಟಪಡುವಂತಹ ಮತ್ತೊಂದು ಸಿಎಸ್ಎಸ್ ಗ್ರೇಡಿಯಂಟ್ ಜನರೇಟರ್ ಅನ್ನು ನೀವು ತಿಳಿದಿದ್ದರೆ , ದಯವಿಟ್ಟು ನಮಗೆ ತಿಳಿಸಿ .