Learnings - ambersr/i-love-web GitHub Wiki

Learnings

In deze pagina deel ik mijn bevindingen die ik elke week heb geleerd van informatieve bronnen, mails en van mijn mede-studenten/docenten.

Week 1

CSS :drag en ::dragged-image

Source: CSS Tricks

My learnings

  • Normaal gesproken voeg je met JS een class to om het drag functie toe te voegen. Dit is nu niet meer nodig, alleen css!!
  • Met de pseudo-class :drag zorg je ervoor dat je alle stijlen direct via CSS kunt toepassen tijdens het slepen, zonder extra JavaScript te gebruiken.
  • Daarnaast is dit ook een win voor performance omdat je JS minimaliseert :)
  • Ook kan je een melding meegeven doormiddel van de pseudo-class: ::dragged-image.

Zo ziet dit er bijvoorbeeld uit:

.menu-bar:drag {
  cursor: grabbing;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #fff;
  transform: translate(1px);
  opacity: 0.2;
  scale: 1.2;
}

::drag-image {
  content: "📦 Dragging...";
  padding: 0.5rem 1rem;
  background: #fff6d6;
  color: #333;
  border: 2px dashed orange;
  border-radius: 0.5rem;
}

Informatieve bronnen:

Week 2