Pseudo classes

Laget av Camilla Larsen

Agenda

1

Repetisjon

- Pseudo klasser

- Enkle animasjoner

2

Introduksjon

Forbredelse til eksamen

3

Spørsmål

" CSS pseudo classes kan benyttes for å legge til styling på ulike elementer, kun hvis de oppfyller regler som vi setter "

Pseudo klasser

  • Hover
  • Active
  • Focused
  • first-child
  • last-child
  • Before 
  • After
  • First-letter
  • First-line

Det finnes utallige mange pseudo classes man kan benytte, men her er de mest brukte som vi skal fokusere på i dag.

Pseudo class - hover & active


<button> Hover me </button>
button{
    background-color: #ff7f50;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    padding: 10px;
}

button:hover {
    background-color: rgb(155, 76, 47);
}

button:active {
    background-color: rgb(53, 22, 11);
}

Pseudo class - focus


<input class="input-focused" placeholder="Change border"/>
input{
    border-radius: 6px;
    padding: 5px;
    border: 1px solid black;
}

.input-focused:focus {
    outline: none !important;
    border:1px solid salmon;
}

Pseudo class - first & last-child

<div class="first-child-container">
	<h3>This is first child element</h3>
   	<p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Exercitationem sed officia pariatur fugiat reprehenderit dolores
        aliquam, aperiam delectus voluptatibus laudantium quisquam. Eveniet
        quia fugiat ad, illum magni hic eos nobis.
    </p>
   	<p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Exercitationem sed officia pariatur fugiat reprehenderit dolores
        aliquam, aperiam delectus voluptatibus laudantium quisquam. Eveniet
        quia fugiat ad, illum magni hic eos nobis.
   	</p>
 </div>
.first-child-container h3:first-child {
  color: blue;
} 
.first-child-container p:last-child {
  color: pink;
}

Pseudo element - before & after

 <div class="before-after">
  <p>before</p>

  <p>after</P>
</div>
.before-after::before {
  content: "before";
  background-color: lightsalmon;
  padding: 5px;
}

.before-after::after {
  content: "after";
  background-color: lightskyblue;
  padding: 5px;
}

Pseudo element - first letter & line

<div class="first-container"> 
 	<p> Once upon a time </p>
</div>
.first-container::first-letter{
    color: rgb(13, 46, 5);
    font-size: 18px;
    font-weight: bold;
}

.first-container::first-line{
    color: rgb(134, 114, 142);
}

Vi fortsetter med pseudo classer, men legger også på noe animasjon

Transition shorthand

  • Transition-delay
    - Forteller hvor lang tid det skal ta før animasjonen setter i gang
  • Transition-duration
    - Forteller hvor lenge animasjonen skal vare
  • Transition-property
    - Setter en spesifikk styling syntax som vi bestemmer.
  • Transition-timing-function
    - ease
    - ease-in
    - ease-out
    - ease-in-out
    - linear

<a href="#">Hover this link</a>

a {
color: #54b3d6;
  font-family: 'Poppins', sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  box-shadow: inset 0 0 0 0 #54b3d6;
  color: #54b3d6;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

a:hover {
  color: #fff;
  box-shadow: inset 200px 0 0 0 #54b3d6;;
}

Skriv ned denne koden, se hva som skjer.

Vi går igjennom koden sammen etterpå

Oppgave - Mykonos Social

Dere skal nå trene på å bruke pseudo klasser og lette animajoner. Start å jobbe med landings side (forside) og en meny side til en restaurant som heter Mykonos Social.

 

Her skal du benytte alle pseudo klassene dere har lært for å skape en mer levende og dynamisk forside. Du skal og lage en meny til restauranten som inneholder noe form for animasjon.