Weboldal készítés, internetes alkalmazások fejlesztése

Webdizájn - css fájl

CSS - Elemek mozgatása

.minta_mozog {
	width:100%;
    height:100px;
    border:1px solid gray;
    background-color:#b1b1b1;
	position: relative;
	-webkit-animation-name: fentrol; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    animation-name: fentrol;
    animation-duration: 2s;
	-webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    animation-delay: 0s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes fentrol {
    0%   {/*background-color:red;*/ left:0px; top:-100px;}
    100% {/*background-color:red;*/ left:0px; top:0px;}
}

/* Standard syntax */
@keyframes fentrol {
    0%   {/*background-color:red;*/ left:0px; top:-100px;}
    100% {/*background-color:red;*/ left:0px; top:0px;}
}
Nem a szöveg mozog, hanem a szöveget tartalmazó doboz.

Ez a szöveg csak akkor mozog, ha frissíted az oldalt.

CSS - Színátmentes kitöltés

.minta_szinatmenet {
background: linear-gradient(to bottom,#6D90BA 0%,#3572B9);
color:white;
height:100px;
width:100%;
}
.minta_szinatmenet:hover {
background: linear-gradient(to bottom,#3572B9 0%,#6D90BA);
}
A terület háttérszíne függőlegesen változik. A hover érték az érintéskori viselkedést befolyásolja, ebben az esetben megfordulnak a kitöltés színek.

CSS - Kép méretének növelése érintéskor

.minta_kep img{	
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.minta_kep img:hover{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}

Tedd rá az egeret a képre!