Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
Avatar
Vojtěch Jelínek (Slepice1):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
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
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  +2 5.6.2013 14:22
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
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
Nesnáším {}, proto se jim vyhýbám.
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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:5.6.2013 15:26

Jistě, ale jak si můžeš všimnout tak má Vojtěch Jelínek (Slepice1) 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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Honza Bittner
Redaktor
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Vojtěch Jelínek (Slepice1):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
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
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  +1 5.6.2013 19:41
Nesnáším {}, proto se jim vyhýbám.
Avatar
Vojtěch Jelínek (Slepice1):5.6.2013 19:58

Google Chrome

 
Nahoru Odpovědět 5.6.2013 19:58
Avatar
Vojtěch Jelínek (Slepice1):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
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
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  +2 5.6.2013 20:22
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
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
Nesnáším {}, proto se jim vyhýbám.
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.