Ahojte, v tomto návode vytvoríme rozširujúce sa flex karty. Karty Flex predstavujú nový moderný dizajn pre akúkoľvek webovú stránku. Flex karta s rozširujúcou sa animáciou jej môže dodať mimoriadny vzhľad. V tomto návode bude mať naša flex karta základnú animáciu snímky, náš dizajn bude čistý a jasný. Moderné používateľské rozhranie potrebuje jednoduchý farebný dizajn, ktorý vyzerá skvele na každej stránke. Na vytvorenie tejto karty budeme musieť vytvoriť tri súbory s názvom index.html, style.css a script.js. Začnime našu prácu s index.html. index.html <!DOCTYPE html> <head> <title>Rozširujúce sa flex karty</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="options"> <div class="option active" style="--optionBackground:url(https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);"> <div class="shadow"></div> <div class="label"> <div class="icon"> <i class="fas fa-walking"></i> </div> <div class="info"> <div class="main">Hory</div> <div class="sub">Najlepšie miesto na chôdzu!</div> </div> </div> </div> <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);"> <div class="shadow"></div> <div class="label"> <div class="icon"> <i class="fas fa-snowflake"></i> </div> <div class="info"> <div class="main">Sneh</div> <div class="sub">Najlepšie miesto na zážitky!</div> </div> </div> </div> <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);"> <div class="shadow"></div> <div class="label"> <div class="icon"> <i class="fas fa-tree"></i> </div> <div class="info"> <div class="main">Lesy</div> <div class="sub">Najlepšie miesto na odpočinok!</div> </div> </div> </div> <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);"> <div class="shadow"></div> <div class="label"> <div class="icon"> <i class="fas fa-tint"></i> </div> <div class="info"> <div class="main">More</div> <div class="sub">Najlepšie miesto na večernú prechádzku!</div> </div> </div> </div> <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);"> <div class="shadow"></div> <div class="label"> <div class="icon"> <i class="fas fa-sun"></i> </div> <div class="info"> <div class="main">Skaly</div> <div class="sub">Najlepšie miesto pre dobrodrúžstvo!</div> </div> </div> </div> </div> <script type="text/javascript" src="script.js"></script> </body> </html> V indexovom súbore používame font-awesome ikony. V prvej časti používame triedu „active“ na zobrazenie nášho prvého obrázka v rozšírenom zobrazení. jQuery CDN <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Tento odkaz používame, pretože v našom kóde v súbore script.js použijeme jquery. Bez tohto kódu nebudú naše karty Flex fungovať. style.css @import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css); :root { --user-button-circle: rgba(0,0,0,0.025); --user-button-cardborder: rgba(255,255,255,0.25); --user-button-text:#323133; --user-button-shadow:rgba(0,0,0,0.1); } body #user-button { z-index: 1000; bottom: 1rem !important; right: 1rem !important; color: var(--user-button-text); transition: 1s 0s ease-out; -webkit-animation: slide 3s ease-out forwards; animation: slide 3s ease-out forwards; } @-webkit-keyframes slide { 0%, 50% { opacity: 0; display: block !important; } 100% { opacity: 1; display: block !important; } } @keyframes slide { 0%, 50% { opacity: 0; display: block !important; } 100% { opacity: 1; display: block !important; } } body #user-button .u-card { border-radius: 100%; box-shadow: 0 0 1rem -0.25rem var(--user-button-shadow), inset 0 0 1rem -0.75rem var(--user-button-shadow); } body #user-button .u-main { cursor: pointer; --user-button-background:var(--user-button-main, #EC87C0); } body #user-button .u-main img { height: 100%; width: 100%; } body #user-button .u-main iframe { position: absolute; top: 0; left: 0; width: 4rem; height: 4rem; opacity: 1; transition: 0s 4s; } body #user-button .u-icons { position: relative; z-index: 950; transform: translate(-50%, -50%); background: var(--user-button-circle); box-shadow: 0 0 0 0.125rem var(--user-button-cardborder); border-radius: 100%; transition: 0.25s; opacity: 1 !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } body #user-button .u-icons a { color: inherit; display: grid; place-items: center; width: 30px; height: 30px; text-decoration: none; } body #user-button .u-icons a div { padding: 0.5rem; transition: 0s; } body #user-button .u-icons a[href="https://twitter.com/Osorpenke"] { position: relative; } body #user-button .u-icons a[href="https://twitter.com/Osorpenke"]:before { content: "Middle Click"; position: absolute; top: -1.5rem; left: 50%; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; white-space: pre; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: 0.25s ease-in; background: #fffc; padding: 0.25rem 0.5rem; border-radius: 0.25rem; } body #user-button .u-icons a[href="https://twitter.com/Osorpenke"].show:before { opacity: 1; transition: 0.25s ease-out; } body #user-button .u-icons a[href="https://twitter.com/Osorpenke"] div { color: #1da1f2; } body #user-button .u-icons a[href="https://codepen.io/z-"] div { background: black; color: white; } body #user-button .u-icons a.u-random div { position: relative; top: -1px; -webkit-animation: diespin 2s linear infinite; animation: diespin 2s linear infinite; } @-webkit-keyframes diespin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes diespin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body #user-button .u-icons a.u-random:not(:hover) div { -webkit-animation-play-state: paused; animation-play-state: paused; } body #user-button .u-icons > * { position: absolute; width: 30px; height: 30px; background: var(--singlecolour); border-radius: 100%; cursor: pointer; transform: translate(-50%, -50%); transition: 0.25s -0.05s; } body #user-button .u-icons > *:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body #user-button .u-icons > *:hover, body #user-button .u-icons > *:focus-within { background: var(--hcolour); } body #user-button .u-icons > *:first-child:nth-last-child(1):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(1) ~ *:nth-child(1) { left: 25%; top: 25%; } body #user-button .u-icons > *:first-child:nth-last-child(2):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(2) ~ *:nth-child(1) { left: 37.5%; top: 18.75%; } body #user-button .u-icons > *:first-child:nth-last-child(2):nth-child(2), body #user-button .u-icons > *:first-child:nth-last-child(2) ~ *:nth-child(2) { left: 18.75%; top: 37.5%; } body #user-button .u-icons > *:first-child:nth-last-child(3):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(3) ~ *:nth-child(1) { left: 50%; top: 15.625%; } body #user-button .u-icons > *:first-child:nth-last-child(3):nth-child(2), body #user-button .u-icons > *:first-child:nth-last-child(3) ~ *:nth-child(2) { left: 25%; top: 25%; } body #user-button .u-icons > *:first-child:nth-last-child(3):nth-child(3), body #user-button .u-icons > *:first-child:nth-last-child(3) ~ *:nth-child(3) { left: 15.625%; top: 50%; } body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(1) { left: 62.5%; top: 18.75%; } body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(2), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(2) { left: 37.5%; top: 18.75%; } body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(3), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(3) { left: 18.75%; top: 37.5%; } body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(4), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(4) { left: 18.75%; top: 62.5%; } body #user-button:hover .u-icons, body #user-button:focus-within .u-icons { width: 300% !important; height: 300% !important; } body { display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: hidden; height: 100vh; font-family: "Roboto", sans-serif; transition: 0.25s; } body.dark { background: #232223; color: white; } @media (prefers-color-scheme: dark) { body:not(.light) { background: #232223; color: white; } } body .options { display: flex; flex-direction: row; align-items: stretch; overflow: hidden; min-width: 600px; max-width: 900px; width: calc(100% - 100px); height: 400px; } @media screen and (max-width: 718px) { body .options { min-width: 520px; } body .options .option:nth-child(5) { display: none; } } @media screen and (max-width: 638px) { body .options { min-width: 440px; } body .options .option:nth-child(4) { display: none; } } @media screen and (max-width: 558px) { body .options { min-width: 360px; } body .options .option:nth-child(3) { display: none; } } @media screen and (max-width: 478px) { body .options { min-width: 280px; } body .options .option:nth-child(2) { display: none; } } body .options .option { position: relative; overflow: hidden; min-width: 60px; margin: 10px; background: var(--optionBackground, var(--defaultBackground, #E6E9ED)); background-size: auto 120%; background-position: center; cursor: pointer; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } body .options .option:nth-child(1) { --defaultBackground:#ED5565; } body .options .option:nth-child(2) { --defaultBackground:#FC6E51; } body .options .option:nth-child(3) { --defaultBackground:#FFCE54; } body .options .option:nth-child(4) { --defaultBackground:#2ECC71; } body .options .option:nth-child(5) { --defaultBackground:#5D9CEC; } body .options .option:nth-child(6) { --defaultBackground:#AC92EC; } body .options .option.active { flex-grow: 10000; transform: scale(1); max-width: 600px; margin: 0px; border-radius: 40px; background-size: auto 100%; /*&:active { transform:scale(0.9); }*/ } body .options .option.active .shadow { box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black; } body .options .option.active .label { bottom: 20px; left: 20px; } body .options .option.active .label .info > div { left: 0px; opacity: 1; } body .options .option:not(.active) { flex-grow: 1; border-radius: 30px; } body .options .option:not(.active) .shadow { bottom: -40px; box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black; } body .options .option:not(.active) .label { bottom: 10px; left: 10px; } body .options .option:not(.active) .label .info > div { left: 20px; opacity: 0; } body .options .option .shadow { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 120px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } body .options .option .label { display: flex; position: absolute; right: 0px; height: 40px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } body .options .option .label .icon { display: flex; flex-direction: row; justify-content: center; align-items: center; min-width: 40px; max-width: 40px; height: 40px; border-radius: 100%; background-color: white; color: var(--defaultBackground); } body .options .option .label .info { display: flex; flex-direction: column; justify-content: center; margin-left: 10px; color: white; white-space: pre; } body .options .option .label .info > div { position: relative; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out; } body .options .option .label .info .main { font-weight: bold; font-size: 1.2rem; } body .options .option .label .info .sub { transition-delay: 0.1s; } :root { --user-button-circle: rgba(0,0,0,0.025); --user-button-cardborder: rgba(255,255,255,0.25); --user-button-text:#323133; --user-button-shadow:rgba(0,0,0,0.1); } Tu sme vytvorili niekoľko premenných pre ľahký prístup ku kódu. script.js $(".option").click(function(){ $(".option").removeClass("active"); $(this).addClass("active"); }); V skripte používame kód jquery. V tomto kóde sme vytvorili udalosť kliknutia, aby sme odstránili existujúcu „aktívnu“ triedu a preniesli ju do nového kliknutého obrázka. Dúfam, že ste sa naučili niečo nové.The post Rozširujúce sa flex karty first appeared on Tvorba a správa webových stránok | Frontprog.sk.
Široký výběr Pokémon karet a produktů. Sběratelské karty, ohodnocené karty, boostery, plechovky a další.
prejsť na článokVážení obchodní partneri Chceli by sme Vás uistiť, že aj napriek obmedzeniam súvisiacim s výskytom nového koronavírusu a ochorením COVID-19 robíme všetko preto, aby sme mohli spoločne pripravovať a úspešne realizovať plánované projekty. Aj keď sme z preve
prejsť na článokSass (Syntactically Awesome Style Sheets) is the most mature, stable, and powerful professional grade CSS extension language.
prejsť na článokPolep celej firemnej flotily, branding prevádzky, tlačoviny, vizitky, foldre, reklamné predmety, id karty.
prejsť na článok/*! elementor - v3.7.1 - 14-08-2022 */ .elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .el
prejsť na článok