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.
Čo je eSIM? eSIM je elektronická alebo v prístroji čipom zabudovaná SIM karta. Namiesto fyzickej (plastovej) sim karty The post eSIM – všetko o nástupcovi klasickej plastovej sim karty first appeared on Simkarta.sk.
prejsť na článokPolep celej firemnej flotily, branding prevádzky, tlačoviny, vizitky, foldre, reklamné predmety, id karty.
prejsť na článokSass (Syntactically Awesome Style Sheets) is the most mature, stable, and powerful professional grade CSS extension language.
prejsť na článokAk uvažujete o kúpe nového telefónneho čísla (sim karty), zamerte sa na dôležité aspekty, ktoré využijete aj kedykoľvek v budúcnosti. Telefónne číslo The post 5 + 1 dôvodov prečo kúpiť VIP číslo ⭐ first appeared on Simkarta.sk.
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