Simple CSS3 Effects 1#

I am going to list and explain the first few CSS effects, that I used on this website:

1.Round Corners with “border-radius”

With “border-radius” you can round the corners of an object – the bigger the parameter here, the rounder the target. I have applied this effect with 10px on all container and the navigation, on my portrait in my CV I used 100px.

cropped-hintergrund.png

cropped-hintergrund.png

#example-radius{
border-radius: 100px;
}

You can also use the effect on single corners by using directions; for example “border-bottom-right-radius” for the lower right-hand corner:

cropped-hintergrund.png
#example-radius2{
border-bottom-right-radius: 20px;
border-bottom-left-radius:5px;
}

2.  Scale up on hover with “scale”

With this effect, the object becomes bigger when the cursor hovers over it:

cropped-hintergrund.png

#example-scale:hover{

-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;

-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform:scale(1.5);
transform:scale(1.5);
}

To have the animation begin only when the cursor hovers over it, you have to add “:hover” to the selector. For a fluent movement you need to additionally use the transition rule, which defines how and how long the animation will appear, as “transform” just by itself will simply apply the effect without any steps in between. However, there are multiple similar transitons and transforms used above. That is because you need to add different rules for the various browsers, or the effect will not work out everywhere.

The transformation is implemented by using the name and a parameter, that defines the strength of the effect. In this I example used a 1.5x scaling.

If you want the picture to expand from a specific corner, you need to define the origin in percentages:

 

cropped-hintergrund.png
#example-scale2:hover{

-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;

-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform:scale(1.5);
transform:scale(1.5);

-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}

3. Soft Shaking with “rotate” and “animation”

My widets do not like being touched, so they shake as soon as you try.

cropped-hintergrund.png


#example-rotate:hover{
animation: examplerotation 0.2s ease-in-out;
}
@keyframes examplerotation{
0%{
transform:rotate(5deg);
}
50%{
transform: rotate(-5deg) ;
}

100%{
transform:rotate(0deg);
}
}

A keyframe animation is being executed – if you have experience with video editing, this might be familiar. For this you specify the status of the object for the key-points of the movement, the rest is done automatically. If you only have two key-frames, you can use “from” and “to” for the beginning and the end. Otherwise you have to use percentages. The animation is defined separately from the rules concerning the object. It is called inside the rules like a function. This way, you can use the same animation for different objects without having to write it anew.

cropped-hintergrund.png
#example-rotate2:hover{
animation: beispielrotation 1s ease-in-out;
}

facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Leave a Reply

Your email address will not be published. Required fields are marked *