Jump to content

Recommended Posts

Hello,

I am very new to squarespace and CSS coding and I am having a lot of difficulty obtaining certain results that I am looking for and was hoping someone experienced with CSS would be able to walk me through a few things.

I am having trouble getting the typing effect to work properly for one of my sentences on my squarespace.

I am using this for the typing effect:

 

#block-843f29506fbf61187921 {
  overflow: hidden
    ; 
  border-right: .15em solid pink ; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: .15em; 
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: pink
    ; }
}

 

And it seems to be pushing the words to the left side of the screen and the cursor is simply moving to the right side of the screen in a typing motion to give space for the sentence to go on one line. It is not revealing the "types sentence" letter by letter, but rather just pushing and  moving to the right. How do I get the typing effect to type the sentence letter-by-letter and actually hide the letters that havent yet been "typed"?

My other difficulty that I am experiencing is implementing a glitch effect on hover on my logo. I cannot figure out the correct code to use to add an effect to just my logo rather than my whole screen or whole header, and every glitch CSS code that I have tried to implement is not giving me the results I am hoping for. 

Lastly, I am having issues creating shadows on images.

It is very likely that I am just not editing the right parts of the code, but as I am very new to this, I am not entirely sure how to solve the issues I am experiencing.

Over the past two days I have learned how to change text color, change text color on hover, add shadow to text, and have images go from grey scale to color upon hover.

If there is anyone that can give me some insight so I can properly add these effects, I would appreciate it very much.

If email works better please feel free to send me an email with any help or tips that you are able to provide.

Thank you in advance,

Brianne

brianne.alexis113@gmail.com

Link to comment
  • Replies 1
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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