gotsowell Posted June 14, 2018 Share Posted June 14, 2018 I'm trying to reproduce the quotation design in the screenshot using all CSS. It's to become part of the hero with the image to its right. The oversized curly quotes need to layer behind the actual quotation. I just can't seem to figure out the parent vs child elements which to make relative vs absolute and how to make z-index work how to ensure all elements resize together in responsive design. Can someone help me out here? Yes, I did the positioning tutorial before creating this topic. Thanks in advance. Link to comment Share on other sites More sharing options...
Ingolme Posted June 14, 2018 Share Posted June 14, 2018 You should analyze the code on that website to see how they did it. There isn't one single solution to this, there are many ways to do it. What I would probably do is use the ::before and ::after pseudo-elements to create the quotes, then give them an absolute position relative to the box that contains them. You could also choose to not use absolute positioning, keep them in place but scale them up right where they are with the transform property and put them in the background with a negative z-index. 1 Link to comment Share on other sites More sharing options...
gotsowell Posted June 14, 2018 Author Share Posted June 14, 2018 Thanks, I'll give it a go. My CSS is a little rusty. The site with this layout uses a jpg of curly quotes and positions the text over the img. The work was done in xhtml 1.0, so it's not much help. Link to comment Share on other sites More sharing options...
gotsowell Posted June 14, 2018 Author Share Posted June 14, 2018 I have tried the set up the second option you gave. The way I'm using transform:scaleY(1.5) below doesn't increase the curly quote size. Z-index is working, though. The class is on a span within a block element. What am I doing wrong? The set up below <!DOCTYPE html> <html> <head> <style> div.c { font-family: arial; font-size: 28px; color: green; } span.d { font-family: serif; line-height: 10px; color: gray; transform: scaleY(1.5); z-index: -30; margin: -8px; } </style> </head> <body> <h1>The transform Property</h1> <h2>transform: scaleY(1.5):</h2> <div class="c"><span class="d">“</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 14, 2018 Share Posted June 14, 2018 (edited) https://www.w3schools.com/code/tryit.asp?filename=FSAUWRQ6OY5M Edited June 14, 2018 by dsonesuk 1 Link to comment Share on other sites More sharing options...
gotsowell Posted June 14, 2018 Author Share Posted June 14, 2018 Big thanks! I added the quotes property below to get curly quotes. I couldn't seem to get curly quotes, even though I'd declared serif, without using that property. My only remaining issue is that the open quote appears reversed. Is there a way to flip it to display in the usual way? I've searched whatever CSS properties I could think of but don't see something that applies to a single character. Any ideas? Latest iteration: https://www.w3schools.com/code/tryit.asp?filename=FSAUWRQ6OY5M div { quotes:'”' '„'; } Link to comment Share on other sites More sharing options...
Ingolme Posted June 14, 2018 Share Posted June 14, 2018 The quotes look right to me, but perhaps you don't like how the font renders the curly quotes. You can flip things by using a negative value in the scale property: /* To flip horizontally */ transform: scaleX(-10.5) scaleY(10.5); /* To flip vertically */ transform: scaleX(10.5) scaleY(-10.5); Each of your quotes is in its own pseudo-element, so you can put the scale code in the selector the the specific quote that you want to flip. 1 Link to comment Share on other sites More sharing options...
gotsowell Posted June 14, 2018 Author Share Posted June 14, 2018 That was exactly what I was looking for. Huge thanks! I didn't think to look at scale settings. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now