Homeopathic Garden

Drafts and knowledge of Matheus Franco.

[homeopathic-garden]

The Box

Hello my friends!

I know, I know you know the "border" and its features.

But, as we all know, the space it fills is out of the area, meaning if you have a square of "50px" and a border of "5px"(all sides), it will be "60px". This is not to mention "padding", because if you have a "padding" of "5px"(all sides) in the same example, then the content would be "70px". Did you understand the problem?

via GIPHY

Would Stay:

"50px" of "width" and "height" + "10px" of "padding" and + "10px" of "border", totaling "70px" content.

To use the border as part of the content already exists and add no more pixels, the "box-sizing" border-box is used.

Use:

box-sizing: border-box;

Results:

My name is box-sizing!

[homeopathic-garden]

The Grey

Hello my friends!

Stop using your image editors to leave things ashes!

via GIPHY

Let's do this with CSS. =D

Use:

filter: grayscale(100%);

And ready!

Result:

.sasha{ filter: grayscale(50%); } 50% gray:

Use:

filter: grayscale(50%);

50 shades, my dear.

[homeopathic-garden]

The Selection Keeper

Hello my friends!

How to prevent your rogue visitor from copying your beautiful and wonderful article?

via GIPHY

Using the "user-select" attribute in your text!

Use:

user-select: none;

Try to select now, you're naughty!

Ok, what if you want to make the selection easier for him? If your text really serves to be copied.

You can also use this! Just change the value to "all".

Use:

user-select: all;

Now you can copy all text with just one click.

If you want to leave the default, that is, the common selectable.

Use:

user-select: text;

Result:

Test yourself: .selectMe { user-select: all; } .dontSelectMe { user-select: none; } .selectManual { user-select: text; }

You will not be able to select my fiambre!

I'm kidding, you can select my fiambre.

Normal FIAMBRE!

Protection!

[homeopathic-garden]

The Background Clip

Hello my friends!

What if do not need Photoshop to create texts with masks?

via GIPHY

Oh yeah.

Now you can make text with image!

Use:

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

Result:

Test yourself: .clip { font-family: 'Impact'; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: url(https://1.bp.blogspot.com/-Jj34cLfl_3k/Wp2jA1RGcrI/AAAAAAAABb0/EUj2lr4-3iYOtT2gGPPUJFD-Aec4jD9SgCLcBGAs/s1600/nebulosa.jpg); background-size: auto; background-attachment: unset; background-position: 0%; font-size: 70pt; }

FIAMBRE

Is not that too much? Yes I know.

[homeopathic-garden]

The Float's Death

Hello my friends!

Let's organize your application's structure!

Are you tired of using the float attribute to put the elements to the left or to the right and leave a good alignmen, your problems are over!

via GIPHY

Flexbox automatically organizes your elements for their goals! It fits any device, without you being able to tweak the CSS of the elements individually.

Use:

display: flex; flex-wrap: wrap;

What was this:

It turned out this:

Results:

Test yourself: .flex { display: flex; flex-wrap: wrap; border: #000 .1rem solid; padding: 1rem; } .flex div { background-color: #000; color: #fff; width: 5rem; margin: 1rem; text-align: center; line-height: 10rem; font-size: 16pt; }

Fiambre

Fiambre

Fiambre

Fiambre

Fiambre

Fiambre

That's flex, baby.

[homeopathic-garden]

The Root

Hello my friends!

Today I found something very incredible!

The use of CSS variables without SASS, LESS or any other freshness.

Yes sir, you just need css! \o/

via GIPHY

The guy who will do this magic is called ":root".

You just need to declare the variables and then can use it anywhere.

Declare:

:root { --VAR_NAME: VALUE; }

Use:

selector{ attribute: var(--VAR_NAME); }

Exemple:

:root { --size: 60pt; } b{ font-size: var(--size); }

Result:

This is as good as hazelnut cream!