ವಿಷಯ ಮಾರ್ಕೆಟಿಂಗ್
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;
}