Do some parts of the typography (letters) correspond to the width / height of the window?
I'm not sure if something like this is possible through CSS, but then talented people in this community have repeatedly proven that I was wrong, so let's go!
I was wondering if it is possible for some of the horizontal parts of the letters O , U , and E can respond with a window while maintaining its position? In the image below, I looked at how responsive typography responds to the window scale. Note that the set type fits inside the page wrapper and is positioned vertically in the middle of the window.
How can i do this? And what format should I work with (svg, shape, etc.)
Thank you in advance!
source to share
You can do this simply with overlaid elements inside divs with overflow: hidden: the extended letter shapes are created with SVG and hidden under the left delimiters. When the user resizes the window, the right div opens showing the elongated portions. eg.
<div id="clipper">
<svg id="leftpart" x="0px" y="0px" width="30px" height="150px">
<rect x="0" y="0" width="30" height="150" fill="red"/>
</svg>
<svg id="rightpart" x="0px" y="0px" width="2000px" height="150px">
<rect x="0" y="0" width="2000" height="30" fill="black"/>
<rect x="0" y="60" width="2000" height="30" fill="black"/>
<rect x="0" y="120" width="2000" height="30" fill="black"/>
</svg>
</div>
#clipper{
position: absolute;
top:200px;
left:200px;
width:40%;
overflow: hidden;
}
#rightpart {
position: relative;
z-index:1;
}
#leftpart {
position: absolute;
z-index:2;
}
source to share
Here's an example of scaling SVG elements based on screen width. This will depend on how you select the symbol elements you are trying to change (for example, the bottom of the U bowl). In this example, the rectangle element has a unique identifier.
HTML:
<svg version="1.1"
baseProfile="full"
width="200" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect id="foo" height="100" width="100" />
</svg>
CSS
#foo {
fill: #f00;
transform: scaleX(0.5);
}
@media only screen and (min-width: 500px) {
#foo {
transform: scaleX(2);
}
}
source to share