ਸਮੱਗਰੀ ਮਾਰਕੀਟਿੰਗ

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;
    }

    ਪਰਿਣਾਮ

    Douglas Karr

    Douglas Karr ਦਾ CMO ਹੈ ਓਪਨ ਇਨਸਾਈਟਸ ਅਤੇ ਦੇ ਸੰਸਥਾਪਕ Martech Zone. ਡਗਲਸ ਨੇ ਦਰਜਨਾਂ ਸਫਲ MarTech ਸਟਾਰਟਅੱਪਸ ਦੀ ਮਦਦ ਕੀਤੀ ਹੈ, ਮਾਰਟੇਕ ਐਕਵਾਇਰਿੰਗ ਅਤੇ ਨਿਵੇਸ਼ਾਂ ਵਿੱਚ $5 ਬਿਲੀਅਨ ਤੋਂ ਵੱਧ ਦੀ ਉਚਿਤ ਮਿਹਨਤ ਵਿੱਚ ਸਹਾਇਤਾ ਕੀਤੀ ਹੈ, ਅਤੇ ਕੰਪਨੀਆਂ ਨੂੰ ਉਹਨਾਂ ਦੀ ਵਿਕਰੀ ਅਤੇ ਮਾਰਕੀਟਿੰਗ ਰਣਨੀਤੀਆਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਅਤੇ ਸਵੈਚਲਿਤ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਨਾ ਜਾਰੀ ਰੱਖਿਆ ਹੈ। ਡਗਲਸ ਇੱਕ ਅੰਤਰਰਾਸ਼ਟਰੀ ਪੱਧਰ 'ਤੇ ਮਾਨਤਾ ਪ੍ਰਾਪਤ ਡਿਜੀਟਲ ਪਰਿਵਰਤਨ ਅਤੇ ਮਾਰਟੈਕ ਮਾਹਰ ਅਤੇ ਸਪੀਕਰ ਹੈ। ਡਗਲਸ ਇੱਕ ਡਮੀ ਦੀ ਗਾਈਡ ਅਤੇ ਇੱਕ ਕਾਰੋਬਾਰੀ ਲੀਡਰਸ਼ਿਪ ਕਿਤਾਬ ਦਾ ਪ੍ਰਕਾਸ਼ਿਤ ਲੇਖਕ ਵੀ ਹੈ।

    ਸੰਬੰਧਿਤ ਲੇਖ

    ਸਿਖਰ ਤੇ ਵਾਪਸ ਜਾਓ
    ਬੰਦ ਕਰੋ

    ਐਡਬਲਾਕ ਖੋਜਿਆ ਗਿਆ

    Martech Zone ਤੁਹਾਨੂੰ ਇਹ ਸਮੱਗਰੀ ਬਿਨਾਂ ਕਿਸੇ ਕੀਮਤ ਦੇ ਪ੍ਰਦਾਨ ਕਰਨ ਦੇ ਯੋਗ ਹੈ ਕਿਉਂਕਿ ਅਸੀਂ ਵਿਗਿਆਪਨ ਆਮਦਨ, ਐਫੀਲੀਏਟ ਲਿੰਕਾਂ, ਅਤੇ ਸਪਾਂਸਰਸ਼ਿਪਾਂ ਰਾਹੀਂ ਸਾਡੀ ਸਾਈਟ ਦਾ ਮੁਦਰੀਕਰਨ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ ਪ੍ਰਸ਼ੰਸਾ ਕਰਾਂਗੇ ਜੇਕਰ ਤੁਸੀਂ ਸਾਡੀ ਸਾਈਟ ਨੂੰ ਦੇਖਦੇ ਹੋਏ ਆਪਣੇ ਵਿਗਿਆਪਨ ਬਲੌਕਰ ਨੂੰ ਹਟਾ ਦਿੰਦੇ ਹੋ।