|
Odkaz na poslední ukázku
Odkaz na dokumentaci CSS
Odkaz na návody na W3Schools
| html { scroll-behavior: smooth; } a:hover { color: brown; } |
| .banner { width: 100%; text-align: center; } .banner-item { display: inline-block; vertical-align: middle; padding: 10px; margin: 5px; } | |
| .menu-head { position: relative; } .menu { display: none; position: absolute; } .menu-head:hover .menu, .menu:hover { display: block; } | |
Popisek obrázku
klidně na víc řádků | .flex { display: flex; flex-wrap: wrap; } .flex-grow { flex-grow: 0.75; } |
|
První boxík
Druhý boxík
Třetí boxík
Zkuste zúžit okno prohlížeče, zalomí se to do dvou řádků | .inline-block { display: inline-block; vertical-align: top; width: 200px; height: 200px; } |
|
Obrázek je tady uvnitř
ale velikost divu se nepřizpůsobí, protože obrázek má position: absolute 
| .container { position: relative; height: 300px; width: 400px; } .logo { position: absolute; top: 100px; left: 300px; width: 200px; height: 200px; } |
| .hover-transform { transition: filter 1.5s, transform 0.5s; transform-origin: center 80%; } .hover-transform:not(:hover) { filter: saturate(10%); } .hover-transform:hover { transform: perspective(100px) rotateX(30deg); } |