CSS: Transition

• Informatica
• Middelbare school
• havo
• Leerjaar 4

CSS : Animaties 

Wat gaan wij vandaag doen

Herhaling CSS 

- Wat is en Waarom gebruiken wij CSS & wat is het verschil met HTML ?

- Wat is een CSS Selector & Hoe zit een CSS declaratie eruit?

- Een aantal basis attributen van CSS

Een paar nieuwe en leuke CSS Attributen

- border-radius

- transform

- opacity

- transition

Verder werken aan jouw website met de nieuwe CSS attributen

Beschrijving van de openingsfoto

Je ziet op de foto een Pingo.

Dit is een ijslens onder de grond. Doordat de ijsmassa water aantrekt groeit de pingo.

Blablabalbla

Wat is CSS en waarom gebruiken wij CSS 

Wat was de afkorting CSS ook alweer?

Waarom gebruiken wij CSS?

Wat is het verschil tussen HTML & CSS

Welke code is HTML en welke is CSS

CSS zonder HTML ????

 

Is het zelfde als dat je een huis wilt verfen.

Je hebt wel verf maar geen huis.

Dit is ook het geval bij het bouwen van je website.

Geen html die de structuur van jouw website bepaalt, betekend ook geen CSS kunnen gebruiken voor jouw website.

Dit is alleen gemaakt HTML code

Dit is HTML met CSS

Wat is een CSS Selector & Hoe zit een CSS declaratie eruit?

Voor dat je een declaratie doet in CSS code geef je aan welke deel van HTML jouw CSS declaratie toegepast moet worden. Dit noemen wij de selector.

Wat zegt de css code hier op de 

afbeelding? Alle ..... wordt de 

font-size 1.2em toegepast

Wat is een CSS Selector & Hoe zit een CSS declaratie eruit?

Voor dat je een declaratie doet in CSS code geef je aan welke deel van HTML jouw declaratie toegepast moet worden. Dit noemen wij de selector.

Wat zegt de css code hier op de 

afbeelding? Alle ..... wordt de 

font-size 1.2em toegepast

Welke regel in HTML wordt de declaratie toegepast?

Met jouw buurman/buurvrouw kijken

Welke regel in HTML wordt de declaratie toegepast?

Welke regel in HTML wordt de declaratie toegepast?

Hoe zit de declaratie van CSS eruit en welke is goed of fout

Een aantal basis attributen van CSS

Hoe heet de attribuut?

Ik kan hiermee de kleur van de tekst veranderen?

Ik kan hiermee de achtergrond kleur veranderen?

Ik kan hiermee de lettergrootte aanpassen?

Ik kan hiermee een achtergrond foto plaatsen?

Ik kan hiermee de achtergrond foto herhalen?

Ik kan hiermee de lettertype veranderen?

ik kan hiermee tussen content en border de afstand bepalen (boven, rechts, onder, links)?

Het verschil tussen HTML, CSS en toepassing van CSS is mij duidelijk

ja

nee

deels duidelijk maar ik heb nog vragen

Ik weet wat de selector en declaratie is in CSS en hoe deze toegepast kan worden

ja

nee

deels duidelijk maar ik heb nog vragen over de selector

deels duidelijk maar ik heb nog vragen over de declaratie

De basisattributen ken ik en weet hoe ik deze moet gebruiken

ja

nee

Deels

De nieuwe en leuke attributen in CSS voor vandaag

- border-radius

- transform

- opacity

- transition

border-radius

Dit is een attribuut die de hoeken van een 

vierkant aanpast.

Declaratie:  

border-top-left-radius: 20px;

border-top-right-radius: 60px;

border-bottom-right-radius: 40px;

border-bottom-left-radius: 80px;

kan ook

border-radius: 20px 60px 40px 80px;

border-radius

Als al mijn hoeken evengroot zijn in hun 

radius hoe ziet mijn declaratie eruit

Declaratie:  

border-top-radius: 40px;

border-bottom-radius: 40px;

of 

border-radius: 40px;

link <- 2 minuten uitproberen en kijk of het klopt wat jij dacht

border-radius

Als de beide kanten van een hoek toch moeten verschillen van elkaar dan is de declaratie daarvan border-radius: x-px / y-px

transform

Het transformeren van een element in html

Declaratie:  

transform: rotate(20deg)

Wat gebeurt er nu 

transform: rotate(-20deg) 

probeer wat meer uit met transform ipv alleen rotate --> link

opacity

Met opacity kan ik bijvoorbeeld een foto transparant

maken

Declaratie:  

opacity: 0.5

De waar is van max 1.0 tot min 0.0

probeer wat meer uit met opacity --> link

transition

Met transition kan je een mooie effect creeren.  

Je krijgt een animatie effect waarbij je een overgang hebt 

van begin naar eind situatie hebt 

Declaratie:  

transition-property: font-size;

transition-duration: 4s;

transition-delay: 2s;

Probeer het zelf even uit -->  link

Dit is begin situatie van de transition

Dit is eind situatie van de transition.

gaat bij begin situatie van font-size 14px naar eind situatie font-size 36px 

transition

2 tegen heel de klas

Neem de volgende css code. De bedoeling is dat

een vierkant met een breedte en hoogte van 300px

wordt gemaakt. De achtergrond kleur dient geel te zijn.

Zodra ik met mijn muis op het vierkantje kom te staan, 

dan moet het vierkantje 500px bij 500px worden. De kleur

geel dient transparant te worden (.... het attribuut :0.2).

De overgang dient 2 seconden te duren zonder

een vooraf vertraging.

transition

Exit Ticket
Hoe goed heb je de les begrepen?

😒🙁😐🙂😃