BradleyK Posted November 4, 2023 Share Posted November 4, 2023 How do I add animated css gradations rectangular shape to my blank page homepage? Thank you. Link to comment
BradleyK Posted November 4, 2023 Author Share Posted November 4, 2023 I would like to create an animated gradations rectangular shape with a white text overlay 2000px wide x 1200px tall. Please see attached example. Thank you. Link to comment
tuanphan Posted November 6, 2023 Share Posted November 6, 2023 What is your homepage url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BradleyK Posted November 6, 2023 Author Share Posted November 6, 2023 https://ivesgrafik.com I would like to build the rectangular shape on a "blank page" homepage. Thank you for your help. Link to comment
BradleyK Posted November 17, 2023 Author Share Posted November 17, 2023 How can I add an animated gradation to my homepage approximately 2000px wide x 1000px tall? https://ivesgrafik.com/ Link to comment
BradleyK Posted November 17, 2023 Author Share Posted November 17, 2023 Currently, I'm using an animated GIF. Link to comment
tuanphan Posted November 19, 2023 Share Posted November 19, 2023 Add to Website > Website Tools (under Not Linked) > Custom CSS /* Site Gradient */ .section, .section-background, .section-border { background-color: transparent !important; } body { background: rgb(1,114,84) !important; background: linear-gradient(99deg, rgba(1,114,84,1) 0%, rgba(179,104,124,1) 88%, rgba(203,103,127,1) 100%) !important; } sayreambrosio 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BradleyK Posted November 19, 2023 Author Share Posted November 19, 2023 Thanks for your help with this. It worked, but how can I animate it and confine the animated gradation to a 2000px x 1500px rectangle with a white text overlay? Link to comment
tuanphan Posted November 22, 2023 Share Posted November 22, 2023 On 11/19/2023 at 1:54 PM, BradleyK said: Thanks for your help with this. It worked, but how can I animate it and confine the animated gradation to a 2000px x 1500px rectangle with a white text overlay? Do you know an example? I can image it easier With text, you mean the text will be always fixed on middle of screen or? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BradleyK Posted November 22, 2023 Author Share Posted November 22, 2023 Hi tuanphan, The example would be the animated GIF at the top of the page that reads: "Crafting brands that resonate and inspire" — I would like this text as it appears, centered over the animated gradation background which is approximately 2000px x 1500px. Here is my homepage with the animated GIF gradation I would like to convert to a CSS animated gradation background: https://ivesgrafik.com/ Thank you for your help. Link to comment
BradleyK Posted November 24, 2023 Author Share Posted November 24, 2023 Hello tuanphan, I found this code to have an effective animated gradation; however, the gradation appears in every section of my homepage, https://ivesgrafik.com /*Animated CSS Gradations*/ .section, .section-background, .section-border { background: linear-gradient(45deg, #d9570e, #5b7857, #aed4a9, #3396ac, #7d31a8); background-size: 1000% 500%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; } @-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } I'd like to confine the above code to one top section of the homepage, and confine the dimensions of the animated gradation to 2000px wide x 1500px tall, with the ability to add text on top of the animated gradation. Thanks. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment