Garth

Zajímavé CSS3 efekty

V tomto článku předkládám několik základních, ale přesto zajímavých CSS3 efektů. Samotná volba těchto efektů byla volena z několikati důvodů:

1. Aby se efeket dal jednoduše napojit na nějaký prvek (třeba tlačítko) pouze doplněním třídy s daným CSS3 efektem
2. Aby daný efekt po přidání z danému prvku neměnil například barevnost tohoto prvku => aby jej šlo přidat všude a nebyl problém že nám efekt přebarví co nechceme (u některých jsem tento bod upozadil, protože jso u tak specifické že je škoda  o ně přijít a navíc třeba u tlačítek Vám nevadí tuto třídu poupravit pro celý web).

//HTML cast

Css3 
transition test
(def_transition)
Css3 transition test
(zatoc_okraje)
Css3 transition test
(scale_trans)
Css3 transition test
(shake_trans)
Css3 transition test
(pulse_trans)
Css3 transition
(kyvani_na_hover)
Css3 transition test
(underline_efekt)
Css3 transition test
(underline_stred)
Css3 transition test
(odskocit_nahoru)
Css3 transition test
(odskocit_dolu)
Css3 !barvy pozadi v efektu!
(posuv_pozadi_vpravo)
Css3 !barvy pozadi v efektu!
(posuv_pozadi_vlevo)
Css3 !barvy pozadi v efektu!
(posuv_pozadi_nahoru)
Css3 !barvy pozadi v efektu!
(posuv_pozadi_dolu)
Css3 !barvy pozadi v efektu!
(kruh_ven) - lze obdelnik
Css3 !barvy pozadi v efektu!
(kruh_dovnitr) - lze obdelnik
Css3 !barvy pozadi v efektu!
(zavri_leva_prava)
Css3 !barvy pozadi v efektu!
(otevri_leva_prava)
Css3 !barvy pozadi v efektu!
(zavri_nahoru_dolu)
Css3 !barvy pozadi v efektu!
(otevri_nahoru_dolu)
Css3 transition test
(pulse_nahoru_dolu)
// CSS cast /* CSS3 transition (START) */ .css3_transition_test{ float: left; width: 200px; min-height: 52px; line-height: 26px; padding: 10px 10px 10px 10px; margin: 15px 40px 15px 40px; background-color: yellowgreen; text-align: center; } .css3_transition_test_uzky{ width: 140px; } .css3_transition_test:hover{ background-color: blue; color: #FFFFFF; } .def_transition { /* zajimave efekty */ -webkit-transition: all 250ms linear; /* cas lze zadat i v sekundach => 0.25s */ -moz-transition: all 250ms linear; -o-transition: all 250ms linear; transition: all 250ms linear; /* misto "all" lze specifikovat zmena ceho provede transition => treba "color", "background" */ } .scale_trans{ transition: transform 0.2s; } .scale_trans:hover{ transform: scale(1.1); } .zatoc_okraje{ transition: transform 0.2s; } .zatoc_okraje:hover{ transform: skewX(-16deg); } .shake_trans{ transition: transform 0.2s; } .shake_trans:hover{ animation: shake .5s ease-in-out; } @keyframes shake { 0% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-10px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .pulse_trans{ animation: pulse 1s ease infinite; /* transition: transform 0.2s; */ } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .kyvani_na_hover:hover{ animation: kyvani_na_hover_animace 0.2s ease; } @keyframes kyvani_na_hover_animace { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } } .pulse_nahoru_dolu{ animation: nahoru_dolu 1s ease infinite; } @keyframes nahoru_dolu { 0% { transform: translate(0px, 0px); } 50% { transform: translate(0px, 16px); } 100% { transform: translate(0px, 0px); } } .underline_efekt{ position: relative; } .underline_efekt:after{ display: block; position: absolute; left: 0; /* right: 0; udela efekt zprava */ bottom: -10px; /* top: -10px; udela efekt nahore */ width: 0; height: 10px; background-color: #98004a; content: ""; transition: width 0.2s; } .underline_efekt:hover:after { width: 100%; } .underline_stred { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; overflow: hidden; } .underline_stred:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: 0; background: #98004a; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .underline_stred:hover:before, .underline_stred:focus:before, .underline_stred:active:before { left: 0; right: 0; } .odskocit_nahoru{ -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .odskocit_nahoru:hover{ -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } .odskocit_dolu{ -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .odskocit_dolu:hover{ -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } .posuv_pozadi_vpravo{ -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; background-color: green; /*pro efekt stejna barva zde i na stylu :hover*/ } .posuv_pozadi_vpravo:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .posuv_pozadi_vpravo:hover, .posuv_pozadi_vpravo:focus, .posuv_pozadi_vpravo:active { background-color: green; /*pro efekt stejna barva zde i na zakladnim stylu bez :hover*/ } .posuv_pozadi_vpravo:hover:before, .posuv_pozadi_vpravo:focus:before, .posuv_pozadi_vpravo:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .posuv_pozadi_vlevo { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; background-color: green; /*pro efekt stejna barva zde i na stylu :hover*/ } .posuv_pozadi_vlevo:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .posuv_pozadi_vlevo:hover, .posuv_pozadi_vlevo:focus, .posuv_pozadi_vlevo:active { background-color: green; /*pro efekt stejna barva zde i na zakladnim stylu bez :hover*/ } .posuv_pozadi_vlevo:hover:before, .posuv_pozadi_vlevo:focus:before, .posuv_pozadi_vlevo:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .posuv_pozadi_dolu { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; background-color: green; /*pro efekt stejna barva zde i na stylu :hover*/ } .posuv_pozadi_dolu:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } .posuv_pozadi_dolu:hover, .posuv_pozadi_dolu:focus, .posuv_pozadi_dolu:active { background-color: green; /*pro efekt stejna barva zde i na zakladnim stylu bez :hover*/ } .posuv_pozadi_dolu:hover:before, .posuv_pozadi_dolu:focus:before, .posuv_pozadi_dolu:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .posuv_pozadi_nahoru { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; background-color: green; /*pro efekt stejna barva zde i na stylu :hover*/ } .posuv_pozadi_nahoru:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .posuv_pozadi_nahoru:hover, .posuv_pozadi_nahoru:focus, .posuv_pozadi_nahoru:active { background-color: green; /*pro efekt stejna barva zde i na zakladnim stylu bez :hover*/ } .posuv_pozadi_nahoru:hover:before, .posuv_pozadi_nahoru:focus:before, .posuv_pozadi_nahoru:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .kruh_ven { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; overflow: hidden; background-color: green; } .kruh_ven:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; border-radius: 100%; /* pak to nebude kruh, ale obdelnik */ -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: scale(0); transform: scale(0); } .kruh_ven:hover, .kruh_ven:focus, .kruh_ven:active { background-color: green; } .kruh_ven:hover:before, .kruh_ven:focus:before, .kruh_ven:active:before { -webkit-transform: scale(2); transform: scale(2); } .kruh_dovnitr { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; overflow: hidden; background-color: #2098D1; } .kruh_dovnitr:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: green; border-radius: 100%; /* pak to nebude kruh, ale obdelnik */ -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: scale(2); transform: scale(2); } .kruh_dovnitr:hover, .kruh_dovnitr:focus, .kruh_dovnitr:active { background-color: #2098D1; } .kruh_dovnitr:hover:before, .kruh_dovnitr:focus:before, .kruh_dovnitr:active:before { -webkit-transform: scale(0); transform: scale(0); } .zavri_leva_prava { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; background: #2098D1; } .zavri_leva_prava:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: green; -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; transform-origin: 50%; } .zavri_leva_prava:hover, .zavri_leva_prava:focus, .zavri_leva_prava:active { background: #2098D1; } .zavri_leva_prava:hover:before, .zavri_leva_prava:focus:before, .zavri_leva_prava:active:before { -webkit-transform: scaleX(0); transform: scaleX(0); } .otevri_leva_prava { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; background: #e1e1e1; background: green; } .otevri_leva_prava:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098D1; -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; } .otevri_leva_prava:hover, .otevri_leva_prava:focus, .otevri_leva_prava:active { background: green; } .otevri_leva_prava:hover:before, .otevri_leva_prava:focus:before, .otevri_leva_prava:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .zavri_nahoru_dolu { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; background: #2098D1; } .zavri_nahoru_dolu:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: green; -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; transform-origin: 50%; } .zavri_nahoru_dolu:hover, .zavri_nahoru_dolu:focus, .zavri_nahoru_dolu:active { background: #2098D1; } .zavri_nahoru_dolu:hover:before, .zavri_nahoru_dolu:focus:before, .zavri_nahoru_dolu:active:before { -webkit-transform: scaleY(0); transform: scaleY(0); } .otevri_nahoru_dolu { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; background: #e1e1e1; background: green; } .otevri_nahoru_dolu:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098D1; -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50%; transform-origin: 50%; } .otevri_nahoru_dolu:hover, .otevri_nahoru_dolu:focus, .otevri_nahoru_dolu:active { background: green; } .otevri_nahoru_dolu:hover:before, .otevri_nahoru_dolu:focus:before, .otevri_nahoru_dolu:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* CSS3 transition (KONEC) */


<< zpět




Nejnovější články