CSS Quick Reference: Media Queries, Backgrounds, and Filters

A collection of short CSS snippets covering fundamental styling rules, from responsive typography adjustments to visual effects.

Media Queries

I just met with Brandon from the UX Engineering department to figure out font sizing using media queries. Media queries are essentially ways of setting thresholds within the CSS to change fonts, widths, etc., based on a given criteria.

Here's an example:

1@media (min-width: 640px) {
2    font-size: 1.1rem;
3}
4
5@media (min-width: 1024px) {
6    font-size: 1.3rem;
7}
8

The code above takes in a criteria—in this case, the width—and changes the font size accordingly. It triggers the CSS nested within the media query and applies it if the criteria is met. This block of code can be written within the class selector in preprocessors like SASS/SCSS, or natively in modern CSS:

1.className {
2  /* ... styles ... */
3
4  @media (min-width: 640px) {
5    /* ... nested media overrides ... */
6  }
7}
8

This is extremely helpful when managing consistent designs across mobile, desktop, and tablet users.

---

Setting a Background Image

Here is how you set a background image to cover the entire screen using HTML and CSS. The image will adjust based on the size of your browser window.

HTML

1<div class="background"></div>
2

CSS

1.background {
2    height: 100%;
3    background-image: url("imageURL");
4    background-repeat: no-repeat;
5    background-size: cover;
6    background-attachment: fixed;
7    background-position: 50% 0%;
8    position: relative;
9    top: 0rem;
10    bottom: 0rem;
11    margin-top: 0rem;
12}
13

The background-size property is unique in that the values used here are often either contain or cover.

• Cover will fill the entire div, scaling and zooming the content to ensure zero empty space.
• Contain will fit the image to either the width or height, whichever is the limiting agent, filling remaining space with the container background color.

---

CSS Filters and Glass Effects

When creating custom web designs without external layout frameworks, doing custom CSS from scratch offers complete control over element presentation. For example, a sheet of glass look with semi-transparent background elements and borders can be created with modern CSS rules:

1.glass {
2  background-color: rgba(255, 255, 255, 0.2);
3  border-bottom: 2px solid;
4  border-bottom-color: #ccc;
5  border-bottom-color: rgba(255, 255, 255, 0.2);
6  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
7}
8

This setup can easily be customized by changing the values of the background-color, border-color, etc. For example, if your text is white, you can change it to have a darker tint of gray:

1background-color: rgba(100, 100, 100, 0.2);
2

Image Filters

Another useful feature of CSS3 is image filters (similar to filters you'd find in photography or photo editing apps).

Here's an example of a grayscale filter combined with a blur:

1.filtered-image {
2  -webkit-filter: grayscale(0.5) blur(10px);
3  filter: grayscale(0.5) blur(10px);
4}
5

Or as an inline style using ReactJS:

1const backgroundBlur = {
2  WebkitFilter: 'grayscale(0.5) blur(7px)',
3  filter: 'grayscale(0.5) blur(7px)'
4};
5

Hope this helps.