Creating Colors

Click here to download the transcript as a PDF

Click here to download the transcript as a VTT

THIS TRANSCRIPT WAS AUTOMATICALLY GENERATED BY VIMEO

Beyond the basics, creating colors.

Here's what you'll learn in this lesson: You'll learn how to create code for custom colors in your Squarespace website, and I'll share some of the color specific properties that you can use.

We'll also talk about how to work with opacity levels and filters. There are six types of color codes that you can use in your custom CSS.

We have web safe color names like the word blue. Then hex color codes, which is a hashtag followed by six characters. After that, we have RGB and RGBA, then HSL and HSLA

R-G-B stands for red, green, blue, and HSL stands for hue, saturation, and lightness.

There are two color codes that I prefer to use in my custom CS.

HEX color codes for anything that's full color, and then RGBA if I need to add a level of transparency to that color, and I don't wanna adjust the opacity for the entire container.

Here I have three examples over an image of Gus the pineapple. I have the HEX color code, which is that full color followed by the RGB of that full color,

and then an adjusted RGBA, which shows that color with a 50% level of transparency, which I created by adding 0.5 at the end of my code.

Now, opacity can change the level of transparency with the content that you're targeting.

So if you want a slightly transparent object, you can apply opacity to the selector, the unique id. But if all you need is a slightly transparent background

color, use an RGBA code.

Here's an example on the right hand side of the screen, the top block there has a background for this block that has an RGBA with a 50% level of transparency.

The bottom content has the entire block set to opacity 50%. Notice that the text is completely visible and full color. It's just the background that changes in the RGBA color code for the opacity change.

It's making the entire content block 50% transparent, including the text.

So again, if you want a transparent background, use an RGBA color code.

But if you want the entire object (the unique ID or the selector) to be slightly transparent, use the opacity property.

We also have image filters, and these can be applied to more than just images. Your guide has a list of image filters that you can use in your custom code, but here's a little sneak preview.

We have grayscale, blur, brightness, contrast, hue, and invert.

Again, you'll find more information in your guide for this lesson.

But I wanna share with you one cool trick that we can use with these image filters before you grab that guide.

And that is to create a hover effect. You can apply a hover effect to a selector or a unique id. In this example here, I've applied the same hover effect.

The first code uses a selector. The second code uses a block id.

I've said make this image gray scale. When I hover over it with my cursor

to add this hover effect. I listed it after the selector or the second example here after the id.

Now, this is where it gets even cooler. You can create a gray scale hover effect to an item and have content inside that item get the effect Here.

I've said list item, hover list, image filter, gray scale. So when I hover over anywhere on that individual list item, the image inside is what's going to get that filter change.

Isn't that cool? So here's a quick overview of hover effects.

I had to sneak this into this lesson because it's one of my favorite things to code.

You'll find more information about these in the additional resources section here in Beyond the Basics.

First, you can change property values on a hover.

Any property value hover effects won't work on mobile. I cannot tell you how many times someone has commented on a YouTube video asking me about this. There's no cursor on a mobile phone, so you can't hover, okay? Remember that when your clients ask.

Now you can hover over a container and apply that hover effect to the content inside, just like I shared with you in that list item example.

But you can't change a property based on the hover of a separate element.

That example only worked because that image was inside the list item. I can't hover over one thing and have something completely different on my website change that's not possible with just CSS.

Again, you'll find more information about these hover effects in the additional resources section of your guide.

Now, you do have some homework, my friend. I want you to review the list of color properties listed in the resource guide for this lesson.

Explore those color types and the gradient guide that I slipped in there.

You can create some really interesting color blends with CSS, so find more information about gradients in your guide for your practice codes.

I want you to change the background color of a bold H1 text

inside a unique specific block of content.

Then I want you to give a custom border to an individual page section and change the color on every single side.

And for your final challenge, add a background color to active links in your website footer that only shows up on mobile devices.

I strongly recommend playing around with some of the border padding and margin codes to see if you can turn those active links into a button.

Now, we covered a lot of content here inside Beyond the Basics, and this is your final lesson. So let's do a quick recap before we call it a wrap.

Inside Advanced Targeting, you learned how to find and use unique IDs and why selectors are important, and how to create combination codes.

I also shared two of my favorite targeting tricks, the asterisk and the A.

In the lesson about working with containers, you learned how to identify the containers on your Squarespace website, how to create borders and outlines, and the difference between those codes. And we also talked about padding that adjust the size of content and how margin codes adjust the location of content in your Squarespace website.

In your lesson on customizing responsibly, you learned how to break points work within Squarespace, and how you can create custom code to change the style of your own Squarespace website for a specific screen size. We also talked about condensing your code for faster load times, and you'll find more information about that in the code organization template. inside the additional resources section.

In the Typography Tricks lesson, you learned about the difference between font and text properties and how to target text by its unique style, isolating, bold, and italicized text.

You also learned why a font might not load on your Squarespace website and how to create a workaround installing a custom font you want to use in your code to something that you're not using inside the assigned style font menu.

And in this lesson we talked about how to code custom colors, some color specific properties you can use and how you can work with opacity levels and different filters to create unique effects for your Squarespace website.

You have a lot of homework for each one of those lessons, but you also have additional resources to help you create a custom and unique Squarespace website. Check out the additional resources section here inside Beyond the Basics to learn more.

Thank you so much for participating in this training series. I truly hope you enjoyed it. Feel free to send me feedback at any time, support@insidethesquare.co, and most importantly, have fun with your Squarespace website.

Bye for now.