CSS ਚਿੱਤਰ ਸਟਾਈਲ ਸੈਟ ਕਰਨਾ
- ਪਿਛਲਾ ਪੰਨਾ CSS ਟੂਲਟਿਪ
- ਅਗਲਾ ਪੰਨਾ CSS object-fit
CSS ਨਾਲ ਚਿੱਤਰ ਸਟਾਈਲ ਸੈਟ ਕਰਨੇ ਸਿੱਖੋ。
ਗੋਲਾਕਾਰ ਚਿੱਤਰ
ਵਰਤੋਂ border-radius border-radius ਪ੍ਰਾਪਰਟੀ ਨਾਲ ਗੋਲਾਕਾਰ ਚਿੱਤਰ ਬਣਾਓ:
ਥੰਮਬਨੇਲ ਚਿੱਤਰ
ਵਰਤੋਂ border ਲੈਬਲ ਪ੍ਰਾਪਰਟੀ ਨਾਲ ਥੰਮਬਨੇਲ ਬਣਾਓ。
ਥੰਮਬਨੇਲ:
ਉਦਾਹਰਣ
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
ਰੈਸਪੋਨਸਿਵ ਚਿੱਤਰ
ਰੈਸਪੋਨਸਿਵ ਚਿੱਤਰ ਸਕਰੀਨ ਆਕਾਰ ਨੂੰ ਸਹਿਮਤੀ ਨਾਲ ਸੁਧਾਰੇਗਾ。
ਅਗਰ ਤੁਸੀਂ ਚਿੱਤਰ ਨੂੰ ਜ਼ਰੂਰਤ ਹੋਣ ਤੇ ਛੋਟਾ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਪਰ ਮੂਲ ਆਕਾਰ ਤੋਂ ਵੱਧ ਨਾ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਹੇਠ ਲਿਖੇ ਕੋਡ ਨੂੰ ਜੋੜੋ:
ਉਦਾਹਰਣ
img {
max-width: 100%;
height: auto;
}
ਸੁਝਾਅ:ਸਾਡੇ CSS RWD ਟੂਰ ਮੈਂਬਰਸ਼ਿਪ ਵਿੱਚ ਜ਼ਿਆਦਾ ਜਾਣੇ ਵਾਲੇ ਰੈਸਪੋਨਸਿਵ ਵੈੱਬ ਡਿਜਾਇਨ ਬਾਰੇ ਜਾਣੇ ਵਾਲੇ ਹੋਣ
ਮੱਧਮ ਚਿੱਤਰ
ਚਿੱਤਰ ਨੂੰ ਮੱਧਮ ਕਰਨ ਲਈ, ਕੋਲ ਮਾਰਜਿਨ ਨੂੰ ਸੈਟ ਕਰੋ: auto ਅਤੇ ਇਸ ਨੂੰ ਬਲਕ ਏਲੀਮੈਂਟ ਵਜੋਂ ਸੈਟ ਕਰੋ:
ਉਦਾਹਰਣ
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
ਪੋਲਾਰਾਇਡ ਚਿੱਤਰ / ਕਾਰਡ
ਸੂਰੀ ਕਲਾਉਡ
ਲਾਲ ਕਲਾਉਡ
ਉਦਾਹਰਣ
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
ਪਾਰਦਰਸ਼ੀ ਚਿੱਤਰ
opacity ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਮੁੱਲ 0.0 - 1.0 ਦਰਮਿਆਨ ਹੁੰਦਾ ਹੈ। ਮੁੱਲ ਨੂੰ ਘੱਟ ਕਰਨ ਦੇ ਨਾਲ ਪਾਰਦਰਸ਼ਤਾ ਵਧਦੀ ਹੈ:
opacity 0.2
opacity 0.5
opacity 1 (ਮੂਲ ਮੁੱਲ)
ਉਦਾਹਰਣ
img {
opacity: 0.5;
}
ਚਿੱਤਰ ਟੈਕਸਟ
ਚਿੱਤਰ ਵਿੱਚ ਟੈਕਸਟ ਦਾ ਸਥਾਨ ਕਿਵੇਂ ਨਿਰਧਾਰਿਤ ਕਰਨਾ ਹੈ:
ਉਦਾਹਰਣ
ਆਪਣੇ ਆਪ ਨਾਲ ਸਿਖਾਓ:
ਉੱਪਰ ਦੇ ਚੱਲੇ ਕੋਨੇ ਉੱਪਰ ਦੇ ਕੋਨੇ ਦੱਖਣ ਦੇ ਚੱਲੇ ਕੋਨੇ ਦੱਖਣ ਦੇ ਕੋਨੇ ਮੱਧ
ਚਿੱਤਰ ਫਿਲਟਰ
CSS filter ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਅੰਦਰੂਨੀ ਵਿਜ਼ੂਅਲ ਅਸਰ (ਜਿਵੇਂ ਕਿ ਧੂਮਲੀਕਰਨ ਅਤੇ ਪੂਰਤੀ) ਜੋੜਦੀ ਹੈ।
ਨੋਟ:Internet Explorer ਜਾਂ Edge 12 filter ਵਿਸ਼ੇਸ਼ਤਾ ਨਹੀਂ ਸਮਰਥਤ ਕਰਦੇ ਹਨ。
ਉਦਾਹਰਣ
ਸਾਰੇ ਚਿੱਤਰਾਂ ਦੇ ਰੰਗ ਨੂੰ ਸਿਵਰੇ ਬਣਾਓ (100% ਗ੍ਰੇ):
img {
filter: grayscale(100%);
}
ਸੁਝਾਅ:ਸਾਡੇ ਦਰਸ਼ਨ ਦੀ ਸੁਚਾਰੂਤਾ ਲਈ ਦੇਖੋ: CSS ਫਿਲਟਰਸ ਸੰਦਰਭ ਪੁਸਤਕ، CSS ਫਿਲਟਰਸ ਬਾਰੇ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ
ਚਿੱਤਰ ਹੋਵੇਂ ਤੇ ਉੱਪਲਬੱਧ ਹੋਣ ਵਾਲੇ ਢੰਗ
ਮਾਉਸ ਹੋਵੇਂ ਤੇ ਉੱਪਲਬੱਧ ਹੋਣ ਵਾਲੇ ਢੰਗ ਬਣਾਓ:
ਜਵਾਬੀ ਚਿੱਤਰ ਭੰਡਾਰ
ਅਸੀਂ ਸਜਾਇਬ ਕਰਨ ਵਾਲੇ ਚਿੱਤਰ ਭੰਡਾਰ ਬਣਾ ਸਕਦੇ ਹਾਂ।
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਮੀਡੀਆ ਕਿਵੇਤਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਕਿ ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਸਾਈਜ਼ ਦੇ ਚਿੱਤਰਾਂ ਨੂੰ ਮੁੜ ਕਰਨ। ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ ਦਾ ਆਕਾਰ ਬਦਲਣ ਅਤੇ ਪ੍ਰਭਾਵ ਦੇਖਣ ਲਈ ਛੇਡੋ:
ਉਦਾਹਰਣ
.responsive {}}
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {}}
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {}}
width: 100%;
}
}
ਸੁਝਾਅ:ਸਾਡੇ CSS RWD ਟੂਰ ਵਿੱਚ ਰੈਸਪੋਂਸਿਵ ਵੈੱਬ ਡਿਜ਼ਾਇਨ ਬਾਰੇ ਅਧਿਕ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰੋ。
ਇਮੇਜ ਮੋਡਲ (Image Modal)
ਇਹ ਇੱਕ ਉਦਾਹਰਣ ਹੈ ਕਿ CSS ਅਤੇ JavaScript ਕਿਵੇਂ ਮਿਲ ਕੇ ਕੰਮ ਕਰਦੇ ਹਨ。
ਪਹਿਲਾਂ, ਕਿਰਤਾਂ ਦੀ ਮੋਡਲ ਵਿੰਡੋ (ਡਾਇਲਾਗ) ਬਣਾਉਣ ਲਈ CSS ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਮੂਲਤਬੀ ਪਕਸ਼ ਦਿਖਾਉਣ ਦੀ ਆਗਿਆ ਦਿਓ。
ਤਦ, ਜਦੋਂ ਯੂਜ਼ਰ ਇਮੇਜ ਨੂੰ ਕਲਿੱਕ ਕਰੇ, ਤਾਂ JavaScript ਦੀ ਮੋਡਲ ਵਿੰਡੋ ਦਿਖਾਉਣ ਅਤੇ ਮੋਡਲ ਅੰਦਰ ਇਮੇਜ ਦਿਖਾਉਣ:
- ਪਿਛਲਾ ਪੰਨਾ CSS ਟੂਲਟਿਪ
- ਅਗਲਾ ਪੰਨਾ CSS object-fit
