.spinner {
/* ... */
opacity: 0;
animation:
fadeIn 500ms 100ms forwards,
rotate 1s linear infinite;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
Kategoria: CSS3
Tabela szeroka – kolumny fixed
Jeśli tabela nie mieści się w oknie i chcemy zachować lewe kolumny (np. Nazwa wiersza) podczas przewijania w prawo:
Ruby, SASS, Compass instalacja
https://sass-lang.com/ - strona główna sass https://sass-lang.com/install - Dart sass - command line https://github.com/sass/sassc-ruby#readme - gem, plugin, do framewroków
Line Icons
Darmowe fonty
<link rel="stylesheet" href="https://cdn.lineicons.com/2.0/LineIcons.css">
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- LineIcons CSS -->
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
<title>LineIcons Starter Template</title>
</head>
<body>
<h1>Icons Added!</h1>
<i class="lni lni-add-file"></i>
<i class="lni lni-cart"></i>
<i class="lni lni-calculator"></i>
</body>
</html>
scroll_behavour
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
Płynne przewijanie zawartości pojemnika
<nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container>
a {
display: inline-block;
width: 50px;
text-decoration: none;
}
nav, scroll-container {
display: block;
margin: 0 auto;
text-align: center;
}
nav {
width: 339px;
padding: 5px;
border: 1px solid black;
}
scroll-container {
display: block;
width: 350px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
scroll-page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 5em;
}
CSS3 background
Ciemny gradient:
background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);