Kategoria: CSS3

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>

Czytaj dalej Line Icons

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