content Marketing

Atụmatụ CSS3 ị nwere ike ị gaghị ama: Flexbox, Grid Layouts, Properties Custom, Transition, Animations, and Multiple Backgrounds

Mpempe akwụkwọ ụdị cascading (CSS) na-aga n'ihu na-agbanwe na nsụgharị ọhụrụ nwere ike ịnwe ụfọdụ atụmatụ nke ị na-amaghị. Nke a bụ ụfọdụ n'ime nkwalite na usoro ewepụtara na CSS3, yana ọmụmaatụ koodu:

  • Nhazi igbe na-agbanwe agbanwe (Flexbox): usoro nhazi nke na-enye gị ohere ịmepụta nhazi mgbanwe na nzaghachi maka ibe weebụ. Site na flexbox, ị nwere ike ịhazi ma kesaa ihe n'ime akpa. n ihe atụ a, na .container klas eji display: flex iji mee ka ọnọdụ okirikiri nhọrọ ukwuu flexbox nwee ike. Nke justify-content ihe onwunwe atọrọ ka center iji kwụ ọtọ n'etiti ihe nwa ahụ n'ime akpa. Nke align-items ihe onwunwe atọrọ ka center iji kwụ ọtọ n'etiti ihe nwata ahụ. Nke .item klaasị na-edobe agba ndabere na padding maka mmewere nwa.

HTML

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

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  background-color: #ddd;
  padding: 20px;
}

N'ihi

Ihe etiti etiti
  • Nhazi grid: Ụdị nhazi ọzọ nke na-enye gị ohere ịmepụta nhazi grid mgbagwoju anya maka ibe weebụ. Site na grid, ị nwere ike ịkọwa ahịrị na kọlụm, wee tinye ihe n'ime sel ụfọdụ nke okporo. N'ihe atụ a, ndị .grid-container klas eji display: grid iji mee ka ọnọdụ nhazi grid nwee ike. Nke grid-template-columns ihe onwunwe atọrọ ka repeat(2, 1fr) iji mepụta ogidi abụọ nke obosara nhata. Nke gap ihe onwunwe na-edobe oghere n'etiti sel grid. Nke .grid-item klaasị na-edobe agba ndabere na padding maka ihe grid.

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>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

N'ihi

Nkebi 1
Nkebi 2
Nkebi 3
Nkebi 4
  • Mgbanwe: CSS3 webatara ọtụtụ ihe ọhụrụ na usoro maka imepụta mgbanwe na ibe weebụ. Dịka ọmụmaatụ, ndị transition enwere ike iji akụrụngwa mee mgbanwe na akụrụngwa CSS ka oge na-aga. N'ihe atụ a, ndị .box klaasị na-edobe obosara, ịdị elu, na agba ndabere mmalite maka mmewere. Nke transition ihe onwunwe atọrọ ka background-color 0.5s ease iji mee mgbanwe na ihe onwunwe n'okirikiri ihe karịrị ọkara nkeji na-enwe ọrụ oge dị mfe na-apụ apụ. Nke .box:hover klas na-agbanwe agba agba nke mmewere mgbe ihe nrịbama òké nọ n'elu ya, na-akpalite animation mgbanwe.

HTML

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

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

N'ihi

Hover
Ebe a!
  • eserese: CSS3 webatara ọtụtụ ihe ọhụrụ na usoro maka imepụta animation na ibe weebụ. N'ọmụmaatụ a, anyị atụkwasịla ihe ngosi site na iji animation ihe onwunwe. Anyị akọwapụtala a @keyframes iwu maka animation, nke na-akọwapụta na igbe ahụ kwesịrị ịtụgharị site na ogo 0 ruo ogo 90 n'ime oge nke 0.5 sekọnd. Mgbe igbe a na-atụgharị n'elu, ndị spin A na-etinye animation iji tụgharịa igbe ahụ. Nke animation-fill-mode ihe onwunwe atọrọ ka forwards iji hụ na a na-edobe ọnọdụ ikpeazụ nke ihe nkiri ahụ mgbe ọ gwụchara.

HTML

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

CSS

.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;
}

N'ihi

Hover
Ebe a!
  • Njirimara CSS: A makwaara dị ka Ụdị mgbanwe CSS, ewebata akụrụngwa omenala na CSS3. Ha na-enye gị ohere ịkọwapụta na iji akụrụngwa omenala nke gị na CSS, nke enwere ike iji chekwaa ma jiri ụkpụrụ mee ihe n'ime akwụkwọ ụdị gị niile. A na-amata mgbanwe CSS site na aha na-amalite na dashes abụọ, dịka
    --my-variable. N'ihe atụ a, anyị na-akọwapụta mgbanwe CSS nke a na-akpọ -primary-color ma nye ya uru nke #007bff, nke bụ agba anụnụ anụnụ a na-ejikarị dị ka agba bụ isi n'ọtụtụ atụmatụ. Anyị ejirila mgbanwe a tọọ ihe background-color ihe onwunwe nke bọtịnụ, site na iji var() arụ ọrụ ma na-agafe na aha agbanwe agbanwe. Nke a ga-eji uru nke mgbanwe dị ka agba ndabere maka bọtịnụ.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Ọtụtụ ndabere: CSS3 na-enye gị ohere ịkọwapụta ọtụtụ onyonyo n'okirikiri maka ihe mmewere, na-enwe ike ijikwa nhazi ya na usoro nhazi ya. Ihe oyiyi abụọ nwere ndabere. red.png na blue.png, nke a na-ebunye site na iji background-image ihe onwunwe. Foto nke mbụ, red.png, ka edobere n'akụkụ aka nri ala nke mmewere, ebe onyonyo nke abụọ, blue.png, ka edobere n'akụkụ elu aka ekpe nke mmewere. Nke background-position a na-eji ihe onwunwe na-achịkwa nhazi nke ihe oyiyi ọ bụla. Nke background-repeat a na-eji ihe onwunwe na-achịkwa ka ihe oyiyi na-emegharị. Foto nke mbụ, red.png, atọrọ ka ọ ghara ikwugharị (no-repeat), mgbe foto nke abụọ, blue.png, atọrọ ka ikwugharị (repeat).

    HTML

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

    CSS

    #multibackground {
      background-image: url(red.png), url(blue.png);
      background-position: right bottom, left top;
      background-repeat: no-repeat, repeat;
      height: 200px;
      width: 200px;
    }

    N'ihi

    Douglas Karr

    Douglas Karr bụ CMO Mepee ihe ọmụma na onye nchoputa nke Martech Zone. Douglas enyerela ọtụtụ mmalite MarTech aka nke ọma, nyere aka n'ịrụsi ọrụ ike nke ihe karịrị ijeri $ 5 na nnweta na ntinye ego nke Martech, ma na-aga n'ihu na-enyere ụlọ ọrụ aka n'imejuputa na imezi usoro ahịa na ahịa ha. Douglas bụ mgbanwe dijitalụ ama ama na mba ụwa na ọkachamara MarTech na ọkà okwu. Douglas bụkwa onye odee bipụtara nke ndu Dummie na akwụkwọ ndu azụmaahịa.

    njikọ Articles

    Gaa na bọtịnụ n'elu
    nso

    Achọpụtara ihe mgbochi

    Martech Zone nwere ike ịnye gị ọdịnaya a n'efu n'ihi na anyị na-enweta saịtị anyị site na ego mgbasa ozi, njikọ ndị mmekọ, na nkwado. Ọ ga-amasị anyị ma ị ga-ewepụ ihe mgbochi mgbasa ozi gị ka ị na-elele saịtị anyị.