Handy Stuff

A collection of handy stuff (elements, scripts etc, from the web)

1. Coloured underlined CSS heading

Just as an example, the pseudo-class :hover is styled on the above heading.
So “on hover” it’s styled to be a lighter grey colour.

From: https://brickssections.com/heading-underline-with-a-circle/

I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar. Ridiculus ultricies amet sit pellentesque justo mattis rutrum dignissim, arcu mi luctus diam primis aliquam placerat, conubia vulputate accumsan dictumst aliquet cras ad. Cursus velit litora torquent suspendisse tristique lectus taciti sem habitant facilisi blandit ipsum habitasse vivamus, vitae egestas et eleifend elit arcu nulla ex auctor at pretium maecenas. Sapien morbi maximus finibus metus montes est facilisis in lectus varius quam ipsum, orci maecenas hendrerit nascetur justo mus per consequat felis habitant platea.

I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar. Ridiculus ultricies amet sit pellentesque justo mattis rutrum dignissim, arcu mi luctus diam primis aliquam placerat, conubia vulputate accumsan dictumst aliquet cras ad. Cursus velit litora torquent suspendisse tristique lectus taciti sem habitant facilisi blandit ipsum habitasse vivamus, vitae egestas et eleifend elit arcu nulla ex auctor at pretium maecenas. Sapien morbi maximus finibus metus montes est facilisis in lectus varius quam ipsum, orci maecenas hendrerit nascetur justo mus per consequat felis habitant platea.

2. Parallax image effect

From: https://brickssections.com/parallax-image-background-using-jarallax/

Text from that page:

An image appearing like a background of a Bricks Section using Jarallax.

Add this in your Page/template → Settings → PAGE SETTINGS → CUSTOM CODE.

Header scripts:

<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet">

Body (footer) scripts:

<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js" defer></script>

What gets copied: Section.

After pasting, select the Image element and set its image from your site’s media library.

To change the speed of the parallax effect, select the Div element in the Section.

Adjust the value of its data-speed data attribute (under STYLE).

The default value is 0.5. A lower value (ex.: 0.2) reduces the speed and a higher value increases the speed.

I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.

3. Gradient fill section

Gradient fill idea from  WP Tuts site: https://wptuts.co.uk/more-css-fun-with-mesh-angled-gradients/

and the direct link to the video: https://www.youtube.com/watch?v=K1UaM_Cqd6g

It also uses the free Mesher gradient tool from: Links Mentioned:
– Mesher: https://csshero.org/mesher/

WP Tuts has customised it using Overlay. We also have a 60vh min height set on this section just to pad it out enough (since there’s not a lot of text yet).

 

There is also the secondary video mentioned on the page – the follow-on video about “Create Stunning Glassmorphism and Gradient Mesh Effects” – which is defo worth a looksee for that “glassmorphism” see through blur effect being put to good use: https://www.youtube.com/watch?v=waxVyqQZ5iU

3. Spacer section for now

But otherwise, this will be our next “handy thing” maybe.

It’s a spacer section now (vh = 60%) so we get the full effect of the parallax’d image above.  (Which could look damn fucking good on a Hero eh?) 😎🍺

 

We’ll give it a light background colour too so we can see this section.

I got the “cityscape” image above from Google’s new AI assistant, called Gemini. 

Why?  Why not Microsoft which is what I’ve been using.  Because Microsoft’s AI, “CoPilot” – has removed the feature to create images!

Fuck – it’s a bit of a waste of time then ain’t it?

So Google Gemini did the job – and made the cityscape image above that I used for the parallax image.