Custom Props

Digital design,

3. semester

h1 {
  color: green;
}

h2 {
  color: blue;
}

p {
  color: red;
}

Farvepalette i CSS

html {
  --primary-color: red;
  --secondary-color: blue;
  --brand-accent-color: green;
  
  --spacing-16: 1em;
}

h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--padding);
}

p {
  color: var(--primary-color);
}
h1 {
  color: #bada55;
}

h2 {
  color: #ff2291;
}

p {
  color: #5000ca;
}

Farvepalette i CSS

html {
  --primary-color: red;
  --secondary-color: blue;
  --brand-accent-color: green;
  
  --spacing-16: 1em;
}

h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--padding);
}

p {
  color: var(--primary-color);
}

???

???

???

h1 {
  color: #bada55;
  padding-bottom: 1rem;
}

h2 {
  color: #ff2291;
  padding-bottom: 1rem;
}

p {
  color: #5000ca;
  padding-bottom: 1rem;
}

Farvepalette i CSS

html {
  --primary-color: red;
  --secondary-color: blue;
  --brand-accent-color: green;
  
  --spacing-16: 1em;
}

h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--padding);
}

p {
  color: var(--primary-color);
}

Farvepalette i CSS

html {
  --primary-color: #bada55;
  --secondary-color: #ff2291;
  --brand-accent-color: #5000ca;
  
  --spacing-16: 1rem;
}

h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--spacing-16);
}

p {
  color: var(--primary-color);
  padding-bottom: var(--spacing-16);
}
h1 {
  color: #bada55;
  padding-bottom: 1rem;
}

h2 {
  color: #ff2291;
  padding-bottom: 1rem;
}

p {
  color: #5000ca;
  padding-bottom: 1rem;
}

Farvepalette i CSS

html {
  --primary-color: #bada55;
  --secondary-color: #ff2291;
  --brand-accent-color: #5000ca;
  
  --spacing-16: 1rem;
}

h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--spacing-16);
}

p {
  color: var(--primary-color);
  padding-bottom: var(--spacing-16);
}
h1 {
  color: #bada55;
  padding-bottom: 1rem;
}

h2 {
  color: #ff2291;
  padding-bottom: 1rem;
}

p {
  color: #5000ca;
  padding-bottom: 1rem;
}
html {
  --primary-color: #bada55;
  --secondary-color: #ff2291;
  --brand-accent-color: #5000ca;
  
  --spacing-16: 1rem;
}

h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--spacing-16);
}

p {
  color: var(--primary-color);
  padding-bottom: var(--spacing-16);
}

Custom Properties

html {
  --primary-color: #bada55;
}
h1 {
  color: var(--primary-color);
}

Definér

Brug

--dit-variabel-navn: [værdi];
[property]: var(--dit-variabel-navn);

Custom Properties

html {
  --primary: #5000ca;
  --secondary: #463866;
  --accent: #fb28a8;

  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-xxl: 6rem;
}

eksempel

"Consistency"

Custom Properties

@media (prefers-color-scheme: dark) {
  /* Dark styles */
}

Dark mode

html {
  --background-color: #222;
  --foreground-color: #fafafa;
}

@media (prefers-color-scheme: dark) {
  html {
    --background-color: #fafafa;
    --foreground-color: #222;
  }
}

body {
  background-color: var(--background-color);
  color: var(--foreground-color);
}

Dark mode

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (min-width: 600px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

eksempel

Custom Properties

.grid {
  --cols: 1fr 1fr 1fr;
  display: grid;
  grid-template-columns: var(--cols);
}

@media (min-width: 600px) {
  .grid {
    --cols: 1fr 1fr 1fr 1fr 1fr;
  }
}

eksempel

Custom Properties

.grid {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
}

@media (min-width: 600px) {
  .grid {
    --cols: 5;
  }
}

repeat( 3, 1fr )

repeat( 5, 1fr )

eksempel

Custom Properties

.grid {
  --grid-size: repeat(3, 1fr);
  
  display: grid;
  grid-template-rows: var(--grid-size);
  grid-template-columns: var(--grid-size);
}

eksempel

Custom Properties

p {
  color: green;
}

#context {
  color: red;
}
<div id="context">
  <p>Some text</p>
</div>

Custom Properties

Custom Properties

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

specificity & inheritance

Loading...

Custom Properties

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

devices

Loading...

:root {
  --my-color: green;
}

p {
  color: var(--my-color);
}

aside p {
  --my-color: red;
}

Instead of this

We can do this

Custom Properties

scoping

p {
  color: var(--my-color, green);
}

aside p {
  --my-color: red;
}

Instead of this

We can do this

Custom Properties

scoping

.object-1 {
  --move-to: 100px;
}

.object-2 {
  --move-to: 400px;
}

[class|="object"] {
  animation: move 1s linear forwards;
}

@keyframes move {
  to {
    transform: translateX(var(--move-to));
  }
}

We can do this

Or this

Custom Properties

dry

Custom Properties

dry

Loading...

/* CSS colors w/ aplha channel */
div {
  color: #6a00ff80;
  color: rgb(106 0 255 / 50%);
  color: hsl(265deg 100% 50% / 50%);
}

Custom Properties

By Dannie Vinther

Custom Properties

Custom Properties

  • 77

More from Dannie Vinther