Maketing Kontni

Karakteristik CSS3 ou pa ka okouran de: Flexbox, Layouts kadriyaj, Pwopriyete Custom, Tranzisyon, Animasyon, ak orijin miltip

Fèy estil kaskad (CSS) kontinye evolye ak dènye vèsyon yo ka gen kèk karakteristik ke ou ka pa menm okouran de. Men kèk nan pi gwo amelyorasyon ak metodoloji yo prezante ak CSS3, ansanm ak egzanp kòd:

  • Layout bwat fleksib (Flexbox): yon mòd layout ki pèmèt ou kreye layout fleksib ak reponn pou paj entènèt. Avèk flexbox, ou ka fasilman aliman ak distribye eleman nan yon veso. n egzanp sa a, la .container itilizasyon klas yo display: flex pou pèmèt mòd layout flexbox. La justify-content pwopriyete yo mete sou center pou santre orizontal eleman timoun nan nan veso a. La align-items pwopriyete yo mete sou center pou santre vètikal eleman pitit la. La .item klas la fikse koulè background ak padding pou eleman timoun nan.

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

Rezilta

Eleman Santre
  • Layout griyaj: yon lòt mòd layout ki pèmèt ou kreye kouman konplèks ki baze sou kadriyaj pou paj entènèt. Avèk kadriyaj, ou ka presize ranje ak kolòn, ak Lè sa a, mete eleman nan selil espesifik nan kadriyaj la. Nan egzanp sa a, la .grid-container itilizasyon klas yo display: grid pou pèmèt mòd layout kadriyaj. La grid-template-columns pwopriyete yo mete sou repeat(2, 1fr) pou kreye de kolòn ki egal lajè. La gap pwopriyete mete espas ki genyen ant selil kadriyaj yo. La .grid-item klas la fikse koulè background ak padding pou atik yo kadriyaj.

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

Rezilta

Atik 1
Atik 2
Atik 3
Atik 4
  • Tranzisyon: CSS3 prezante yon kantite nouvo pwopriyete ak teknik pou kreye tranzisyon sou paj entènèt. Pou egzanp, la transition pwopriyete ka itilize pou anime chanjman nan pwopriyete CSS sou tan. Nan egzanp sa a, la .box klas la fikse lajè, wotè, ak koulè background inisyal pou eleman an. La transition pwopriyete yo mete sou background-color 0.5s ease pou anime chanjman nan pwopriyete koulè background nan plis pase mwatye yon segonn ak yon fonksyon distribisyon fasil-in-out. La .box:hover klas chanje koulè background nan eleman nan lè pointeur sourit la sou li, deklanche animasyon tranzisyon an.

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

Rezilta

Hover
Isit la!
  • Animations: CSS3 prezante yon kantite nouvo pwopriyete ak teknik pou kreye animasyon sou paj entènèt. Nan egzanp sa a, nou te ajoute yon animasyon lè l sèvi avèk la animation pwopriyete. Nou te defini yon @keyframes règ pou animasyon an, ki presize ke bwat la ta dwe vire soti nan 0 degre a 90 degre sou yon dire 0.5 segonn. Lè bwat la plane sou, la spin animasyon aplike pou vire bwat la. La animation-fill-mode pwopriyete yo mete sou forwards asire ke eta final la nan animasyon an kenbe apre li fini.

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

Rezilta

Hover
Isit la!
  • Pwopriyete Custom CSS: Konnen tou kòm CSS varyab, pwopriyete koutim yo te prezante nan CSS3. Yo pèmèt ou defini epi sèvi ak pwòp pwopriyete koutim ou nan CSS, ki ka itilize pou estoke ak reitilize valè nan tout fèy style ou yo. Varyab CSS yo idantifye pa yon non ki kòmanse ak de tirè, tankou
    --my-variable. Nan egzanp sa a, nou defini yon varyab CSS ki rele –primary-color epi ba li yon valè #007bff, ki se yon koulè ble souvan itilize kòm yon koulè prensipal nan desen anpil. Nou te itilize varyab sa a pou mete a background-color pwopriyete yon eleman bouton, lè l sèvi avèk la var() fonksyon epi pase non varyab la. Sa a pral sèvi ak valè varyab la kòm koulè background pou bouton an.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Plizyè orijin: CSS3 pèmèt ou presize plizyè imaj background pou yon eleman, ak kapasite nan kontwole pozisyon li yo ak lòd anpile. Se background nan ki konpoze de de imaj, red.png ak blue.png, ki chaje lè l sèvi avèk la background-image pwopriyete. Premye imaj la, red.png, pozisyone nan kwen dwat anba eleman an, pandan y ap dezyèm imaj la, blue.png, se pozisyone nan kwen gòch anwo nan eleman an. La background-position pwopriyete yo itilize pou kontwole pozisyon chak imaj. La background-repeat pwopriyete yo itilize pou kontwole kijan imaj yo repete. Premye imaj la, red.png, mete pou pa repete (no-repeat), pandan y ap dezyèm imaj la, blue.png, mete pou repete (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;
    }

    Rezilta

    Douglas Karr

    Douglas Karr se CMO nan OpenINSIGHTS ak fondatè a nan Martech Zone. Douglas te ede plizyè douzèn demaraj MarTech ki gen siksè, li te ede nan dilijans plis pase $5 milya nan akizisyon ak envestisman Martech, epi li kontinye ede konpayi yo nan mete ann aplikasyon ak otomatize estrateji lavant ak maketing yo. Douglas se yon transfòmasyon dijital entènasyonalman rekonèt ak ekspè MarTech ak oratè. Douglas se tou yon otè pibliye nan yon gid Dummie a ak yon liv lidèchip biznis.

    Atik ki gen rapò

    Retounen nan bouton tèt
    Fèmen

    Adblock Detekte

    Martech Zone se kapab ba ou kontni sa a gratis paske nou monetize sit nou an atravè revni anons, lyen afilye, ak parennaj. Nou ta apresye si ou ta retire bloke anons ou a pandan w ap gade sit nou an.