የይዘት ማርኬቲንግ
CSS3 ልታውቃቸው የማይችላቸው ባህሪያት፡ ፍሌክስቦክስ፣ የፍርግርግ አቀማመጦች፣ ብጁ ባህሪያት፣ ሽግግሮች፣ እነማዎች እና በርካታ ዳራዎች
የአጻጻፍ ስልት ሉሆች (የሲ ኤስ ኤስ) በዝግመተ ለውጥ ይቀጥሉ እና የቅርብ ጊዜ ስሪቶች እርስዎ እንኳን የማያውቁት አንዳንድ ባህሪያት ሊኖራቸው ይችላል። ከሲኤስኤስ 3 ጋር የገቡት አንዳንድ ዋና ዋና ማሻሻያዎች እና ዘዴዎች ከኮድ ምሳሌዎች ጋር እዚህ አሉ፡
- ተጣጣፊ የሳጥን አቀማመጥ (Flexbox)፦ ለድረ-ገጾች ተለዋዋጭ እና ምላሽ ሰጪ አቀማመጦችን ለመፍጠር የሚያስችል የአቀማመጥ ሁነታ. በፍሌክስቦክስ፣ በኮንቴይነር ውስጥ ያሉትን ንጥረ ነገሮች በቀላሉ ማስተካከል እና ማሰራጨት ይችላሉ። n ይህ ምሳሌ, የ
.container
ክፍል ይጠቀማልdisplay: flex
የflexbox አቀማመጥ ሁነታን ለማንቃት። የ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
ንብረቱ በጊዜ ሂደት በሲኤስኤስ ንብረቶች ላይ ለውጦችን ለማንቀሳቀስ ሊያገለግል ይችላል። በዚህ ምሳሌ, እ.ኤ.አ.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 ብጁ ባሕሪያት፡- ተብሎም ይታወቃል የሲኤስኤስ ተለዋዋጮች፣ ብጁ ንብረቶች በCSS3 ውስጥ ገብተዋል። በሲኤስኤስ ውስጥ የራስዎን ብጁ ንብረቶች እንዲገልጹ እና እንዲጠቀሙ ያስችሉዎታል፣ ይህም በመላው የቅጥ ሉሆችዎ ውስጥ እሴቶችን ለማከማቸት እና እንደገና ጥቅም ላይ ሊውል ይችላል። የCSS ተለዋዋጮች የሚታወቁት በሁለት ሰረዝ በሚጀምር ስም ነው፣ ለምሳሌ
--my-variable
. በዚህ ምሳሌ ውስጥ -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
).
ኤችቲኤምኤል
<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;
}