የይዘት ማርኬቲንግ

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.pngblue.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 CMO ነው። ግንዛቤዎችን ይክፈቱ እና መስራች Martech Zone. ዳግላስ በደርዘኖች የሚቆጠሩ ስኬታማ የማርቴክ ጅምሮችን ረድቷል፣ በማርቴክ ግዥዎች እና ኢንቨስትመንቶች ከ$5 ቢሊዮን በላይ ተገቢውን ትጋት በማግኘቱ እና ኩባንያዎች የሽያጭ እና የግብይት ስልቶቻቸውን እንዲተገብሩ እና በራስ ሰር እንዲሰሩ ማገዙን ቀጥሏል። ዳግላስ በአለም አቀፍ ደረጃ እውቅና ያለው ዲጂታል ለውጥ እና የማርቴክ ባለሙያ እና ተናጋሪ ነው። ዳግላስ የዱሚ መመሪያ እና የንግድ ሥራ አመራር መጽሐፍ የታተመ ደራሲ ነው።

    ተዛማጅ ርዕሶች

    ወደ ላይኛው አዝራር ተመለስ
    ገጠመ

    ማስታወቂያ እገዳ ተገኝቷል

    Martech Zone ይህንን ይዘት ያለ ምንም ወጪ ሊያቀርብልዎ ይችላል ምክንያቱም ገጻችንን በማስታወቂያ ገቢ፣ በተዛማጅ ማገናኛ እና በስፖንሰርነት ገቢ ስለምንፈጥር ነው። ጣቢያችንን ሲመለከቱ የማስታወቂያ ማገጃውን ቢያነሱት እናደንቃለን።