ವಿಷಯ ಮಾರ್ಕೆಟಿಂಗ್

CSS3 ವೈಶಿಷ್ಟ್ಯಗಳು ನಿಮಗೆ ತಿಳಿದಿಲ್ಲದಿರಬಹುದು: ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್, ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳು, ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳು, ಪರಿವರ್ತನೆಗಳು, ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಬಹು ಹಿನ್ನೆಲೆಗಳು

ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳು (ಸಿಎಸ್ಎಸ್) ವಿಕಸನಗೊಳ್ಳುವುದನ್ನು ಮುಂದುವರಿಸಿ ಮತ್ತು ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಗಳು ನಿಮಗೆ ತಿಳಿದಿರದ ಕೆಲವು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಹೊಂದಿರಬಹುದು. ಕೋಡ್ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ CSS3 ನೊಂದಿಗೆ ಪರಿಚಯಿಸಲಾದ ಕೆಲವು ಪ್ರಮುಖ ಸುಧಾರಣೆಗಳು ಮತ್ತು ವಿಧಾನಗಳು ಇಲ್ಲಿವೆ:

  • ಹೊಂದಿಕೊಳ್ಳುವ ಬಾಕ್ಸ್ ಲೇಔಟ್ (Flexbox): ವೆಬ್ ಪುಟಗಳಿಗಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಸ್ಪಂದಿಸುವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಲೇಔಟ್ ಮೋಡ್. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ, ನೀವು ಕಂಟೇನರ್‌ನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಸುಲಭವಾಗಿ ಜೋಡಿಸಬಹುದು ಮತ್ತು ವಿತರಿಸಬಹುದು. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ದಿ .container ವರ್ಗ ಬಳಕೆಗಳು display: flex ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಲೇಔಟ್ ಮೋಡ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು. ದಿ justify-content ಆಸ್ತಿಯನ್ನು ಹೊಂದಿಸಲಾಗಿದೆ center ಕಂಟೇನರ್‌ನೊಳಗೆ ಮಗುವಿನ ಅಂಶವನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು. ದಿ align-items ಆಸ್ತಿಯನ್ನು ಹೊಂದಿಸಲಾಗಿದೆ center ಮಗುವಿನ ಅಂಶವನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು. ದಿ .item ವರ್ಗವು ಮಗುವಿನ ಅಂಶಕ್ಕಾಗಿ ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ.

ಎಚ್ಟಿಎಮ್ಎಲ್

<div class="container">
  <div class="item">Centered Element</div>
</div>

ಸಿಎಸ್ಎಸ್

.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 ವರ್ಗವು ಗ್ರಿಡ್ ಐಟಂಗಳಿಗೆ ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ.

ಎಚ್ಟಿಎಮ್ಎಲ್

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

ಸಿಎಸ್ಎಸ್

.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 ವರ್ಗವು ಮೌಸ್ ಪಾಯಿಂಟರ್ ಅದರ ಮೇಲೆ ಇರುವಾಗ ಅಂಶದ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ, ಪರಿವರ್ತನೆ ಅನಿಮೇಶನ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.

ಎಚ್ಟಿಎಮ್ಎಲ್

<div class="box"></div>

ಸಿಎಸ್ಎಸ್

.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 ಅನಿಮೇಷನ್ ಮುಗಿದ ನಂತರ ಅದರ ಅಂತಿಮ ಸ್ಥಿತಿಯನ್ನು ಉಳಿಸಿಕೊಳ್ಳಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು.

ಎಚ್ಟಿಎಮ್ಎಲ್

<div class="rotate"></div>

ಸಿಎಸ್ಎಸ್

.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. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು -primary-color ಎಂಬ CSS ವೇರಿಯೇಬಲ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ ಮತ್ತು ಅದರ ಮೌಲ್ಯವನ್ನು ನೀಡುತ್ತೇವೆ #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).

    ಎಚ್ಟಿಎಮ್ಎಲ್

    <div id="multibackground"></div>

    ಸಿಎಸ್ಎಸ್

    #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 ನ ಸಿಎಂಒ ಆಗಿದೆ ಓಪನ್‌ಇನ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಸ್ಥಾಪಕ Martech Zone. ಡಗ್ಲಾಸ್ ಹಲವಾರು ಯಶಸ್ವಿ ಮಾರ್ಟೆಕ್ ಸ್ಟಾರ್ಟ್‌ಅಪ್‌ಗಳಿಗೆ ಸಹಾಯ ಮಾಡಿದ್ದಾರೆ, ಮಾರ್ಟೆಕ್ ಸ್ವಾಧೀನಗಳು ಮತ್ತು ಹೂಡಿಕೆಗಳಲ್ಲಿ $5 ಬಿಲಿಯನ್‌ಗಿಂತ ಹೆಚ್ಚಿನ ಪರಿಶ್ರಮದಲ್ಲಿ ಸಹಾಯ ಮಾಡಿದ್ದಾರೆ ಮತ್ತು ಕಂಪನಿಗಳು ತಮ್ಮ ಮಾರಾಟ ಮತ್ತು ಮಾರುಕಟ್ಟೆ ತಂತ್ರಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಮತ್ತು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಸಹಾಯ ಮಾಡುವುದನ್ನು ಮುಂದುವರೆಸಿದ್ದಾರೆ. ಡೌಗ್ಲಾಸ್ ಅಂತರಾಷ್ಟ್ರೀಯವಾಗಿ ಗುರುತಿಸಲ್ಪಟ್ಟ ಡಿಜಿಟಲ್ ರೂಪಾಂತರ ಮತ್ತು ಮಾರ್ಟೆಕ್ ತಜ್ಞ ಮತ್ತು ಸ್ಪೀಕರ್. ಡೌಗ್ಲಾಸ್ ಅವರು ಡಮ್ಮೀಸ್ ಗೈಡ್ ಮತ್ತು ವ್ಯಾಪಾರ ನಾಯಕತ್ವ ಪುಸ್ತಕದ ಪ್ರಕಟಿತ ಲೇಖಕರೂ ಆಗಿದ್ದಾರೆ.

    ಸಂಬಂಧಿತ ಲೇಖನಗಳು

    ಮೇಲಿನ ಬಟನ್ಗೆ ಹಿಂತಿರುಗಿ
    ಮುಚ್ಚಿ

    ಆಡ್‌ಬ್ಲಾಕ್ ಪತ್ತೆಯಾಗಿದೆ

    Martech Zone ಜಾಹೀರಾತು ಆದಾಯ, ಅಂಗಸಂಸ್ಥೆ ಲಿಂಕ್‌ಗಳು ಮತ್ತು ಪ್ರಾಯೋಜಕತ್ವಗಳ ಮೂಲಕ ನಾವು ನಮ್ಮ ಸೈಟ್‌ನಿಂದ ಹಣಗಳಿಸುವುದರಿಂದ ಯಾವುದೇ ವೆಚ್ಚವಿಲ್ಲದೆ ಈ ವಿಷಯವನ್ನು ನಿಮಗೆ ಒದಗಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ನೀವು ನಮ್ಮ ಸೈಟ್ ಅನ್ನು ವೀಕ್ಷಿಸಿದಾಗ ನಿಮ್ಮ ಜಾಹೀರಾತು ಬ್ಲಾಕರ್ ಅನ್ನು ನೀವು ತೆಗೆದುಹಾಕಿದರೆ ನಾವು ಪ್ರಶಂಸಿಸುತ್ತೇವೆ.