Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se Java. Zároveň využij akce až 80 % zdarma při nákupu e-learningu. Více informací:
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 Čápka
Tým ITnetwork
Avatar
Odpovídá na Neaktivní uživatel
David Čápka:5.6.2013 10:47

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

Nahoru Odpovědět
5.6.2013 10:47
One of the most common causes of failure is the habit of quitting when one is overtaken by temporary defeat.
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
Absolvent FIT ČVUT :-) 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
Absolvent FIT ČVUT :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
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
Absolvent FIT ČVUT :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
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 Čápka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek - misaz
David Čápka: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
One of the most common causes of failure is the habit of quitting when one is overtaken by temporary defeat.
Avatar
Odpovídá na David Čápka
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 5.6.2013 15:27
Nahoru Odpovědět
5.6.2013 15:26
Absolvent FIT ČVUT :-) 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
Absolvent FIT ČVUT :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
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
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:5.6.2013 19:58

Google Chrome

Nahoru Odpovědět
5.6.2013 19:58
Neaktivní uživatelský účet
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
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
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.