Jump to content

How do I create a neon border around my text block?

Recommended Posts

Site URL: https://neon-border-test.squarespace.com

Hey everyone, 

 

Hope you are all doing well. 

 

I have a client that I have been working with recently and the designs they have provided me all detail a neon border around each text block. I wasn't able to achieve with this code at the time of the initial build-out, so my main solution to this was to create the neon borders as images, and use the poster design for the image blocks, and to place the text inside the image block, with the neon border around it. It's very sloppy, and doesn't scale well at all. 

 

I was wondering if someone can help me out with a CSS solution. I came across a couple code sets, and I was able to create a neon border around text, but I am unable to achieve the effects of having a neon border around my Header title, and paragraph body around it. It currently is creating the border per text style. 

 

Example code set: https://codepen.io/GeorgePark/pen/MrjbEr

 

The site to view my examples/attempts are: https://neon-border-test.squarespace.com

password: border

 

My desired results are being able to encapsulate many elements around a neon border, images and titles - there is an image included in the site that displays what I am looking for. 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 10/15/2021 at 1:05 AM, DustyBottoms said:

Site URL: https://neon-border-test.squarespace.com

Hey everyone, 

 

Hope you are all doing well. 

 

I have a client that I have been working with recently and the designs they have provided me all detail a neon border around each text block. I wasn't able to achieve with this code at the time of the initial build-out, so my main solution to this was to create the neon borders as images, and use the poster design for the image blocks, and to place the text inside the image block, with the neon border around it. It's very sloppy, and doesn't scale well at all. 

 

I was wondering if someone can help me out with a CSS solution. I came across a couple code sets, and I was able to create a neon border around text, but I am unable to achieve the effects of having a neon border around my Header title, and paragraph body around it. It currently is creating the border per text style. 

 

Example code set: https://codepen.io/GeorgePark/pen/MrjbEr

 

The site to view my examples/attempts are: https://neon-border-test.squarespace.com

password: border

 

My desired results are being able to encapsulate many elements around a neon border, images and titles - there is an image included in the site that displays what I am looking for. 

Having the neon border effect for your header title is your desired result, isn't it?

image.thumb.png.b9ff9850b7e3af8d742ad7a6f14ad7fa.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.