ਸਮੱਗਰੀ ਮਾਰਕੀਟਿੰਗ
CSS3 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਿਨ੍ਹਾਂ ਬਾਰੇ ਤੁਹਾਨੂੰ ਸ਼ਾਇਦ ਪਤਾ ਨਾ ਹੋਵੇ: ਫਲੈਕਸਬਾਕਸ, ਗਰਿੱਡ ਲੇਆਉਟ, ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਪਰਿਵਰਤਨ, ਐਨੀਮੇਸ਼ਨ, ਅਤੇ ਮਲਟੀਪਲ ਬੈਕਗ੍ਰਾਊਂਡ
ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਾਂ (CSS) ਦਾ ਵਿਕਾਸ ਕਰਨਾ ਜਾਰੀ ਰੱਖੋ ਅਤੇ ਨਵੀਨਤਮ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਕੁਝ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ ਜਿਨ੍ਹਾਂ ਬਾਰੇ ਤੁਸੀਂ ਜਾਣੂ ਵੀ ਨਹੀਂ ਹੋ ਸਕਦੇ ਹੋ। ਕੋਡ ਉਦਾਹਰਨਾਂ ਦੇ ਨਾਲ, ਇੱਥੇ CSS3 ਨਾਲ ਪੇਸ਼ ਕੀਤੇ ਗਏ ਕੁਝ ਪ੍ਰਮੁੱਖ ਸੁਧਾਰ ਅਤੇ ਵਿਧੀਆਂ ਹਨ:
- ਲਚਕਦਾਰ ਬਾਕਸ ਖਾਕਾ (ਫਲੈਕਸਬਾਕਸ): ਇੱਕ ਲੇਆਉਟ ਮੋਡ ਜੋ ਤੁਹਾਨੂੰ ਵੈਬ ਪੇਜਾਂ ਲਈ ਲਚਕਦਾਰ ਅਤੇ ਜਵਾਬਦੇਹ ਲੇਆਉਟ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਫਲੈਕਸਬਾਕਸ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਇੱਕ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਤੱਤਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਇਕਸਾਰ ਅਤੇ ਵੰਡ ਸਕਦੇ ਹੋ। n ਇਹ ਉਦਾਹਰਣ, the
.container
ਕਲਾਸ ਵਰਤਦਾ ਹੈdisplay: flex
flexbox ਲੇਆਉਟ ਮੋਡ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਣ ਲਈ। ਦjustify-content
ਸੰਪਤੀ ਨੂੰ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈcenter
ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਨੂੰ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ। ਦalign-items
ਸੰਪਤੀ ਨੂੰ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈcenter
ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਨੂੰ ਖੜ੍ਹਵੇਂ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ। ਦ.item
ਕਲਾਸ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਲਈ ਪਿਛੋਕੜ ਦਾ ਰੰਗ ਅਤੇ ਪੈਡਿੰਗ ਸੈੱਟ ਕਰਦਾ ਹੈ।
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
ਪਰਿਣਾਮ
ਕੇਂਦਰਿਤ ਤੱਤ
- ਗਰਿੱਡ ਖਾਕਾ: ਇੱਕ ਹੋਰ ਲੇਆਉਟ ਮੋਡ ਜੋ ਤੁਹਾਨੂੰ ਵੈਬ ਪੇਜਾਂ ਲਈ ਗੁੰਝਲਦਾਰ ਗਰਿੱਡ-ਆਧਾਰਿਤ ਲੇਆਉਟ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਗਰਿੱਡ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਕਤਾਰਾਂ ਅਤੇ ਕਾਲਮਾਂ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਫਿਰ ਗਰਿੱਡ ਦੇ ਖਾਸ ਸੈੱਲਾਂ ਦੇ ਅੰਦਰ ਤੱਤ ਰੱਖ ਸਕਦੇ ਹੋ। ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਦ
.grid-container
ਕਲਾਸ ਵਰਤਦਾ ਹੈdisplay: grid
ਗਰਿੱਡ ਲੇਆਉਟ ਮੋਡ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ। ਦgrid-template-columns
ਸੰਪਤੀ ਨੂੰ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈrepeat(2, 1fr)
ਬਰਾਬਰ ਚੌੜਾਈ ਦੇ ਦੋ ਕਾਲਮ ਬਣਾਉਣ ਲਈ। ਦgap
ਵਿਸ਼ੇਸ਼ਤਾ ਗਰਿੱਡ ਸੈੱਲਾਂ ਵਿਚਕਾਰ ਵਿੱਥ ਨਿਰਧਾਰਤ ਕਰਦੀ ਹੈ। ਦ.grid-item
ਕਲਾਸ ਗਰਿੱਡ ਆਈਟਮਾਂ ਲਈ ਪਿਛੋਕੜ ਦਾ ਰੰਗ ਅਤੇ ਪੈਡਿੰਗ ਸੈੱਟ ਕਰਦਾ ਹੈ।
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
ਪਰਿਣਾਮ
ਆਈਟਮ 1
ਆਈਟਮ 2
ਆਈਟਮ 3
ਆਈਟਮ 4
- ਪਰਿਵਰਤਨ: CSS3 ਨੇ ਵੈਬ ਪੇਜਾਂ 'ਤੇ ਪਰਿਵਰਤਨ ਬਣਾਉਣ ਲਈ ਕਈ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਤਕਨੀਕਾਂ ਪੇਸ਼ ਕੀਤੀਆਂ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਦ
transition
ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਸਮੇਂ ਦੇ ਨਾਲ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਦ.box
ਕਲਾਸ ਐਲੀਮੈਂਟ ਲਈ ਚੌੜਾਈ, ਉਚਾਈ ਅਤੇ ਸ਼ੁਰੂਆਤੀ ਪਿਛੋਕੜ ਦਾ ਰੰਗ ਸੈੱਟ ਕਰਦਾ ਹੈ। ਦtransition
ਸੰਪਤੀ ਨੂੰ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈbackground-color 0.5s ease
ਆਸਾਨ-ਇਨ-ਆਊਟ ਟਾਈਮਿੰਗ ਫੰਕਸ਼ਨ ਦੇ ਨਾਲ ਅੱਧੇ ਸਕਿੰਟ ਵਿੱਚ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ। ਦ.box:hover
ਕਲਾਸ ਐਲੀਮੈਂਟ ਦੇ ਪਿਛੋਕੜ ਦਾ ਰੰਗ ਬਦਲਦਾ ਹੈ ਜਦੋਂ ਮਾਊਸ ਪੁਆਇੰਟਰ ਇਸ ਦੇ ਉੱਪਰ ਹੁੰਦਾ ਹੈ, ਪਰਿਵਰਤਨ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਚਾਲੂ ਕਰਦਾ ਹੈ।
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
ਪਰਿਣਾਮ
ਹੋਵਰ
ਇਥੇ!
ਇਥੇ!
- ਐਨੀਮੇਸ਼ਨ: CSS3 ਨੇ ਵੈਬ ਪੇਜਾਂ 'ਤੇ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਕਈ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਤਕਨੀਕਾਂ ਪੇਸ਼ ਕੀਤੀਆਂ ਹਨ। ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਜੋੜਿਆ ਹੈ
animation
ਸੰਪਤੀ. ਅਸੀਂ ਇੱਕ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਹੈ@keyframes
ਐਨੀਮੇਸ਼ਨ ਲਈ ਨਿਯਮ, ਜੋ ਦੱਸਦਾ ਹੈ ਕਿ ਬਾਕਸ ਨੂੰ 0 ਸਕਿੰਟਾਂ ਦੀ ਮਿਆਦ ਵਿੱਚ 90 ਡਿਗਰੀ ਤੋਂ 0.5 ਡਿਗਰੀ ਤੱਕ ਘੁੰਮਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। ਜਦੋਂ ਬਾਕਸ ਉੱਤੇ ਹੋਵਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂspin
ਬਾਕਸ ਨੂੰ ਘੁੰਮਾਉਣ ਲਈ ਐਨੀਮੇਸ਼ਨ ਲਾਗੂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਦanimation-fill-mode
ਸੰਪਤੀ ਨੂੰ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈforwards
ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਐਨੀਮੇਸ਼ਨ ਦੀ ਅੰਤਮ ਸਥਿਤੀ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਬਾਅਦ ਬਰਕਰਾਰ ਰੱਖੀ ਜਾਂਦੀ ਹੈ।
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
ਪਰਿਣਾਮ
ਹੋਵਰ
ਇਥੇ!
ਇਥੇ!
- CSS ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ: ਵਜੋ ਜਣਿਆ ਜਾਂਦਾ CSS ਵੇਰੀਏਬਲ, ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ CSS3 ਵਿੱਚ ਪੇਸ਼ ਕੀਤੀਆਂ ਗਈਆਂ ਸਨ। ਉਹ ਤੁਹਾਨੂੰ CSS ਵਿੱਚ ਤੁਹਾਡੀਆਂ ਖੁਦ ਦੀਆਂ ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਅਤੇ ਵਰਤਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ, ਜੋ ਤੁਹਾਡੀਆਂ ਸਟਾਈਲਸ਼ੀਟਾਂ ਵਿੱਚ ਮੁੱਲਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਅਤੇ ਮੁੜ-ਵਰਤਣ ਲਈ ਵਰਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ। CSS ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਇੱਕ ਨਾਮ ਦੁਆਰਾ ਪਛਾਣਿਆ ਜਾਂਦਾ ਹੈ ਜੋ ਦੋ ਡੈਸ਼ਾਂ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ
--my-variable
. ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ CSS ਵੇਰੀਏਬਲ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਾਂ ਜਿਸਨੂੰ -primary-color ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਇੱਕ ਮੁੱਲ ਦਿੰਦੇ ਹਾਂ#007bff
, ਜੋ ਕਿ ਇੱਕ ਨੀਲਾ ਰੰਗ ਹੈ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਕਈ ਡਿਜ਼ਾਈਨਾਂ ਵਿੱਚ ਪ੍ਰਾਇਮਰੀ ਰੰਗ ਵਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਸੈੱਟ ਕਰਨ ਲਈ ਇਸ ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈbackground-color
ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਇੱਕ ਬਟਨ ਤੱਤ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾvar()
ਫੰਕਸ਼ਨ ਅਤੇ ਵੇਰੀਏਬਲ ਨਾਮ ਵਿੱਚ ਪਾਸ ਕਰਨਾ। ਇਹ ਵੇਰੀਏਬਲ ਦੇ ਮੁੱਲ ਨੂੰ ਬਟਨ ਲਈ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਵਜੋਂ ਵਰਤੇਗਾ।
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- ਕਈ ਪਿਛੋਕੜ: CSS3 ਤੁਹਾਨੂੰ ਇਸਦੀ ਸਥਿਤੀ ਅਤੇ ਸਟੈਕਿੰਗ ਆਰਡਰ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਦੀ ਯੋਗਤਾ ਦੇ ਨਾਲ, ਇੱਕ ਤੱਤ ਲਈ ਕਈ ਬੈਕਗ੍ਰਾਉਂਡ ਚਿੱਤਰਾਂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਬੈਕਗ੍ਰਾਊਂਡ ਦੋ ਚਿੱਤਰਾਂ ਨਾਲ ਬਣਿਆ ਹੈ,
red.png
ਅਤੇblue.png
ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੋਡ ਕੀਤੇ ਜਾਂਦੇ ਹਨbackground-image
ਸੰਪਤੀ. ਪਹਿਲੀ ਤਸਵੀਰ,red.png
, ਤੱਤ ਦੇ ਸੱਜੇ ਹੇਠਲੇ ਕੋਨੇ 'ਤੇ ਸਥਿਤ ਹੈ, ਜਦੋਂ ਕਿ ਦੂਜਾ ਚਿੱਤਰ,blue.png
, ਤੱਤ ਦੇ ਖੱਬੇ ਉੱਪਰਲੇ ਕੋਨੇ 'ਤੇ ਸਥਿਤ ਹੈ। ਦbackground-position
ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਹਰੇਕ ਚਿੱਤਰ ਦੀ ਸਥਿਤੀ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਦbackground-repeat
ਸੰਪੱਤੀ ਦੀ ਵਰਤੋਂ ਇਹ ਨਿਯੰਤਰਣ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਚਿੱਤਰ ਕਿਵੇਂ ਦੁਹਰਾਉਂਦੇ ਹਨ। ਪਹਿਲੀ ਤਸਵੀਰ,red.png
, ਨਾ ਦੁਹਰਾਉਣ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ (no-repeat
), ਜਦਕਿ ਦੂਜੀ ਤਸਵੀਰ,blue.png
, ਦੁਹਰਾਉਣ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}