Profile picture of Michael GroßklausMichael Großklaus

Color scheme

Collecting some frontend related notes, thoughts, bookmarks and tips.

  1. Modals are not another noun for dialogs, but an adjective describing certain types of dialogs:

    Basically, when a modal component is open, it is the only thing that is not inert. Only the modal content can be interacted rest with, the rest of the page or application is made inert. Inert content is content that users cannot interact with. It is only really there visually, but you cannot Tab to it, click it, scroll it or access the content via assistive technologies.

    Hidde de Vries

  2. Without rounded corners:

    border: solid 0.25rem;
    border-image: linear-gradient(to bottom right, darkmagenta, aquamarine);

    With rounded corners:

    border: solid 0.25rem transparent;
      linear-gradient(white, white) padding-box, 
      linear-gradient(to bottom right, darkmagenta, aquamarine) border-box;

    Drawback: You need to set a solid color as background, so it cannot be transparent.

  3. <meta name=twitter:card content=summary_large_image>
    <meta property=og:title content="This is a test title">
    <meta property="og:description" name="description" content="This is a test description.">
    <meta property="og:image" content="">