01 ਦਾ 04
CSS3 ਨਾਲ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਰਾਇਰਰ ਗਰੇਡੀਐਂਟ ਬਣਾਉਣਾ
ਰੇਖਿਕ ਗਰੇਡੀਐਂਟ
ਸਭ ਤੋਂ ਵੱਧ ਆਮ ਕਿਸਮ ਦੀ ਗਰੇਡੀਐਂਟ ਜੋ ਤੁਸੀਂ ਵੇਖ ਸਕੋਗੇ ਦੋ ਰੰਗਾਂ ਦਾ ਰੇਖਿਕ ਗਰੇਡੀਐਂਟ. ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਗਰੇਡਿਅੰਟ ਉਸੇ ਲਾਈਨ ਦੇ ਨਾਲ ਪਹਿਲੇ ਰੰਗ ਤੋਂ ਦੂਜੀ ਤੀਕ ਹੌਲੀ ਹੌਲੀ ਬਦਲਣ ਵਾਲੀ ਇੱਕ ਸਿੱਧੀ ਲਾਈਨ ਵਿੱਚ ਚਲੇਗਾ. ਇਸ ਪੰਨੇ 'ਤੇ ਚਿੱਤਰ # 999 (ਗੂੜਾ ਭੂਰਾ) ਤੋਂ #fff (ਚਿੱਟੇ) ਤੱਕ ਇੱਕ ਸਧਾਰਨ ਖੱਬੇ-ਤੋਂ-ਸੱਜੇ ਗਰੇਡੀਐਂਟ ਦਿਖਾਉਂਦਾ ਹੈ.
ਲੀਨੀਅਰ ਗ੍ਰੈਡੀਏਂਟਜ਼ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸਭ ਤੋਂ ਸੌਖਾ ਹੈ, ਅਤੇ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਸਭ ਤੋਂ ਵੱਧ ਸਮਰਥਨ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ. CSS3 ਰੇਖਾਕਾਰ ਗਰੇਡੇੰਟ ਐਂਡਰਾਇਡ 2.3+, ਕਰੋਮ 1+, ਫਾਇਰਫਾਕਸ 3.6+, ਓਪੇਰਾ 11.1+ ਅਤੇ ਸਫਾਰੀ 4+ ਵਿੱਚ ਸਮਰਥਤ ਹਨ. ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਇੱਕ ਫਿਲਟਰ ਵਰਤ ਕੇ ਗਰੇਡੀਐਂਟ ਜੋੜ ਸਕਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ IE 5.5 ਤੇ ਵਾਪਸ ਦੇ ਸਕਦਾ ਹੈ. ਇਹ CSS3 ਨਹੀਂ ਹੈ, ਪਰ ਇਹ ਕ੍ਰੌਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਲਈ ਇੱਕ ਵਿਕਲਪ ਹੈ.
ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਗਰੇਡਿਅੰਟ ਪਰਿਭਾਸ਼ਤ ਕਰਦੇ ਹੋ ਤਾਂ ਤੁਹਾਨੂੰ ਕਈ ਵੱਖਰੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ:
- ਕਿਸ ਕਿਸਮ ਦਾ ਗ੍ਰੈਡੇੰਟ ਹੈ- ਰੇਖਿਕ ਜਾਂ ਰੇਡੀਏਲ
- ਗਰੇਡਿਅੰਟ ਕਿੱਥੇ ਸ਼ੁਰੂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ
- ਗਰੇਡਿਅੰਟ ਕਿੱਥੇ ਰੁਕ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ
- ਗਰੇਡਿਅੰਟ ਵਿੱਚ ਕਿਹੜੇ ਰੰਗ ਹਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਕਿੱਥੇ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਰੋਕਣਾ ਚਾਹੀਦਾ ਹੈ
CSS3 ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਰੇਖੀ ਗ੍ਰੈਡੀਏਂਟਜ਼ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਲਿਖੋ:
ਰੇਖਿਕ-ਗਰੇਡਿਅੰਟ ( ਕੋਣ ਜਾਂ ਪਾਸੇ ਜਾਂ ਕੋਨੇ , ਕਲਰ ਸਟਾਪ , ਕਲਰ ਸਟਾਪ )
- ਪਹਿਲਾਂ ਤੁਸੀਂ ਨੇਮ ਦੀ ਰੇਖਾਵੀਂ- ਗ੍ਰੈਡੀਏਟ ਦੇ ਨਾਲ ਗਰੇਡਿਅੰਟ ਦੀ ਕਿਸਮ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ.
- ਫਿਰ, ਤੁਸੀਂ ਢਾਂਚੇ ਦੇ ਸ਼ੁਰੂਆਤ ਅਤੇ ਬੰਦ ਕਰਨ ਦੇ ਪੌਇੰਟਜ਼ ਨੂੰ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ: ਡਿਗਰੀਆਂ ਵਿਚ 0 ਤੋਂ 359 ਤੱਕ ਲਾਈਨ ਦਾ ਕੋਣ, ਸਿੱਧਿਆਂ ਵੱਲ ਇਸ਼ਾਰਾ 0 ਡਿਗਰੀ ਨਾਲ. ਜਾਂ "ਪਾਸੇ ਜਾਂ ਕੋਨੇ" ਦੇ ਕੰਮ ਨਾਲ, ਜਿਵੇਂ ਕਿ ਖੱਬੇ, ਸੱਜੇ, ਥੱਲੇ ਅਤੇ ਸਿਖਰ ਤੇ ਇਹਨਾਂ ਨੂੰ ਅਗਲੇ ਸਫੇ ਤੇ ਵਧੇਰੇ ਵਿਸਤਾਰ ਵਿੱਚ ਵਿਆਖਿਆ ਕੀਤੀ ਜਾਵੇਗੀ. ਜੇ ਤੁਸੀਂ ਇਨ੍ਹਾਂ ਨੂੰ ਛੱਡ ਦਿੰਦੇ ਹੋ, ਤਾਂ ਗਰੇਡਿਅੰਟ ਤਲ ਤੋਂ ਤੱਤ ਦੇ ਤਲ ਤੱਕ ਫੈਲ ਜਾਵੇਗਾ.
- ਫਿਰ ਤੁਸੀਂ ਰੰਗ ਦੇ ਸਟਾਪ ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਦੇ ਹੋ ਤੁਸੀਂ ਰੰਗ ਕੋਡ ਨੂੰ ਅਤੇ ਇੱਕ ਚੋਣਵੀਂ ਪ੍ਰਤੀਸ਼ਤ ਦੇ ਨਾਲ ਸਟੋਪਸ ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਦੇ ਹੋ. ਪ੍ਰਤੀਸ਼ਤਤਾ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦੱਸਦੀ ਹੈ ਕਿ ਲਾਈਨ ਕਿੱਥੇ ਸ਼ੁਰੂ ਹੋਵੇ ਜਾਂ ਉਸ ਰੰਗ ਨਾਲ ਖਤਮ ਹੋਵੇ. ਡਿਫਾਲਟ ਨੂੰ ਲਾਈਨ ਦੇ ਨਾਲ ਬਰਾਬਰ ਰੰਗਾਂ ਨੂੰ ਰੱਖਣ ਦੀ ਹੈ ਤੁਸੀਂ ਸਫ਼ੇ 3 ਤੇ ਰੰਗ ਦੀਆਂ ਰੁਕਾਂ ਬਾਰੇ ਹੋਰ ਸਿੱਖੋਗੇ
ਇਸ ਲਈ, ਪਿਛਲੀ ਗਰੇਡੀਐਟ ਨੂੰ CSS3 ਨਾਲ ਪਰਿਭਾਸ਼ਤ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਲਿਖੋ:
ਰੇਖਿਕ-ਗਰੇਡੀਐਂਟ (ਖੱਬੇ, # 999999 0%, #ffffff 100%);
ਅਤੇ ਇਸਨੂੰ ਡੀ.ਆਈ.ਵੀ. ਦੀ ਪਿੱਠਭੂਮੀ ਵਜੋਂ ਸੈਟ ਕਰਨ ਲਈ ਤੁਸੀਂ ਲਿਖੋ:
div {
ਪਿੱਠਭੂਮੀ-ਚਿੱਤਰ: ਰੇਖਿਕ-ਗਰੇਡੀਐਂਟ (ਖੱਬੇ, # 999999 0%, #ffffff 100%;
}
CSS3 ਰੇਖਾਕਾਰ ਢਾਲਣ ਲਈ ਬ੍ਰਾਉਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨਾਂ
ਆਪਣੇ ਗਰੇਡਿਅੰਟ ਨੂੰ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਕੰਮ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਜ਼ਿਆਦਾਤਰ ਬ੍ਰਾਉਜ਼ਰਸ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨਾਂ ਅਤੇ ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰਰ 9 ਅਤੇ ਹੇਠਾਂ (ਅਸਲ ਵਿੱਚ 2 ਫਿਲਟਰ) ਲਈ ਇੱਕ ਫਿਲਟਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੈ. ਇਹ ਸਾਰੇ ਤੁਹਾਡੀ ਗਰੇਡਿਅਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਇੱਕੋ ਜਿਹੇ ਤੱਤ ਲੈਂਦੇ ਹਨ (ਸਿਵਾਏ ਕਿ ਤੁਸੀਂ ਸਿਰਫ਼ IE ਵਿੱਚ 2-ਰੰਗ ਦੇ ਗਰੇਡੀਐਂਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ)
ਮਾਈਕਰੋਸਾਫਟ ਫਿਲਟਰਜ਼ ਅਤੇ ਐਕਸਟੈਨਸ਼ਨ- ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰਰ ਸਮਰਥਨ ਲਈ ਸਭ ਤੋਂ ਚੁਣੌਤੀਪੂਰਨ ਹੈ, ਕਿਉਂਕਿ ਤੁਹਾਨੂੰ ਵੱਖ ਵੱਖ ਬ੍ਰਾਉਜ਼ਰ ਸੰਸਕਰਣਾਂ ਦੇ ਸਮਰਥਨ ਲਈ ਤਿੰਨ ਵੱਖਰੀਆਂ ਲਾਈਨਾਂ ਦੀ ਜ਼ਰੂਰਤ ਹੈ. ਉੱਪਰਲੇ ਸਲੇਟੀ ਨੂੰ ਸਫੈਦ ਗਰੇਡਿਅੰਟ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਤੁਸੀਂ ਲਿਖੋਗੇ:
/ * IE 5.5-7 * /
ਫਿਲਟਰ: ਪ੍ਰੋਗਿਡ: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', ਅੰਤਕੋਲਟਰ = '# ਫਫਫਫਫ', ਗ੍ਰੇਡੀਏਂਟ ਟਾਈਪ = 1);
/ * IE 8-9 * /
-ms-filter: "ਪ੍ਰੌਗਿੱਡ: ਡੀਐਕਸਆਈਮੇਜ ਟ੍ਰਾਂਸਫਾਰਮ. ਮਾਈਕ੍ਰੋਸਾਫਟ. ਗ੍ਰਾਡੈਂਟ (startColorstr = '# 999999', ਅੰਤ ਕੋਲੋਰਸਟ = '# ਫਫਫਫਫ', ਗ੍ਰੇਡੀਏਂਟ ਟਾਈਪ = 1)";
/ * IE 10 * /
-ਐਮਐਸ-ਰੇਖਿਕ-ਗਰੇਟਿਏਂਟ (ਖੱਬੇ, # 999999 0%, # ਫਾਫਫਸਟ 100%);
ਮੋਜ਼ੀਲਾ ਐਕਸਟੈਂਸ਼ਨ - The -moz- ਐਕਸਟੈਂਸ਼ਨ CSS3 ਦੀ ਪ੍ਰਾਪਤੀ ਦੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦਾ ਹੈ, ਕੇਵਲ -ਮੌਜ਼-ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ. ਫਾਇਰਫਾਕਸ ਲਈ ਉਪਰੋਕਤ ਢਾਲ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਲਿਖੋ:
-ਮੋਜ਼-ਰੇਖਿਕ-ਗਰੇਡੀਐਂਟ (ਖੱਬੇ, # 99 9999 0%, # ਫਾਫਫੱਫ 100%);
ਓਪੇਰਾ ਐਕਸਟੈਨਸ਼ਨ- -ਓ- ਐਕਸਟੈਂਸ਼ਨ ਓਪੇਰਾ 11.1+ ਲਈ ਜੋੜਿਆਂ ਨੂੰ ਜੋੜਦਾ ਹੈ ਉਪਰੋਕਤ ਗਰੇਡਿਅੰਟ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਲਿਖੋ:
-ਓ-ਰੇਖਿਕ-ਗਰੇਡੀਐਂਟ (ਖੱਬੇ, # 999999 0%, # ਫਾਫਫff 100%);
ਵੈਬਕਿੱਟ ਐਕਸਟੈਂਸ਼ਨ - -ਵੈਬਕੀਟ- ਐਕਸਟੈਂਸ਼ਨ CSS3 ਦੀ ਪ੍ਰਾਪਰਟੀ ਦੇ ਰੂਪ ਵਿੱਚ ਬਹੁਤ ਕੰਮ ਕਰਦਾ ਹੈ. Safari 5.1+ ਜਾਂ Chrome 10+ ਲਈ ਉਪਰੋਕਤ ਗਰੇਡਿਅਨਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਤੁਸੀਂ ਲਿਖੋ:
-webkit-linear-gradient (ਖੱਬੇ, # 999999 0%, #ffffff 100%);
ਵੈਬਕਿੱਟ ਐਕਸਟੈਂਸ਼ਨ ਦਾ ਪੁਰਾਣਾ ਰੁਪਾਂਤਰ ਵੀ ਹੈ ਜੋ Chrome 2+ ਅਤੇ Safari 4+ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ ਇਸ ਵਿੱਚ ਤੁਸੀਂ ਸੰਪਤੀ ਦੇ ਨਾਮ ਦੀ ਬਜਾਏ ਇੱਕ ਗਰੇਡਿਅੰਟ ਦੀ ਕਿਸਮ ਨੂੰ ਮੁੱਲ ਵਜੋਂ ਪਰਿਭਾਸ਼ਤ ਕਰਦੇ ਹੋ. ਇਸ ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ ਸਫੈਦ ਗਰੇਡਿਅਨ ਨਾਲ ਸਲੇਟੀ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਲਿਖੋ:
-ਵਬਕੀਟ-ਗਰੇਡੀਐਂਟ (ਰੇਖਿਕ, ਖੱਬੇ ਸਿਖਰ ਤੇ, ਸੱਜੇ ਉੱਤੇ, ਰੰਗ-ਸਟਾਪ (0%, # 999999), ਰੰਗ-ਰੋਕ (100%, # ffffff));
ਪੂਰੀ CSS3 ਰੇਖਾਕਾਰ ਗਰੇਡੀਐਂਟ CSS ਕੋਡ
ਉੱਪਰਲੇ ਸਫੈਦ ਗਰੇਡਿਅ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਪੂਰੇ ਕਰੌਸ-ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਲਈ, ਪਹਿਲਾਂ ਬ੍ਰਾਉਜ਼ਰਾਂ ਲਈ ਇੱਕ ਫਾਲਬੈਕ ਠੋਸ ਰੰਗ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜੋ ਗਰੇਡੀਅਨਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ, ਅਤੇ ਆਖਰੀ ਆਈਟਮ ਉਹ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ CSS3 ਸਟਾਈਲ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਜੋ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਨੁਕੂਲ ਹਨ. ਇਸ ਲਈ, ਤੁਸੀਂ ਲਿਖੋ:
ਪਿਛੋਕੜ: # 999999;
ਪਿਛੋਕੜ: -ਮੌਜ਼-ਰੇਖਿਕ-ਗਰੇਟਿਏਂਟ (ਖੱਬੇ, # 999999 0%, #ffffff 100%);
ਪਿੱਠਭੂਮੀ: -ਵਬਕੀਟ-ਗਰੇਡਿਅੰਟ (ਰੇਖਿਕ, ਖੱਬੇ ਚੋਟੀ, ਸੱਜੇ ਉੱਪਰੀ, ਰੰਗ-ਰੋਕ (0%, # 999999), ਰੰਗ-ਰੋਕ (100%, # ਫੈਂਫੱਫ));
ਪਿਛੋਕੜ: -ਵਬਕੀਟ-ਰੇਖਿਕ-ਗਰੇਟਿਏਂਟ (ਖੱਬੇ, # 999999 0%, # ਫਾਫਫff 100%);
ਪਿਛੋਕੜ: -ਓ-ਰੇਖਿਕ-ਗਰੇਟਿਏਂਟ (ਖੱਬੇ, # 999999 0%, #ffffff 100%);
ਪਿਛੋਕੜ: -ਐਮਐਸ-ਰੇਖਿਕ-ਗਰੇਟਿਏਂਟ (ਖੱਬੇ, # 99 9999 0%, # ਫਾਫਫਸਟ 100%);
ਫਿਲਟਰ: ਪ੍ਰੋਗਿਡ: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', ਅੰਤਕੋਲਟਰ = '# ਫਫਫਫਫ', ਗ੍ਰੇਡੀਏਂਟ ਟਾਈਪ = 1);
-ਮਾਂ-ਫਿਲਟਰ: ਪ੍ਰੋਗਿਡ: ਡੀਐਕਸਆਈਮੇਜ ਟ੍ਰਾਂਸਫਾਰਮ. Microsoft.gradient (startColorstr = '# 999999', ਅੰਤਕੋਲਟਰ = '# ਫਫਫਫਫ', ਗ੍ਰੇਡੀਏਂਟ ਟਾਈਪ = 1);
ਪਿੱਠਭੂਮੀ: ਰੇਖਿਕ-ਗਰੇਡੀਐਂਟ (ਖੱਬੇ, # 999999 0%, #ffffff 100%);
ਇਸ ਟਿਊਟੋਰਿਅਲ ਵਿਚਲੇ ਅਗਲੇ ਪੰਨੇ ਗਰੇਡਿਅਨਾਂ ਦੇ ਹਿੱਸਿਆਂ ਨੂੰ ਵਧੇਰੇ ਵਿਸਤਾਰ ਵਿੱਚ ਸਪੱਸ਼ਟ ਕਰਦੇ ਹਨ, ਅਤੇ ਆਖਰੀ ਪੰਨੇ ਤੁਹਾਨੂੰ ਇੱਕ ਅਜਿਹੇ ਸੰਦ ਵੱਲ ਸੰਕੇਤ ਕਰਦੇ ਹਨ ਜੋ ਕਿ CSS3 ਗਰੇਡੀਐਂਟਸ ਨੂੰ ਆਟੋਮੈਟਿਕ ਬਣਾਉਣ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੈ.
ਸਿਰਫ ਸੀਐਸਐਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇਸ ਰੇਖਿਕ ਗਰੇਡੀਐਂਟ ਵਿਚ ਕਾਰਵਾਈ ਦੇਖੋ.
02 ਦਾ 04
ਡਾਇਨਾਨਲ ਗਰੇਡੀਏਂਟਜ਼ ਬਣਾਉਣਾ- ਗਰੇਡੀਐਂਟ ਦਾ ਕੋਣ
ਸ਼ੁਰੂਆਤ ਅਤੇ ਸਟਾਪ ਪੁਆਇੰਟ, ਗਰੇਡੀਐਂਟ ਦੇ ਕੋਣ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਨ. ਜ਼ਿਆਦਾਤਰ ਰੇਖਿਕ ਗਰੇਡੀਏਂਟਸ ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਜਾਂ ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਤੱਕ ਹੁੰਦੇ ਹਨ ਪਰ ਇੱਕ ਗਰੇਡਿਏਨ ਬਣਾਉਣਾ ਸੰਭਵ ਹੈ ਜੋ ਕਿ ਇੱਕ ਵਿਕਰਣ ਦੀ ਲਾਈਨ ਤੇ ਚਲਦਾ ਹੈ. ਇਸ ਪੰਨੇ 'ਤੇ ਦਿੱਤੀ ਤਸਵੀਰ ਸਧਾਰਨ ਗਰੇਡੀਐਂਟ ਦਿਖਾਉਂਦੀ ਹੈ ਜੋ ਚਿੱਤਰ ਦੇ ਸੱਜੇ ਪਾਸੇ ਤੋਂ 45 ਡਿਗਰੀ ਕੋਣ ਤੇ ਸੱਜੇ ਪਾਸੇ ਤੋਂ ਚਲਦੀ ਹੈ.
ਗਰੇਡੀਐਂਟ ਲਾਈਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਕੋਣ
ਕੋਣ ਐਲੀਮੈਂਟ ਦੇ ਕੇਂਦਰ ਵਿਚ ਇਕ ਕਾਲਪਨਿਕ ਸਰਕਲ ਦੀ ਇਕ ਲਾਈਨ ਹੈ. 0 ਡਿਗਰੀ ਅੰਕ ਉੱਪਰ, 90 ਡਿਗਰੀ ਅੰਕ ਸੱਜੇ, 180 ਡਿਗਰੀ ਅੰਕ ਹੇਠਾਂ, ਅਤੇ ਖੱਬੇ ਪਾਸੇ 270 ਡਿਗਰੀ ਅੰਕ. ਤੁਸੀਂ 0 ਤੋਂ 359 ਡਿਗਰੀ ਤੱਕ ਕਿਸੇ ਵੀ ਕੋਣ ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰ ਸਕਦੇ ਹੋ.
ਤੁਹਾਨੂੰ ਇਹ ਯਾਦ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਇੱਕ ਵਰਗ ਵਿੱਚ, ਖੱਬੇ ਪਾਸੇ ਦੇ ਖੱਬੇ ਕੋਨੇ ਤੋਂ ਹੇਠਲੇ ਸੱਜੇ ਤੱਕ 45 ਡਿਗਰੀ ਐਂਗਲ ਦੀ ਚਾਲ, ਪਰ ਇੱਕ ਆਇਤਕਾਰ ਵਿੱਚ ਸ਼ੁਰੂ ਅਤੇ ਅੰਤ ਦੇ ਪੁਆਇੰਟ ਆਕਾਰ ਦੇ ਬਾਹਰ ਥੋੜੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਚਿੱਤਰ ਵਿੱਚ ਦੇਖ ਸਕਦੇ ਹੋ.
ਵਿਅੰਜਨ ਗਰੇਡਿਅੰਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦਾ ਵਧੇਰੇ ਆਮ ਤਰੀਕਾ ਇਕ ਕੋਨੇ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਸੱਜੇ ਅਤੇ ਗਰੇਡਿਅੰਟ ਉਸ ਕੋਨੇ ਤੋਂ ਦੂਜੇ ਉਲਟ ਕੋਨੇ ਤੇ ਚਲੇ ਜਾਣਗੇ. ਤੁਸੀਂ ਹੇਠਾਂ ਦਿੱਤੇ ਕੀਵਰਡਸ ਨਾਲ ਸ਼ੁਰੂਆਤੀ ਪਦ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ:
- ਸਿਖਰ ਤੇ
- ਸੱਜੇ
- ਥੱਲੇ
- ਖੱਬੇ
- ਸੈਂਟਰ
ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਹੋਰ ਖਾਸ ਹੋਣ ਲਈ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ:
- ਉੱਪਰ ਸੱਜੇ
- ਚੋਟੀ ਦੇ ਖੱਬੇ
- ਚੋਟੀ ਦੇ ਕੇਂਦਰ
- ਹੇਠਾਂ ਸੱਜੇ
- ਹੇਠਾਂ ਖੱਬੇ
- ਥੱਲੇ ਕੇਂਦਰ
- ਸੱਜੇ ਕੇਂਦਰ
- ਖੱਬੇ ਕੇਂਦਰ
ਇੱਥੇ ਇੱਕ ਚਿੱਤਰ ਵਰਗੀ ਇੱਕ ਗਰੇਡਿਅੰਟ ਲਈ ਹੈ, ਜੋ ਕਿ ਖੱਬੇ ਤੋਂ ਹੇਠਾਂ ਸੱਜੇ ਕੋਨੇ ਤੋਂ ਅੱਗੇ ਵਧਦੇ ਹੋਏ ਚਿੱਟੇ ਰੰਗ ਦਾ ਲਾਲ ਹੈ:
ਪਿਛੋਕੜ: ## 901 ਏ 1 ਸੀ;
ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ: -ਮੋਜ਼-ਰੇਖਿਕ-ਗਰੇਟਿਏਂਟ (ਸੱਜੇ ਸਿਖਰ ਤੇ, # 901 ਏ 1 ਸੀ 0%, # ਐਫਐਫਐਫਐਫਐਫ 100%);
ਪਿੱਠਭੂਮੀ-ਚਿੱਤਰ: -ਵਬਕੀਟ-ਗਰੇਟਿਅੰਟ (ਰੇਖਿਕ, ਸੱਜੇ ਉੱਤੇ, ਖੱਬੇ ਥੰਮ੍ਹ, ਰੰਗ-ਰੋਕਣਾ (0, # 901 ਏ 1 ਸੀ), ਰੰਗ-ਰੋਕ (1, #FFFFFF));
ਪਿੱਠਭੂਮੀ: -ਵਬਕੀਟ-ਰੇਖਿਕ-ਗਰੇਡਿਅੰਟ (ਸੱਜੇ ਸਿਖਰ, # 901 ਏ 1 ਸੀ 0%, # ਫਾਫਫff 100%);
ਪਿਛੋਕੜ: -ਓ-ਰੇਖਿਕ-ਗਰੇਡੀਐਂਟ (ਸੱਜੇ ਸਿਖਰ, # 901 ਏ 1 ਸੀ 0%, # ਫਾਫਫੱਫ 100%);
ਪਿਛੋਕੜ: -ਐਮਐਸ-ਰੇਖਿਕ-ਗਰੇਟਿਏਂਟ (ਸੱਜੇ ਸਿਖਰ, # 901 ਏ 1 ਸੀ 0%, # ਫਾਫਫff 100%);
ਪਿੱਠਭੂਮੀ: ਰੇਖਿਕ-ਗਰੇਡੀਐਂਟ (ਸੱਜੇ ਸਿਖਰ, # 901 ਏ 1 ਸੀ 0%, # ਫਾਫਫੱਫ 100%);
ਤੁਸੀਂ ਸ਼ਾਇਦ ਦੇਖਿਆ ਹੋਵੇਗਾ ਕਿ ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਕੋਈ IE ਫਿਲਟਰ ਨਹੀਂ ਹਨ. ਇਹ ਇਸਲਈ ਹੈ ਕਿਉਂਕਿ IE ਸਿਰਫ ਦੋ ਕਿਸਮ ਦੇ ਫਿਲਟਰਾਂ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ: ਤੋਂ ਉੱਪਰ (ਮੂਲ) ਅਤੇ ਖੱਬੇ ਤੋਂ ਸੱਜੇ (ਗਰੈਡੀਏਂਟ ਟਾਈਪ = 1 ਸਵਿੱਚ ਨਾਲ).
ਸਿਰਫ ਵਿਸਥਾਰ ਵਿੱਚ ਰੇਖਾਕਾਰ ਗਰੇਡਿਅੰਟ ਨੂੰ ਸਿਰਫ CSS ਵਰਤ ਕੇ ਵੇਖੋ.
03 04 ਦਾ
ਰੰਗ ਸਟਾਪ
CSS3 ਰੇਖਾਕਾਰ ਗਰੇਡੇਂਟ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਆਪਣੇ ਗਰੇਡਿਅੰਟ ਵਿੱਚ ਕਈ ਰੰਗਾਂ ਨੂੰ ਵੀ ਸ਼ਾਨਦਾਰ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ ਜੋੜ ਸਕਦੇ ਹੋ ਇਹਨਾਂ ਰੰਗਾਂ ਨੂੰ ਜੋੜਨ ਲਈ, ਤੁਸੀਂ ਆਪਣੀ ਸੰਪਤੀ ਦੇ ਅਖੀਰ ਤੇ ਹੋਰ ਰੰਗ ਜੋੜਦੇ ਹੋ, ਕਾਮਾ ਦੁਆਰਾ ਵੱਖ ਕੀਤੇ. ਤੁਹਾਨੂੰ ਇਹ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਲਾਈਨ ਕਿੱਥੇ ਸ਼ੁਰੂ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਜਾਂ ਕਦੋਂ ਖਤਮ ਹੋ ਸਕਦੀ ਹੈ.
ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰਰ ਫਿਲਟਰ ਸਿਰਫ ਦੋ ਰੰਗ ਦੀਆਂ ਸਟਾਪਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਗਰੇਡਿਅੰਟ ਬਣਾਉਂਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਸਿਰਫ ਉਹੀ ਪਹਿਲੇ ਅਤੇ ਦੂਜੇ ਰੰਗ ਸ਼ਾਮਲ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨ ਜੋ ਤੁਸੀਂ ਪ੍ਰਦਰਸ਼ਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ.
ਇੱਥੇ 3-ਕਲਰ ਗਰੇਡਿਅੰਟ ਲਈ CSS ਹੈ:
ਪਿਛੋਕੜ: #ffffff;
ਪਿਛੋਕੜ: -ਮੋਜ਼-ਰੇਖਿਕ-ਗਰੇਟਿਅੰਟ (ਖੱਬੇ, #ffffff 0%, # 901 A1C 51%, #ffffff 100%);
ਬੈਕਗਰਾਊਂਡ: -ਵਬਕੀਟ-ਗਰੇਡੀਐਂਟ (ਰੇਖਾਕਾਰ, ਖੱਬੇ ਥੰਮ, ਸੱਜੇ ਪਾਸੇ, ਕਲਰ-ਸਟਾਪ (0%, # ਫੈਂਫੱਫ), ਰੰਗ-ਰੋਕ (51%, # 901 ਏ 1 ਸੀ), ਰੰਗ-ਰੋਕ (100%, # ਫੈਂਫੱਫ));
ਪਿੱਠਭੂਮੀ: -ਵਬਕੀਟ-ਰੇਖਿਕ-ਗਰੇਡੀਐਂਟ (ਖੱਬੇ, # ਫਾਫਫੈਫ 0%, # 901 ਏ 1 ਸੀ 51%, # ਫੱਫਫੱਫ 100%);
ਪਿਛੋਕੜ: -ਓ-ਰੇਖਿਕ-ਗਰੇਟਿਅੰਟ (ਖੱਬੇ, # ਫਾਫਫਫ 0%, # 901 ਏ 1 ਸੀ 51%, # ਫੱਫਫੱਫ 100%);
ਪਿਛੋਕੜ: -ਐਮਐਸ-ਰੇਖਿਕ-ਗਰੇਟਿਏਂਟ (ਖੱਬੇ, # ਫਾਫਫਫ 0%, # 901 ਏ 1 ਸੀ 51%, # ਫੱਫਫੱਫ 100%);
ਫਿਲਟਰ: ਪ੍ਰੋਗਿਡ: ਡੀਐਕਸਆਈਮੇਜਟ੍ਰੈਨਸਫਾਰਮ. ਮਾਈਕ੍ਰੋਸਾਫਟ. ਗ੍ਰਾਡੈਂਟ (ਸਟਾਰਟ ਕਾਲਰਸਟ = '# ਫਫਫਫਫ', ਐਂਡ ਕੋਲੋਰਸਟ = '# ਫਫਫਫਫ', ਗ੍ਰੇਡੀਏਂਟ ਟਾਈਪ = 1);
ਪਿੱਠਭੂਮੀ: ਰੇਖਿਕ-ਗਰੇਡਿਅੰਟ (ਖੱਬੇ, #ffffff 0%, # 901 A1C 51%, # ffffff 100%);
ਇਸ ਰੇਖਿਕ ਗਰੇਡਿਅੰਟ ਨੂੰ ਸਿਰਫ CSS ਵਰਤਦੇ ਹੋਏ ਤਿੰਨ ਰੰਗ ਦੇ ਸਟਾਪਸ ਨਾਲ ਦੇਖੋ.
04 04 ਦਾ
ਬਿਲਡਿੰਗ ਗਰੇਡੀਐਂਟਜ਼ ਨੂੰ ਸੌਖਾ ਬਣਾਉ
ਗਰੇਡਿਅਨਾਂ ਨੂੰ ਬਣਾਉਣ ਵਿਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਨ ਲਈ ਦੋ ਥਾਂਵਾਂ ਦੀ ਸਿਫ਼ਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਉਨ੍ਹਾਂ ਦੇ ਦੋਨਾਂ ਨੂੰ ਲਾਭ ਅਤੇ ਨੁਕਸਾਨ ਹੁੰਦੇ ਹਨ, ਮੈਨੂੰ ਇੱਕ ਗਰੇਡਿੰਟ ਬਿਲਡਰ ਨਹੀਂ ਮਿਲਿਆ ਹੈ ਜੋ ਅਜੇ ਵੀ ਸਭ ਕੁਝ ਕਰਦਾ ਹੈ.
ਅਖੀਰ CSS ਗਰੇਡੀਐਂਟ ਜੇਨਰੇਟਰ
ਇਹ ਗਰੇਡਿਅੰਟ ਜਰਨੇਟਰ ਬਹੁਤ ਮਸ਼ਹੂਰ ਹੈ ਕਿਉਂਕਿ ਇਹ ਫੋਟੋਸ਼ਾਪ ਵਰਗੇ ਪ੍ਰੋਗਰਾਮਾਂ ਵਿੱਚ ਗਰੇਡਿਏਂਟ ਬਿਲਡਰਸ ਦੇ ਸਮਾਨ ਰੂਪ ਵਿੱਚ ਕਰਦਾ ਹੈ. ਮੈਂ ਇਹ ਵੀ ਪਸੰਦ ਕਰਦਾ ਹਾਂ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਸਾਰੀਆਂ CSS ਐਕਸਟੈਂਸ਼ਨਾਂ ਦਿੰਦਾ ਹੈ, ਕੇਵਲ ਵੈਬਕਿਟ ਅਤੇ ਮੋਜ਼ੀਲਾ ਨਹੀਂ. ਇਸ ਜਨਰੇਟਰ ਨਾਲ ਸਮੱਸਿਆ ਇਹ ਹੈ ਕਿ ਇਹ ਸਿਰਫ ਹਰੀਜੱਟਲ ਅਤੇ ਵਰਟੀਕਲ ਗ੍ਰਾਡੀਏੰਟ ਲਈ ਸਹਾਇਕ ਹੈ. ਜੇ ਤੁਸੀਂ ਵਿਕਰਣ ਗਰੇਡੀਐਂਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਹੋਰ ਜਨਰੇਟਰ ਕੋਲ ਜਾਣਾ ਪਵੇਗਾ ਜਿਸ ਦੀ ਮੈਂ ਸਿਫ਼ਾਰਸ਼ ਕਰਦਾ ਹਾਂ.
CSS3 ਗਰੇਡੀਐਂਟ ਜੇਨਰੇਟਰ
ਇਹ ਜਨਰੇਟਰ ਮੈਨੂੰ ਪਹਿਲੇ ਇੱਕ ਤੋਂ ਥੋੜਾ ਜਿਹਾ ਸਮਾਂ ਸਮਝਣ ਵਿੱਚ ਲੈ ਗਿਆ, ਪਰ ਇਹ ਇੱਕ ਵਿਕਰਣ ਵਿੱਚ ਦਿਸ਼ਾ ਬਦਲਣ ਲਈ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ.
ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਹੋਰ CSS ਗਰੇਡੀਐਂਟ ਜੇਨਰੇਟਰ ਬਾਰੇ ਜਾਣਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਇਹਨਾਂ ਤੋਂ ਬਿਹਤਰ ਪਸੰਦ ਕਰਦੇ ਹੋ, ਤਾਂ ਕਿਰਪਾ ਕਰਕੇ ਸਾਨੂੰ ਦੱਸੋ .