Marketing treści

Funkcje CSS3, o których możesz nie wiedzieć: Flexbox, układy siatki, niestandardowe właściwości, przejścia, animacje i różne tła

Kaskadowe arkusze stylów (CSS) nadal ewoluują, a najnowsze wersje mogą zawierać pewne funkcje, o których możesz nawet nie wiedzieć. Oto niektóre z głównych ulepszeń i metodologii wprowadzonych w CSS3 wraz z przykładami kodu:

  • Elastyczny układ pudełka (Flexbox): tryb układu, który umożliwia tworzenie elastycznych i responsywnych układów stron internetowych. Dzięki Flexbox możesz łatwo wyrównać i rozmieścić elementy w kontenerze. w tym przykładzie, .container zastosowania klasy display: flex aby włączyć tryb układu Flexbox. The justify-content właściwość jest ustawiona na center aby poziomo wyśrodkować element podrzędny w kontenerze. The align-items właściwość jest ustawiona na center aby pionowo wyśrodkować element potomny. The .item class ustawia kolor tła i wypełnienie dla elementu potomnego.

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

Wynik

Wyśrodkowany element
  • Układ siatki: inny tryb układu, który umożliwia tworzenie złożonych układów stron internetowych opartych na siatce. Dzięki siatce możesz określić wiersze i kolumny, a następnie umieścić elementy w określonych komórkach siatki. W tym przykładzie .grid-container zastosowania klasy display: grid aby włączyć tryb układu siatki. The grid-template-columns właściwość jest ustawiona na repeat(2, 1fr) aby utworzyć dwie kolumny o równej szerokości. The gap właściwość ustawia odstępy między komórkami siatki. The .grid-item class ustawia kolor tła i wypełnienie elementów siatki.

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

Wynik

Pozycja 1
Pozycja 2
Pozycja 3
Pozycja 4
  • Przejścia: CSS3 wprowadził szereg nowych właściwości i technik tworzenia przejść na stronach internetowych. Na przykład transition właściwość może służyć do animowania zmian właściwości CSS w czasie. W tym przykładzie .box class ustawia szerokość, wysokość i początkowy kolor tła elementu. The transition właściwość jest ustawiona na background-color 0.5s ease aby animować zmiany właściwości koloru tła w ciągu pół sekundy za pomocą funkcji pomiaru czasu z łatwością. The .box:hover class zmienia kolor tła elementu, gdy znajduje się nad nim wskaźnik myszy, uruchamiając animację przejścia.

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

Wynik

Wahać się
Here!
  • animacje: CSS3 wprowadził szereg nowych właściwości i technik tworzenia animacji na stronach internetowych. W tym przykładzie dodaliśmy animację za pomocą animation nieruchomość. Zdefiniowaliśmy a @keyframes reguła dla animacji, która określa, że ​​ramka powinna obracać się od 0 stopni do 90 stopni w ciągu 0.5 sekundy. Gdy pole jest najechane kursorem, spin animacja jest stosowana do obracania pudełka. The animation-fill-mode właściwość jest ustawiona na forwards aby upewnić się, że ostateczny stan animacji zostanie zachowany po jej zakończeniu.

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

Wynik

Wahać się
Here!
  • Właściwości niestandardowe CSS: Znany także jako Zmienne CSS, w CSS3 wprowadzono niestandardowe właściwości. Pozwalają definiować i używać własnych niestandardowych właściwości w CSS, których można używać do przechowywania i ponownego wykorzystywania wartości w arkuszach stylów. Zmienne CSS są identyfikowane przez nazwę zaczynającą się od dwóch myślników, np
    --my-variable. W tym przykładzie definiujemy zmienną CSS o nazwie –primary-color i nadajemy jej wartość #007bff, który jest kolorem niebieskim powszechnie używanym jako kolor podstawowy w wielu projektach. Użyliśmy tej zmiennej do ustawienia background-color właściwość elementu przycisku, używając metody var() funkcji i przekazując nazwę zmiennej. Spowoduje to użycie wartości zmiennej jako koloru tła przycisku.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Wiele tła: CSS3 pozwala określić wiele obrazów tła dla elementu, z możliwością kontrolowania jego pozycjonowania i kolejności układania. Tło składa się z dwóch obrazów, red.png i blue.png, które są ładowane za pomocą background-image nieruchomość. pierwszy obraz, red.png, znajduje się w prawym dolnym rogu elementu, natomiast drugi obraz, blue.png, jest umieszczony w lewym górnym rogu elementu. The background-position służy do kontrolowania położenia każdego obrazu. The background-repeat służy do kontrolowania sposobu powtarzania obrazów. pierwszy obraz, red.png, jest ustawione, aby się nie powtarzać (no-repeat), podczas gdy drugi obraz, blue.png, jest ustawione na powtarzanie (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;
    }

    Wynik

    Douglas Karr

    Douglas Karr jest dyrektorem ds. marketingu OtwórzWglądy i założycielem Martech Zone. Douglas pomógł dziesiątkom odnoszących sukcesy start-upów MarTech, pomagał w due diligence ponad 5 miliardów dolarów w przejęciach i inwestycjach Martech i nadal pomaga firmom we wdrażaniu i automatyzacji ich strategii sprzedaży i marketingu. Douglas to uznany na całym świecie ekspert ds. transformacji cyfrowej oraz MarTech i mówca. Douglas jest także autorem przewodnika dla manekinów i książki o przywództwie biznesowym.

    Powiązane artykuły

    Powrót do góry przycisk
    Zamknij

    Wykryto Adblock

    Martech Zone jest w stanie udostępnić Ci te treści bez żadnych kosztów, ponieważ zarabiamy na naszej witrynie poprzez przychody z reklam, linki partnerskie i sponsoring. Będziemy wdzięczni za usunięcie blokady reklam podczas przeglądania naszej witryny.