| |
|
Welcome all! Today I'll be teaching you some cool palette tips, including - Borders - Gradients - Repeated Backgrounds And more!
Stay tuned! |
|  |
|
| |
|
- All About Borders - There is a lot more to borders than what meets the eye. You can do borders from all directions, or all around.
-- There are also different types of borders! The variations include: - solid - dashed - dotted - double - ridge - groove - inset - outset - hidden -- The code can be used in the following sides/directions on the bordered box - left - right - top - bottom - all -- There's also a border radius. The thinner the radius, the sharper, more rectangular the box will look. -- I recommend using 35px or 10px -- But using 1px is cool too, since it gives you a solid rectangle! -- The coding The coding set will look like this: -- For the entire box to be bordered, you can do all directions, or just this: border: 10px solid #afeeee; --
You can switch the hex code, pixels, and the border type.
--
For directions, the code will look like this: border-left: 3px ridge #000000; -- You can change the direction by changing the word left. -- You'll need a border radius as well.
This won't be lined up with the rest of the code, but instead off to the side. -- It looks like: -- border-radius: 1px; -- You can mess around with the border types, px, radius, and directions until you get what you desire. |
| |
|
| |
|
- All about repeated backgrounds - This one is going to be rather small, which is why I did more than it. So! To make a repeated background, you'll have to use this code: -- background-repeat:repeat-y; -- That will make it vertically repeated. To make it horizontally repeated, you'd simply change the y to an x. |
| |
|
| |
|
- All about gradients - Gradients are very fun to play around with! And they aren't hard to learn either. . . - For this guide, I'll be using a website. {Click} - -- When it comes to gradients, you should know the two basic types.
-- Linear (straight up and down, angle can be changed) -- Radial (circle, angle can be changed within limits) -- For palettes, I find it slightly easier to use Linear and mess with angles. But that's just me, I'm not saying you have to do that. -- I wouldn't suggest overloading the gradient with colors; I usually do a light color and then a darker version of it. Like this:  -- This is an example of a Linear Gradient too. -- The website I used (linked below) has a color 'adjuster' This color adjuster thing lets you choose where you want the color on the gradient to be: -- This is useful when using more than two colors.
-- There's also the matter of opacity, hex codes, and rgb codes.
The website lets you choose from the basic sliding color options, and also how light/dark the color is.
It shows you opacity, hex codes, and rgb, just in case. -- You can mess around with these things to find the perfect color combo for your palette! -- Lastly, what the code looks like. You want to press 'Copy to Clipboard' if you use the site I'm using. If you don't copy the whole thing, it won't work. I learned that the hard way.  -- And that's all about gradients! |
| |
|
| |
|
- Text Shadows - -- So for this one, I'll be using another website (Thank you Sunset for showing it to me) {Click}and I'll actually be using it to show you most of the little tricks. -- This trick can be used for the page name text.  -- The first part of the code, (Right) changes the direction of where the shadow is horizontally. -- The second part (Down) changes the direction vertically. You can mess around with this until you find the right angle. -- Then there's Blur. Blur adjusts the blur of it, like it says. You can mess around with that to experiment with the sharpness.
-- Opacity changes the, well, Opacity. I suggest leaving it at 100. -- The color can always be changed once you've copied the code into the HEE format.
-- You can choose from various types of text formats too.
-- The box at the end is the code. Copy the whole thing and put it beneath the existing code where you want it. |
| |
|
| |
|
- Transparency - -- So! You want a transparent palette? -- I can (probably) help with that. -- There are two kinds of opacity codes. -- 1) -- opacity: 0.9; -- I don't recommend using that one. -- 2) -- background: rgba(76, 175, 80, 0.3) -- This one is more organized. -- You'll add that code to line up with the existing code of whatever you want to be transparent -- For the second code, the result will look green. Mess around with the numbers (not the decimal) to get the color you desire -- LINE IT UP BENEATH ANY CODE YOU ADD -- This should be at the bottom of your added/altered code, or it will not work. |
| |
|
| |
|
- Fonts - -- All the fonts available for a palette! -- There are two different assets of the font. -- Family and Font name. -- Each family has different fonts within them. -- Sans-serif family fonts -- - Arial - Trebuchet - Helvetica - Verdana - Gill Sans - Noto Sans - Avant-garde - Optima - Arial Narrow -- Serif Family Fonts -- WIP |
| |
|
| |
|
Pony!!! A lifesaver, you are! 🤩 |
|
|
| |
|
- Removing Borders - -- I've been asked how I do it a lot of times xD -- There are two different codes for it.
The first one removes simply the border. You can use it for chatboxes -- border: 0!important -- The other one is for bigger codes, like the chatbox area and the site page. -- box-shadow: none !important;
border: 0 !important;
border-radius: 1px !important;
-- And there you have it! |
| |
|
| |
|
|
Windy
