ਜ਼ੋਰ ਦੇਣ ਲਈ ਇੱਕ ਵੈਬ ਪੇਜ ਐਲੀਮੈਂਟ ਵਿੱਚ ਇੱਕ ਗਲੋ ਜੋੜੋ
ਤੁਹਾਡੇ ਵੈਬ ਪੰਨੇ ਤੇ ਇਕ ਤੱਤ ਵਿੱਚ ਇੱਕ ਨਰਮ ਬਾਹਰਲੀ ਪ੍ਰਕਾਸ਼ ਜੋੜਿਆ ਗਿਆ ਹੈ ਜਿਸ ਨਾਲ ਤੱਤ ਦਰਸ਼ਕ ਦੇ ਸਾਹਮਣੇ ਖੜਦਾ ਹੈ. ਇੱਕ ਅਹਿਮ ਵਸਤੂ ਦੇ ਬਾਹਰਲੇ ਕੋਨੇ ਦੁਆਲੇ ਇੱਕ ਪ੍ਰਕਾਸ਼ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ CSS3 ਅਤੇ HTML ਦਾ ਉਪਯੋਗ ਕਰੋ. ਇਹ ਪ੍ਰਭਾਵ ਫੋਟੋਸ਼ਾਪ ਵਿਚ ਇਕ ਆਬਜੈਕਟ ਵਿਚ ਬਾਹਰੀ ਦਿੱਖ ਵਰਗਾ ਹੁੰਦਾ ਹੈ.
ਪਹਿਲਾਂ ਗਲੋ ਤੋਂ ਐਲੀਮੈਂਟ ਬਣਾਓ
ਗਲੋ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਕਿਸੇ ਵੀ ਰੰਗ ਦੀ ਪਿੱਠਭੂਮੀ ਤੇ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਉਹ ਡੂੰਘੇ ਬੈਕਗ੍ਰਾਉਂਡ 'ਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਕਿਉਂਕਿ ਫਿਰ ਚਮਕ ਨੂੰ ਹੋਰ ਝਟਕਾ ਲੱਗਦਾ ਹੈ. ਇਸ ਗੋਲ-ਕੋਨੇ ਦੇ ਆਇਤਾਕਾਰ ਬਕਸੇ ਵਿਚ ਉਦਾਹਰਨ ਲਈ, ਇੱਕ DIV ਤੱਤ ਇੱਕ ਕਾਲਾ ਬੈਕਗ੍ਰਾਉਂਡ ਦੇ ਨਾਲ ਇੱਕ ਹੋਰ DIV ਐਲੀਮੈਂਟ ਵਿੱਚ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ. ਬਾਹਰੀ ਡੀ.ਆਈ.ਵੀ. ਚਮਕ ਲਈ ਜਰੂਰੀ ਨਹੀਂ ਹੈ, ਪਰ ਚਿੱਟੇ ਬੈਕਗਰਾਊਂਡ ਤੇ ਚਮਕ ਦੇਖਣਾ ਮੁਸ਼ਕਿਲ ਹੈ.
ਐਲੀਮੈਂਟ ਦਾ ਆਕਾਰ ਅਤੇ ਰੰਗ ਸੈੱਟ ਕਰੋ
ਤੁਹਾਡੇ ਤੱਤ ਦੀ ਚੋਣ ਕਰਨ ਤੋਂ ਬਾਅਦ ਤੁਸੀਂ ਇੱਕ ਗਲੋ ਨਾਲ ਸ਼ਿੰਗਾਰੋ ਜਾ ਰਹੇ ਹੋ, ਅੱਗੇ ਵਧੋ ਅਤੇ ਕੋਈ ਵੀ ਸਟਾਈਲ ਜੋ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ, ਸਾਈਜ਼ ਅਤੇ ਫੋਂਟ ਜੋੜੋ . ਇਹ ਉਦਾਹਰਣ ਇੱਕ ਨੀਲੇ ਰੰਗ ਦਾ ਆਇਤ ਹੈ; ਆਕਾਰ ਨੂੰ 147px ਤੇ 90px ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ; ਅਤੇ ਪਿੱਠਭੂਮੀ ਦਾ ਰੰਗ # 1f5afe, ਇੱਕ ਸ਼ਾਹੀ ਬਲੂ ਹੈ. ਇਸ ਵਿੱਚ ਕਾਲੇ ਕੰਟੇਨਰ ਦੇ ਤੱਤ ਦੇ ਵਿਚਲੀ ਤੱਤ ਰੱਖਣ ਲਈ ਇੱਕ ਹਾਸ਼ੀਏ ਸ਼ਾਮਿਲ ਹਨ.
<ਸ਼ੈਲੀ>
.ਗਲਾ {
ਹਾਸ਼ੀਆ: ਆਟੋ;
ਚੌੜਾਈ: 147 ਪੈਕਸ;
ਉੱਚਾਈ: 90 ਪੈਕਸ;
ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: # 1 ਫੇਰਫ਼ਾ;
}
ਕੋਨੇਰਾਂ ਨੂੰ ਗੋਲ ਕਰੋ
ਗੋਲ ਕੋਨਿਆਂ ਨਾਲ ਇਕ ਆਇਤ ਬਣਾਉਣਾ CSS3 ਦੇ ਨਾਲ ਸੌਖਾ ਹੈ. ਬਾਰਡਰ-ਰੇਡੀਅਸ ਸਟਾਈਲ ਦੀ ਜਾਇਦਾਦ ਨੂੰ ਆਪਣੀ ਗਲੋ ਕਲਾਸ ਵਿੱਚ ਜੋੜੋ. ਬਸ ਸਭ ਤੋਂ ਅਨੁਕੂਲਤਾ ਲਈ -webkit- ਅਤੇ -moz-prefixes ਵਰਤਣ ਲਈ ਯਾਦ ਰੱਖੋ.
-webkit-border-radius: 15px;
-ਮੋਜ-ਬਾਰਡਰ-ਰੇਡੀਅਸ: 15px;
ਬਾਰਡਰ-ਰੇਡੀਅਸ: 15 ਪੈਕਸ;
ਇੱਕ ਬਾਕਸ ਸ਼ੈਡੋ ਨਾਲ ਗਲੋ ਜੋੜੋ
ਇਹ ਬਲੋਕ ਆਪਣੇ ਆਪ ਨੂੰ ਇੱਕ ਬਾਕਸ ਸ਼ੈਡੋ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ. ਕਿਉਂਕਿ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਇਹ ਪੂਰਾ ਤੱਤ ਪ੍ਰਕਾਸ਼ ਕਰਨ ਅਤੇ ਇੱਕ ਪਾਸੇ ਦੀ ਛਾਂ ਵਰਗੇ ਇੱਕ ਪਾਸੇ ਤੋਂ ਪ੍ਰਕਾਸ਼ ਨਾ ਕਰੇ, ਤੁਸੀਂ 0px ਲਈ ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਲੰਬਾਈ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ. ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਬਲਰ ਰੇਡੀਅਸ ਨੂੰ 15px ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਬਲਰ ਦਾ ਫੈਲਾ 5px ਹੈ, ਪਰ ਤੁਸੀ ਇਹ ਸੈਟਿੰਗ ਪਤਾ ਕਰਨ ਲਈ ਵ੍ਹੀਲਲ ਬਣਾ ਸਕਦੇ ਹੋ ਕਿ ਤੁਹਾਨੂੰ ਚਮਕ ਕਿੰਨੀ ਵਿਆਪਕ ਅਤੇ ਬਿਤਾਉਣਾ ਚਾਹੀਦਾ ਹੈ. ਰੰਗ ਦਾ RGB (255,255,190) RGBa ਐਲਫ਼ਾ ਪਾਰਦਰਸ਼ਤਾ ਨਾਲ ਪੀਲੇ ਰੰਗ ਦਾ 75 ਪ੍ਰਤਿਸ਼ਤ- rgba (255,255,190, .75) ਹੁੰਦਾ ਹੈ. ਇਕ ਗਲੋ ਰੰਗ ਚੁਣੋ ਜਿਹੜਾ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ. ਕੋਨਰਾਂ ਨੂੰ ਗੋਲ ਕਰਨ ਦੇ ਨਾਲ, ਸਭ ਤੋਂ ਅਨੁਕੂਲ ਅਨੁਕੂਲਤਾ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਪ੍ਰੀਫਿਕਸ (-ਵਬਕੀਟ- ਅਤੇ -ਮੋਜ਼-) ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਨਾ ਭੁੱਲੋ
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-ਮੋਜ-ਬਾਕਸ-ਸ਼ੈਡੋ: 0 ਪੈਕਸ 0 ਪੈਕਸ 15 ਪੈਕਸ 5 ਪੈਕਸ ਰਗਬਾ (255, 255, 190, .75);
ਬਾਕਸ-ਸ਼ੈਡੋ: 0 ਪੈਕਸ 0 ਪੈਕਸ 15 ਪੈਕਸ 5 ਪੈਕਸ ਰਗਬਾ (255, 255, 190, .75);
ਗਲੋਵਿੰਗ ਬਾਕਸ ਦੀ ਜਾਂਚ ਕਰੋ
ਇਕ ਜਾਂ ਇਕ ਤੋਂ ਵੱਧ ਬ੍ਰਾਉਜ਼ਰ ਵਿਚ ਚਮਕਦਾਰ ਬਕਸੇ ਦੀ ਜਾਂਚ ਕਰੋ ਅਤੇ ਆਪਣੇ ਵੈੱਬ ਪੇਜ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਕੰਮ ਕਰਨ ਵਾਲੀ ਗਲੋ ਪ੍ਰਭਾਵ ਦੇਣ ਲਈ ਲੋੜੀਂਦੀਆਂ ਕੋਈ ਵੀ ਸੁਧਾਰ ਕਰੋ.