<!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>←</b> C’mon and squeeze me! <b>→</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 & 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: “Mountain king” crops left and “Empty glass” 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> — <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/popular/?grid_type=list#">Popular pens</a> — <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/public/?grid_type=list#">Latest pens</a> — <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);
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
![FAQ using ARIA attributes to meet WCAG 2 level AA [without a button]](https://codepen.io/2kool2/pen/RJaBYP/image/small.png)
