Seuraava artikkeli auttaa sinua: Kuinka luoda viipaloitu tekstitehoste Canvassa
nav > ul > li > a { padding-top:10px; pehmuste-ala: 10px; } .et-db #et-boc .et-l .diviwp-header-2 .et_pb_menu–logolla .et_pb_menu__menu > nav > ul > li.diviwp-menu-button { padding-left:0px; täyte-oikea: 0px; color:#fff !tärkeää; /* Visual Builder näyttää ohittavan tämän muokattaessa, mutta se toimii käyttöliittymässä */ } /* säädä nämä ominaisuudet vastaamaan haluamiasi tyylejä. Katso tablettityylejä tabletin keskeytyspisteille */ .et-db #et-boc .et-l .diviwp-header-2 .et_pb_menu–with-logo .et_pb_menu__menu > nav > ul > li.diviwp-menu-button > a { reunan säde: 4px; taustaväri: #5cb85c; väri: #ffffff !tärkeää; /* Visual Builder näyttää ohittavan tämän muokattaessa, mutta se toimii käyttöliittymässä */ font-weight: bold; täyte: 10px 20px; } /* säädä nämä ominaisuudet vastaamaan haluamiasi tyylejä */ .et-db #et-boc .et-l .diviwp-header-2 .et_pb_menu–with-logo .et_pb_menu__menu > nav > ul > li.diviwp-menu -painike > a:hover { background-color: #47a447; color:#fff !tärkeää; /* Visual Builder näyttää ohittavan tämän muokkauksen aikana, mutta se toimii käyttöliittymässä */ } /***** END DIVIWP MENU BUTTON *****/ /***** OSTOSKORI JA HAKUKUVAKE ** ***/ .et-db #et-boc .et-l .diviwp-header-2 .et_pb_menu .et_pb_menu__wrap { /* tämä kohdistaa valikon ostoskori- ja hakukuvakkeiden kanssa */ -ms-flex-wrap: nowrap; flex-wrap: nowrap; } /***** LOPPUKORIN JA HAKUKUVAKE *****/ /***** ALAVALIKKOTyylit *****/ /* alivalikon pudotusvalikkokontti */ .et-db #et- boc .et-l .diviwp-header-2 ul.sub-menu { /* ylhäällä vasen, ylhäällä oikea, alaoikea, alhaalla vasen */ border-radius: 4px 4px 4px 4px; } /* pudotusvalikon animaatio hoverissa */ .et-db #et-boc .et-l .diviwp-header-2 ul.sub-menu { -webkit-transition: kaikki .07s easy-in-out ! tärkeä; siirtyminen: kaikki .07:t helppo sisään-ulos !tärkeää; -webkit-muunnos: asteikko(0,80); -ms-muunnos: asteikko(0,80); muunnos: asteikko(0,80); } .et-db #et-boc .et-l .diviwp-header-2 .et_pb_menu .nav li:hover > ul { -webkit-transform: scale(1); -ms-muunnos: asteikko(1); muunnos: asteikko(1); } /* alivalikon kolmio alavalikon avattavan valikon yläpuolella. Voit muuttaa kolmion väriä siirtymällä kohtaan Valikkomoduulin asetukset -> Suunnittelu -> Pudotusvalikko -> Pudotusvalikon rivin väri tai lisää väriominaisuus */ .et-db #et-boc .et-l .diviwp- header-2 .nav li ul.sub-menu:before { position: absoluuttinen; yläosa: -8px; vasen: 16 %; marginaali vasen: -8px; sisältö: ” “; reuna-oikea: 8px läpinäkyvä; reuna-ala: 8px kiinteä; raja-ala-väri: perii; reunus vasen: 8px läpinäkyvä; } /* älä näytä yläkolmiota 2. tason alivalikon pudotusvalikossa */ .et-db #et-boc .et-l .diviwp-header-2 .nav li ul.sub-menu li ul.sub -menu:before { näyttö: ei mitään; } /* pienentää alivalikkosäilön ylä- ja alareunaa */ .et-db #et-boc .et-l .diviwp-header-2 .et-menu-nav > ul ul { täyttö: 0px; } /* poista ylärivin väri */ .et-db #et-boc .et-l .diviwp-header-2 .et_pb_menu .nav li ul { /* border-top: 0px; box-shadow: 0px 0px 5px 1px rgba(0,0,0,.1); -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,.1); -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,.1); */ } /* 2. tason alivalikko */ .et-db #et-boc .et-l .diviwp-header-2 .nav li ul.sub-menu li ul.sub-menu { /* poista reuna yläreuna */ reuna-yläosa: 0px; /* jos reunuksen yläreuna on 0px ja täyttö on asetettu 0px:ksi alivalikon säilön osalta, meidän on säädettävä alivalikon marginaalia 23 kuvapisteellä, jotta se on kohdistettu päävalikkokohdan kanssa */ margin-top: 23px; /* säädä laatikon varjoa niin, että alivalikko ei mene päällekkäin pääalivalikon kanssa */ box-shadow: 3px 0px 5px 0px rgba(0,0,0,.1); -moz-box-shadow: 3px 0px 5px 0px rgba(0,0,0,.1); -webkit-box-shadow: 3px 0px 5px 0px rgba(0,0,0,.1); /*pidä vasemman yläkulman arvo 0, jotta se näkyy liitettynä ylävalikkoon */ border-radius: 0px 4px 4px 4px; } /* raja alarivi alivalikkoluettelon kohteiden välillä */ .et-db #et-boc .et-l .diviwp-header-2 li ul.sub-menu li { /* säädä reunuksen väriä tästä */ border -alhaalla: 1px kiinteä #ececec; täyte-vasen: 0px; täyte-oikea: 0px; leveys: 100 %; } /* älä näytä reunan alariviä viimeiselle valikkokohdalle */ .et-db #et-boc .et-l .diviwp-header-2 li ul.sub-menu li:last-child { border- pohja: ei mitään; } /* lisää alivalikkolinkkien täyttöä ja leveyttä */ .et-db #et-boc .et-l .diviwp-header-2 ul.sub-menu a { täyte: 12px 20px; leveys: 100 %; /* font-weight:700;*/ } /* poista alivalikon linkin taustaväri hoverissa */ .et-db #et-boc .et-l .diviwp-header-2 ul.sub-menu a:hover { /* voit säätää tätä väriä tyyleihisi sopivaksi */ taustaväri: #fff; opasiteetti: 1; -webkit-siirtymä: ei mitään; -moz-siirtymä: ei mitään; -o-siirtymä: ei mitään; siirtymä: ei mitään; } /* aseta reunuksen säde ensimmäisen kohteen osoittimeen säilyttääksesi mukautetun reunuksen säteen alivalikossa */ .et-db #et-boc .et-l .diviwp-header-2 ul.sub-menu li:first-child a:hover { /*ylävasen, ylhäällä oikea, alaoikea, alhaalla vasen */ border-radius: 0px 4px 4px 4px; } /* asettaa reunasäteen viimeiseen osoittimeen säilyttääksesi mukautetun reunasäteen alivalikossa */ .et-db #et-boc .et-l .diviwp-header-2 ul.sub-menu li:last- lapsi a:hover { /*ylävasen, ylhäällä oikea, alhaalla oikea, alhaalla vasen */ border-radius: 0px 0px 4px 4px; } /* muuta alas osoittava caret-kuvake oikealle osoittavaksi, jos meillä on 3 tason valikkokohtaa */ .et-db #et-boc .et-l .diviwp-header-2 ul li ul li.menu-item-has- lapset > a:first-child:after { content: “5”; yläreuna: 12px; } /***** LOPPU ALAVALIKOT STYLES *****/ /***** MEGA MENU STYLES ******/ /* alivalikon kolmio alavalikon avattavan valikon yläpuolella. Voit muuttaa kolmion väriä siirtymällä kohtaan Valikkomoduulin asetukset -> Suunnittelu -> Pudotusvalikko -> Pudotusvalikon rivin väri tai lisää väriominaisuus */ .et-db #et-boc .et-l .diviwp- header-2 nav ul li.mega-menu ul.sub-menu:before { position: absoluuttinen; jäljellä: 50 %; /* Tämä asettaa kolmion alivalikon keskelle. Voit säätää tätä tarpeidesi mukaan */ margin-vasen: -20px; yläosa: -8px; leveys: 0; korkeus: 0; sisältö: ” “; reuna-oikea: 8px läpinäkyvä; reuna-ala: 8px kiinteä; raja-ala-väri: perii; reunus vasen: 8px läpinäkyvä; } .et-db #et-boc .et-l .diviwp-header-2 .et_pb_menu .nav li.mega-menu > ul { täyte: 2%; } .et-db #et-boc .et-l .diviwp-header-2 li.mega-menu ul.sub-menu li { leveys: auto; raja-ala: ei mitään; /* poista tämä, jos haluat säilyttää luettelokohteen alareunat */ } .et-db #et-boc .et-l .diviwp-header-2 .nav li.mega-menu ul.sub-menu li ul. alivalikko { margin-top: 0px; } .et-db #et-boc .et-l .diviwp-header-2 .et-menu-nav li.mega-menu.mega-menu-parent-3 > ul > li { border-bottom: none !important ; } /* sarakkeiden otsikko – muuta tätä tarpeidesi mukaan */ .et-db #et-boc .et-l .diviwp-header-2 .et-menu-nav li.mega-menu > ul > li > a :first-child { pehmuste-top: 16px !tärkeää; fonttikoko: 14px; fontin paino: 700; tekstin muunnos: isot kirjaimet; kirjainväli: 0,05 em; border-bottom: ei mitään !tärkeää; } /* Sarakkeiden 2. tason alivalikot */ .et-db #et-boc .et-l .diviwp-header-2 .et_pb_menu .nav li.mega-menu ul li ul { border-top: none !important ; } .et-db #et-boc .et-l .diviwp-header-2 ul li.mega-menu ul li ul.sub-menu:before { näyttö: ei mitään; } /* animaatio */ .et-db #et-boc .et-l .diviwp-header-2 ul.sub-menu li ul.sub-menu { -webkit-transform: scale(1); -ms-muunnos: asteikko(1); muunnos: asteikko(1); } /***** END MEGA MENU TYLES ******/ /***** VASTAAVAT MEDIAKYSYMYKSET *****/ /*** Responsiiviset tyylit Suuri työpöytä ja yläpuolella ***/ @media kaikki ja (vähimmäisleveys: 1405 kuvapistettä) { } /*** Responsiiviset tyylit Vakiotyöpöytä ***/ @media kaikki ja (min-leveys: 1100px) ja (maksimileveys: 1405px) { } /*** Responsiiviset tyylit Tabletti ja alapuolella ***/ @media kaikki ja (enimmäisleveys: 980 kuvapistettä) { /***** SÄILIÖT TARVITTAVAT TAI KIINTEÄT *****/ .et-db #et-boc .et-l . diviwp-header-2 .et_pb_menu__menu { näyttö: ei mitään; } .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_nav_menu { display: block; } /***** END CONTAINERS ******/ /***** HAMBURGER *****/ /* korvaa hampurilainen x:llä, kun mobiilivalikko avautuu */ .et-db #et-boc . et-l .diviwp-header-2 .mobile_nav.opened .mobile_menu_bar:before { content: “\4d”; } /***** END HAMBURGER STYLES *****/ /***** ALAVALIKKO Tyylit *****/ /* alivalikon pudotusvalikkokontti */ .et-db #et-boc .et -l .diviwp-header-2 ul.et_mobile_menu { /* ylhäällä vasen, ylhäällä oikea, alhaalla oikealla, alhaalla vasen */ border-radius: 4px 4px 4px 4px; box-shadow: 1px 4px 20px 1px rgba(0,0,0,.1); täyte: 0px; } /* piilota kolmio tableteissa ja matkapuhelimissa */ .et-db #et-boc .et-l .diviwp-header-2 ul li.mega-menu ul.sub-menu:before { näyttö: ei mitään; } /* poista rivi alivalikon avattavan luettelon kohteiden välillä */ .et-db #et-boc .et-l .diviwp-header-2 li ul.sub-menu li { border-bottom: none !important; } .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu .menu-item-has-children > a { taustaväri: läpinäkyvä; asema: suhteellinen; font-weight:normal; } .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu .menu-item-has-children > a:hover { taustaväri: rgba(0,0,0,.03); asema: suhteellinen; } /* 3. tason linkit leijuvat */ .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu li ul li a:hover { taustaväri: rgba(0,0,0,.03 ); } .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu li ul.sub-menu { display: none !important; muunnos: ei mitään!tärkeää; pehmuste-vasen: 5%; } /***** LOPETA ALAVALIKKO TYYLIÄ *****/ /***** DIVIWP BUTTON MENU *****/ /* siirrä luettelokohde painikeluokalla alas */ .et-db #et- boc .et-l .diviwp-header-2 .et_mobile_menu li.diviwp-menu-button { marginaali: 2%; } /* säädä näitä ominaisuuksia vastaamaan haluamiasi tyylejä. Katso tablettityylejä tabletin keskeytyspisteille */ .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu li.diviwp-menu-button a { border-radius: 4px; taustaväri: #5cb85c; väri: #ffffff !tärkeää; /* Visual Builder näyttää ohittavan tämän muokattaessa, mutta se toimii käyttöliittymässä */ font-weight: bold; täyte: 10px 20px; tekstin tasaus: keskellä; } /* säädä nämä ominaisuudet vastaamaan haluamiasi tyylejä */ .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu li.diviwp-menu-button a:hover { background-color: #47a447 ; -webkit-siirtymä: kaikki .2s; -moz-siirtymä: kaikki .2s; -o-siirtymä: kaikki .2s; siirtymä: kaikki .2s; väri: #fff !tärkeää; /* Visual Builder näyttää ohittavan tämän muokkauksen aikana, mutta se toimii käyttöliittymässä */ } /***** END DIVIWP BUTTON MENU *****/ /****** ILMAISI 2. TASON ALA- VALIKKO ALAS NUOLILLA NAPSAUTA *****/ .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu .menu-item-has-childs { position: suhteellinen; } /* ympyrän alivalikon vaihto */ .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu .sub-menu-toggle { position: absoluuttinen; z-indeksi: 1; leveys: 72px; korkeus: 36px; rivin korkeus: 36 kuvapistettä; yläosa: 6px; oikea: 0%; täyte-oikea: 10px; kohdistin: osoitin; tekstin tasaus: oikea; } /* suljetun alivalikon vaihtopainike */ .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu .sub-menu-toggle:before { /* muuttaaksesi dorwn /up-valikon väriä caret, mene Valikkoasetukset -> Suunnittelu -> Pudotusvalikko -> Pudotusvalikko Line Color */ font-family: “ETmodules” !tärkeää; fontin paino: normaali; font-tyyli: normaali; font-variant: normaali; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: harmaasävy; rivin korkeus: 36 kuvapistettä; fonttikoko: 24px; tekstimuunnos: ei mitään; puhua: ei mitään; sisältö: ‘\33’; /* nämä voidaan siirtää .sub-menu-toggle-valitsimeen, mutta napsautettava alue tulee tällöin liian pieni */ border: 5px solid #f9f6f6; taustaväri: #f9f6f6; raja-säde: 50 %; } /* avaa alivalikon vaihtopainike */ .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu .sub-menu-toggle.reveal-items:before { content: ‘\32’; } .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu li ul.sub-menu.reveal-items { display: block !important; } .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_menu .menu-item-has-children > .icon-switch:after{ content: ‘\4d’ !important; } /****** LOPETA ILMAISEKSI 2. TASON ALAVALIKKO *****/ /***** MOBIILIVALIKKOANIMaatio AVAATUN TAI SULJETUN KUN ******/ /* Häivytä siirtymässä mobiilivalikkosäilö * / .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_nav_menu .mobile_nav .et_mobile_menu { display: block !important; /* tablettikohtaiset asetukset. Katso mobiiliasetukset alta */ /* min-korkeus: 90vh; */ korkeus: auto !tärkeää; leveys: 100 %; margin-top: 10px !tärkeää; /* tablettikohtaiset ominaisuudet */ oikealle: 0; /* sijainti: kiinteä; */z-indeksi: 9998; ylivuoto: rullaa; border-top: ei mitään; opasiteetti: 0; näkyvyys: piilotettu; -webkit-muunnos: mittakaava(.9); -ms-muunnos: asteikko(.9); muunnos: asteikko(.9); -webkit-transform-origin: oikeassa yläkulmassa; -ms-transform-origin: ylhäällä oikealla; muunnos-alkuperä: ylhäällä oikea; } /* häivyttää auki */ .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_nav_menu .mobile_nav.opened .et_mobile_menu { opacity: 1; näkyvyys: näkyvä; -webkit-muunnos: mittakaava(1); -ms-muunnos: asteikko(1); muunnos: asteikko(1); -webkit-siirtymän-ajoitusfunktio: cubic-bezier(0,0,.2,1); -o-siirtymän-ajoitusfunktio: cubic-bezier(0,0,.2,1); siirtymäajoitusfunktio: cubic-bezier(0,0,.2,1); -webkit-transition-duration: 0,2s; -o-siirtymäkesto: 0,2s; siirtymäaika: 0,2 s; /* nopeampaan siirtymiseen käytä 75 ms */ } /* häivytys suljettu */ .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_nav_menu .mobile_nav.closed .et_mobile_menu { näkyvyys: piilotettu; -webkit-muunnos: mittakaava(.9); -ms-muunnos: asteikko(.9); muunnos: asteikko(.9); -webkit-transition-timing-function: cubic-bezier(.4,0,1,1); -o-siirtymän-ajoitusfunktio: kuutio-bezier(.4,0,1,1); siirtymäajoitusfunktio: cubic-bezier(.4,0,1,1); -webkit-transition-duration: 0,2s; -o-siirtymäkesto: 0,2s; siirtymäaika: 0,2 s; /* nopeampaan siirtymiseen käytä 75 ms */ } .et-db #et-boc .et-l .diviwp-header-2 .et_pb_fullwidth_menu .et_mobile_menu, .et-db #et-boc .et-l .diviwp-header- 2 .et_pb_menu .et_mobile_menu { alkuun: auto !tärkeää; vasen: auto !tärkeää; } /* estää alivalikon sulkeutumisen, kun linkkejä napsautetaan */ .et-db #et-boc .et-l .diviwp-header-2 a.noslide ul.et_mobile_menu { korkeus: inherit!important; margin-top: 10px!tärkeää; } /***** LOPETA MOBIILIVALIKKO ANIMATION AVAIN TAI SULJETTUNA ******/ } /* lopeta tabletin mediakysely */ /*** Responsive Styles Only Tablet ***/ @media kaikki ja (min- leveys: 768 kuvapistettä) ja (enimmäisleveys: 980 kuvapistettä) { } /*** Responsiiviset tyylit Vain älypuhelin ***/ @media kaikki ja (enimmäisleveys: 767 kuvapistettä) { } /*** Responsiiviset tyylit Älypuhelimen muotokuva *** / @media kaikki ja (max-width: 479px) { .et-db #et-boc .et-l .diviwp-header-2 .et_mobile_nav_menu .mobile_nav .et_mobile_menu { /* mobiilikohtaiset asetukset. Katso tabletin asetukset yllä */ min-korkeus: auto; korkeus: auto; marginaali-yläosa: 10px; /* lopeta mobiilikohtaiset ominaisuudet */ } } /* lopeta mobiilimediakysely */ /***** LOPETA RESPONSIIVSET MEDIAKYSELYT *****/ ]]>
