CSS ਸ਼ੁਰੂਆਤੀ ਕੈਪਸ

CSS ਅਤੇ ਚਿੱਤਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਫੈਂਸੀ ਸ਼ੁਰੂਆਤੀ ਕੈਪਸ ਕਿਵੇਂ ਬਣਾਉਣਾ ਸਿੱਖੋ

ਆਪਣੇ ਪੈਰਾਗਰਾਂ ਦੇ ਲਈ ਫੈਂਸੀ ਸ਼ੁਰੂਆਤੀ ਕੈਪਸ ਬਣਾਉਣ ਲਈ CSS ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਬਾਰੇ ਜਾਣੋ. ਤੁਹਾਡੀ ਸ਼ੁਰੂਆਤੀ ਕੈਪ ਲਈ ਗ੍ਰਾਫਿਕਲ ਚਿੱਤਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਇੱਕ ਸਧਾਰਨ ਚਿੱਤਰ ਬਦਲੀ ਤਕਨੀਕ ਵੀ ਹੈ.

ਸ਼ੁਰੂਆਤੀ ਕੈਪਸ ਦੀ ਬੁਨਿਆਦੀ ਸਟਾਈਲ

ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਸ਼ੁਰੂਆਤੀ ਕੈਪਸ ਦੀਆਂ ਤਿੰਨ ਬੁਨਿਆਦੀ ਸਟਾਈਲ ਹਨ:

ਸ਼ੁਰੂਆਤੀ ਕੈਪਸ ਜਾਂ ਡਰਾਪ ਕੈਪਸ ਬਹੁਤ ਜਾਣੂ ਹਨ. ਉਹ ਪਾਠ ਦੀ ਲੰਬਾਈ ਅਤੇ ਬੋਰਿੰਗ ਸਪੈਨਸ ਪਹਿਨਣ ਦਾ ਵਧੀਆ ਤਰੀਕਾ ਹੈ. ਅਤੇ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ: ਪਹਿਲੀ-ਚਿੱਠੀ, ਤੁਸੀਂ ਆਸਾਨੀ ਨਾਲ ਇਹ ਪਰਿਭਾਸ਼ਤ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਆਪਣੇ ਪਹਿਲੇ ਅੱਖਰ ਫੈਨਸ਼ੀਅਰ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ

ਇਕ ਸਧਾਰਨ ਸ਼ੁਰੂਆਤੀ ਕੈਪ ਬਣਾਉ

ਤੁਹਾਨੂੰ ਇੱਕ ਸਧਾਰਨ ਉਭਾਰਿਆ ਸ਼ੁਰੂਆਤੀ ਕੈਪ ਬਣਾਉਣ ਲਈ ਕੀ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਤੁਹਾਡੇ ਪਹਿਲੇ ਪੈਟਰਨ ਸੂਡੋ-ਐਲੀਮੈਂਟ ਦੇ ਆਕਾਰ ਦੇ ਵੱਡੇ ਪੈਰਾਗ੍ਰਾਫ ਦੀ ਪਹਿਲੀ ਚਿੱਠੀ ਬਣਾਉਣਾ:

p: ਪਹਿਲਾ-ਅੱਖਰ {ਫੌਂਟ-ਅਕਾਰ: 3ਮ; }

ਪਰ ਬਹੁਤ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਇਹ ਪਤਾ ਲੱਗਦਾ ਹੈ ਕਿ ਪਹਿਲਾ ਅੱਖਰ ਲਾਈਨ ਦੇ ਬਾਕੀ ਪਾਠ ਨਾਲੋਂ ਵੱਡਾ ਹੈ, ਇਸ ਲਈ ਉਹ ਇਸਦੇ ਪਹਿਲੇ ਬਰਾਬਰ ਦੇ ਬਰਾਬਰ ਦੀ ਬਰਾਬਰ ਬਣਾਉਂਦੇ ਹਨ, ਨਾ ਕਿ ਬਾਕੀ ਲਾਈਨ ਦਾ. ਸੁਭਾਗ ਨਾਲ, ਇਹ ਪਹਿਲੀ-ਲਾਈਨ ਛੜੀ-ਤੱਤ ਅਤੇ ਲਾਈਨ-ਉਚਾਈ ਦੀ ਜਾਇਦਾਦ ਨਾਲ ਠੀਕ ਕਰਨਾ ਸੌਖਾ ਹੈ:

p: ਪਹਿਲਾ-ਅੱਖਰ {ਫੌਂਟ-ਅਕਾਰ: 3ਮ; } p: ਪਹਿਲੀ-ਲਾਈਨ {ਲਾਈਨ-ਉਚਾਈ: 1em; }

ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਅੰਦਰ ਲਾਈਨ ਦੀ ਉਚਾਈ ਨਾਲ ਖੇਡੋ ਜਦੋਂ ਤਕ ਤੁਸੀਂ ਆਪਣੇ ਟੈਕਸਟ ਲਈ ਸਹੀ ਸਾਈਜ਼ ਨਹੀਂ ਲੱਭ ਲੈਂਦੇ.

ਆਪਣੀ ਸ਼ੁਰੂਆਤੀ ਕੈਪ ਨਾਲ ਖੇਡੋ

ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਕੈਪ ਨੂੰ ਕਿਵੇਂ ਬਣਾਉਣਾ ਸਮਝਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਸ ਨੂੰ ਬਾਹਰ ਖੜਾ ਬਣਾਉਣ ਲਈ ਫੈਨਸੀ ਕੱਪੜੇ ਵਿੱਚ ਇਸ ਨੂੰ ਤਿਆਰ ਕਰ ਸਕਦੇ ਹੋ. ਰੰਗਾਂ, ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗਾਂ, ਬਾਰਡਰਸ, ਜਾਂ ਜੋ ਵੀ ਤੁਹਾਡੀ ਫੈਨਸੀ ਨੂੰ ਮਾਰਦਾ ਹੈ ਨਾਲ ਖੇਡੋ. ਇੱਕ ਬਿਲਕੁਲ ਅਸਾਨ ਸਟਾਈਲ ਤੁਹਾਡੇ ਪਹਿਲੇ ਅੱਖਰ ਲਈ ਆਪਣੇ ਫੌਂਟ ਅਤੇ ਬੈਕਗਰਾਉੰਡ ਰੰਗ ਦੇ ਰੰਗਾਂ ਨੂੰ ਉਲਟਾਉਣ ਦੀ ਹੈ:

p: ਪਹਿਲਾ-ਅੱਖਰ {ਫੌਂਟ-ਅਕਾਰ: 300%; ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: # 000; ਰੰਗ: #fff; } p: ਪਹਿਲੀ-ਲਾਈਨ {ਲਾਈਨ-ਉਚਾਈ: 100%; }

ਇਕ ਹੋਰ ਚਾਲ ਇਹ ਹੈ ਕਿ ਪਹਿਲੀ ਲਾਈਨ ਦਾ ਕੇਂਦਰ ਇਹ CSS ਨਾਲ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦਾ ਹੈ, ਕਿਉਂਕਿ ਪਾਠ ਲੇਖਾ ਦੇ ਮੱਧ ਵੱਖ ਹੋ ਸਕਦੇ ਹਨ ਜੇਕਰ ਤੁਹਾਡਾ ਲੇਆਉਟ ਲਚਕਦਾਰ ਹੈ ਪਰ ਕੁਝ ਮੁੱਲਾਂ ਦੇ ਨਾਲ ਖੇਡਣ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਆਪਣੀ ਪਹਿਲੀ ਲਾਈਨ ਇੰਡੰਟ ਕਰ ਸਕਦੇ ਹੋ ਤਾਂ ਜੋ ਪਹਿਲੀ ਚਿੱਠੀ ਵਿਚਾਲੇ ਵਿਖਾਈ ਦਿੱਤੀ ਜਾ ਸਕੇ. ਪੈਰ੍ਹਾ ਦੇ ਪਾਠ-ਇੰਡੈਂਟ 'ਤੇ ਪ੍ਰਤੀਸ਼ਤ ਨਾਲ ਖੇਡੋ, ਜਦੋਂ ਤੱਕ ਇਹ ਸਹੀ ਨਹੀਂ ਲੱਗਦਾ ਹੈ:

p: ਪਹਿਲਾ-ਅੱਖਰ {ਫੌਂਟ-ਅਕਾਰ: 300%; ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: # 000; ਰੰਗ: #fff; } p: ਪਹਿਲੀ-ਲਾਈਨ {ਲਾਈਨ-ਉਚਾਈ: 100%; } p {text-indent: 45% ; }

ਨਜ਼ਦੀਕੀ ਸ਼ੁਰੂਆਤੀ ਕੈਪਸ CSS ਨਾਲ ਸਖਤ ਹਨ

ਨਜ਼ਦੀਕੀ ਸ਼ੁਰੂਆਤੀ ਕੈਪਸ CSS ਦੇ ਨਾਲ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦੇ ਹਨ ਕਿਉਂਕਿ ਵੱਖ-ਵੱਖ ਬ੍ਰਾਉਜ਼ਰ ਫੌਂਟ ਵੱਖਰੇ ਰੂਪ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ. CSS ਵਿੱਚ ਇੱਕ ਅਸੰਗਤ ਕੈਪ ਬਣਾਉਣ ਪਿੱਛੇ ਇਹ ਵਿਚਾਰ ਹੈ ਕਿ ਟੈਕਸਟ-ਇੰਡੈਂਟ ਦੀ ਸੰਪਤੀ ਨੂੰ ਪਹਿਲੀ ਲਾਈਨ 'ਤੇ ਇਸ ਨੂੰ (ਖੱਬੇ ਪਾਸੇ) ਇੱਕ ਨੈਗੇਟਿਵ ਵੈਲਯੂ ਧੱਕਣ ਲਈ ਇਸਤੇਮਾਲ ਕਰਨਾ ਹੈ. ਤੁਹਾਨੂੰ ਕੁਝ ਰਾਸ਼ੀ ਨਾਲ ਉਸ ਪੈਰਾ ਦੀ ਖੱਬੇ ਹਾਸ਼ੀਏ ਨੂੰ ਵੀ ਬਦਲਣ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ. ਜਦੋਂ ਤੱਕ ਪੈਰਾਗ੍ਰਾਫ ਚੰਗੀ ਨਹੀਂ ਦੇਖਦਾ ਉਦੋਂ ਤੱਕ ਇਹਨਾਂ ਅੰਕ ਨਾਲ ਖੇਡੋ.

p {text-indent: -2.5em; ਹਾਸ਼ੀਆ-ਖੱਬੇ: 3em; } p: ਪਹਿਲਾ-ਅੱਖਰ {font-size: 3em; } p: ਪਹਿਲੀ-ਲਾਈਨ {ਲਾਈਨ-ਉਚਾਈ: 100%; }

ਅਸਲ ਫਿੱਜੀ ਸ਼ੁਰੂਆਤੀ ਕੈਪਸ ਪ੍ਰਾਪਤ ਕਰਨਾ

ਫੈਨਜ਼ਸ਼ਿਕ ਸ਼ੁਰੂਆਤੀ ਕੈਪ ਬਣਾਉਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਹੈ ਫੌਂਟ ਨੂੰ ਹੋਰ ਸਜਾਵਟੀ ਫੌਂਟ ਪਰਿਵਾਰ ਵਿੱਚ ਬਦਲਣਾ. ਜੇ ਤੁਸੀਂ ਆਮ ਫੌਂਟ ਦੇ ਬਾਅਦ ਫੌਂਟਾਂ ਦੀ ਇੱਕ ਲੜੀ ਦਾ ਇਸਤੇਮਾਲ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ ਗਾਰੰਟੀ ਲੈਣ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰੇਗਾ ਕਿ ਤੁਹਾਡੀ ਸ਼ੁਰੂਆਤੀ ਕੈਪ ਚੰਗੀ ਤਰ੍ਹਾਂ ਦਰਸਾਉਂਦੀ ਹੈ ਤਾਂ ਕਿ ਤੁਹਾਡੇ ਗਾਹਕਾਂ ਨੂੰ ਪਹੁੰਚ ਅਤੇ ਉਪਯੋਗਤਾ ਦੇ ਮੁੱਦਿਆਂ 'ਤੇ ਨਜ਼ਰ ਨਾ ਆਵੇ.

p: ਪਹਿਲਾ-ਅੱਖਰ {ਫੌਂਟ-ਅਕਾਰ: 3ਮ; ਫੌਂਟ-ਫੈਮਲੀ: "ਐਡਵਰਡਆਈ ਸਕ੍ਰਿਪਟ ਆਈ.ਟੀ.ਸੀ.", "ਬੁਰਸ਼ ਸਕ੍ਰਿਪਟ ਐਮ ਟੀ", ਕਰਸਿਵ; } p: ਪਹਿਲੀ-ਲਾਈਨ {ਲਾਈਨ-ਉਚਾਈ: 100%; }

ਅਤੇ, ਆਮ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਇਹਨਾਂ ਸਾਰੇ ਸੁਝਾਅ ਨੂੰ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਕੈਪ ਬਣਾਉਣ ਲਈ ਇਕੱਠੇ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਕਿ ਤੁਹਾਡੇ ਅਨੁਛੇਦ ਲਈ ਵਿਗਿਆਪਨ ਸ਼ੈਲੀ ਹੈ.

ਗਰਾਫਿਕਲ ਸ਼ੁਰੂਆਤੀ ਕੈਪ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ

ਜੇ, ਉਸ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਨੂੰ ਅਜੇ ਵੀ ਇਹ ਨਹੀਂ ਲਗਦਾ ਕਿ ਤੁਹਾਡੀ ਸ਼ੁਰੂਆਤੀ ਕੈਪਸ ਪੰਨੇ ਉੱਤੇ ਕਿਵੇਂ ਨਜ਼ਰ ਆਉਂਦੇ ਹਨ, ਤੁਸੀਂ ਅਸਲ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਗ੍ਰਾਫਿਕਸ ਦਾ ਸਹਾਰਾ ਲੈ ਸਕਦੇ ਹੋ. ਪਰ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਤੁਸੀਂ ਸਿੱਧੇ ਗਰਾਫਿਕਸ 'ਤੇ ਜਾਣ ਦਾ ਫੈਸਲਾ ਕਰੋ, ਤੁਹਾਨੂੰ ਇਸ ਵਿਧੀ ਦੀਆਂ ਕਮੀਆਂ ਦੀ ਜਾਣਕਾਰੀ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ:

ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਪਹਿਲੇ ਅੱਖਰ ਦਾ ਗ੍ਰਾਫਿਕ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ. ਮੈਂ ਫੋਟ "ਐਡਵਾਰਡੀਅਨ ਸਕ੍ਰਿਪਟ ਆਈ.ਟੀ.ਸੀ." ਨਾਲ ਪੱਤਰ ਐਲ ਐਲ ਬਣਾਉਣ ਲਈ ਫੋਟੋਸ਼ਿਪ ਵਰਤੀ ਹੈ. ਮੈਂ ਇਸ ਨੂੰ ਵੱਡਾ ਬਣਾ ਦਿੱਤਾ - ਆਕਾਰ ਵਿਚ 300 ਫੁੱਟ. ਫਿਰ ਮੈਂ ਚਿੱਠੀ ਨੂੰ ਚਿੱਤਰ ਦੇ ਲਗਭਗ ਥੋੜ੍ਹੇ ਜਿਹੇ ਕੋਲ ਘਟਾ ਦਿੱਤਾ ਅਤੇ ਚਿੱਤਰ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਦਾ ਨੋਟ ਕੀਤਾ.

ਫਿਰ ਮੈਂ ਆਪਣੇ ਪੈਰਾਗ੍ਰਾਫ ਲਈ ਇਕ ਕਲਾਸ "ਕੈਪਲੇ" ਬਣਾਇਆ. ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਮੈਂ ਇਹ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰਦਾ ਹਾਂ ਕਿ ਕਿਹੜਾ ਚਿੱਤਰ ਵਰਤਣਾ ਹੈ, ਮੋਹਰੀ (ਲਾਈਨ-ਉਚਾਈ), ਅਤੇ ਇਸੇ ਤਰ੍ਹਾਂ.

ਪੈਰਾਗ੍ਰਾਫ ਦੇ ਪਾਠ-ਇੰਡੈਂਟ ਅਤੇ ਪੈਡਿੰਗ-ਟਾਪ ਨੂੰ ਸੈਟ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਚਿੱਤਰ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਮੇਰੀ L ਚਿੱਤਰ ਲਈ, ਮੈਨੂੰ 95 ਪੈਕਸਜ ਇੰਡੈਂਟ ਅਤੇ 72 ਪੈਕਸ ਪੈਡਿੰਗ ਦੀ ਲੋੜ ਸੀ.

p.capL {ਲਾਈਨ-ਉਚਾਈ: 1em; ਪਿਛੋਕੜ-ਚਿੱਤਰ: url (capL.gif); ਬੈਕਗ੍ਰਾਉਂਡ-ਦੁਹਰਾਉ: ਨਾ-ਦੁਹਰਾਈ; ਪਾਠ-ਇੰਦਰਾਜ਼: 95 ਪੈਕਸ; ਪੈਡਿੰਗ-ਟੌਪ: 72 ਪੈਕਸ; }

ਪਰ ਇਹ ਸਭ ਕੁਝ ਨਹੀਂ ਹੈ. ਜੇ ਤੁਸੀਂ ਇਸ ਨੂੰ ਉੱਥੇ ਛੱਡਦੇ ਹੋ, ਤਾਂ ਪਹਿਲੇ ਅੱਖਰ ਨੂੰ ਪੈਰਾਗ੍ਰਾਫਟ ਵਿੱਚ ਦੁਹਰਾਇਆ ਜਾਵੇਗਾ - ਪਹਿਲਾਂ ਗ੍ਰਾਫਿਕ ਨਾਲ, ਤਦ ਪਾਠ ਵਿੱਚ. ਇਸ ਲਈ, ਮੈਂ "ਸ਼ੁਰੂਆਤੀ" ਕਲਾਸ ਦੇ ਨਾਲ ਪਹਿਲੇ ਤੱਤ ਦੇ ਦੁਆਲੇ ਇੱਕ ਜੋੜਾ ਜੋੜਿਆ - ਅਤੇ ਉਸ ਪੱਤਰ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਕਿਹਾ:

span.initial {ਡਿਸਪਲੇ: ਕੋਈ ਨਹੀਂ; }

ਅਤੇ ਗ੍ਰਾਫਿਕ ਤਦ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਦਰਸਾਉਂਦਾ ਹੈ. ਤੁਸੀਂ ਚਿੱਠੀ ਨੂੰ ਸਿੱਧੇ ਤੌਰ ਤੇ ਟੈਕਸਟ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਪੈਰਾਗ੍ਰਾਫ 'ਤੇ ਟੈਕਸਟ-ਇੰਡੈਂਟ ਨਾਲ ਖੇਡ ਸਕਦੇ ਹੋ, ਹਾਲਾਂਕਿ ਤੁਸੀਂ ਇਸ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ