Mały przerywnik, coś miłego dla oka - animacja kart.
Każda z kart składa się z nagłówka w którym jest ikona, oraz sekcji z opisem i buttonem "więcej". Powiedzmy 3 karty w rzędzie a gdy zmniejszymy stronę karty ustawiają się w pionie.
Zacznijmy od ikon, tutaj opisałem dokładnie jak dodajemy obecnie ikony svg do strony - nowy sposób serwowania ikon SVG
Najpierw ikony które dodajemy na górze strony.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="lightning" viewBox="0 0 32 32">
<path
d="M12 24l2 2-2 6 6-6-2-2 2-4-6 4zM32 8.427c0-3.072-2.5-5.57-5.573-5.57-.15 0-.298.005-.447.017C24.535 1.072 22.356 0 20 0c-2.355 0-4.535 1.072-5.98 2.874-.148-.012-.298-.017-.449-.017-3.07 0-5.57 2.499-5.57 5.57 0 .322.043.633.094.94-.034.044-.074.085-.107.13-.327-.047-.655-.07-.987-.07-3.859 0-7 3.141-7 7s3.141 7 7 7c.856 0 1.693-.156 2.482-.458.069.06.151.102.221.16l1.77-1.18c-.59-.418-1.141-.883-1.602-1.438-.813.572-1.801.915-2.871.915-2.762 0-5-2.237-5-5 0-2.76 2.238-5 5-5 .676 0 1.316.138 1.902.38.035-.068.078-.125.113-.19.352-.642.785-1.229 1.292-1.753 1.443-1.493 3.448-2.438 5.693-2.438 3.107 0 5.771 1.792 7.096 4.38.353-.146.729-.24 1.117-.302l.787-.078c.771 0 1.492.19 2.145.5.707.339 1.314.836 1.79 1.45.656.845 1.065 1.896 1.065 3.05 0 2.763-2.238 5-5 5-1.07 0-2.057-.344-2.871-.915-.875 1.055-2.027 1.848-3.322 2.348l-.374.746 1.141 1.141c1.066-.415 2.064-1.012 2.944-1.777.789.302 1.626.458 2.482.458 3.859 0 7-3.141 7-7 0-1.604-.565-3.068-1.479-4.25.911-.992 1.479-2.301 1.479-3.75zm-2.902 2.352c-1.155-.84-2.563-1.352-4.098-1.352-.332 0-.66.023-.987.07-1.867-2.543-4.814-4.07-8.013-4.07-2.133 0-4.145.691-5.809 1.897.467-1.428 1.796-2.467 3.379-2.467.484 0 .941.098 1.359.271C15.878 3.279 17.781 2 19.999 2s4.122 1.279 5.068 3.128c.421-.173.88-.271 1.359-.271 1.974 0 3.573 1.599 3.573 3.57 0 .906-.348 1.723-.902 2.352z" />
</symbol>
<symbol id="wind" viewBox="0 0 32 32">
<path
d="M26.938 12c-1.656 0-3 1.344-3 3 0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1h22c1.656 0 3-1.344 3-3s-1.344-3-3-3zm-22 2h12c1.656 0 3-1.344 3-3s-1.344-3-3-3-3 1.344-3 3c0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1zm16 6c-.059 0-.115.013-.174.018-.039-.003-.072-.018-.111-.018H5.225c-.711 0-1.287.448-1.287 1s.576 1 1.287 1h12.897c-.111.315-.184.648-.184 1 0 1.656 1.344 3 3 3s3-1.344 3-3-1.344-3-3-3z" />
</symbol>
<symbol id="sun" viewBox="0 0 32 32">
<path
d="M16 9c-3.859 0-7 3.141-7 7s3.141 7 7 7 7-3.141 7-7-3.141-7-7-7zm0 12c-2.762 0-5-2.238-5-5s2.238-5 5-5 5 2.238 5 5-2.238 5-5 5zm0-14c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1s-1 .448-1 1v2c0 .552.448 1 1 1zm0 18c-.552 0-1 .448-1 1v2c0 .552.448 1 1 1s1-.448 1-1v-2c0-.552-.448-1-1-1zm7.777-15.365l1.414-1.414c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0zM8.223 22.365l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0l1.414-1.414c.391-.392.391-1.023 0-1.414s-1.023-.392-1.414 0zM7 16c0-.552-.448-1-1-1H4c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1zm21-1h-2c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1s-.448-1-1-1zM8.221 9.635c.391.391 1.024.391 1.414 0s.391-1.023 0-1.414L8.221 6.807c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l1.414 1.414zm15.558 12.728c-.392-.391-1.023-.391-1.414 0s-.392 1.023 0 1.414l1.414 1.414c.391.391 1.023.391 1.414 0s.391-1.023 0-1.414l-1.414-1.414z" />
</symbol>
</svg>Teraz najważniejsza część html, nie ma się co rozwodzić na nim.
<div class="container">
<div class="card">
<div class="icons">
<svg class="icon">
<use xlink:href="#lightning"></use>
</svg>
</div>
<div class="info">
<div class="info__text">
Gwałtowne burze i błyskawice nawiedzają amerykański stan Waszyngton od początku września. Jeden z filmowców
postanowił uchwycić piękno i potęgę zjawiska, nie narażając przy tym swojego...
</div>
<div class="button">więcej</div>
</div>
</div>
<div class="card">
<div class="icons">
<svg class="icon">
<use xlink:href="#wind"></use>
</svg>
</div>
<div class="info">
<div class="info__text">
Na Bałtyku wiatr będzie najsilniejszy, nawet do 90 km/h. Od samego rana mocno wieje i będzie
wiać coraz mocniej,
dlatego, że ten wiatr będzie coraz silniejszy.
</div>
<div class="button">więcej</div>
</div>
</div>
<div class="card">
<div class="icons">
<svg class="icon">
<use xlink:href="#sun"></use>
</svg>
</div>
<div class="info">
<div class="info__text">
Czwartek będzie przeważnie słoneczny. Wieczorem na Nizinie Szczecińskiej mogą pojawić się przelotne opady
deszczu. Termometry pokażą maksymalnie od 21 stopni Celsjusza na Suwalszczyźnie do 26 st. C na Dolnym Śląsku.
</div>
<div class="button">więcej</div>
</div>
</div>
</div>Przyszedł czas na style. Również są dość oczywiste no może jedna rzecz warta jest wytłumaczenia a mianowicie ten wpis grid-template-columns: repeat(3, minmax(250px, 1fr));
Jest to nic innego jak wyświetlenie 3 kolumn za pomocą grida, funkcja minmax ustawia nam minimalną szerokość kart na 250px.
Na górze strony ustalamy kolory.
:root {
--black: #000;
--white: #fff;
--body-color: #e4e4e4;
--card-background: #b156fb;
--card-background-hover: #ff5e00;
--button-border: #000c74;
--button-border-hover: #3f3f3f;
--button-background: #202020;
}
.container {
max-width: 800px;
display: grid;
grid-template-columns: repeat(3, minmax(240px, 1fr));
column-gap: 50px;
align-items: center;
margin: auto;
}
@media (max-width: 900px) {
.container {
max-width: 270px;
grid-template-columns: 1fr;
}
.container .card {
margin: 10px;
}
}
.card {
box-shadow: 0 0 20px 0px rgba(104, 104, 104, 0.5);
border-radius: 5px;
height: 240px;
cursor: pointer;
background-color: var(--card-background);
overflow: hidden;
transition: all 400ms ease-in-out;
}
.card:hover {
box-shadow: 0 0 20px 20px rgba(172, 172, 172, 0.5);
height: 495px;
background-color: var(--card-background-hover);
}
.card:hover .icons svg {
fill: var(--black);
}
.card:hover .info {
transform: translateY(0px);
opacity: 1;
z-index: 0;
}
.icons {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 240px;
z-index: 2;
transition: all 500s ease-out;
}
.icons svg {
width: 40%;
fill: var(--white);
}
.info {
position: relative;
transform: translateY(-300px);
background-color: var(--white);
padding: 15px;
height: 250px;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
opacity: 0;
}
.button {
position: absolute;
left: 0;
right: 0;
bottom: 15px;
display: block;
padding: 10px;
border: 1px solid var(--button-border);
width: 100px;
margin: auto;
text-transform: uppercase;
font-size: 1.2rem;
cursor: pointer;
transition: all 300ms ease-in-out;
}
.button:hover {
border: 1px solid var(--button-border-hover);
background-color: var(--button-background);
color: var(--white);
}To chyba tyle. Poniżej jak zwykle działający przykład.
See the Pen
card animation by Greg (@Tomik23)
on CodePen.