ಹೆಡರ್ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಗಳು ಹೊಸ ಪುಟವನ್ನು ರಚಿಸುವಾಗ ಅಗತ್ಯ ಅಂಶಗಳು ವೆಬ್ ಅಥವಾ ಬ್ಲಾಗ್, ಅಥವಾ ಬೇರೇನೂ ಇಲ್ಲದಿದ್ದರೆ ವೆಬ್ ವಿನ್ಯಾಸದ ಪ್ರಸ್ತುತ ಮಾನದಂಡಗಳನ್ನು ಪೂರೈಸಲು ನಾವು ಅವುಗಳನ್ನು ನವೀಕರಿಸಬೇಕಾಗಿದೆ. ಅವು ನಮ್ಮ ವೆಬ್ಸೈಟ್ಗೆ ಭೇಟಿ ನೀಡುವವರು ಸಾಮಾನ್ಯವಾಗಿ ಹೆಚ್ಚಿನ ಗಮನವನ್ನು ನೀಡುವ ಸ್ಥಳಗಳಾಗಿವೆ, ಆದ್ದರಿಂದ ನಾವು ಅವುಗಳನ್ನು ನೋಡಿಕೊಳ್ಳಬೇಕು ಮತ್ತು ಅವುಗಳನ್ನು ಸಾಕಷ್ಟು ಮುದ್ದು ಮಾಡಬೇಕಾಗಿರುವುದರಿಂದ ಅವು ಕ್ರಿಯಾತ್ಮಕವಾಗಿರುವುದರ ಹೊರತಾಗಿ ಕಣ್ಣಿಗೆ ಆಹ್ಲಾದಕರವಾಗಿರುತ್ತದೆ.
ಅದಕ್ಕಾಗಿಯೇ ನಾವು ಹಂಚಿಕೊಳ್ಳಲಿದ್ದೇವೆ ನಿಮ್ಮ ಬ್ಲಾಗ್ ಅಥವಾ ವೆಬ್ಸೈಟ್ನಲ್ಲಿ ನೀವು ಬಳಸಬಹುದಾದ 29 ಸಿಎಸ್ಎಸ್ ಹೆಡರ್ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಗಳು, ಮತ್ತು ಆದ್ದರಿಂದ ನೀವು ಹುಡುಕುತ್ತಿರುವ ಗುಣಮಟ್ಟದ ಬಿಂದುವನ್ನು ನೀಡಿ. ಈ ಪಟ್ಟಿಯು ಪೂರ್ಣ ಪರದೆಯ ಲೇಖನ ಶೀರ್ಷಿಕೆಗಳಿಂದ ಕೂಡಿದೆ, ಜೊತೆಗೆ ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ಗೆ ಮತ್ತೊಂದು ದೃಷ್ಟಿಕೋನವನ್ನು ನೀಡಲು ಪ್ರಮಾಣಿತ ಗಾತ್ರ, ಸ್ಥಿರ ಅಥವಾ ಸ್ಥಿರ ಶೀರ್ಷಿಕೆಗಳು, ಅಡಿಟಿಪ್ಪಣಿಗಳು ಮತ್ತು ಕೆಲವು ವೀಡಿಯೊ ಶೀರ್ಷಿಕೆಗಳಿಂದ ಕೂಡಿದೆ.
ಬಾಗಿದ ಹೆಡರ್
ಇವರಿಂದ ಗುರುತಿಸಲ್ಪಟ್ಟ ಹೆಡರ್ ಅದರ ಬಾಗಿದ ಶೈಲಿ ಕೆಳಭಾಗದಲ್ಲಿ ಇದು ವೆಬ್ಸೈಟ್ ಅಥವಾ ಬ್ಲಾಗ್ಗೆ ವಿಶೇಷ ಹೆಡರ್ ಮಾಡುತ್ತದೆ. ಇದು ಶುದ್ಧ ಸಿಎಸ್ಎಸ್ ಆಗಿದೆ, ಆದ್ದರಿಂದ ನಿಮ್ಮ ವೆಬ್ನಲ್ಲಿ ನೀವು ಅದನ್ನು ನಿಮ್ಮ ಬ್ಲಾಗ್ನಲ್ಲಿ ಸೇರಿಸಿದರೆ ಅದು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದನ್ನು ಪರೀಕ್ಷಿಸಲು ಈಗಾಗಲೇ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತಿದೆ.
ಹೆಡರ್ ಇಮೇಜ್ ಭ್ರಂಶ
ದೊಡ್ಡ ಭ್ರಂಶ ಚಿತ್ರ ಪರಿಣಾಮದೊಂದಿಗೆ, ಈ ಶಿರೋಲೇಖವು ಸ್ವತಃ ಗುರುತಿಸುತ್ತದೆ CSS ಹಿನ್ನೆಲೆ-ಚಿತ್ರ ಸ್ಥಾನವನ್ನು ಬಳಸಿ. ಉತ್ತಮ ಪರಿಣಾಮದ ಸಂಕೇತಕ್ಕಾಗಿ ಹೆಡರ್ ಚಿತ್ರವನ್ನು ಪುಟದ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ.
ಕೋನೀಯ ಸ್ಥಿರ ಹೆಡರ್
ಈ ಹೆಡರ್ ಅನ್ನು ವೆಬ್ ಪುಟದ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಚೆನ್ನಾಗಿ ನಿವಾರಿಸಲಾಗಿದೆ ಆ ಕರ್ಣೀಯ ರೇಖೆಯೊಂದಿಗೆ ಬೇರ್ಪಡಿಸಿ ಅದು ಬಳಕೆದಾರರ ವೀಕ್ಷಣೆಯ ಸಂಪೂರ್ಣ ಅಡ್ಡವನ್ನು ದಾಟುತ್ತದೆ. ಹಿನ್ನೆಲೆ ಚಿತ್ರದೊಂದಿಗೆ ಸ್ಥಿರ ಹೆಡರ್ ರಚಿಸಲು ಸಿಎಸ್ಎಸ್ ಹುಸಿ ಅಂಶಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದನ್ನು ಇದು ತೋರಿಸುತ್ತದೆ.
ಓರೆಯಾದ ಹೆಡರ್
ಈ ಹೆಡರ್ಗಾಗಿ ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಎಚ್ಟಿಎಮ್ಎಲ್ ನಿರ್ದಿಷ್ಟ ಉದಾಹರಣೆಯಲ್ಲಿ ನಿರೂಪಿಸಲಾಗಿದೆ ಆ ಕರ್ಣೀಯ ರೇಖೆಯ ಉದ್ದಕ್ಕೂ ಅದು ಇಡೀ ಪರದೆಯನ್ನು ಒಂದು ಬದಿಯಿಂದ ಇನ್ನೊಂದು ಬದಿಗೆ ದಾಟುತ್ತದೆ.
ಎಸ್ವಿಜಿ ಆನಿಮೇಷನ್ನೊಂದಿಗೆ ಹೆಡರ್
ಇದು ತುಂಬಾ ಸರಳವಾದ ಹೆಡರ್ ನಿಮ್ಮನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಎಸ್ವಿಜಿ ಅನಿಮೇಷನ್ ಅದರಲ್ಲಿ ನಾವು ಈ ಪಟ್ಟಿಯಲ್ಲಿದ್ದೇವೆ. ನೀವು ವೆಬ್ ಪುಟಗಳ ದೊಡ್ಡ ಪಟ್ಟಿಯನ್ನು ಪ್ರವೇಶಿಸಬಹುದು ಇಲ್ಲಿಂದ ಎಸ್ವಿಜಿ ಅನಿಮೇಷನ್ಗಳೊಂದಿಗೆ.
ಡಿವ್ನೊಂದಿಗೆ ಸ್ಥಿರ ಹೆಡರ್
ಭ್ರಂಶ ಚಿತ್ರ ಪರಿಣಾಮದೊಂದಿಗೆ, ಉತ್ತಮ ಪರಿಣಾಮಕ್ಕಾಗಿ ಎದ್ದು ಕಾಣುವ ಸ್ಥಿರ ಹೆಡರ್ ನಾವು ಮೌಸ್ನೊಂದಿಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ ಉಳಿದವು ಸ್ಕ್ರೋಲ್ ಮಾಡುವಾಗ ಸ್ಥಿರ ಹಿನ್ನೆಲೆ ಚಿತ್ರದೊಂದಿಗೆ ಸಾಧಿಸಲಾಗುತ್ತದೆ.
ಭ್ರಂಶ ಬಹು-ಪದರದ ವಿವರಣೆ
ದೊಡ್ಡ ಫಿನಿಶ್ನ ಹೆಡರ್ ಬಹು-ಲೇಯರ್ಡ್ HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ವೀಡಿಯೊ ಗೇಮ್ಗಳ ಜಗತ್ತಿಗೆ ಸಂಬಂಧಿಸಿದ ವೆಬ್ಸೈಟ್ಗಾಗಿ ಅದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬಳಸಬಹುದು. ಉದ್ದಕ್ಕೂ ಉತ್ತಮ ಫಿನಿಶ್.
ಸ್ಥಿರ ಪೋಸ್ಟ್ ಹೆಡರ್
HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಮಾಡಿದ ಪ್ರತಿ ಪೋಸ್ಟ್ಗೆ ಸ್ಥಿರ ಹೆಡರ್. ನಾವು ಉರುಳಿದ ಕ್ಷಣ, ಹೆಡರ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಮೇಲ್ಭಾಗದಲ್ಲಿ ನಿವಾರಿಸಲಾಗಿದೆ.
ಅನಿಮೇಷನ್ನೊಂದಿಗೆ ಪೂರ್ಣ ಪರದೆ ಹೆಡರ್
ಆನಿಮೇಷನ್ ನೀಡುವ ಹೆಡರ್ ಪಾರ್ಶ್ವವಾಗಿ ಚಲಿಸುತ್ತದೆ ಮತ್ತು ಅದು ವೀಕ್ಷಕರ ಮೇಲೆ ವಿಶ್ರಾಂತಿ ಪರಿಣಾಮವನ್ನು ನೀಡುತ್ತದೆ.
ಹೀರೋ ಇಮೇಜ್ ಪೂರ್ಣ ಪರದೆ
ಕಾನ್ ಜೂಮ್ ಪರಿಣಾಮ, ಇದು ಹೆಡರ್ ಪೂರ್ಣ ಪರದೆ ಇದು ಒಂದು ದೊಡ್ಡ ಸ್ವಂತಿಕೆಯೆಂದು ತಿಳಿದುಬಂದಿದೆ. ಸಂದರ್ಶಕನು ಅದರ ಸುತ್ತಲೂ ಚಲಿಸಲು ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ಹೆಚ್ಚು ಬಳಸಿಕೊಳ್ಳಲಿರುವ ವೆಬ್ಸೈಟ್ಗೆ ಸೂಕ್ತವಾಗಿದೆ.
ಬಟನ್ ಹೊಂದಿರುವ ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್
ಗುಂಡಿಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಪರದೆಯ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ತೆಗೆದುಕೊಳ್ಳುವ ಹೆಡರ್. ಲ್ಯಾಂಡಿಂಗ್ ಪುಟಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ ಸಿಎಸ್ಎಸ್ ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ನೊಂದಿಗೆ.
ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಹೀರೋ ಹೆಡರ್
ಪರಿಣಾಮದೊಂದಿಗೆ ಹೆಡರ್ ಭ್ರಂಶ ಮತ್ತು ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಸಾಕಷ್ಟು ಸರಳವಾಗಿದೆ ಅದು ಮುಖ್ಯವಾಗಿ ಅದರ ವಿನ್ಯಾಸದ ಸೊಬಗುಗಾಗಿ ಎದ್ದು ಕಾಣುತ್ತದೆ.
ಸ್ಕ್ರಾಲ್ನಲ್ಲಿ ಸ್ಟಿಕಿ ಹೆಡರ್
ಅದರ ಹೆಸರೇ ಸೂಚಿಸುವಂತೆ, ಸ್ಥಿರ ಹೆಡರ್ ಯಾವಾಗ ಚಲಿಸುವಾಗ ನಾವು ಮೌಸ್ನೊಂದಿಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುತ್ತೇವೆ ಉಳಿದ ವೆಬ್ ಪುಟವನ್ನು ನೋಡಲು.
ರೆಸ್ಪಾನ್ಸಿವ್ ಸ್ಕ್ರೋಲಿಂಗ್ ಜಿಗುಟಾದ
ಮೆನು ಪುಟದ ಮೇಲ್ಭಾಗವನ್ನು ತಲುಪಿದಾಗ ಉತ್ತಮ ಪರಿಣಾಮದ ಮತ್ತೊಂದು ಸ್ಥಿರ ಹೆಡರ್, ಏಕೆಮತ್ತು ಆ ಕ್ಷಣದಲ್ಲಿ ಅದು ಸ್ಥಿರವಾಗಿರುತ್ತದೆ ಮತ್ತು ನಾವು ಸೈಟ್ ಅನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸಬಹುದು.
ಸ್ಕ್ರಾಲ್ ಹೆಡರ್
ಇದು ಉಳಿದವುಗಳಿಂದ ಭಿನ್ನವಾಗಿರುತ್ತದೆ ಸರಿಯಾದ ಮತ್ತು ಸೂಕ್ಷ್ಮ ಅನಿಮೇಷನ್ ನಾವು ಚಲಿಸುವಾಗ. ಅದರ ಕೊನೆಯಲ್ಲಿ, ತಲೆ ಹಲಗೆ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಸ್ಥಿರವಾಗಿರುತ್ತದೆ.
ರೆಸ್ಪಾನ್ಸಿವ್ ಸ್ಕ್ರಾಲ್ ಹೆಡರ್
ಇದಕ್ಕಾಗಿ ಮತ್ತೊಂದು ಉತ್ತಮ ಅನಿಮೇಷನ್ ಈ ಹೆಡರ್ ಅನ್ನು ಉಳಿದವುಗಳಿಂದ ಪ್ರತ್ಯೇಕಿಸಿ HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನೊಂದಿಗೆ.
ಹೆಡರ್ ಇನ್ / .ಟ್
ಪರಿಣಾಮದಿಂದ ಗುರುತಿಸಲ್ಪಟ್ಟ ಹೆಡರ್ ಸ್ಕ್ರೋಲಿಂಗ್ ನಂತರ / ಹೊರಗೆ ಮತ್ತು ಅದು ಮರುಕಳಿಸುವಿಕೆಯ ಸಂವೇದನೆಯನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ.
ಹೆಡರ್ ಫೇಡ್
ಮತ್ತೊಂದು ಅನಿಮೇಷನ್ ಪರಿಣಾಮ ಕುತೂಹಲ ಮತ್ತು ಸೊಗಸಾದ HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ.
ಮರೆಮಾಡಲಾಗಿರುವ ಹೆಡರ್
ಪ್ರಕಾರ ಮರೆಮಾಚುವಾಗ ಬೇರೆ ಹೆಡರ್ ನಾವು ಅನಿಮೇಷನ್ನೊಂದಿಗೆ ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ ಅದು ಗಮನಿಸದೆ ಹೋಗುತ್ತದೆ ಆದರೆ ಉತ್ತಮ ಗುಣಮಟ್ಟದ್ದಾಗಿದೆ.
ಭ್ರಂಶ ಅಡಿಟಿಪ್ಪಣಿ
HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನೊಂದಿಗೆ ಸ್ಥಿರ ಅಥವಾ ಸ್ಥಿರ ಅಡಿಟಿಪ್ಪಣಿ. ಆಫ್ .ಾಯೆಯೊಂದಿಗೆ ಉತ್ತಮ ಗುಣಮಟ್ಟ ಪರಿಣಾಮ.
ವಿಷಯ ಅಳತೆಯೊಂದಿಗೆ ಅಡಿಟಿಪ್ಪಣಿ
ಇದಕ್ಕಾಗಿ ಉತ್ತಮ ಗುಣಮಟ್ಟದ ಮತ್ತು ಮೂಲ ಅಡಿಟಿಪ್ಪಣಿ ಸಂದರ್ಶಕರನ್ನು ಆಶ್ಚರ್ಯಗೊಳಿಸಿ ಈ ವೆಬ್ ಜಾಗವನ್ನು ಪ್ರದರ್ಶಿಸುವ ಆಕರ್ಷಕ ಮಾರ್ಗಕ್ಕಾಗಿ.
ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಅಡಿಟಿಪ್ಪಣಿ
ಎದ್ದು ಕಾಣುವ ಅಡಿಟಿಪ್ಪಣಿ ಸಾಮಾಜಿಕ ನೆಟ್ವರ್ಕ್ಗಳಿಗೆ ಕಾರಣವಾಗುವ ಗುಂಡಿಗಳು ಸುಪರಿಚಿತವಾಗಿರುವ. ಪ್ರತಿಯೊಂದು ಸಾಮಾಜಿಕ ನೆಟ್ವರ್ಕ್ಗಳ ಮೇಲೆ ಮೌಸ್ ಪಾಯಿಂಟರ್ ಅನ್ನು ಬಿಡುವಾಗ ಉತ್ಪತ್ತಿಯಾಗುವ ಅನಿಮೇಷನ್ ಎದ್ದು ಕಾಣುತ್ತದೆ.
ಅನಿಮೇಟೆಡ್ ಮೊಬೈಲ್ ಅಡಿಟಿಪ್ಪಣಿ ಮೆನು
ಈ ಅಡಿಟಿಪ್ಪಣಿ ವೀಕ್ಷಿಸಲು ವೆಬ್ ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ, ನಿಮಗೆ ಸಾಧ್ಯವಾಗುತ್ತದೆ 2-3 ವಿಭಾಗಗಳನ್ನು ಹುಡುಕಿ ಮೊಬೈಲ್ ಸಾಧನದಲ್ಲಿ ಬಳಕೆದಾರರು ಕಾಣಬಹುದು. ಇದನ್ನು 767px ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
ಸರಳ ಸ್ಥಿರ ಅಡಿಟಿಪ್ಪಣಿ
ಎಚ್ಟಿಎಮ್ಎಲ್ ಮತ್ತು ಸಿಎಸ್ಎಸ್ನಲ್ಲಿ ತಯಾರಿಸಲಾಗುತ್ತದೆ a ಹೆಚ್ಚು ಅಭಿಮಾನಿಗಳು ಮತ್ತು ಅಲಂಕಾರಗಳಿಲ್ಲದೆ ಸರಳ ಅಡಿಟಿಪ್ಪಣಿ.
ವೀಡಿಯೊ ಹೆಡರ್ ಅನ್ನು ಪ್ರತಿಕ್ರಿಯಿಸಿ
ಇದರೊಂದಿಗೆ ಹೆಡರ್ ಸರಳ ವೀಡಿಯೊ React.js.
ವೀಡಿಯೊ ಹೆಡರ್
ಇತರೆ ಸರಳ ವೀಡಿಯೊ ಹೊಂದಿರುವ ಹೆಡರ್ ಮತ್ತು ಉತ್ತಮ ಗುಣಮಟ್ಟದ.
ಮಿಕ್ಸ್-ಬ್ಲೆಂಡ್ನೊಂದಿಗೆ ಪೂರ್ಣ ಪರದೆ ವೀಡಿಯೊ ಹೆಡರ್
ಒಂದು ತೋರಿಸಿ ಪೂರ್ಣ ಪರದೆ ವೀಡಿಯೊ ಮಿಕ್ಸ್-ಮಿಶ್ರಣ ಮೋಡ್ ಬಳಸಿ ಪದರದ ಮೇಲಿನ ಪಠ್ಯದೊಂದಿಗೆ.
ವೀಡಿಯೊ ಹೆಡರ್ ಅನಿಮೇಷನ್
ಅನಿಮೇಷನ್ ಆಗಿತ್ತು ಪರಿಣಾಮಗಳ ನಂತರ ಅಡೋಬ್ನೊಂದಿಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡಲಾಗಿದೆ ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳೊಂದಿಗೆ ಹೊಂದಿಕೆಯಾಗುವುದು. ಇದು ಮೊಬೈಲ್ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.
ಗ್ರೇಡಿಯಂಟ್ನೊಂದಿಗೆ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವೀಡಿಯೊ ಹೆಡರ್
El ಗ್ರೇಡಿಯಂಟ್ ಎದ್ದು ಕಾಣುತ್ತದೆ ಉಳಿದವುಗಳಿಂದ ಈ ವೀಡಿಯೊ ಹೆಡರ್ ಗೆ.
ಅವರೆಲ್ಲರೂ ನನಗೆ ಮನವರಿಕೆ ಮಾಡಿಕೊಟ್ಟರು. ಧನ್ಯವಾದಗಳು
ಧನ್ಯವಾದಗಳು!