Learn

I am working on a whole lot of good stuff for this page, but for now, here are a few tutorials for effects that I’ve used on this site.

Have I explained something poorly or is the code not doing what you wanted it to? Please email me at hoidarnielle.me and let me know! I’d love to help.

Rainbow Dropshadow Headers

This is actually a fairly simple technique using text-shadow, which can easily be applied to any text element, but it’s best for large text (like headers) due to how bulky it is.

To get this:

A wild rainbow appears!

Use this code:

text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 4px 4px 0px #ff0000, 6px 6px 0px #ffa500, 8px 8px 0px #FFFF00, 10px 10px 0px #008000, 12px 12px 0px #0000FF, 14px 14px 0px #800080;

The first four sets of numbers and hex codes set a 2px border around the text, and then the next six add each colour in 2px increments to the bottom right of the text. You can alter the width and direction of the shadow by playing around with the numbers. For example, this is the same effect, but with 3px increments to the top left:

Another rainbow appears!

And this is what the code for that looks like (with a margin added so the dropshadow stays within the page margins)…

text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -6px -6px 0 #ff0000, -9px -9px 0 #ffa500, -12px -12px 0 #ffff00, -15px -15px 0 #008000, -18px -18px 0 #0000ff, -21px -21px 0 #800080; margin-left: 21px;

You could also play around with the blur value (the third value) on each colour for an interesting effect:

Clean your glasses!

text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 4px 4px 1px #ff0000, 6px 6px 2px #ffa500, 8px 8px 3px #ffff00, 10px 10px 4px #008000, 12px 12px 5px #0000ff, 14px 14px 6px #800080;

Rainbow Gradient and Text Stroke Headers

This effect is a little more difficult to achieve because it requires adding a data attribute to the accompanying HTML. But I think it looks super cool, so it’s well worth it!

The first step is to apply the necessary HTML to any header you’d like to apply the effect to. I use it on all my h3 headings, but you can apply it to any text element, as long as you use the data-text attribute.

<h3 data-text="Example Text"><span>Example Text</span></h3>

The <span> with the same text inside the tag is for accessibility as screen readers cannot parse data attributes, so don’t forget to add it!

Then add the CSS styling.

h3[data-text] { display: inline-block; position: relative; }
h3[data-text]:before { content:attr(data-text); background: #fff; -webkit-text-stroke: 2px transparent; -webkit-background-clip: text; background-clip: text; color: transparent; }
h3[data-text]:after { content: attr(data-text); left: 0; top: 0; position: absolute; background: #ff0000; background: linear-gradient(to right, #ff0000 0%, #ffa500 20%, #ffff00 40%, #008000 60%, #0000ff 80%, #800080 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }
h3 span { display: none; }

Which will display something like this:

Example Text

This code uses a combination of CSS gradients, background clipping, positioning and text stroke. You can play around with the values to change the width and colour of the stroke, colours of the gradient, where each colour starts etc. The span { display : none; } is important, as it hides the extra text from view while still making it available to screen readers.

Rainbow Unordered Lists

Another quick trick using CSS selectors. To display a different coloured disc (or your preferred list style) for each item in an unordered list, the following code will do the trick!

li:nth-child(6n + 1)::marker { color: #ff0000; }
li:nth-child(6n + 2)::marker { color: #ffa500; }
li:nth-child(6n + 3)::marker { color: #ffff00; }
li:nth-child(6n + 4)::marker { color: #008000; }
li:nth-child(6n + 5)::marker { color: #0000ff; }
li:nth-child(6n + 6)::marker { color: #800080; }

If you would like to add or remove colours, make sure you change the numbers accordingly. 6n tells the code how many list items to count before repeating the colours, and + # tells the code each colour to display and in what order.

  • And this…
  • Is what…
  • It will…
  • Look like…
  • On your…
  • Unordered lists…
  • … and back to red!

CSS Filtering

I use CSS filtering on my Music, Likes and Watch, Listen, Play and Read pages. Using data attributes, you can filter content without using Javascript! Here’s how:

First, add a wrap around everything included in the filter. This will apply CSS only to this filter.

<div class="filter-wrap"> </div>

Next, add the radio buttons which will control the filters. They will be hidden by CSS, but they are necessary for the function of the filters.

<input type="radio" id="all" name="filter" value="all" checked>
<input type="radio" id="ITEM1" name="filter" value="ITEM1">
<input type="radio" id="ITEM2" name="filter" value="ITEM2">

Change the CAPITALISED values to match each filter you’d like to have. All of the items will show by default, but you can change this by moving checked to the end of whichever filter you would like to load with the page. Add as many inputs as you need for each filter, and make sure the id and value for each matches.

Then, add the basic HTML for the filter, using an ordered list (<ol>).

<ol class="items">
<li class="item" data-attribute="ITEM1"></li>
<li class="item" data-attribute="ITEM1 ITEM2"></li>
</ol>

The data-attribute="ITEM" option is where the sorting magic will happen. Match each data-attribute to the id & value of the desired filter. You can add multiple filters to a data-attribute. Simply add a space between each value.

The content between each <li> can be anything at all, styled any way you like. It just needs to be wrapped by the <li> associated with the correct data-attribute.

The next step is to add the HTML for the filter labels to trigger the sorting. You can style these however you please by adding a class or wrapping them in a div, but you should always match the label for= with the id & name of the filter and data-attribute.

<div class="filters">
<label for="all">Show All</label>
<label for="ITEM1">ITEM1</label>
<label for="ITEM2">ITEM2</label></div>

Finally, add the CSS that will make everything work! The first thing you should add is the code that hides the radio buttons, and removes the automatically added numbers, margins and padding from the ordered list.

.filter-wrap input[type="radio"] { left: -9999px; position: absolute; }
.filter-wrap ol { list-style: none; margin: 0; padding: 0; }

Next, add the CSS for the filter labels. If you would like to change the default filter, change the last instance of value="all" to your desired filter.

[value="all"]:checked ~ .filters [for="all"],
[value="ITEM1"]:checked ~ .filters [for="ITEM1"],
[value="ITEM2"]:checked ~ .filters [for="ITEM2"] { YOUR FILTER STYLING HERE }
[value="all"]:checked ~ .filters [data-category] { display: block; }

And finally, add the CSS that shows and hides items based on the value/data-attribute.

[value="ITEM1"]:checked ~ .items .item:not([data-category~="ITEM1"]),
[value="ITEM2"]:checked ~ .items .item:not([data-category~="ITEM2"]) { display: none; }

If this is confusing at all, viewing the source of the pages I implement this on may be helpful!