Item: Fluid-responsive CSS Grid wallboard (no scaled images)
Rating: 3.4
Author: 2kool2

5 Downloads
85 Views
Tweet
Download Now View Demo

HTML
CSS

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Fluid-responsive CSS Grid wallboard (no scaled images)</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<main>

  <h1>Responsive CSS Grid wallboard</h1>

  <section>
    <div class=wallboard>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.25>
            <div class=stamp_imgBg-tall-flowers data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-blackTxt>Pictures of lily</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.25>
            <div class=stamp_imgBg-substitute data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-blackTxt-extraShadow>Substitute</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-tall-whiskey data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-blackTxt>Whiskey man</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=1>
            <div class=stamp_imgBg-chocolates data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Miracle cure</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.125>
            <div class=stamp_imgBg-tall-nightwear data-imgBrightness=110%></div>
          </div>
          <p class=stamp_copy-blackTxt>Sally Simpson</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=.75>
            <div class=stamp_imgBg-caine data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>My generation</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.75>
            <div class=stamp_imgBg-tall-magicBus data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Magic bus</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-roses data-imgBrightness=110%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>Pictures of lily</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-tall-right-hotelBreaks data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>In the hall of the<br>mountain king</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.25>
            <div class=stamp_imgBg-heinz data-imgBrightness=110%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Heinz Baked Beans</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-tall-left-emptyGlass data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Empty glass</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.75>
            <div class=stamp_imgBg-teaHouseTheatre data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>Tea and theatre</p>
        </a>
      </div>

    </div>
  </section>
  
  <section>
    <div class=instructions>
      <div><b>&larr;</b> C&rsquo;mon and squeeze me! <b>&rarr;</b></span></div>
  </section>


  <section>

    <h2>Fluid-responsive CSS Grid wallboard <small><i>(no scaled images)</i> with <a class=lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/mXpwbL">Vignette &amp; Brightness hover effect</a></small></h2>

    <p>Wallboard fills all device widths up to 1844px without stretching or squeezing the images.</p>
    <p>Ideally the images should be 604px wide but <strong>must</strong> have the minimum safe-area of 296px (320px - 2 * spacing).</p>
    <p>The height of a single row image is completely variable.<br>The tall images are calculated as: (2 * single row height) + (1 * spacing).</p>
    <p>Most images are cropped from the centre, though left or right is equally usable, and purely dependent on the location of the safe-area.<br>For example: &ldquo;Mountain king&rdquo; crops left and &ldquo;Empty glass&rdquo; crops right.</p>
    
    <p>There's a version of this wallboard which has a flexbox fallback (supports IE 10) and doesn't use Custom Properties: <a target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/rJbGKq" class=lnk-txt>Fluid-responsive CSS Grid wallboard (no scaled images) with Flexbox fallback</a>.</p>

  </section>

</main>




<footer class=myStuff><style>.myStuff{z-index:10;font-weight:100;color:#777;font-size:16px;position:fixed;width:100vw;left:0;bottom:0;margin:0;background-color:hsla(269,19%,20%,.9);padding:.125em}.myStuff_lnk,.myStuff_lnk:visited{text-decoration-skip: ink;color:hsla(211,100%,72%,1);text-decoration-color:hsla(211,100%,72%,.5);transition:all .3s ease-out}.myStuff_lnk:focus,.myStuff_lnk:hover{color:#fff;text-decoration-color:currentcolor}</style><a class=myStuff_lnk target=_blank title="[LinkedIn - new window]" href="https://www.linkedin.com/in/mikefoskett">Mike Foskett</a> &mdash; <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/popular/?grid_type=list#">Popular pens</a> &mdash; <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/public/?grid_type=list#">Latest pens</a> &mdash; <a class=myStuff_lnk target=_blank title="[new window]" href="https://websemantics.uk/">webSemantics</a></footer>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/2kool2/fluid-responsive-css-grid-wallboard-no-scaled-images-LQJyxe */
html {
  --spacing: 0.75rem;
}
@media (min-width: 48em) { /* 768px */
  html {
    --spacing: 1rem;
  }
}
body {
  font-family: regularfont, sans-serif;
  line-height: 1.5;
  margin: var(--spacing);

  font-family: sans-serif;
  line-height: 1.5;
  text-align: center;
  padding-bottom: 2rem;
  color: hsl(269,19%,30%);
  background-color: hsla(32,100%,85%,.35);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4'/%3E%3C/filter%3E%3C/defs%3E%3C!-- %3Cpath filter='url(%23a)' opacity='.3' d='M0 0h1200v256H0z'/%3E--%3E%3Crect filter='url(%23a)' opacity='.3' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
body * {
  box-sizing: border-box;
}
header {
  text-align: center;
  max-width: 40em;
  margin: 1rem auto;
}
main {
  margin-bottom: 1rem;
}
h1 {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
h2 {
  color: #fff;
  background-color: hsl(269,19%,30%);
  padding: var(--spacing);
  text-align: center;
  xmax-width: 29em;
  margin: var(--spacing) auto 1rem;
  font-size: 2rem;
  font-weight: 100;
  line-height: 1.25;
}
h2 small {
  font-size: 1.25rem;
  display: block;
}
p {
  text-align: left;
  max-width: 33em;
  margin: var(--spacing) auto;
}
.lnk {
  color: hsla(211, 100%, 72%,1); /* Darkest WCAG against #3a3a3a */
  text-decoration-skip: ink;
  text-decoration-color: hsla(211, 100%, 72%,.5);
  outline: 0 solid #fff;
  transition: all .3s;
}
.lnk:hover,
.lnk:focus {
  color: hsla(211, 100%, 98%,1);
  text-decoration-color: currentcolor;
  text-shadow: 0 1px 1px #000;
}

.instructions {
  overflow: hidden;
  font-size: 1rem;
  background-color: hsla(269,19%,30%,.1);
}
@media (min-width:34em) {
  .instructions {
    font-size: 1.5rem;
  }
}
.instructions div {
  transform: scale(0.75, 1);
  letter-spacing: -0.02em;
  animation: scaleArrow 5s infinite cubic-bezier(.68,-0.55,.27,1.55);
}
.instructions b {
  display: inline-block;
  opacity: .5;
  font-size: 2em;
  font-weight: 700;
  vertical-align: sub;
  transform: scale(.8, .75);
  animation: scaleArrow 5s infinite cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes scaleArrow {
  50% {
    transform: scale(1.28, 1);
  }
}
@media (min-width: 34em) {
  @keyframes scaleArrow {
    50% {
      transform: scale(1.28, 1);
      letter-spacing: 0.02em;
    }
  }
}


/*
    CSS GRID

    Images best served as
    604px wide with a 296px minimum safe area.
    With a fixed height, preferably a multiple of the line-height (24px) to complement vertical rhythm.

    Here images are 604x240px and 604x496px
*/

.wallboard {
  --columns: 1;
  margin: 0 auto;
  display: grid;
  grid-gap: var(--spacing);
  grid-template-columns: var(--columns);
}
@media (min-width: 39.25em) { /* 628px - 2 columns contains: 2*296px (images) + 3*12px (--spacing) */
  .wallboard {
    --columns: 1fr 1fr;
  }
}
@media (min-width: 59.5em) { /* 952px - 3 columns contains: 3*296px (images) + 4*16px (--spacing) */
  .wallboard {
    --columns: 1fr 1fr 1fr;
  }
}


.wallboard {
  --imgMaxWidth: 604px;
  --imgSingleRowHeight: 240px; /* tall images work out to 492px and 496px - difference is due to --spacing change from 12px to 16px */

  max-width: 1844px; /* maximum size for 3 columns containing: 3*604px (images) + 2*16px (--spacing) */
  max-width: calc(var(--imgMaxWidth) * 3 + var(--spacing) * 2);
  margin: 1rem auto;
}

.wallboard_stamp {
  max-width: var(--imgMaxWidth);
}
/* All the tall images are in the  odd cells: 1, 3, 5,... */
.wallboard_stamp:nth-child(odd) {
  grid-row: span 2;
}

.stamp_link {
  position: relative;
  display: block;
}

[class^="stamp_imgBg"] {
  background-position: bottom center;
  height: var(--imgSingleRowHeight);
}
[class^="stamp_imgBg-tall"] {
  height: calc(var(--imgSingleRowHeight) * 2 + var(--spacing));
}

[class^="stamp_copy"] {
  font-size: 1.75rem;
  line-height: 1.25;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  text-align: center;
  transform: translate3d(-50%, 0, 0);
  margin: 0 0 .25rem;
  white-space: nowrap;
}
[class^="stamp_copy"][class*="-blackTxt"] {
  color: #000;
  text-shadow: 0 0 2px rgba(255,255,255,1); /* overlays the image so increase edge contrast for accessibility */
}
[class^="stamp_copy"][class*="-blackTxt-extraShadow"] {
  color: #000;
  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff; /* overlays the image so increase edge contrast for accessibility */
}
[class^="stamp_copy"][class*="-whiteTxt"] {
  color: #fff;
  text-shadow: 0 0 2px #000; /* overlays the image so increase edge contrast for accessibility */
}
[class^="stamp_copy"][class*="-whiteTxt-extraShadow"] {
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 1px #000; /* overlays the image so increase edge contrast for accessibility */
}


/* Responsive wallboard column positions */

@media (min-width: 39.25em) { /* 628px - 2 columns */

/*   .wallboard_stamp:nth-child(1) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(2) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(3) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(4) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(5) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(6) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(7) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(8) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(9) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(10) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(11) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(12) {grid-column: 1;} */

}


@media (min-width: 59.5em) { /* 952px - 3 columns */

/*   .wallboard_stamp:nth-child(1) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(2) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(3) {grid-column: 3;} */
/*   .wallboard_stamp:nth-child(4) {grid-column: 1;} */
  .wallboard_stamp:nth-child(5) {
    grid-column: 2;
    grid-row: 2 / span 2; /* Move stamp up to previous row to fill the gap */
  }
/*   .wallboard_stamp:nth-child(6) {grid-column: 3;} */
/*   .wallboard_stamp:nth-child(7) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(8) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(9) {grid-column: 3;} */
/*   .wallboard_stamp:nth-child(10) {grid-column: 1;} */
  .wallboard_stamp:nth-child(11) {
    grid-column: 2;
    grid-row: 5 / span 2; /* Move stamp up to previous row to fill the gap */
  }
/*   .wallboard_stamp:nth-child(12) {grid-column: 3;} */

}

/*
    Most images are cropped from the centre.
    Though left or right may be used dependent on where the safe-area is.
    For example:
*/
[class^="stamp_imgBg"][class*="-right"] {
  background-position: right center;
}
[class^="stamp_imgBg"][class*="-left"] {
  background-position: left center;
}



/* Stamp image vignette */

[data-vignetteOpacity] {
  position: relative;
}
[data-vignetteOpacity="1"] {--vignetteOpacity: 1;}
[data-vignetteOpacity="0.75"] {--vignetteOpacity: 0.75;}
[data-vignetteOpacity="0.5"] {--vignetteOpacity: 0.5;}
[data-vignetteOpacity="0.25"] {--vignetteOpacity: 0.25;}
[data-vignetteOpacity="0.125"] {--vignetteOpacity: 0.125;}
[data-vignetteOpacity="0"] {--vignetteOpacity: 0;}

[data-vignetteOpacity]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: var(--vignetteOpacity, 0.5);
  background-image: radial-gradient(
    ellipse at center,
    hsla(8, 60%, 0%, 0) var(--vignetteInnerRadius, 58%),
    hsla(8, 60%, 0%, 1) var(--vignetteOuterRadius, 150%)
  );
  box-shadow: inset 0 0 1rem 0
    hsla(8, 60%, 0%, calc(var(--vignetteOpacity, 0.5) / 2));
  transition: opacity 0.3s ease-out;
}
a:hover [data-vignetteOpacity]::after,
a:focus [data-vignetteOpacity]::after {
  opacity: 0;
}


/* Stamp image brightness */

[data-imgBrightness="100%"] {--imgBrightness: 100%;}
[data-imgBrightness="105%"] {--imgBrightness: 105%;}
[data-imgBrightness="110%"] {--imgBrightness: 110%;}
[data-imgBrightness="115%"] {--imgBrightness: 115%;}
[data-imgBrightness="120%"] {--imgBrightness: 120%;}
[data-imgBrightness="125%"] {--imgBrightness: 125%;}

[data-imgBrightness] {
  display: block;
  transition: filter 0.3s ease-out;
}
a:hover [data-imgBrightness],
a:focus [data-imgBrightness] {
  filter: brightness(var(--imgBrightness, 100%));
}





/* Images - 604px x 240px or 496px */

[class^="stamp_imgBg"][class*="-flowers"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/flowers.jpg);
}
[class^="stamp_imgBg"][class*="-substitute"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/substitute.jpg);
}
[class^="stamp_imgBg"][class*="-whiskey"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/whiskey.jpg);
}
[class^="stamp_imgBg"][class*="-chocolates"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/chocolate.jpg);
}
[class^="stamp_imgBg"][class*="-nightwear"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/nightwear.jpg);
}
[class^="stamp_imgBg"][class*="-caine"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/michael-caine.jpg);
}
[class^="stamp_imgBg"][class*="-magicBus"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/magic-bus.jpg);
}
[class^="stamp_imgBg"][class*="-roses"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/roses.jpg);
}
[class^="stamp_imgBg"][class*="-hotelBreaks"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/hotel-breaks.jpg);
}
[class^="stamp_imgBg"][class*="-teaHouseTheatre"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/tea-house-theatre.jpg);
}
[class^="stamp_imgBg"][class*="-emptyGlass"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/empty-glass.jpg);
}
[class^="stamp_imgBg"][class*="-heinz"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/heinz.jpg);
}

Comments

More from 2kool2

Fluid-responsive CSS Grid wallboard (no scaled images)

In this example below you will see how to do a Fluid-responsive CSS Grid wallboard (no scaled images) with some HTML / CSS and Javascript

Fluid-responsive CSS Grid wallboard without scaling images. No JavaScript. Uses one image per stamp.

Comments

More from 2kool2

FAQ using ARIA attributes to meet WCAG 2 level AA [without a button]

Codepen include - footer

Stamp vignette hover effect generator WIP

Vignette hover on CSS grid wallboard (non-scaled stamps) for Tesco Direct

You Might Also Like

lime-Card

A Pen by messer

Sweater Cost Calculator

A Pen by Tamik Soziev

Creating Canvas Elements — Week Three

A Pen by Friend

A Pen by Fersho Pls

CSS Hexagon made of triangles

Fluid-responsive CSS Grid wallboard (no scaled images)

In this example below you will see how to do a Fluid-responsive CSS Grid wallboard (no scaled images) with some HTML / CSS and JavascriptFluid-responsive CSS Grid wallboard without scaling images. No JavaScript. Uses one image per stamp.

Comments

More from 2kool2

FAQ using ARIA attributes to meet WCAG 2 level AA [without a button]

Codepen include - footer

Stamp vignette hover effect generator WIP

Vignette hover on CSS grid wallboard (non-scaled stamps) for Tesco Direct

You Might Also Like

lime-Card

A Pen by messer

Sweater Cost Calculator

A Pen by Tamik Soziev

Creating Canvas Elements — Week Three

A Pen by Friend

A Pen by Fersho Pls

CSS Hexagon made of triangles

In this example below you will see how to do a Fluid-responsive CSS Grid wallboard (no scaled images) with some HTML / CSS and Javascript

Fluid-responsive CSS Grid wallboard without scaling images. No JavaScript. Uses one image per stamp.