Aliter enim explicari, quod quaeritur, non potest.
Teksten er stylet med hvid farve, fonten er Arial i størrelsen 1.6
rem og så har den fået en text-shadow i magenta. Læs om hvordan
"text-shadow" fungerer, fx
her.
I font-family bruger jeg en font-stack (en liste af alternative
fonte).
Tip - Du skal bruge 4 properties:
Aliter enim explicari, quod quaeritur, non potest.
Her skal fonten være Open Sans, og så skal du sørge for at stregen er tilpas tynd. Du skal angive sans-serif som alternativ til Open Sans hvis din bruger ikke har den på din computer. Se hvordan herunder.
Tip: Du skal bruge følgende properties:
Aliter enim explicari, quod quaeritur, non potest.
Her er der igen en tekst med en farvet skygge som i opgave 1.
Derudover er der en indrykning af den første linie (text-indent), og
så er det første bogstav større end resten af teksten og har en
anden farve.
Læg mærke til at du skal bruge pseudo-selectoren (p::first-letter)
for at få fat i det første bogstav.
Tip - Du skal bruge følgende properties:
Aliter enim explicari, quod quaeritur, non potest.
Her skal du sørge for at teksten står med majuskler (store bogstaver) men uden at ændre i html'en!
Tip - Du skal bruge følgende properties:
Her har jeg brugt fonten "El Rio Lobo" som jeg har lavet om til en
webfont på:
fontsquirrel.com. Vær opmærksom på om der er rettigheder på den font du anvender!
Og husk at .woff og .woff2 filerne skal uploades sammen med
din html og css for at virke.
Jeg har lavet @font-face koden, så du skal bare bruge fonten "minFont" på din tekst
Tip - Du skal bruge følgende properties:
Her skal du igen bruge @font-face til at indsætte fonten Russiano. Du kan se på det forrige eksempel hvordan jeg har gjort. Jeg har lagt webfontkittet med .woff filerne og eksempel-css i mappen "russiano"
Undlad at installere fonten på din computer, så kan du med det samme se om det virker.
Tip - Du skal bruge følgende properties:
Google-fonts har gjort det nemmere for os at anvende webfonte. Du skal hente linket hos Google fonts og indsætte det i din html (i head). Fonten hedder Krona One.
Tip - Du skal bruge følgende properties:
Du skal gøre det samme som i opgave 7, bare med en anden font. Gæt selv hvad fonten hedder :)
Tip - Du skal bruge følgende properties:
Quoniam, si dis placet, ab Epicuro loqui discimus. Negare non possum. Quid de Pythagora?
Her vil vi have en baggrundsfarve og så skal der være mere linieafstand end normalt.
Tip - Du skal bruge følgende properties:
Quoniam, si dis placet, ab Epicuro loqui discimus. Negare non possum. Quid de Pythagora?
Her skal du skabe større afstand mellem de enkelte bogstaver (det der hedder tracking indenfor typografi).
Tip - Du skal bruge følgende properties:
Satis est ad hoc responsum. Eaedem res maneant alio modo. Sic enim censent, oportunitatis esse beate vivere. Istam voluptatem, inquit, Epicurus ignorat?
Link vises default i en blå farve og med understregning. Her skal du ændre farve og udseende på dine links så de fremstår orangerød, i en "tykkere" udgave og uden understregning:
Tip - Du skal bruge følgende properties:
Her skal du indsætte billedet (himmel.jpeg) som baggrund vha. background-image. Herefter skal du bruge background-size til at definere hvor stort billedet skal være. Brug 100% eller "cover". Til slut skal du style teksten.
Tip - Du skal bruge følgende properties:
Her skal du indsætte det samme billede som i den forrige opgave.
Herefter skal du bruge (background-clip: text;) for at bruge
billedet som fyld i din tekst.
For at kunne se effekten skal din tekst være transparent (color:
transparent;)
Tip - Du skal bruge følgende properties:
Her skal baggrunden være en gradient. Læs på MDN hvordan man gør - det er ret nemt. Det kan være svært at få den helt nøjagtigt magen til min, men du skal anvende mindst 3 farver.
Tip - Du skal bruge følgende properties:
Også her skal du indsætte en gradient og et billede af en bloms. Jeg
har fundet min gradient på:
uigradients.com - den
hedder "Atlas", men du må gerne bruge en anden.
Se på dagens slides hvordan du buger flere baggrunde, eller læs mere
her:
MDN
.
Tip - Du skal bruge følgende properties:
Her skal du også indsætte en gradient men det skal være en
radial-gradient og den skal gentages et antal gange. Centrum for din
gradient skal ligge i øverste venstre hjørne. Du kan læse om
repeating gradients på:
css-tricks.com eller på
w3schools.com
På css-tricks siden er der et eksempel der ligner meget :)
Tip - Du skal bruge følgende properties:
De 4 forskellige farver er: black, maroon, pink og white.
Her er to div'er med class="kvadrat. Den første skal have en gul baggrundsfarve samt en blomst som baggrundsbillede. Den anden skal have en gul transparent baggrund med den samme blomst som baggrundsbillede. Husk at du skal bruge rgba eller hsla hvis du skal gøre baggrundsfarven transparent...
Tips til content boksen:
Tips til "kvadrat" boksene:
Tips til "k1" og "k2" klasserne:
Blomsten placeres som i forrige opgave i div'en "kvadrat", men i stedet for at give kvadrat en baggrundsfarve, bruger vi et CSS filter (sepia).
Tips til content boksen:
Tips til "kvadrat" boksen:
Se og læs om andre filtre her på: developer.mozilla.org
Aliter enim explicari, quod quaeritur, non potest.
Her er ikke noget billede. Lav din egen styling og brug det som reference senere
Tips: du kan evt skrive dine egne tips her...
Min egen baggrund
Her er ikke noget billede. Eksperimenter med din egen gradient, baggrundsbillede eller en kombination af begge. Du kan også bruge en tekstmaske...
Tips: du kan evt skrive dine egne tips her...