ಸಿಎಸ್ಎಸ್ ಆರಂಭಿಕ ಕ್ಯಾಪ್ಸ್

ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಇಮೇಜ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಫ್ಯಾನ್ಸಿ ಆರಂಭಿಕ ಕ್ಯಾಪ್ಸ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದನ್ನು ತಿಳಿಯಿರಿ

ನಿಮ್ಮ ಪ್ಯಾರಾಗಳಿಗಾಗಿ ಫ್ಯಾನ್ಸಿ ಆರಂಭಿಕ ಕ್ಯಾಪ್ಗಳನ್ನು ರಚಿಸಲು ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ. ನಿಮ್ಮ ಆರಂಭಿಕ ಕ್ಯಾಪ್ಗಾಗಿ ಚಿತ್ರಾತ್ಮಕ ಚಿತ್ರಣವನ್ನು ಬಳಸಲು ಸರಳ ಇಮೇಜ್ ರಿಪ್ಲೇಸ್ಮೆಂಟ್ ಟೆಕ್ನಿಕ್ ಸಹ ಇದೆ.

ಆರಂಭಿಕ ಕ್ಯಾಪ್ಸ್ನ ಮೂಲ ಶೈಲಿಗಳು

ದಾಖಲೆಗಳಲ್ಲಿ ಆರಂಭಿಕ ಕ್ಯಾಪ್ಗಳ ಮೂರು ಮೂಲ ಶೈಲಿಗಳಿವೆ:

ಆರಂಭಿಕ ಕ್ಯಾಪ್ಸ್ ಅಥವಾ ಡ್ರಾಪ್ ಕ್ಯಾಪ್ಸ್ ಬಹಳ ಪರಿಚಿತವಾಗಿವೆ. ಅವರು ಪಠ್ಯದ ಇಲ್ಲದಿದ್ದರೆ ದೀರ್ಘ ಮತ್ತು ನೀರಸ ವ್ಯಾಪ್ತಿಯನ್ನು ಧರಿಸುವ ಉತ್ತಮ ಮಾರ್ಗವಾಗಿದೆ. ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಆಸ್ತಿಯೊಂದಿಗೆ: ಮೊದಲ ಪತ್ರ, ನೀವು ಸುಲಭವಾಗಿ ನಿಮ್ಮ ಮೊದಲ ಅಕ್ಷರಗಳನ್ನು ಅಲಂಕಾರಿಕ ಮಾಡಲು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.

ಸರಳ ಆರಂಭಿಕ ಕ್ಯಾಪ್ ರಚಿಸಿ

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

ಪು: ಮೊದಲ ಪತ್ರ {ಫಾಂಟ್-ಗಾತ್ರ: 3 ಎಮ್; }

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

ಪು: ಮೊದಲ ಪತ್ರ {ಫಾಂಟ್-ಗಾತ್ರ: 3 ಎಮ್; } ಪುಟ: ಮೊದಲ ಸಾಲಿನ {ಸಾಲು-ಎತ್ತರ: 1em; }

ನಿಮ್ಮ ಪಠ್ಯಕ್ಕಾಗಿ ಸರಿಯಾದ ಗಾತ್ರವನ್ನು ಕಂಡುಹಿಡಿಯುವವರೆಗೆ ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಲೈನ್ ಎತ್ತರದೊಂದಿಗೆ ಪ್ಲೇ ಮಾಡಿ.

ನಿಮ್ಮ ಆರಂಭಿಕ ಕ್ಯಾಪ್ನೊಂದಿಗೆ ಪ್ಲೇ ಮಾಡಿ

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

ಪು: ಮೊದಲ ಪತ್ರ {ಫಾಂಟ್-ಗಾತ್ರ: 300%; ಹಿನ್ನೆಲೆ ಬಣ್ಣ: # 000; ಬಣ್ಣ: #fff; } ಪುಟ: ಮೊದಲ ಸಾಲಿನ {ಸಾಲು-ಎತ್ತರ: 100%; }

ಮತ್ತೊಂದು ಟ್ರಿಕ್ ಕೇಂದ್ರವನ್ನು ಮೊದಲ ಸಾಲಿನಲ್ಲಿ ಕೇಂದ್ರೀಕರಿಸುವುದು. ಇದು ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಟ್ರಿಕಿ ಆಗಿರಬಹುದು, ನಿಮ್ಮ ವಿನ್ಯಾಸವು ಮೃದುವಾದರೆ ಟೆಕ್ಸ್ಟ್ ಲೈನ್ ಮಧ್ಯದಲ್ಲಿ ಭಿನ್ನವಾಗಿರಬಹುದು. ಆದರೆ ಕೆಲವು ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಸುಮಾರು ಆಟದೊಂದಿಗೆ, ಮೊದಲ ಅಕ್ಷರದ ಮಧ್ಯದಲ್ಲಿರುವುದನ್ನು ಕಾಣಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಮೊದಲ ಸಾಲಿಗೆ ನೀವು ಇಂಡೆಂಟ್ ಮಾಡಬಹುದು. ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಪಠ್ಯ-ಇಂಡೆಂಟ್ನ ಶೇಕಡಾವಾರು ಪ್ರಮಾಣವು ಸರಿಯಾಗಿ ಕಾಣಿಸುವವರೆಗೆ ಅದನ್ನು ಪ್ಲೇ ಮಾಡಿ:

ಪು: ಮೊದಲ ಪತ್ರ {ಫಾಂಟ್-ಗಾತ್ರ: 300%; ಹಿನ್ನೆಲೆ ಬಣ್ಣ: # 000; ಬಣ್ಣ: #fff; } ಪುಟ: ಮೊದಲ ಸಾಲಿನ {ಸಾಲು-ಎತ್ತರ: 100%; } p {text-indent: 45% ; }

ಪಕ್ಕದ ಆರಂಭಿಕ ಕ್ಯಾಪ್ಸ್ ಸಿಎಸ್ಎಸ್ ಜೊತೆ ಕಠಿಣವಾಗಿದೆ

ಪಕ್ಕದ ಆರಂಭಿಕ ಕ್ಯಾಪ್ಸ್ ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಕಷ್ಟವಾಗಬಹುದು ಏಕೆಂದರೆ ವಿವಿಧ ಬ್ರೌಸರ್ಗಳು ಫಾಂಟ್ಗಳನ್ನು ವಿಭಿನ್ನವಾಗಿ ಪ್ರದರ್ಶಿಸುತ್ತವೆ. CSS ನಲ್ಲಿ ಪಕ್ಕದ ಕ್ಯಾಪ್ ರಚಿಸುವುದರ ಹಿಂದಿನ ಕಲ್ಪನೆಯು ಪಠ್ಯ-ಇಂಡೆಂಟ್ ಆಸ್ತಿಯನ್ನು ಮೊದಲ ಸಾಲಿನಲ್ಲಿ (ಎಡಭಾಗದಲ್ಲಿ) ನಕಾರಾತ್ಮಕ ಮೌಲ್ಯವನ್ನು ತಳ್ಳುವುದು. ಆ ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಎಡ ಅಂಚುಗಳನ್ನು ಕೂಡಾ ಸ್ವಲ್ಪ ಪ್ರಮಾಣದ ಮೂಲಕ ನೀವು ಬದಲಾಯಿಸಬೇಕಾಗುತ್ತದೆ. ಪ್ಯಾರಾಗ್ರಾಫ್ ಉತ್ತಮವಾಗಿ ಕಾಣುವವರೆಗೆ ಈ ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ಪ್ಲೇ ಮಾಡಿ.

p {text-indent: -2.5em; ಅಂಚು-ಎಡ: 3 ಎಮ್; } ಪುಟ: ಮೊದಲ ಅಕ್ಷರ {ಫಾಂಟ್-ಗಾತ್ರ: 3 ಎಮ್; } ಪುಟ: ಮೊದಲ ಸಾಲಿನ {ಸಾಲು-ಎತ್ತರ: 100%; }

ನಿಜವಾಗಿಯೂ ಫ್ಯಾನ್ಸಿ ಆರಂಭಿಕ ಕ್ಯಾಪ್ಸ್ ಗೆಟ್ಟಿಂಗ್

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

ಪು: ಮೊದಲ ಪತ್ರ {ಫಾಂಟ್-ಗಾತ್ರ: 3 ಎಮ್; ಫಾಂಟ್-ಕುಟುಂಬ: "ಎಡ್ವರ್ಡಿಯನ್ ಸ್ಕ್ರಿಪ್ಟ್ ಐಟಿಸಿ", "ಬ್ರಷ್ ಸ್ಕ್ರಿಪ್ಟ್ ಎಂಟಿ", ಕರ್ಸಿವ್; } ಪುಟ: ಮೊದಲ ಸಾಲಿನ {ಸಾಲು-ಎತ್ತರ: 100%; }

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

ಒಂದು ಚಿತ್ರಾತ್ಮಕ ಆರಂಭಿಕ ಕ್ಯಾಪ್ ಅನ್ನು ಬಳಸುವುದು

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

ಮೊದಲಿಗೆ, ನೀವು ಮೊದಲ ಅಕ್ಷರದ ಗ್ರಾಫಿಕ್ ಅನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ. ಫಾಂಟ್ "ಎಡ್ವರ್ಡಿಯನ್ ಸ್ಕ್ರಿಪ್ಟ್ ಐಟಿಸಿ" ಎಂಬ ಅಕ್ಷರದೊಂದಿಗೆ L ಅನ್ನು ರಚಿಸಲು ನಾನು ಫೋಟೊಶಾಪ್ ಅನ್ನು ಬಳಸಿದ್ದೇನೆ. ನಾನು ಅದನ್ನು ದೊಡ್ಡದಾಗಿ ಮಾಡಿದೆ - 300pt ಗಾತ್ರ. ನಾನು ಚಿತ್ರವನ್ನು ಸುತ್ತಲೂ ಕನಿಷ್ಟ ಕನಿಷ್ಠಕ್ಕೆ ಕತ್ತರಿಸಿ ಚಿತ್ರವನ್ನು ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಗುರುತಿಸಿದೆ.

ನಂತರ ನಾನು ನನ್ನ ಪ್ಯಾರಾಗ್ರಾಫ್ಗಾಗಿ ವರ್ಗ "ಕ್ಯಾಪ್ಎಲ್" ಅನ್ನು ರಚಿಸಿದೆ. ಇಲ್ಲಿ ನಾನು ಯಾವ ಇಮೇಜ್ ಅನ್ನು ಬಳಸಬೇಕು, ಪ್ರಮುಖ (ಲೈನ್-ಎತ್ತರ), ಮತ್ತು ಹೀಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇನೆ.

ಪ್ಯಾರಾಗ್ರಾಫ್ ಪಠ್ಯ-ಇಂಡೆಂಟ್ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್-ಟಾಪ್ ಅನ್ನು ಹೊಂದಿಸಲು ನೀವು ಇಮೇಜ್ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ. ನನ್ನ ಎಲ್ ಇಮೇಜ್ಗಾಗಿ, ನಾನು 95px ಇಂಡೆಂಟ್ ಮತ್ತು 72 ಪ್ಯಾಕ್ಸ್ ಪ್ಯಾಡಿಂಗ್ ಅಗತ್ಯವಿದೆ.

p.capL {ಸಾಲು-ಎತ್ತರ: 1em; ಹಿನ್ನೆಲೆ-ಚಿತ್ರ: url (capL.gif); ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ: ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ; ಪಠ್ಯ-ಇಂಡೆಂಟ್: 95px; ಪ್ಯಾಡಿಂಗ್-ಟಾಪ್: 72px; }

ಆದರೆ ಅದು ಎಲ್ಲಲ್ಲ. ನೀವು ಅದನ್ನು ಅಲ್ಲಿಗೆ ಬಿಟ್ಟರೆ, ಮೊದಲ ಪತ್ರವನ್ನು ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿ ನಕಲಿ ಮಾಡಲಾಗುವುದು - ಮೊದಲಿಗೆ ಗ್ರಾಫಿಕ್ನಲ್ಲಿ, ನಂತರ ಪಠ್ಯದಲ್ಲಿ. ಆದ್ದರಿಂದ, ನಾನು "ಆರಂಭಿಕ" ವರ್ಗದೊಂದಿಗೆ ಮೊದಲ ಅಂಶವನ್ನು ಸೇರಿಸಿದೆ - ಮತ್ತು ಆ ಪತ್ರವನ್ನು ಪ್ರದರ್ಶಿಸದೆ ಬ್ರೌಸರ್ಗೆ ಹೇಳಿದರು:

span.initial {display: none; }

ಮತ್ತು ಗ್ರಾಫಿಕ್ ನಂತರ ಸರಿಯಾಗಿ ತೋರಿಸುತ್ತದೆ. ಪತ್ರವನ್ನು ನೇರವಾಗಿ ಅಪ್ಪಳಿಸಿದ ಪಠ್ಯವನ್ನು ಪಡೆಯಲು ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿ ಪಠ್ಯ ಇಂಡೆಂಟ್ನೊಂದಿಗೆ ನೀವು ಪ್ಲೇ ಮಾಡಬಹುದು, ಆದರೆ ನೀವು ಅದನ್ನು ಪ್ರದರ್ಶಿಸಲು ಬಯಸುತ್ತೀರಿ.