ਵੈਬਪੇਜ ਦੇ ਤੱਤ CSS3 ਦੇ ਨਾਲ ਫੇਡ ਇਨ ਅਤੇ ਆਉਟ ਕਰੋ

CSS3 ਪਰਿਵਰਤਨ ਚੰਗੇ ਫੇਡ ਇਫੈਕਟਸ ਬਣਾਓ

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

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

ਆਓ ਇਸ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੀਏ ਕਿ ਇਹ ਇੰਟਰੈਕਟਿੰਗ ਵਿਜ਼ੁਅਲ ਇਫੈਕਟ ਤੁਹਾਡੇ ਵੈਬ ਪੇਜਾਂ ਦੇ ਵੱਖ-ਵੱਖ ਐਲੀਮੈਂਟਸ ਨੂੰ ਸ਼ਾਮਿਲ ਕਰਨਾ ਕਿੰਨਾ ਸੌਖਾ ਹੈ ..

ਆਓ ਹੋਵਰ ਤੇ ਅਪਦਰਸੀ ਬਦਲੋ

ਅਸੀਂ ਇਹ ਵੇਖ ਕੇ ਸ਼ੁਰੂ ਕਰਾਂਗੇ ਕਿ ਇੱਕ ਚਿੱਤਰ ਦੀ ਧੁੰਦਲਾਪਨ ਨੂੰ ਕਿਵੇਂ ਬਦਲਣਾ ਹੈ ਜਦੋਂ ਇੱਕ ਗਾਹਕ ਉਸ ਤੱਤ ਤੇ ਹੋਵਰ ਕਰ ਰਿਹਾ ਹੈ. ਇਸ ਉਦਾਹਰਨ ਲਈ (HTML ਹੇਠਾਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ) ਮੈਂ ਇੱਕ ਚਿੱਤਰ ਨੂੰ greydout ਦੀ ਕਲਾਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਵਰਤ ਰਿਹਾ ਹਾਂ

ਇਸ ਨੂੰ ਗਰੇਡ ਕਰਨ ਲਈ, ਅਸੀਂ ਆਪਣੇ CSS ਸਟਾਇਲਸ਼ੀਟ ਵਿੱਚ ਹੇਠ ਦਿੱਤੇ ਸਟਾਈਲ ਨਿਯਮਾਂ ਨੂੰ ਜੋੜਦੇ ਹਾਂ:

.greydout {
-ਵੀਬੀਕਿਟ-ਓਪੈਸਿਟੀ: 0.25;
-ਮੋਜ-ਓਪੈਸਿਟੀ: 0.25;
ਧੁੰਦਲਾਪਨ: 0.25;
}

ਇਹ ਧੁੰਦਲਾਪਨ ਸੈਟਿੰਗ 25% ਤੱਕ ਅਨੁਵਾਦ ਕਰਦੇ ਹਨ ਇਸਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ ਚਿੱਤਰ ਨੂੰ ਆਪਣੀ ਆਮ ਪਾਰਦਰਸ਼ਤਾ ਦੀ 1/4 ਦਰਸਾਇਆ ਜਾਵੇਗਾ. ਬਿਲਕੁਲ ਪਾਰਦਰਸ਼ਕ ਨਾ ਹੋਣ ਦੇ ਨਾਲ ਪੂਰੀ ਤਰਾਂ ਨਿਰਪੱਖਤਾ 100% ਹੋਵੇਗੀ ਜਦਕਿ 0% ਪੂਰੀ ਤਰਾਂ ਪਾਰਦਰਸ਼ੀ ਹੋਵੇਗੀ.

ਅੱਗੇ, ਚਿੱਤਰ ਨੂੰ ਸਪੱਸ਼ਟ ਕਰਨ ਲਈ (ਜਾਂ ਬਿਲਕੁਲ ਸਹੀ, ਪੂਰੀ ਤਰਾਂ ਧੁੰਦਲਾ ਬਣਨ ਲਈ) ਜਦੋਂ ਮਾਊਸ ਨੂੰ ਇਸ ਉੱਤੇ ਖਿੱਚਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ: ਹੋਵਰ ਸੂਡੋ-ਕਲਾਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋਗੇ:

.greydout: ਹੋਵਰ {
-webkit-opacity: 1;
-ਮੋਜ-ਓਪੈਸਿਟੀ: 1;
ਧੁੰਦਲਾਪਨ: 1;
}

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

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

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

.greydout {
-ਵੀਬੀਕਿਟ-ਓਪੈਸਿਟੀ: 0.25;
-ਮੋਜ-ਓਪੈਸਿਟੀ: 0.25;
ਧੁੰਦਲਾਪਨ: 0.25;
-webkit-transition: ਸਾਰੇ 3s ਨੂੰ ਆਸਾਨ;
-ਮੋਜ਼-ਟਰਾਂਸ਼ਨਿਕਸ਼ਨ: ਸਾਰੇ 3s ਸੌਖੇ;
-ਮਜ਼-ਤਬਦੀਲੀ: ਸਾਰੇ 3s ਆਸਾਨੀ;
-o- ਤਬਦੀਲੀ: ਸਾਰੇ 3s ਨੂੰ ਆਸਾਨ;
ਤਬਦੀਲੀ: ਸਾਰੇ 3s ਆਸਾਨੀ;
}

ਇਸ ਕੋਡ ਦੇ ਨਾਲ, ਬਦਲਾਅ ਨੂੰ ਅਚਾਨਕ ਬਦਲਣ ਦੀ ਬਜਾਏ ਹੌਲੀ ਹੌਲੀ ਤਬਦੀਲੀ ਹੋਵੇਗੀ.

ਇਕ ਵਾਰ ਫਿਰ, ਅਸੀਂ ਇਥੇ ਬਹੁਤ ਸਾਰੇ ਵਿਕਰੇਤਾ ਪ੍ਰੀਫਕਸ ਨਿਯਮਾਂ ਦਾ ਇਸਤੇਮਾਲ ਕਰ ਰਹੇ ਹਾਂ. ਪਰਿਵਰਤਨ ਦੇ ਨਾਲ ਨਾਲ ਧੁੰਦਲਾਪਨ ਦੇ ਤੌਰ ਤੇ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ, ਇਸ ਲਈ ਇਹ ਅਗੇਤਰਾਂ ਦਾ ਅਰਥ ਹੈ.

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

ਫੇਡ ਆਉਟ ਸੰਭਵ ਹੈ ਬਹੁਤ

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

class = "withfadeout">

ਪਹਿਲਾਂ ਵਾਂਗ ਹੀ, ਤੁਸੀਂ ਓਪੈਸਿਟੀ ਨੂੰ ਬਦਲ ਕੇ ਬਦਲਦੇ ਹੋ: ਹੋਵਰ ਚੋਣਕਾਰ:

.withfadeout {
-webkit-transition: ਸਾਰੇ 2s ਆਸਾਨੀ ਨਾਲ ਇਨ-ਆਊਟ;
-ਮੋਜ਼-ਟਰਾਂਸ਼ਨਿਕਸ਼ਨ: ਸਾਰੇ 2 ਸਕਿੰਟਾਂ 'ਤੇ ਆਸਾਨੀ ਨਾਲ;
-ਮਜ਼-ਟਰਾਂਸਿਟਸ਼ਨ: ਸਾਰੇ 2 ਸਕਿੰਟਾਂ 'ਤੇ ਆਸਾਨੀ ਨਾਲ;
-o- ਤਬਦੀਲੀ: ਸਾਰੇ 2s ਨੂੰ ਆਸਾਨੀ ਨਾਲ-ਬਾਹਰ;
ਤਬਦੀਲੀ: ਸਾਰੇ 2s ਆਸਾਨੀ ਨਾਲ ਇਨ-ਆਊਟ;
}
.withfadeout: ਹੋਵਰ {
-ਵੀਬੀਕਿਟ-ਓਪੈਸਿਟੀ: 0.25;
-ਮੋਜ-ਓਪੈਸਿਟੀ: 0.25;
ਧੁੰਦਲਾਪਨ: 0.25;
}

ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਚਿੱਤਰ ਪੂਰੀ ਤਰਾਂ ਅਪਾਰਦਰਸ਼ੀ ਤੋਂ ਥੋੜਾ ਜਿਹਾ ਪਾਰਦਰਸ਼ੀ ਹੋਵੇਗਾ - ਸਾਡੀ ਪਹਿਲੀ ਉਦਾਹਰਣ ਦੇ ਉਲਟ.

ਚਿੱਤਰ ਤੋਂ ਇਲਾਵਾ ਜਾਣਾ

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

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

#myDiv {
ਚੌੜਾਈ: 280px;
ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: # 557A47;
color: #dfdfdf;
ਪੈਡਿੰਗ: 10 ਪੈਕਸ;
-webkit-transition: ਸਾਰੇ 4s ਆਸਾਨੀ ਨਾਲ ਬਾਹਰ 0s;
-ਮੋਜ਼-ਟਰਾਂਸ਼ਨਿਕਸ਼ਨ: ਸਾਰੇ 4s ਸੌਫਟਵੇਅਰ ਆਊਟ 0s;
-ਮਜ਼-ਟਰਾਂਸਿਟਸ਼ਨ: ਸਾਰੇ 4 ਸਕਿੰਟਾਂ 'ਚ ਆਸਾਨੀ ਨਾਲ ਆਈ 0 ਐਸ;
-o- ਤਬਦੀਲੀ: ਸਾਰੇ 4s ਆਸਾਨੀ ਨਾਲ ਬਾਹਰ 0s;
ਤਬਦੀਲੀ: ਸਾਰੇ 4s ਆਸਾਨੀ ਨਾਲ ਬਾਹਰ 0s;
}
#myDiv: ਹੋਵਰ {
-ਵੀਬੀਕਿਟ-ਓਪੈਸਿਟੀ: 0.25;
-ਮੋਜ-ਓਪੈਸਿਟੀ: 0.25;
ਧੁੰਦਲਾਪਨ: 0.25;
ਰੰਗ: # 000;
}

ਨੈਵੀਗੇਸ਼ਨ ਮੈਨੁਜ ਫੇਡਿੰਗ ਪਿਛੋਕੜ ਰੰਗਾਂ ਤੋਂ ਫਾਇਦਾ ਲੈ ਸਕਦਾ ਹੈ

ਇਸ ਸਧਾਰਨ ਨੇਵੀਗੇਸ਼ਨ ਮੀਨੂ ਵਿੱਚ ਬੈਕਗਰਾਊਂਡ ਰੰਗ ਫਰੇਡ ਹੌਲੀ-ਹੌਲੀ ਅਤੇ ਬਾਹਰ ਮੇਜਵੇਂ ਜਿਵੇਂ ਮੈਂ ਮੀਨੂ ਆਈਟਮਾਂ ਤੇ ਮਾਊਸ ਕਰਦਾ ਹਾਂ. ਇੱਥੇ HTML ਹੈ:

• • ਘਰ
  • • CSS3 ਟਿਊਟੋਰਿਅਲ
    • • CSS3 ਵਿਸ਼ੇਸ਼ਤਾ

ਅਤੇ ਇੱਥੇ CSS ਹੈ:

ul # sampleNav {ਸੂਚੀ-ਸ਼ੈਲੀ: ਕੋਈ ਨਹੀਂ; }
ਉਲ # sampleNav li {
ਡਿਸਪਲੇ: ਇਨਲਾਈਨ;
ਫਲੋਟ: ਖੱਬੇ;
ਪੈਡਿੰਗ: 5 ਪੈਕਸ 15 ਪੈਕਸ;
ਹਾਸ਼ੀਆ: 0 5 ਪੈਕਸ;
-webkit-transition: ਸਾਰੇ 2s ਲੀਨੀਅਰ;
-ਮੋਜ਼-ਟ੍ਰਾਂਜਿਸ਼ਨ: ਸਾਰੇ 2s ਰੇਖਿਕ;
-ਮਜ਼-ਸੰਕਰਮਣ: ਸਾਰੇ 2s ਰੇਖਿਕ;
-o- ਤਬਦੀਲੀ: ਸਾਰੇ 2s ਲੀਨੀਅਰ;
ਪਰਿਵਰਤਨ: ਸਾਰੇ 2s ਰੇਖਿਕ;
}
ul # sampleNav li {text-decoration: none; }
ul # sampleNav li: ਹੋਵਰ {
ਬੈਕਗ੍ਰਾਉਂਡ-ਕਲਰ: # DAF197;
}

ਬਰਾਊਜ਼ਰ ਸਹਿਯੋਗ

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

ਹੋਰ ਮਜ਼ੇਦਾਰ; ਦੋ ਚਿੱਤਰ ਸਵੈਪ ਕਰੋ

ਇੱਥੇ ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਦੂਜੀ ਵਿੱਚ ਮਿਟਾਉਣ ਦਾ ਉਦਾਹਰਨ ਹੈ. HTML ਵਰਤੋ:

ਅਤੇ CSS ਜਿਹੜਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪਾਰਦਰਸ਼ੀ ਬਣਾਉਂਦਾ ਹੈ ਜਦਕਿ ਦੂਜੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਸਪਸ਼ਟ ਹੈ ਅਤੇ ਫਿਰ ਪਰਿਵਰਤਨ ਦੋਵਾਂ ਨੂੰ ਸੁਪਸ ਕਰ ਦਿੰਦਾ ਹੈ:

.swapMe img {-webkit-transition: ਸਾਰੇ 1s ਆਸਾਨੀ ਨਾਲ ਇਨ-ਆਊਟ; -ਮੋਜ਼-ਟਰਾਂਸ਼ਨਿਕਸ਼ਨ: ਸਾਰੇ 1s ਸੌਖ-ਆਊਟ-ਆਊਟ; -ਮਜ਼-ਟਰਾਂਸਿਟਸ਼ਨ: ਸਾਰੇ 1s ਦੀ ਸੌਖ-ਆਊਟ. -o- ਤਬਦੀਲੀ: ਸਾਰੇ 1s ਸੁਖਾਲਾ-ਅੰਦਰ-ਬਾਹਰ; ਤਬਦੀਲੀ: ਸਾਰੇ 1s ਸੌਖ-ਆਊਟ-ਆਊਟ; } .swap1, .swapMe: ਹੋਵਰ .swap2 {-webkit-opacity: 1; -ਮੋਜ-ਓਪੈਸਿਟੀ: 1; ਧੁੰਦਲਾਪਨ: 1; } .swapMe: ਹੋਵਰ .swap1, .swap2 {-webkit-opacity: 0; -ਮੋਜ-ਓਪੈਸਿਟੀ: 0; ਧੁੰਦਲਾਪਨ: 0; }