HTML & CSS help
I am needing help, I am trying to create a special effect in HTML and CSS. Can anyone help me?
22 Replies
with this effect, it fades top and bottom with a blur to top and bottom when scrolling, then there is an opacity that needs to be added.
Use psuedo elements
2 psuedo elements: 1 at the top of the container, 1 at the bottom.
Then add a filter on each
Okay, is there a way to make the type glow the way I have it in the image?
text-shadow i believe
So I will need to make a psuedo element for top and bottom then add a text-shadow (probably). With a blur effect. I probably would need to mask the top and bottom as well to get it to fade?
I could definitely be wrong but this looks more like a JS thing where you'd select random characters and give them a color value
I don't think you'd have to mask anything; I think you could just get away with 2 psuedo elements. On second look, since they are fading a bit, you could make a linear gradient as well
i believe it'd be a linear gradient on the pseudo element that fades towards the background color the further it goes down?
dang me and vince got the same idea, beat me to it 😂
I will also beable to scroll wth this as well, correct?
no, you'll have to add
overflow-y: scroll; to the parentOkay
has anyone thougth of doing this as a design to a website?
If so, is there a tutorial on this? I am learning webcode on my own. I have gotten pretty far with my site.
I don't know any website that has a design like this unfortunately
I don't really see why you'd want it from a design perspective either
Huh.. OKay I guess I could be the first then
Are you just trying to make your content more digestable?
I am more or less an old school graphic artist. I have learned how to get peoples attention through art and design. So to say, I am making my website artistic. I haev worked with people in high positions in the music industry and, I guess I am the guinney pig.
Ah okay, fair enough. My personal opinion would be that your design for that section makes it a bit harder for people to read compared to how it's traditionally done.
How are you going to handle new sections/subsections in your text?
I will be making hidden messages with the type (code). It will only be on my landing page with just one section. This site is geared towards people who are into future rock aka e-rock.
Ohh I see that's pretty cool. Good luck!
Thanks, its more or less for esthetics.
If it's hidden messages you can use a
span element and give it a class where it just changes the color of the text
nice, I could use this. Thank you
You can achieve the blur effect with a back-drop filter on pseudo elements.
Then for the fading out you can use a linear gradient mask as has already been suggested.
I have put together a quick code pen to test it out https://codepen.io/cbolson/full/VwqvBEP
Thank you Chris...