Skip to main content
100%

`prefers-color-scheme`

✓ Published0🌍 Public
Aabernier
Last edited Oct 16, 2019
Created on Aug 27, 2014

This example demonstrates several CSS techniques for responsive and adaptive web design, including the `prefers-color-scheme` media query for dark mode, `@font-face` for embedding a custom webfont, and nested media queries for serving different background images based on viewport width and device pixel ratio. It also shows a method for canceling parent padding using negative margins and `calc()`, alongside Stylus mixins like `sourceorder()` and `vcenter()` for table-based layout and vertical centering. The code references Codepen examples and MDN documentation for these CSS APIs.

AI-generated description

prefers-color-scheme

body {background:white;}
@media (prefers-color-scheme: dark) {
  body {background:black; color:white;}
}

see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

@font-face

@font-face {
    font-family: 'agenda';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/67030/Agenda-Light.woff2') format('woff2'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/67030/Agenda-Light.woff') format('woff');
    font-weight:300;     /* normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900 */
    font-style:normal;   /* normal|italic|oblique */
    font-stretch:normal; /* ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded */
}

responsive images

div {
  background-image:url("thekase-community-monkey-bg_320x.png");
  @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
    background-image:url("thekase-community-monkey-bg_640x.png");
    
  @media (min-width:480px)
    background-image:url("thekase-community-monkey-bg_480x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_960x.png");
      
  @media (min-width:768px)
    background-image:url("thekase-community-monkey-bg_768x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_1536x.png");
      
  @media (min-width:1024px)
    background-image:url("thekase-community-monkey-bg_1024x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_2048x.png");
      
  @media (min-width:1400px)
    background-image:url("thekase-community-monkey-bg_1400x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_2800x.png");
}

wide technique

<div style="padding:10px;">
  <div class="wide">cancel parent padding</div>
</div>

<style>
.wide {margin-left:-10px;margin-right:-10px; width:calc(100%+20px);}
</style>

Similar vizzes

Loading thumbnail…

SCSS cheat sheet

This example presents a SCSS cheat sheet as a source-code reference, showing syntax for imports, variables, nesting, mixins, and media queries. The code includes predefined color variables like `$dmn-blue`, uses `lighten()` to adjust shades, and demonstrates `@mixin` definitions for reusable styles such as `body-copy-style` and `rounded`. It also illustrates selector nesting with the `&:hover` parent reference and responsive design via `@media` rules keyed to width variables. The gist by LayneSmith serves as the data source, rendered directly as formatted code.

LLayne Smith
72% match
Loading thumbnail…

Gist f9294831c623824d1181

This example provides a set of Sass mixins for implementing the CSS Flexible Box Layout (Flexbox) module, covering core properties like display, flex, align-items, flex-direction, flex-wrap, order, and justify-content. It includes vendor-prefixed declarations for older WebKit, Mozilla, and Microsoft browsers, ensuring cross-browser compatibility. The mixins also offer ready-to-use alignment utilities, such as flex-align-center, flex-align-stretch, flex-align-top, and flex-align-bottom, which combine the necessary flexbox properties to quickly position items within a container. The code does not include any data or visualization, serving purely as a reusable styling toolkit.

Aalexiscollado
67% match
Loading thumbnail…

CSS Media Queries for Desktop, Tablet, Mobile.

This example maps out CSS Media Query breakpoints for desktop, tablet, and mobile screen sizes, using plain CSS within a gist by MistyBlunch. It shows how `@media` rules with `min-width` and `max-width` conditions segment the viewport into device-specific ranges, from high-resolution desktops (1281px and up) down to smartphones (320px to 480px). The code also demonstrates an `orientation: landscape` variant for tablets. No external libraries or data sources appear; it relies solely on native CSS syntax to define responsive behavior at each width threshold.

MMistyBlunch
66% match
Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates the visual output of Sass preprocessing on a simple stylesheet, showing how Sass functions transform color values for anchor elements. The code uses Sass v3.4.3 and Compass v1.0.1, applying mixins, color functions like `lighten`, `darken`, `complement`, `desaturate`, and `mix`, and nested selector syntax with `&:hover`. The resulting CSS output reveals the computed hex values, such as `#ff6666` for lightened red and `cyan` for the complement, illustrating how Sass’s built-in color manipulation and nesting rules compile into plain CSS.

Aandresmijares
66% match
Loading thumbnail…

SCSS mixing for CSS3 gradients

This example shows how to define a reusable gradient mixin in SCSS that generates CSS3 gradients with cross-browser support. The mixin takes two color arguments and outputs background-color as a fallback, followed by gradient declarations for Mozilla, WebKit, Opera, and the standard syntax. The code uses the `@mixin` and `@include` directives from Sass, applying the mixin to a `.my_div` class with a `$background_color` variable and white. It does not include any data source or rendering logic, only the styling approach for gradients.

Aackuser
65% match
Loading thumbnail…

Gist c196418fe72b707e3082568ad77439cc

This example demonstrates a responsive CSS grid system built with Sass, showing how column widths, ordering, visibility, and alignment adapt across five breakpoints (xl, lg, md, sm, xs). The layout defines 12-column proportional widths, auto-sizing columns, and utility classes for hiding, showing, and reordering content. It uses Sass `@each` loops and `@media` queries to generate breakpoint-specific styles, with variables like `$size-xl` and `$grid-spacing` controlling the responsive behavior. The grid container adjusts its max-width based on each breakpoint value.

SSamuelRiversMoore
65% match
Loading thumbnail…

Gist 7acc476942fa72698250

This example displays a CSS-based baseline grid overlay designed for aligning web layouts to a 16-column, 22-pixel vertical rhythm across a 960-pixel total width. The code uses linear gradients in WebKit, Mozilla, and Opera vendor prefixes to render red vertical column lines at 60-pixel intervals and cyan horizontal baseline lines at 22-pixel intervals. It relies on background-size and background-position properties to position the grid precisely, with the columns offset 10 pixels from the left edge. The visualization demonstrates a reusable CSS class for visual debugging of typographic and layout alignment in responsive design workflows.

Aallyraza
64% match
Loading thumbnail…

Gist 537f2fa32fb6446af0989d45bf11231c

This example presents a set of technical notes on Sass, a CSS preprocessor, written in Markdown with embedded SCSS and CSS code snippets. It shows the general features of Sass, including nesting, placeholder selectors, variables, mixins, functions, and at-rules like `@use`, `@import`, and `@extend`, alongside their compiled CSS output. The notes illustrate how Sass compiles down to standard CSS and highlight benefits such as code modularity and reusable styles. The content is sourced from a gist authored by Amol Tangade, formatted as a plain-text document rather than a visual chart.

AAmol Tangade
64% match