אינהאַלט מאַרקעטינג
CSS3 פֿעיִקייטן איר קען נישט זיין אַווער פון: פלעקסבאָקס, גריד לייַאָוץ, מנהג פּראָפּערטיעס, טראַנזישאַנז, אַנאַמיישאַנז און קייפל באַקגראַונדז
קאַסקאַדינג סטייל שיץ (קסס) פאָרזעצן צו יוואַלוו און די לעצטע ווערסיעס קען האָבן עטלעכע פֿעיִקייטן וואָס איר קען נישט אפילו זיין אַווער פון. דאָ זענען עטלעכע פון די הויפּט ימפּרווומאַנץ און מעטאַדאַלאַדזשיז באַקענענ מיט CSS3, צוזאַמען מיט קאָד ביישפילן:
- Flexible Box Layout (Flexbox): אַ אויסלייג מאָדע וואָס אַלאַוז איר צו שאַפֿן פלעקסאַבאַל און אָפּרופיק לייאַוץ פֿאַר וועב זייַטלעך. מיט פלעקסבאָקס, איר קענען לייכט ייַנרייען און פאַרשפּרייטן עלעמענטן אין אַ קאַנטיינער. אין דעם בייַשפּיל, די
.container
קלאַס ניצטdisplay: flex
צו געבן פלעקסבאָקס אויסלייג מאָדע. דיjustify-content
פאַרמאָג איז באַשטימט צוcenter
צו כאָריזאַנטאַלי צענטער די קינד עלעמענט אין דעם קאַנטיינער. דיalign-items
פאַרמאָג איז באַשטימט צוcenter
צו ווערטיקלי צענטער די קינד עלעמענט. די.item
קלאַס שטעלט די הינטערגרונט פֿאַרב און וואַטן פֿאַר די קינד עלעמענט.
HTML
<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
קלאַס שטעלט די הינטערגרונט פֿאַרב און וואַטן פֿאַר די גריד זאכן.
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>
קסס
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
רעזולטאַט
פּונקט קסנומקס
פּונקט קסנומקס
פּונקט קסנומקס
פּונקט קסנומקס
- יבערגאַנג: CSS3 ינטראָודוסט אַ נומער פון נייַע פּראָפּערטיעס און טעקניקס פֿאַר קריייטינג טראַנזישאַנז אויף וועב זייַטלעך. פֿאַר בייַשפּיל, די
transition
פאַרמאָג קענען זיין געוויינט צו ופלעבן ענדערונגען אין CSS פּראָפּערטיעס איבער צייַט. אין דעם בייַשפּיל, די.box
קלאַס שטעלט די ברייט, הייך און ערשט הינטערגרונט פֿאַרב פֿאַר דעם עלעמענט. דיtransition
פאַרמאָג איז באַשטימט צוbackground-color 0.5s ease
צו ופלעבן ענדערונגען צו די הינטערגרונט פֿאַרב פאַרמאָג איבער אַ האַלב רגע מיט אַ יז-אין-אויס טיימינג פונקציע. די.box:hover
קלאַס ענדערונגען די הינטערגרונט פֿאַרב פון דעם עלעמענט ווען די מויז טייַטל איז איבער אים, טריגערינג די יבערגאַנג אַנאַמיישאַן.
HTML
<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
צו ענשור אַז די לעצט שטאַט פון די אַנאַמיישאַן איז ריטיינד נאָך עס ענדיקן.
HTML
<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
. אין דעם בייַשפּיל, מיר דעפינירן אַ 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
).
HTML
<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;
}