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);
}
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:
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
This question already has answers here:
Element will not stay centered, especially when re-sizing screen
(2 answers)
Closed 5 years ago.
I'm looking for some syntax like this:
.centered{
left: calc(50% - current-width/2)
}
Basically, a way to reference the current-width of the target element so that I can have a flexible-width item centered. Does this exist?
One answer is to move it left and then translate it:
.centered {
left: 50%;
transform: translate(-50%);
}
But a better way is to use Flexbox on the parent element:
.centeredParent {
display: flex;
justify-content: center;
}
This question already has answers here:
Css height in percent not working [duplicate]
(8 answers)
Closed 8 years ago.
Fiddle - http://jsfiddle.net/6axdexfj/
Once in a great while I come across a problem, and when I do I search to find a solution when I can't seem to figure it out myself.
So I'm building a web design app, and thoughout today I been reconstructing it so no garbage css is added in.
Today I added some simple styling to an element and I noticed that if I don't have position: absolute; or fixed on a standalone div that it's height is not changed when encoded with percent's.
.box1 {
width: 100%;
height: 50%;
background-color: rgb(0, 244, 85);
}
I noticed this years ago and still to this day I don't know why it does that. I always avoid it by applying the following to my body.
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Can somebody explain why this is?
Add this to your css and it should work
CSS
html, body {
height: 100%;
}
The problem is that your body and html container does not have the full height by default, thus your div by default will not have full height. To avoid this in the future, use reset.css to make your life easy :)
LINK TO reset.css