O que são propriedades em CSS3

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-04d686d3-bbf6-453e-a1bc-06970611d0a4 [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-0fdcb6d8-d5fc-4695-b99f-e8cf481c5772","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e81ba885-41fe-41f1-8425-a15bc11a9b0a","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-b15ed1ab-0e7c-4fcb-8d1c-87d3e5d4f28d [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-3573222a-a04a-4704-8ea6-e824b8b51370","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bec0ada7-2c43-43bd-9f3f-5b09abd1f6f7","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-8404e8c5-4051-42b1-b59a-53e0ca6e18ab","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1b1af7df-bc83-4a5e-97b4-02503d85da45","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-be18a104-a4e8-48b7-b9c6-75b8a6d91ec1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-09c0ca57-06b7-4909-8c9b-f34efdac7f3b","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-7dbb0730-8dea-426b-b2f6-a6da93cd8dc4 [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-091792b7-7c31-4c72-a816-3134a96216f2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2fa9b391-bca4-43d9-82bd-f997ae0721f7","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-1cbdd1db-8ee0-4358-b459-67114f74b88d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7fc7abe0-40b6-42e8-bc90-6fcfb093e360","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-88437bfb-b979-4077-8fb6-c0e14f7212d3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-68113cc3-5ad2-4cf7-baf2-337077143f71","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-7a4ca10d-74e3-4e58-a7e7-27a3dbf5fa85 [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-e42a783d-1a84-4b07-b5e8-7772c5ec5878","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8ba671ce-cd8a-435f-9387-a40cee8debae","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-d8fd1222-1c49-4bb4-91f6-ede80255091c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1faa16dd-4977-44a7-aa2a-c25e8ac134e4","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-953be8a3-59c3-4995-91c0-06399d47b579 [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-6ee8661b-3c07-4ebd-bae5-3724895dde33","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2597c79e-22d4-4f46-b87c-ab74d1665f31","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-10b1b390-f864-4e74-a36f-6e11357d2d9a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ab04d379-6cbe-4d5b-84ac-2f906e2601cf","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-13f47d3c-7e82-47ed-8a43-25d44b0dd909 [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-0f1a3b59-62b5-4290-a09f-bddfe6e4dfc4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c4882ab1-cdfd-4f51-9b1b-eedea57d81e0","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-3037961a-234f-4204-bb01-b2da09326bd1 [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-23c58f3f-6d9c-49e8-9dbb-9f1550ec777d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-27189818-c2b6-4b34-a4d4-e9df7b712a32","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-261c36b6-4918-4f43-9cf8-6473e6145630","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e1c3007c-f93c-4f91-8485-ce56ff461d62","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

O que são propriedades em CSS3

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!