CSS3 para Iniciantes: O que são Propriedades

O CSS3 é uma ferramenta poderosa para estilizar elementos HTML em um site ou aplicativo. As propriedades do CSS3 desempenham um papel fundamental nesse processo

[{"selector":"#anim-67662354-f0e7-4a6f-a0c7-08bd1fe020f2 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(11.921199725299578%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-9f70e3bc-98d9-455b-8387-dcc26035ee79","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fb3005c0-9539-4422-b23f-fb5ae14b692b","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

O que são Propriedades no CSS3?

[{"selector":"#anim-eaaf3bbf-da82-4eff-9057-636301f055a6 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-36.29807677896565%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-457f0444-8cc8-4bda-b6ec-be244ef593bf","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9ba594e6-d9fc-4d2c-a469-4231339703e7","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bceaa314-3cad-4b52-aa68-4f2c3c2775fe","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-69d082e1-95b4-4031-8e53-80c14db71dc8","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-61ac2513-d220-4acc-a82d-be6988d2b0dd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f5563f99-2809-49e4-b865-100e7bd72146","keyframes":{"transform":["translate3d(114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Propriedades Básicas do CSS3

[{"selector":"#anim-333b49f8-189b-4184-aa29-55994bf795c4 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-11.34615381927663%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-de84d35e-37dc-42d5-9d36-7e62e35b8112","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-de24350e-6256-47dd-827a-0642e187957a","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d31a8683-9ae5-428d-a7ab-c1073174d16e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dcd44f4d-7b0d-4773-ad1d-493e45cc87a1","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0a4c547a-424d-403e-8759-be0ae0e0831f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d57f244d-b54b-45bc-97fe-db702b9dd460","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Propriedades Avançadas do CSS3

[{"selector":"#anim-1e2cf003-5e36-4fb5-8666-4d11ccb08587 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0.42034518918759645%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-d38baecd-aed0-4103-8d42-d4e062e64601","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-20ff7d7c-2857-47ba-a348-a85bbf0d6186","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-01ae9020-2806-4189-ae45-c16503bd5372","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e17fee96-4aa9-4c0d-bca2-cce71be9ab9f","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Como usar propriedades em conjunto

[{"selector":"#anim-0b82bfd1-a282-4a4a-820d-74407e0b5df6 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(14.858490352800422%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-63bc8d60-d18c-4265-af37-dc2c446d7840","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9cf5751b-2446-4205-91f5-6edfd6f8277a","keyframes":{"transform":["translate3d(0px, -305.45813%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ba1fe406-a153-48d7-bf12-90f94f886a1c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6feea42a-f1c9-4ecc-ba5b-d9c79994958c","keyframes":{"transform":["translate3d(0px, 278.79562%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Por exemplo, você pode usar a propriedade de tamanho da fonte em conjunto com a propriedade de cor do texto para criar um estilo personalizado para o texto em um elemento HTML.

[{"selector":"#anim-168c49e9-9b73-468b-bac8-34a0e96507be [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.249999886225726%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-2eb12635-2b1f-45ce-bbfb-852e668bdcfe","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-615273a5-03c8-477f-b512-589c43a62e31","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Aprenda mais sobre o CSS3

[{"selector":"#anim-eef1959f-e325-46a1-82ca-27aef4f3a95b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-33.9318089274787%, 0, 0) translate(-25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-7fac7224-ffa5-49c4-ad12-f725e724416c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-15b059a3-555f-437a-898a-fc4c5cd7127c","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dca61542-1f93-4784-b34b-2577844fb569","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8f972f73-81d1-4413-813f-18bc589d8bfa","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Leia mais

CSS3 para Iniciantes: O que são Propriedades

O CSS3 é uma ferramenta poderosa para estilizar elementos HTML em um site ou aplicativo. As propriedades do CSS3 desempenham um papel fundamental nesse processo

O que são Propriedades no CSS3?

As propriedades do CSS3 são os elementos usados para definir o estilo visual de um elemento HTML em uma página da web.

Propriedades Básicas do CSS3

As propriedades mais básicas do CSS3 incluem o tamanho da fonte, a cor do texto, a cor de fundo, a borda, a margem e o preenchimento.

Propriedades Avançadas do CSS3

As propriedades avançadas do CSS3 oferecem mais controle sobre o estilo de um elemento HTML. Essas propriedades incluem a opacidade, a transição, o gradiente, o sombreamento e a animação.

Como usar propriedades em conjunto

Um dos principais benefícios das propriedades do CSS3 é a capacidade de combiná-las para criar estilos mais avançados e específicos.

Por exemplo, você pode usar a propriedade de tamanho da fonte em conjunto com a propriedade de cor do texto para criar um estilo personalizado para o texto em um elemento HTML.

Aprenda mais sobre o CSS3

Confira o nosso artigo completo sobre as propriedades no CSS3 clicando logo abaixo!