CSS3: Guia para Iniciantes

A sigla CSS significa, em inglês, Cascading Style Sheets

[{"selector":"#anim-a8815276-8751-4243-87ed-ddbc246b8229 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(23.754223310130836%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":7000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-fea52a2c-9c21-4dce-8a75-7c373326aeb1","keyframes":{"opacity":[0,1]},"delay":0,"duration":4000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-74ff019c-973a-4118-a477-71bb22cae5fd","keyframes":{"transform":["translate3d(-115.33547%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":4000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Que em português é traduzido em Folha de Estilo em Cascata

[{"selector":"#anim-c826a160-73bf-41e4-9feb-803ad49a0394","keyframes":{"opacity":[0,1]},"delay":0,"duration":4000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-75157e07-21f6-4d51-9446-fec61f068416","keyframes":{"transform":["translate3d(116.29393%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":4000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d0defd14-d90c-4656-b1fc-87999750d796 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.26831043321183%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":4000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}]

O CSS, apesar de fácil de se aprender pode ser bem complexo

[{"selector":"#anim-a30ee1f0-64e7-4c50-b13f-cfba3bd54017 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(10.859840641515268%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":4000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-70bdd626-b55f-429d-ab76-89c9c8973a5a","keyframes":{"opacity":[0,1]},"delay":0,"duration":4000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f8aecf04-61a0-41b5-87e2-652e8a62c301","keyframes":{"transform":["translate3d(0px, 150.44310%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":4000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Ele possuí muito poder nos websites e aplicações web

[{"selector":"#anim-388d73ec-5431-4b61-b4c3-e386c7e1ef53 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-2.893610101802004%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":3000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-eb9b76ce-a785-4897-82f7-ff9d2ba27254","keyframes":{"opacity":[0,1]},"delay":0,"duration":3000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-681f29bc-8402-49e4-b0c3-12a83f1bd707","keyframes":{"transform":["translate3d(0px, -196.85186%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":3000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

O CSS é utilizado em conjunto com o HTML para estilizar.

[{"selector":"#anim-02764eff-be6c-4f85-a85d-95c54ba82c15 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-3ba15973-b7b4-4d4d-9d3a-07ed8940b8b0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-23861667-01c1-498e-9ce2-291742ec2a36","keyframes":{"transform":["translate3d(-115.33547%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Neste artigo te contamos na integra o que é o CSS3...

[{"selector":"#anim-451b2697-a7a8-4939-9220-55a08e3316c2 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(14.687500196906527%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-0ca281a4-1032-4ec7-bcda-c5185881b996","keyframes":{"opacity":[0,1]},"delay":0,"duration":4000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-00c29f4b-7e80-4094-a20e-13487d3ad86c","keyframes":{"transform":["translate3d(-115.33547%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":4000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-276cd5df-e900-4478-b5a4-afd791d6dc64","keyframes":{"opacity":[0,1]},"delay":0,"duration":4000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bbe27da5-1426-473f-81bb-c0249348b7db","keyframes":{"transform":["translate3d(115.65496%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":4000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Leia mais