CSS Top Codes

CSS Code to Fix blurry image when scaling down

A large image shown in a smaller box can look blurry or jagged in some browsers and devices. Here are the fixes, in the order that you should try them.

1. Use an image of the right size

The best fix is not CSS. Do not scale a 3000px photo down to 300px. Save a smaller file, and give the browser a bigger one for high resolution screens with srcset.

<img src="photo-600.jpg"
     srcset="photo-600.jpg 600w, photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 600px"
     width="600" height="400" alt="Photo">

2. Keep the width and height as whole numbers

A size like width: 33.33% can produce a fractional pixel size, and the browser blurs the edges. Use fixed or rounded sizes where you can.

3. Fix blur with a transform

For images that are scaled with transform, this old trick forces the browser to use a different rendering path.

img {
  backface-visibility: hidden;
  transform: translateZ(0);
}

4. image-rendering

image-rendering tells the browser how to scale. Use pixelated for pixel art and icons that must stay sharp and square. Use crisp-edges or Chrome’s -webkit-optimize-contrast to keep the edges sharp.

.pixel-art {
  image-rendering: pixelated;
}

.sharp {
  image-rendering: -webkit-optimize-contrast;  /* Chrome and Safari */
  image-rendering: crisp-edges;                /* Firefox */
}

Output in the browser

Note: pixelated is not a good choice for photos, because it makes them look blocky. For logos and icons, use an SVG file, which is always sharp at any size.

CSS Text Vertical Align Middle in Div

Sometimes you must put text or an image exactly in the middle of a box, from top to bottom. Here are the common CSS ways, from the best to the old ones.

1. Flexbox (best way)

Make the box a flex container and use align-items: center. Add justify-content: center to centre it horizontally too.

<div class="box">Centred text</div>

.box {
  display: flex;
  align-items: center;       /* vertical */
  justify-content: center;   /* horizontal */
  min-height: 120px;
  border: 2px solid grey;
}

Output in the browser

Centred text

2. Grid

.box {
  display: grid;
  place-items: center;   /* both directions */
  min-height: 120px;
}

3. line-height (only for one line of text)

Set the line-height equal to the height of the box.

.box {
  height: 60px;
  line-height: 60px;
  text-align: center;
  border: 2px solid grey;
}

Output in the browser

One line only

4. Absolute position and transform

.box { position: relative; min-height: 120px; }
.box .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Output in the browser

Centred inner box

5. table-cell (old way)

.outer { display: table; width: 100%; height: 120px; }
.inner { display: table-cell; vertical-align: middle; }

Note: Use Flexbox or Grid in new projects. The other methods are for very old browsers or special cases. Also see How to center a div in CSS?

CSS Button Styles

Here are four button styles that you can copy to your site. The same CSS works for <button> and for links with the class btn.

HTML

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-pill">Pill</button>
<button class="btn btn-primary" disabled>Disabled</button>

CSS

.btn {
  padding: 10px 22px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-primary {
  background: #0073aa;
  color: #fff;
  border: 2px solid #0073aa;
}
.btn-primary:hover { background: #005177; border-color: #005177; }

.btn-outline {
  background: transparent;
  color: #0073aa;
  border: 2px solid #0073aa;
}
.btn-outline:hover { background: #0073aa; color: #fff; }

.btn-pill { border-radius: 999px; background: #43a047; color: #fff; border: 2px solid #43a047; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid orange; outline-offset: 2px; }

Output in the browser (hover colours do not show in this box):

Output in the browser

Note: Keep the :focus-visible style, so keyboard users can see which button is selected. See CSS Links for link buttons.

CSS Responsive Navigation Bar

This navigation bar shows the logo on the left and the links on the right. On a small screen the links stack under each other. It uses only HTML and CSS.

HTML

<nav class="navbar">
  <a class="logo" href="/">MySite</a>
  <ul class="links">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
  padding: 0 16px;
}
.navbar a { color: #fff; text-decoration: none; padding: 14px 12px; display: block; }
.logo { font-weight: bold; font-size: 20px; }
.links { display: flex; list-style: none; margin: 0; padding: 0; }
.links a:hover { background: #0073aa; }

@media (max-width: 600px) {
  .navbar { flex-direction: column; align-items: flex-start; }
  .links { flex-direction: column; width: 100%; }
}

Output in the browser (wide screen):

Output in the browser

How it works

justify-content: space-between pushes the logo to the left and the links to the right.
The media query changes the direction to a column on screens up to 600px wide.
For many links, add a menu button with a little JavaScript to open and close the list.

Related: CSS Flexbox and CSS Media Queries.

CSS Loading Spinner

A loading spinner shows the visitor that something is loading. This one needs only one HTML element and a few lines of CSS.

HTML

<div class="spinner"></div>

CSS

.spinner {
  width: 40px;
  height: 40px;
  border: 5px solid #e0e0e0;
  border-top-color: #0073aa;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

Output in the browser (the circle does not rotate in this box, but it does on your page):

Output in the browser

How it works

A grey circle is made with border and border-radius: 50%.
Only the top border has a blue colour, so one part of the circle is coloured.
The animation rotates the circle by 360 degrees again and again (infinite) at the same speed (linear).

Note: Add role="status" and a hidden text like “Loading…” for screen readers. Also respect visitors who prefer less motion with @media (prefers-reduced-motion: reduce).