This question already has answers here:
Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate
(2 answers)
Simulating transform-origin using translate
(2 answers)
Closed 3 years ago.
I have a 100px*100px div with a square image as child. This image has a scale of 1.5, so the size is 150px*150px.
Now if I apply on the image a translation of 25px (X or Y), should I not have the image at the edge of its parent?
Currently I need to translate of 16px to get to the edge, that's make no sense to me. What is the calcul here?
I'm pretty sure I missing the obvious here, but I'm having a hard time to figure it out.
.parent {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 0 auto
}
img {
width: 100%;
height: auto;
transform: scale(1.5) translateY(-25px);
z-index: -1;
position: relative;
}
https://codepen.io/geosenna/pen/pYNyjR
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 months ago.
At first, my picture is like this, the avatar can be displayed in the center。
And the CSS code for class .avator is:
.idx_box .search_box .avator {
width: 0.64rem;
height: 0.64rem;
border-radius: 50%;
background: #feb5b4;
}
The CSS code for img is：
.idx_box .search_box .avator img {
width: 0.3rem;
height: 0.3rem;
margin: 0 auto;
-webkit-transform: translateY(45%);
-ms-transform: translateY(45%);
transform: translateY(45%);
}
where 1rem is equal to 100px；
However, when I changed the picture, the horizontal centering effect didn't work. The CSS code is still the same as above and has not changed. I can't find the reason. Picture as shown：
Thanks！
Just add this 'text-align:center;' to .avator class.
I think the reason it didnt work, was because the image wasnt centrally aligned in the first instance. This showed in the second instance when you put a smaller image.
By the way, this 'margin: 0 auto;' inside the img, does nothing.
This question already has answers here:
CSS 3 Shape: "Inverse Circle" or "Cut Out Circle"
(7 answers)
Transparent half circle cut out of a div
(8 answers)
Creating right curve using css3
(1 answer)
Closed 2 years ago.
In the picture you can see the Rough desired layout of SAP (rotated by 90 degrees clockwise).
My first instinct would be to split it into 3 components:
the nav-bar on top
simple div containing some text
and for the bottom I was stuck. After searching I opted for a svg path component and combined all 3 in a parent component.
Any other components will be rendered below the curve.
So far it works. But I am curious if there are other, maybe better, solutions to this (which I am sure there are).
Thanks in advance
Another way to achieve this would be to add an ::after element to the navbar with some border-radius to make the curve. Here is an example:
#navbar {
position: relative;
background-color: lightblue;
padding: 30px;
}
#navbar::after {
content: "";
position: absolute;
height: 30px;
width: 100%;
background-color: lightblue;
bottom: 0;
left: 0;
transform: translateY(50%);
border-radius: 0 0 100% 100%;
}
<div id="navbar">
Website
</div>
This question already has answers here:
Can I change the height of an image in CSS :before/:after pseudo-elements?
(14 answers)
Closed 3 years ago.
I have the following line in my stylesheet that calls my website logo.
.navbar__logo::before{
content: url("../images/logo/logo.svg");}
How can I scale this down? I'm learning a bit about viewPort & viewBox but cant seem to get it to work.
Thanks in advance.
After declaring a viewBox in your svg file, you should definitely give your pseudo-element explicit width and height:
.navbar__logo::before {
content: url("../images/logo/logo.svg");
width: 200px;
height: 50px;
}
Beyond that, if you wish to dynamically resize your pseudo-element and / or animate the scaling you can use transform: scale():
.navbar__logo::before {
content: url("../images/logo/logo.svg");
width: 200px;
height: 50px;
transform: scale(0.5);
}
This question already has answers here:
Any way to declare a size/partial border to a box?
(6 answers)
Closed 3 years ago.
I'm doing some work on my website, I wanted to put that border thing with ::after(I don't want to do it with border-bottom because I want to set specific width) method, unfortunately when I'm trying to set the "::after" to position "absolute", and the container of it to position "relative", but the problem is the container somehow gets the position "absolute" which I don't want it to
I tried to set inline style but it doesn't give best performance.
HTML:
<h2 class="special-heading">Our Team</h2>
CSS:
.special-heading {
position: relative
}
.special-heading:after {
content: '';
display:block;
position: absolute;
top: 10px;
left:0;
width: 40px;
border-bottom: 3px solid #333;
}
I would try this instead of top: ...px
margin-top: 10px;
But not sure!
I think you can achieve what you want to achieve by replacing the line top: 10px with bottom: 0.
I tested it in codepen and the .special-heading got the position: relative properly.
This question already has answers here:
Draw line after a title with CSS [duplicate]
(3 answers)
Closed 4 years ago.
I want to obtain a header like in the image below
I can obtained using position absolute, but this depends on the header characteristics, like margin,padding.
I'm interested to have the result below, indifferent of the header size,length , padding or margin. I need something that is supported also by older browsers like IE10, IE11.
Use :after and create there the line
Learn:https://developer.mozilla.org/en-US/docs/Web/CSS/::after
div{
color:red;
}
div:after{
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: red;
top: 20px;
margin-left: 10px;
margin-right: 4px;
}
<div>Header</div>