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