Jump to content

BradleyK

Member
 View Profile  See their activity

  • Posts

    90

  • Joined

  • Last visited

 Content Type 

Everything posted by BradleyK

  1. BradleyK
    Thanks Tuanphan! That worked!
  2. BradleyK
    Hello, I'm trying to add an animated gradient or gradation to one specific section just below the header on my homepage. The code I'm using below does not target the specific section, and has little effect on the size of the animated background which also repeats in other sections. /*Animated CSS Gradations*/ .section, .section-background, .section-border { background: linear-gradient(45deg, #d9570e, #5b7857, #aed4a9, #3396ac, #7d31a8); background-size: 2000px 1160px; -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 am trying to create an animated gradient which is 2000px wide x 1160px tall much like what appears as an animated GIF on my current homepage which is here: https://ivesgrafik.com/
  3. BradleyK
    Hi Tuanphan, I solved it with this code, although the text appears in the center of the portfolio grid item. @media screen and (max-width: 1000px) { .portfolio-grid-overlay .grid-item .portfolio-text { opacity:1 !important } .portfolio-overlay { height: 30% !important; margin: auto !important; bottom: 0 !important; opacity: .65 !important; } .portfolio-text { margin: auto !important; } } This is not a hover effect, but is an acceptable solution to confining the transparent white overlay to 1/3 of the portfolio grid height. Thanks for your help.
  4. BradleyK
    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.
  5. BradleyK
    Thank you Tuanphan. That worked.
  6. BradleyK
    How do i vertically center or align text within a transparent white overlay in landscape view on mobile device? This is the code I'm currently using for a 1/3 transparent white overlay with black text overlay. The code with "padding: 10px 70px !important;" forces the text to two lines of copy in vertical display mode on a mobile device. However, when I rotate the view of the mobile device to landscape view, the single line of text aligns 10px from the bottom of the transparent white overlay. I would like the single line of copy to be centered vertically within the transparent white overlay. See attached examples of what it is currently displaying, and an example of what I would like to achieve. /*Mobile Portfolio 1/3 Overlay*/ @media screen and (max-width: 1000px) { .portfolio-grid-overlay .grid-item .portfolio-text { opacity:1 !important } .portfolio-overlay { height: 30% !important; top: unset !important; bottom: 0 !important; opacity: .7 !important; } .portfolio-text { justify-content: flex-end !important; padding: 10px 70px !important; } } Thank you.
  7. BradleyK
    Thank you tuanphan, This worked for the "Services" section, but I'm having difficulty locating the section-id codes for "Client Experience" on this page: https://ivesgrafik.com/studio I'd also like to reduce the section padding on "Featured Work", "Featured Products", and "Follow IvesGrafik on Instagram" found on this homepage: https://ivesgrafik.com/ I'm guessing these require more section-id codes, and need to be applied one by one. Brad
  8. BradleyK
    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.
  9. BradleyK
    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?
  10. BradleyK
    Yes please. Thank you for your help.
  11. BradleyK
    I resolved this by placing images in Classic Edit Sections which proved to be more responsive than Fluid Engine Sections.
  12. BradleyK
    I'm trying to replace the Karmina Sans letters "f" and "i" with the "fi" ligature. Please reference this page of my site where the "fi" ligatures are to appear: https://ivesgrafik.com/studio I've attached examples of the Karmina Sans ligature screenshots. I've tried copying and pasting the Karmin Sans ligature into the text block. A ligature appears; however, it's not the correct font. Thanks.
  13. BradleyK
    I am trying to adjust the margin or padding of a section in 7.1. Please reference this page: https://ivesgrafik.com/studio I've attached a screenshot. The gradated line GIF is in it's own section. I'm trying to decrease the top and bottom margin or padding. Thanks.
  14. BradleyK
    Currently, I'm using an animated GIF.
  15. BradleyK
    How can I add an animated gradation to my homepage approximately 2000px wide x 1000px tall? https://ivesgrafik.com/
  16. BradleyK
    Was this solved? I tried this code. It displayed Lora Serif, and showed ligatures. However, when I changed the font to "karmina-sans", it changed the font to Karmina; however, no ligatures. Karmina Sans does come with ligatures — in particular "fi". When I type in "fi" in Adobe Illustrator, the ligature appears, so I tried copying and pasting the ligature, and voila, a ligature appeared. However, the ligature was not Karmina Sans. See attached examples of the Karmina Sans ligature at work in other software programs. p { font-family: Lora, serif; } .normal { font-variant-ligatures: normal; } .none { font-variant-ligatures: none; } .common-ligatures { font-variant-ligatures: common-ligatures; } .no-common-ligatures { font-variant-ligatures: no-common-ligatures; } .discretionary-ligatures { font-variant-ligatures: discretionary-ligatures; } .no-discretionary-ligatures { font-variant-ligatures: no-discretionary-ligatures; } Thank you for looking.
  17. BradleyK
    https://ivesgrafik.com I would like to build the rectangular shape on a "blank page" homepage. Thank you for your help.
  18. BradleyK
    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.
  19. BradleyK
    How do I add animated css gradations rectangular shape to my blank page homepage? Thank you.
  20. BradleyK
    I've tried the code below, and it works for one image out of a group of 4 images — various sizes (see attached). However, I would like to see code similar to this to work for the feature items on my homepage (see attached of desired effect to achieve with CSS): /*Hover owerlay captions*/ .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; position: relative; pointer-events: none !important; background: #ffffff !important; opacity: .80 !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-size: 18px !important; font-weight: semibold !important; color: #ea4e4c !important; text-transform: uppercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 1 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: #fddcce; opacity: .9; } I realize this is an older post, but I'm hoping there's a solve for this. Thank you.
  21. BradleyK
    Why is it my text blocks are responsive to landscape views on a mobile device, but my images appear much smaller, and do not fill the width of the screen in landscape mobile view? Conversely, all my text blocks conform to the maximum width I have set up at 2000px. Did 7.0 handle responsiveness better than 7.1? It seems like it did. I hope someone could help explain this. I was humming along with site layout until I tried viewing in mobile landscape. Thank you.
  22. BradleyK
    I'm using this code with some success; however, the hover effect isn't behaving quite like it should. Is there anyway to achieve this overlay effect on hover in mobile as in this website: https://www.brethrendesignco.com/work ? Here's the code that is 99% there — the hover effect still needs work though to make it more fluid: /*Portfolio Overlay Grid*/ .portfolio-text:hover { opacity: 1 !important; background-color: rgba(255, 255, 255, 0.7); } Thank you, Brad
  23. BradleyK
    Was this ever solved? I'm looking for the same hover effect on desktop to appear on mobile. Currently, the hover effect is turned off of the mobile side of things.
  24. BradleyK
    I like your solve for the color best. Thank you kind sir. Brad
  25. BradleyK
    Here's the complete code. I added the color attribute, and it worked for 50% Black. .marquee-block, .marquee-block p, .marquee-block h1 { font-weight: normal; font-style: italic; color: #808080; } Thank you again for your help.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources