Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:4.6.2013 20:33

Nevím proč to nefunguje srovnával jsem to s tutoriálem tady, ale nenašel jsem chybu.

<!DOCTYPE html>
<html lang="cz-cs">

<head>
<meta charset="utf-8">
<title>Tlačítko Devbook</title>
<style type="text/css">
@keyframes shadow
{
    0% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 20px #30AC30, 0px 0px 4px 30px #45B445;}
    33% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 20px #30AC30, 0px 0px 4px 0px #45B445;}
    66% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 0px #30AC30, 0px 0px 4px 0px #45B445;}
    100% {box-shadow: 0px 0px 0px 0px #19A319, 0px 0px 0px 0px #30AC30, 0px 0px 0px 0px #45B445;}
}

.buttonStyle {
    width: 200px;
        height: 75px;
    background-color: #009900;
    border: none;
    margin:30px;
    border-radius:20px;
    box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 20px #30AC30, 0px 0px 4px 30px #45B445;
    font-size: 30px;

}


.buttonStyle:hover {
    background-color:#0033CC;
    box-shadow: 0px 0px 4px 10px #1947D1, 0px 0px 4px 20px #3059D6, 0px 0px 4px 30px #456ADA;
    cursor: pointer;
    animation: shadow 3s;
}
.buttonStyle:active {

}

</style>
</head>

<body>
<button class="buttonStyle">Technica</button>
</body>
</html>
Odpovědět
4.6.2013 20:33
Neaktivní uživatelský účet
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Neaktivní uživatel
David Hartinger:5.6.2013 10:47

V Chrome musíš použít @-webkit-keyframes a -webkit-animation.

Nahoru Odpovědět
5.6.2013 10:47
New kid back on the block with a R.I.P
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:5.6.2013 14:12

Přesně jak píše sdraco, musíš použít prefix na ANIMATION ... tzn. :

  • o-
  • moz-
  • webkit-

(dává se i jedno bez prefixu)

Mělo by ti to jít. Kdyžtak napiš.

Nahoru Odpovědět
5.6.2013 14:12
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:5.6.2013 14:13

Jestli se s tím nechceš psát, tak jsem objevil stránku http://prefixmycss.com/, která ti vše potřebné udělá :)

Nahoru Odpovědět
5.6.2013 14:13
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:5.6.2013 14:22

K tomuto se nepoužívají animace, ale přechody.

Jinak měly bychom výt úplně přesní tak to jsou vendor prefixes.

 
Nahoru Odpovědět
5.6.2013 14:22
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:5.6.2013 14:36

Avšak podle té animace vidíš že chce aby se po šáhnutí udělal stín a pak pomalu zmizel ... ne ? :)

A to s přechodem neuděláš ... nebo se pletu ? :)

Nahoru Odpovědět
5.6.2013 14:36
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:5.6.2013 15:20

přechod ti dá "animaci" vlastností mezi normalním a třeba :hover

Takže ten stín uvede v :hover a do normálního dá:

transition: shadow 1s ease-out;
/*... vendor prefixes ...*/

Alespoň si myslim že to tak je.

 
Nahoru Odpovědět
5.6.2013 15:20
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Michal Žůrek - misaz
David Hartinger:5.6.2013 15:22

Je to tak, přechod je vlastně zjednodušená animace, kde jsou jen 2 keyframes.

Nahoru Odpovědět
5.6.2013 15:22
New kid back on the block with a R.I.P
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na David Hartinger
Michal Žůrek - misaz:5.6.2013 15:24

no máš to jak v powerpointu.
Animace = kdekoliv na snímku.
Přechod = pouze mezi snímky.

 
Nahoru Odpovědět
5.6.2013 15:24
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:5.6.2013 15:26

Jistě, ale jak si můžeš všimnout tak má Neaktivní uživatel v animaci dané

@keyframes shadow
 {
     0% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 20px #30AC30, 0px 0px 4px 30px #45B445;}
     33% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 20px #30AC30, 0px 0px 4px 0px #45B445;}
     66% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 0px #30AC30, 0px 0px 4px 0px #45B445;}
     100% {box-shadow: 0px 0px 0px 0px #19A319, 0px 0px 0px 0px #30AC30, 0px 0px 0px 0px #45B445;}
 }

tzn. tlačítko je normální a po najetí myši dostane stín který postupně mizí ...

možná že udělal chybu v tomto a proto mu to dělá neplechy ...

Editováno
Nahoru Odpovědět
5.6.2013 15:26
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:5.6.2013 15:28

Hlavní chybou tázajícího je, že nám neřekl co mu blbne ...

Nahoru Odpovědět
5.6.2013 15:28
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:5.6.2013 19:21

Nefunguje mi to vůbec, zkusím ty prefixy. Jinak mělo by to fungovat tak že to na začátku má stíny a jeden po druhém zmizí. Jednalo se o spíš takový test animací. A myslím že by přechod nešel použít.

Nahoru Odpovědět
5.6.2013 19:21
Neaktivní uživatelský účet
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:5.6.2013 19:41

a ještě jeden dotaz: v jakém prohlížeči děláš?

Ono toiž IE1,2,3,4,5,6,7,8 animace nepodporuje :D

 
Nahoru Odpovědět
5.6.2013 19:41
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:5.6.2013 19:58

Google Chrome

Nahoru Odpovědět
5.6.2013 19:58
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:5.6.2013 20:07

Super už to funguje, stačilo použít prefixy. Chystá se vůbec nějaké sjednocení?

Nahoru Odpovědět
5.6.2013 20:07
Neaktivní uživatelský účet
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:5.6.2013 20:22

ty vendor perfixes by tě měly varovat že používáš nestabilní funkci. Jakmile bude funkce označena za stabilní vendor perfixes této funkci zmizí.

 
Nahoru Odpovědět
5.6.2013 20:22
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:5.6.2013 20:23

pro chrome se používa vendor perfix -webkit-

 
Nahoru Odpovědět
5.6.2013 20:23
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 17 zpráv z 17.