A téma css-t miért ne darabolhatnád fel? Mindig azokat a darabokat azokból a témákból húzd be, ami éppen kell.

Én kérek elnézést!

Máshogy nem ment, így ez lett a vége

But who is watching the guardians?

Üdvözlet!

JS-ben megírt animációkat konvertálok éppen CSS-re, ha már elvileg ott kéne csinálni az ilyeneket
Egy a dolog lényege, mindig JS indítja őket, mert kliens interakció szükséges hozzájuk. Csak egyszer futnak le, ez fontos.
Ezt én úgy oldom, meg, hogy egy adott elemnek van egy adott CLASS meghatározása, és JS segítségével hozzáadok megint egyet, azt, ami tartalmazza az animácó meghívást, így gyönyörűen működik is.

Viszont! Mi van akkor, ha ezeket az animációkat (legyen ez mondjuk egy felugró ablak) visszafelé is el akarom játszani, mondjuk amikor JS-el elveszem az adott CLASS-t tőle?
Megoldásnak gondoltam, hogy elveszem, de egyidőben hozzáadok egy másikat, ami visszafelé játssza el, majd elveszem azt is. Csakhogy, ehhez már a JS-t is időzíteni kell. És szerintem feleslegesen bonyolult.

Kérdésem tehát az, hogy lehetséges-e valamilyen módon kivitelezni, hogy a CLASS elvételkor lejátsszon egy másikat, vagy ugyan azt, visszafelé?

Előre is köszönöm bárminemű válaszaitokat, remélve, hogy érthetően meg tudtam fogalmazni a fejemben lévő káoszt

But who is watching the guardians?

Üdvözlet, remélem nem hiába, bár kellőképpen kihalt eme topik.

Kérdésem viszont akkor is ide tartozik.

Beállítottam egy generált hátteret, CSS-ben adtam meg:

html {
background: linear-gradient(to right, rgba(0, 255, 0, 0.5), rgba(255, 0, 0, 0.5));
}

Nagyon szép és jó, amíg el nem kezdek lefelé görgetni. Az oldal megjelenési magasságának 100%-a alatt az alábbi elszíneződés tapasztalható:

A kifotózás a megjelenő kép jobb oldalát átrázolja, aminek alsó részén látható az említett probléma. Érdekességként, ha háttérképet (tényleg képet) állítok be és azt paraméterezem, hogy ott marad, ahol van, hiába görgetek, akkor az működik. Ugyan azon beállítások viszont itt nem.

Próbáltam összedobni egy JSFiddle-t is. Nem tudja megfelelően lekezelni ezt az utasítást.

Remélem kapok segítséget. Köszönöm!

[ Szerkesztve ]

But who is watching the guardians?

Ha itt szétnézel az remélem segít: html - How to have background gradient fill entire page? - Stack Overflow
Guglizás az élet.

Én kérek elnézést!

Ez hasztalan volt, de köszönöm. Minden esetre meglett a megoldás, guglizás nélkül is

But who is watching the guardians?

Hello
Ezt a videot csinaltam meg, de amikor az anchor-t kiveszem html-bol es css-be teszem, bár működik, de láthatatlan.
Miért? [link]

Ebben tudna valaki segíteni?

css-ben a popover miért van kapcsos zárójelben?

-gf-

Mert úgy kell használni.
[link] tekerd kicsit le, és Example alatt láthatod

Mert ez egy "attribute selector": [link]

Forget your troubles, c'mon get happy

Ebben tudna valaki segíteni?

Megnéztem a videót, de a css-es rész kipróbálásához a Chrome Canary verziója szükséges, plusz még engedélyezni kell a flagek közt az "Experimental featurest". A meló-gépemet meg nem szívesen használnám kísérleti nyúlnak.

Egyékként úgy látom, hogy ez az egész popover + anchor html-ből, css-ből eléggé kiforratlan még, leginkább csak a Chrome ismeri, úgyhogy szerintem ha majd minden mainstream böngészőben implementálva lesz, akkor lesz érdemes visszatérni a témára.

Forget your troubles, c'mon get happy

Először is köszönöm szépen a választ.

Már nem kell hozzá a Chrome Canary verzió.
És azóta 70% os a támogatás.
Ha megnézed mikori a videó, az is mutatja, és a srác is mondja hogy nagyon gyorsan dolgoznak rajta.

A html ben lévő anchor teljesen jól működik. (Ha kell azt a kódot is be linkelem külön. 3-4 sort kell átírni csak.)
Csak mikor megmutatja hogy css -el is lehet onnantól valamiért eltűnik, display none lehet valamiért vagy képernyőn kívülre kerül, de nem látom mi teszi rá.
Valamit elírhattam, csak nem látom.

popover - HTML: HyperText Markup Language | MDN (mozilla.org)
Itt van egy csomó példa. A böngésző támogatás is alakul (FF még nem támogatja). Chrome, Safari is csak pár napja.

Én kérek elnézést!

Hello,
FF is támogatja, csak be kell kapcsolni.
Chrome már akkor is támogatta amikor felírtam az első hozzászólásom.

A kérdésem nem a popover-el kapcsolatos, hanem az anchor css -ben használva eltűnik a felugró ablak. Ott a linkben a program. Ha viszont html-ben van az anchor akkor jól működik.

Hello,
Ha haza megyek beírom codepen -be és itt belinkelem
Telefonról szinte lehetetlen beírni a frissítések miatt.

Hello.
Még nem tudom mi a hiba, de már tudom hol van.
Css -ben ha az alap formázást kitörlöm, akkor mind a kettő működik.
Ha hozzá adom egyik se.
itt az anchor html -ben [link]
itt az anchor css-ben [link]

Tehát valahol az alap formázást rontottam el, amiatt nem látszik a felugró ablak.
No, de hol?
42-44 -ig body hight 150 ez okozza
de még anélkül se tökéletes, mert kilóg

[ Szerkesztve ]

Nem az "i" gombhoz pozicionálja a felugrót.
A videóban 4 percnél csinálja a pozicionálást.
Nem látom az enyém miért nem jó.

Hello,
Fentebb írtam: firefoxban engedélyezni kell a popover-t

Mind a két kód hibás, azért írtam ide.
Nem a gombhoz pozicionál, hanem a body-hoz. Ez a gond, ezért írtam ide.
Valami hiányzik. A gombhoz nem pozicionáltam az anchor-t és ez a gond, de nem tudom hogy kell.

Ne a támogatást nézd, azzal nincs gond, a kód rossz. Hiányos.

Az alap formázás 0:40-nel van a videóban.
A "btn" -hez kell pozicionalni a popover-t és ennyi.
Valamit elírtam, de nem tudom mit. nem veszem észre.

[ Szerkesztve ]

Tessék itt van css, popover, anchor nélkül a tiszta kód [link]
a videóban 1:50 -nél [link]
css alap ki van kommentelve

[ Szerkesztve ]

Először is köszönöm szépen a választ.

Igen azt tudom, de nem tudom miért.
Ezért kérdeztem itt.
Tudom, hogy valamit kihagytam.
bottom: anchor(top);
left: anchor(center);
Ez nem érvényesül, de nem tudom miért.
És nem tudom hogyan kell a button-hoz igazítani a popover-t.
Így hiába nézegetem.
Kerestem, de nem találom, mert igazából azt se tudom mi az a megadás : valami zárójalben valami
Így hiába nézem, nem tudom mi nem jó.

De ha HTML-ben van akkor se jó, mert akkor se a button-hoz igazodik, hanem a boyd után valamihez. Talán a html-hez ,de csak találgatok.
Viszont, hogy miért fogalmam sincs.

Hello,
[link] Ebben miért villog a villám?
284 -ik sornál van az animáció hosza, de hol az animáció?

Azért villog, mert erről az oldalról lett a CSS-hez 'kölcsönvéve' a villámlás effekt, amely a flash a fenti oldalon.
Ha megnézed a HTML 301. és 303. sorát, láthatod a flash osztályt. Ha magad írod a HTML kódját, akkor beírod az alábbi hivatkozást és használod a villámlás effektet:
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

Először is köszönöm szépen a választ.

Kimásoltam, és megnéztem.
A villám és a csillag animáció nincs beírva a kódba.
Nem értem miért. Egyszerű opacity állítás.
Minek ahhoz egy külső css.
Mert ha mind onnan szedte volna megértem, de így....

Amúgy másként működik, mert csak villognak. Pdeig ctrl+a ctrl+c ctrl+v vel csináltam.
Annyi, hogy a xmlns -t fel raktam a html-be , mert oda való.
Fura.

Hello,
Miért nem teszi rá a padding-et az "options"-okre?
[link]
Tableten telefonon ráteszi, csak számítógépen nem.

Nagyon szépen köszönöm a segítséget

Sziasztok!
Az érdekel más hogyan oldja meg. A következő az oldal: van egy stickly navbar bootstrappel, alatta a teljes bemutatkozó oldal, szolgáltatások, árak, stb. A navbaron van a menü "a href=#...". Az oldalaknál "a name=..." van, amire a menü mutat. Az a kínom, hogy a tartalomnál az alcímek becsúsznak a navbar alá. Most fapadosan betettem néhány sortörést, az "a name=..." után, és csak utána van a tényleges alcím, de tök jó lenne, ha lenne valami nem ennyire gányolt HTML+CSS megoldása a dolognak. Valaki?

[ Szerkesztve ]

Buliban hasznos! =]

CSS scroll-margin kell neked tippre.

Do the thing!

Köszi! Igen ez lesz az! [link]

Buliban hasznos! =]

Bootstrapnél van erre is megoldás, hogy valahogy reszponzív legyen, mármint kövesse a navbar magasságát, ha pl. mobil nézetnél változik? Így hirtelen nem találtam semmit, lehet media query-t kell külön kotyvasztani hozzá...

Buliban hasznos! =]

Nem ismerem annyira a bootstrapet, gyors keresés után nincs rá kész megoldásuk, szóval szerintem media query fog kelleni neked.

Do the thing!

Köszi!

Buliban hasznos! =]