Forem: Alex Carpenter

How to add gradient overlays to images with CSS

Alex Carpenter — Mon, 16 Mar 2020 16:31:06 +0000

Learn how to add a gradient overlay to your images to create a nice modern effect.

View the demo code https://codepen.io/alexcarpenter/pen/RwPyoyE

How to use the object-fit CSS property to scale images responsively

Alex Carpenter — Wed, 11 Mar 2020 21:15:30 +0000

View the demo code: https://codepen.io/alexcarpenter/pen/YzXeEbV

object-fit browser support: https://caniuse.com/#search=object-fit

How to create skewed backgrounds with CSS

Alex Carpenter — Tue, 25 Feb 2020 15:35:11 +0000

View the demo code https://codepen.io/alexcarpenter/pen/PoqWvKg

How to create vertical text with CSS

Alex Carpenter — Thu, 20 Feb 2020 19:32:36 +0000

How to use CSS writing modes to create vertical text within your websites.

View the demo code https://codepen.io/alexcarpenter/pen/rNVMdGE

How to add a gradient to text with CSS

Alex Carpenter — Wed, 19 Feb 2020 14:42:32 +0000

Make your text blocks stand out by adding a gradient to your text with CSS.

View the demo code https://codepen.io/alexcarpenter/pen/VwLjEYO

Using a pseudo element to mimic a rgba value

Alex Carpenter — Thu, 06 Feb 2020 15:11:33 +0000

How I used a pseudo element to mimic a rgba value for the pill component I use on my website.

You can view the CSS code for my website here.

How to make your own CSS media object pattern

Alex Carpenter — Tue, 04 Feb 2020 16:21:00 +0000

Originally created by Nicole Sullivan back in 2010, the media object is a common web pattern that "could save you hundreds of lines of code".

View the demo on CodePen

How to style a select element with CSS

Alex Carpenter — Mon, 27 Jan 2020 20:56:09 +0000

View the demo on CodePen

How to create custom checkbox and radio inputs with CSS

Alex Carpenter — Thu, 16 Jan 2020 00:00:00 +0000

One major thing I forgot to outline in the screencast is ensuring there is a focused state applied to the custom indicator when the user has focused the input. The code provided below includes a focus state.

<!-- checkbox -->
<label class="control">
  <input type="checkbox" class="control__input visually-hidden">
  <span class="control__indicator"></span>
  Blue
</label>

<!-- radio -->
<label class="control">
  <input type="radio" name="color" class="control__input visually-hidden">
  <span class="control __indicator control__ indicator--radio"></span>
  Blue
</label>


.control {
  display: inline-flex;
  align-items: center;
}

.control__indicator {
  margin-right: .25rem;
  width: .75rem;
  height: .75rem;
  background-color: #ccc;
  border-radius: 3px;
}

.control__indicator--radio {
  border-radius: 50%;
}

.control __input:focus ~ .control__ indicator {
  box-shadow: 0 0 0 0.2rem rgba(38,143,255,.5);
}

.control __input:checked ~ .control__ indicator {
  background-color: #05f;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xOCA3bC0xLjQxLTEuNDEtNi4zNCA2LjM0IDEuNDEgMS40MUwxOCA3em00LjI0LTEuNDFMMTEuNjYgMTYuMTcgNy40OCAxMmwtMS40MSAxLjQxTDExLjY2IDE5bDEyLTEyLTEuNDItMS40MXpNLjQxIDEzLjQxTDYgMTlsMS40MS0xLjQxTDEuODMgMTIgLjQxIDEzLjQxeiIvPjwvc3ZnPg==');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Visually hide the browser input to ensure it is still focusable via keyboards */

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Here's a demo on CodePen that you can play with.

How to create a sticky footer with CSS

Alex Carpenter — Wed, 15 Jan 2020 16:52:18 +0000

How to use flexbox and auto margins to create a sticky footer with CSS.

Demo https://codepen.io/alexcarpenter/pen/YzPvQWr

Consecutively return a random item from a JavaScript array

Alex Carpenter — Mon, 11 Mar 2019 15:03:29 +0000

View this post on alexcarpenter.me

The other week I was working on a side project where I needed to consecutively return a random item from an array via a button click.

To do this, I first created a function that returns a random item from an array.

function randomItem(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

The problem with using only the randomItem function here, is that it was not uncommon to return the same item twice in a row.

To fix that issue, I made use of a do...while loop to call the randomItem function until it returned a result which is not equal to the previously selected item.

So while prevItem is equal to currentItem, run the randomItem function.

var fruit = ['Apples', 'Oranges', 'Pears'];

var currentItem = randomItem(fruit);

btn.addEventListener('click', function () {
  var prevItem = currentItem;
  do {
    currentItem = randomItem(fruit);
  } while (prevItem === currentItem);
}, false);

Now when we click the button, we will never get the same item returned consecutively.

Checkout the demo and open the console to see it in action.

Style your default global links without affecting your component links

Alex Carpenter — Wed, 27 Feb 2019 14:59:32 +0000

This is a little trick I've recently been implementing on any new projects. Style your default global links without affecting your component links.

a:not([class]) {
  color: #0055ff;
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

This helps prevent having to overwrite your global default link styles that you have applied within your component links.

Check out the demo below: