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 klasydisplay: flex
aby włączyć tryb układu Flexbox. Thejustify-content
właściwość jest ustawiona nacenter
aby poziomo wyśrodkować element podrzędny w kontenerze. Thealign-items
właściwość jest ustawiona nacenter
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 klasydisplay: grid
aby włączyć tryb układu siatki. Thegrid-template-columns
właściwość jest ustawiona narepeat(2, 1fr)
aby utworzyć dwie kolumny o równej szerokości. Thegap
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. Thetransition
właściwość jest ustawiona nabackground-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!
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. Theanimation-fill-mode
właściwość jest ustawiona naforwards
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!
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 ustawieniabackground-color
właściwość elementu przycisku, używając metodyvar()
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
iblue.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. Thebackground-position
służy do kontrolowania położenia każdego obrazu. Thebackground-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;
}