Zajímavé CSS3 efekty
Několik základních, ale přesto zajímavých CSS3 efektů, které stačí k prvku (třeba tlačítku) připojit doplněním třídy.
Samotná volba těchto efektů byla vedena několika důvody:
1. Aby se efekt 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í k prvku neměnil například jeho barevnost, takže jej jde přidat kamkoliv a nepřebarví, co nechceme (u některých efektů jsem tento bod upozadil, protože jsou tak specifické, že je škoda o ně přijít, a navíc třeba u tlačítek nevadí třídu upravit pro celý web).
//HTML cast
<span class="css3_transition_test def_transition">Css3
transition test<br/>(def_transition)</span>
<span class="css3_transition_test zatoc_okraje">Css3 transition
test<br/>(zatoc_okraje)</span>
<span class="css3_transition_test scale_trans">Css3 transition
test<br/>(scale_trans)</span>
<div class="spacer"></div>
<span class="css3_transition_test shake_trans">Css3 transition
test<br/>(shake_trans)</span>
<span class="css3_transition_test pulse_trans">Css3 transition
test<br/>(pulse_trans)</span>
<span class="css3_transition_test css3_transition_test_uzky
kyvani_na_hover">Css3 transition<br/>(kyvani_na_hover)</span>
<div class="spacer"></div>
<span class="css3_transition_test underline_efekt">Css3
transition test<br/>(underline_efekt)</span>
<span class="css3_transition_test underline_stred">Css3
transition test<br/>(underline_stred)</span>
<span class="css3_transition_test odskocit_nahoru">Css3
transition test<br/>(odskocit_nahoru)</span>
<div class="spacer"></div>
<span class="css3_transition_test odskocit_dolu">Css3
transition test<br/>(odskocit_dolu)</span>
<span class="css3_transition_test posuv_pozadi_vpravo">Css3
!barvy pozadi v efektu!<br/>(posuv_pozadi_vpravo)</span>
<span class="css3_transition_test posuv_pozadi_vlevo">Css3
!barvy pozadi v efektu!<br/>(posuv_pozadi_vlevo)</span>
<div class="spacer"></div>
<span class="css3_transition_test posuv_pozadi_nahoru">Css3
!barvy pozadi v efektu!<br/>(posuv_pozadi_nahoru)</span>
<span class="css3_transition_test posuv_pozadi_dolu">Css3
!barvy pozadi v efektu!<br/>(posuv_pozadi_dolu)</span>
<span class="css3_transition_test kruh_ven">Css3 !barvy pozadi
v efektu!<br/>(kruh_ven) - lze obdelnik</span>
<div class="spacer"></div>
<span class="css3_transition_test kruh_dovnitr">Css3 !barvy
pozadi v efektu!<br/>(kruh_dovnitr) - lze obdelnik</span>
<span class="css3_transition_test zavri_leva_prava">Css3 !barvy
pozadi v efektu!<br/>(zavri_leva_prava)</span>
<span class="css3_transition_test otevri_leva_prava">Css3
!barvy pozadi v efektu!<br/>(otevri_leva_prava)</span>
<div class="spacer"></div>
<span class="css3_transition_test zavri_nahoru_dolu">Css3
!barvy pozadi v efektu!<br/>(zavri_nahoru_dolu)</span>
<span class="css3_transition_test otevri_nahoru_dolu">Css3
!barvy pozadi v efektu!<br/>(otevri_nahoru_dolu)</span>
<span class="css3_transition_test pulse_nahoru_dolu">Css3
transition test<br/>(pulse_nahoru_dolu)</span>
// 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) */