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.

Pseudo

By Camilla Larsen