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