R
-Online
N
havo 4
informatica
vwo 4

CSS-effecten:

Hier zie je effecten als je met je muis over een blok gaat. In css kun je dat doen met de toevoeging :hover achter de naam van de selector. Bijvoorbeeld naar een div met id="effectje" kun je in het css verwijzen met de selector #effectje:hover

id="effectje"
selector is #effectje:hover

#effectje:hover {
  color: red;
}

De voorbeelden hieronder zijn uitgebreid toegelicht op w3schools.com

De "transition" eigenschap

Ga met je muis over het div element hieronder voor een overgangs-effect: expand().

Wijs me aan

De rotate() methode

Ga met je muis over het div element hieronder voor het transform-effect: rotate().

Wijs me aan

De scale() methode

Ga met je muis over het div element hieronder voor het transform-effect:scale().

Wijs me aan

De scaleX() methode

Ga met je muis over het div element hieronder voor het transform-effect:scaleX().

Wijs me aan

De scaleY() methode

Ga met je muis over het div element hieronder voor het transform-effect:scaleY().

Wijs me aan

De skew() methode

Ga met je muis over het div element hieronder voor het transform-effect:skew().

Wijs me aan

De tooltip controleren met "visibility"

Ga met je muis over het div element hieronder voor een overgangs-effect: tooltip tekst.

Wijs me aan Tooltip tekst

De background-color transition

Ga met je muis over het div element hieronder voor het transition-effect: background-color().

Wijs me aan