I want to make that white check mark into the green.
I set the check's size into 100px for now.
.approvalContainer {
align-self: flex-end;
width: 24px;
height: 24px;
background-color: var(--color-background-success-dark);
vertical-align: flex-end;
}
.approvalIcon {
width: 100px;
height: 100px;
}
dom structure
<div style=approvalContainer>
<svg style=approvalIcon/>
</div>
Plenty of ways to skin a cat here. This could be one, noting that I swapped the svg to another div purely for this example. Also note that the html you provided is not syntactically correct.
.approvalContainer {
align-self: flex-end;
position: relative;
display: block;
width: 48px;
height: 48px;
background-color: #0f0;
border-radius: 50%;
vertical-align: flex-end;
}
.approvalIcon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
color: #fff;
}
<div class="approvalContainer">
<div class="approvalIcon">√</div>
</div>
Related
I'm planning to position some images in a circle background image but it doesn't seem to work well.
My goal is to center these images behind and inside the circle.
Any help?
div.info_image {
text-align: center;
border: none;
background: url("http://japancrystal.altervista.org/themes/crystal/imgs/colonna_sx/cerchio_descrizioneluogo.png");
background-repeat: no-repeat;
background-position: center;
height: 220px;
width: 100%;
}
img.img_place{
text-align: center;
border-radius: 100%;
width: 155px;
height: 155px;
margin-top: 30px;
margin-left: 30px;
}
<div class="info_image">
<img src="http://japancrystal.altervista.org/themes/crystal/imgs/locations/ingresso.png" class="img_place">
</div>
JSFIDDLE DEMO
RESULT DEMO
You can add this code to your img_place class :
img.img_place {
position: relative;
z-index: -1;
}
Try this :
div.info_image {
position: relative;
background: url(http://japancrystal.altervista.org/themes/crystal/imgs/colonna_sx/cerchio_descrizioneluogo.png);
background-repeat: no-repeat;
background-position: center;
height: 220px;
}
img.img_place {
position: absolute;
top: calc(50% + 3px);
left: calc(50% + 7px);
transform: translate(-50%, -50%);
border-radius: 100%;
height: 173px;
z-index: -1;
}
Try this.
div.info_image {
border: none;
background: url("http://japancrystal.altervista.org/themes/crystal/imgs/colonna_sx/cerchio_descrizioneluogo.png") no-repeat center center;
height: 220px;
width: 244px;
display: flex;
justify-content: center;
align-items: center;
}
img.img_place {
border-radius: 100%;
width: 173px;
height: 173px;
transform: translate(8px, 3px);
position: relative;
z-index: -1;
}
<div class="info_image">
<img src="http://japancrystal.altervista.org/themes/crystal/imgs/locations/ingresso.png" class="img_place">
</div>
Not sure why your images don't show in snippet, but they do in this fiddle...
FIDDLE
You can use display: grid to place them on top of each other.
Because the "ring" image isn't placed with the circle in the middle, I had to use transform: translate to move it, which changed the stacking order too. That's why there is a z-index of -1 on the city image.
For some reason, justify-content: center and align-items: center on .info_image didn't work as well as using self-justify and self-align on the images.
div.info_image {
display: grid;
grid-template-areas: "stacked";
height: 220px;
width: 100%;
}
.info_image > img {
--img-size: 155px;
border-radius: 50%;
grid-area: stacked;
width: var(--img-size);
justify-self: center;
align-self: center;
}
.info_image > .city {
--img-size: 110px;
transform: translate(5px, 2px);
z-index: -1;
}
<div class="info_image">
<img class="city" src="https://japancrystal.altervista.org/themes/crystal/imgs/locations/ingresso.png" />
<img src="https://japancrystal.altervista.org/themes/crystal/imgs/colonna_sx/cerchio_descrizioneluogo.png" />
</div>
There is a div with a class of favourite which is not aligning in the header section.
Yes this is a react project but it is edited like a normal project for this question.
<div className='header'>
<img class='profilePhoto' src='./userIcon'></img>
<div class='brand-logo'>
</div>
<div class='favourite'>Favourite</div> <!-- This Favourite is going outisde div.header-->
</div>
CSS File:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
width: 100vw;
height: 5rem;
background: #2475b0;
position: fixed;
}
.profilePhoto {
position: absolute;
margin-left: 32px;
vertical-align: middle;
top: 50%;
transform: translateY(-50%);
}
.brand-logo {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
.favourite {
display: inline-block;
position: relative;
right: 3rem;
}
Brand Logo CSS
.icon-box {
background: #eaf0f1;
width: 19rem;
height: 75%;
border-radius: 1rem;
text-align: center;
vertical-align: bottom;
}
.brand-name {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
margin-top: 0.3rem;
font-family: 'Luckiest Guy', cursive;
font-size: 2rem;
}
Image Preview:
Any tip will be helpful.. Thank you in advance
Try this piece of code in favourite class.
.favourite {
text-align: right;
position: relative;
right: 3rem;
margin-top: -45px;
}
Adjust margin-top as your need.
Increase the height of header div
.header {
height: 10rem;
}
You don't need to give position for make your logo in center. Just remove fix height from header and try using padding. Hope will help you.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
width: 100vw;
padding: 20px;
background: #2475b0;
position: fixed;
}
<div class='header'>
<div class='brand-logo'>
<img class='profilePhoto' src='/userIcon'>
</div>
<div class='favourite'>Favourite</div> <!-- This Favourite is going outisde div.header-->
</div>
add display: inline-block to 3 classes:
.profilePhoto, .brand-logo, .favourite {
display: inline-block;
}
and remove position attribute in class favourite. One more, i think you should use 'class' attribute, not 'className' like :
<div className='header'>
Try this just add height and padding.
.header {
width: 100vw;
height: 10rem;
background: #2475b0;
padding-bottom:10px;
position: fixed;
}
Thanks: https://stackoverflow.com/users/2875348/ravibagul91
Guys this is happening because .brand-logo is taking 100% height!
When I removed:
height: 100%
then code is working fine...
I just simply removed flexbox and used position property to align my .brand-logo
.brand-logo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
width: 100vw;
height: 5rem;
background: #2475b0;
position: fixed;
}
.profilePhoto {
position: absolute;
margin-left: 32px;
vertical-align: middle;
top: 50%;
transform: translateY(-50%);
}
.brand-logo {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
.favourite {
display: flex;
position: fixed;
top: 50px;
left: 10px;
}
<div class='header'>
<img class='profilePhoto' src='./userIcon'>
<div class='favourite'>Favourite</div>
<div class='brand-logo'></div>
</div>
I am looking to display a 'SALE' tag just before an image, I have tried to do this using the 'before' pseudo element however nothing seems to be displaying on the screen.
I am trying to create the 'SALE' tag inside a circle with black background.
Below is the code that I have used
<span class"bag-image">
<img src="https://images-na.ssl-images-
amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</span>
.bag-image::before{
background-color: #red;
content: 'SALE';
border-radius: 500px;
display: inline-block;
width: 100px;
height: 100px;
}
For visual reference:
LIKE THIS
https://codepen.io/anon/pen/rgLPdp
Make the bag-image class position: relative;
Make the bag-image:before position: absolute; and position it with top/left or margins and set the line-height to vertically center the SALE text.
You can give the pseudo-class a lower z-index so that only the top half is visible, e.g. z-index: -1;
You can use margin-top: -2.5em; margin-left: 175px; in the pseudo-code to position it.
div.bag-image {
display: inline-block;
/* just so that we can see in the example */
margin-top: 3em;
}
div.bag-image:before {
position: absolute;
background-color: #ff0000;
content: 'SALE';
text-align: center;
color: #ffffff;
margin-top: -2.5em;
margin-left: 175px;
/* optionally make it a circle */
border-radius: 9999px;
height: 3em;
padding: 1em;
line-height: 3em;
}
/* just for clarity */
img.image {
border: 1px solid #ccc;
}
<div class="bag-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</div>
I think you want this. Also check the codepen.Codepen
<style>
.bag-image{
text-align:center;
}
.bag-image::before{
content: 'SALE';
border-radius: 50px;
background: red;
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
line-height: 100px;
color: #fff;
}
</style>
In summary, you need to add the position: relative property to the span, and the position: absolute property to the ::after element. Something like this:
.bag-image {
position: relative;
display: block;
}
.bag-image::after {
background-color: red;
content: 'SALE';
border-radius: 500px;
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 0px;
text-align: center;
left: 100px;
}
<span class="bag-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</span>
Play with the left (and maybe the top) property to place the text in the desired position.
You can try this code:
your code background-color: #red; is the wrong to declared #red it's instant of only red.
the sale is a position by my self parent relatively, you can learn about more position https://www.w3schools.com/css/css_positioning.asp .
here also write a shadow element related to some code for needed your answer.
maybe it solves your problem.
=== Thanks ===
.bag-image {
margin-top: 50px;
position: relative;
border: 1px solid red;
}
.bag-image img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.bag-image::before{
background-color: red;
content: 'SALE';
border-radius: 500px;
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
position:absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="bag-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</div>
I'm trying to create two banners with cropped corners, but I'm having problems with my code:
https://codepen.io/Jeerjmin/pen/VdBVKL
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: white;
}
.banner-1 {
min-width: 200px;
max-width: 200px;
height: 300px;
margin: 70px;
background-color: white;
border: solid #01579B 4px;
border-radius: 15px;
overflow: hidden;
}
.banner-1:before {
position: absolute;
content: '';
min-width: 38px;
height: 60px;
top: 39px;
left: 303px;
background-color: white;
border-bottom: solid #01579B 4px;
transform: rotate(-45deg);
}
.banner-2 {
min-width: 200px;
max-width: 200px;
height: 300px;
margin: 70px;
background-color: white;
border: solid #01579B 4px;
border-radius: 15px;
overflow: hidden;
}
.banner-2:before {
position: absolute;
content: '';
min-width: 38px;
height: 60px;
top: 39px;
left: 652px;
background-color: white;
border-bottom: solid #01579B 4px;
transform: rotate(-45deg);
}
img {
position: relative;
top:100px;
left: 25px;
width: 200px;
height: 150px;
}
.dot {
height: 50px;
width: 50px;
background-color: deepskyblue;
border-radius: 50%;
position: relative;
left: -50px;
bottom: 100px;
text-align:center;
}
p {
text-align:center;
}
<div class="container">
<div class="banner-1">
<p>Card-1</p>
<img src="https://img2.goodfon.ru/original/1366x768/6/5e/koshka-kot-meyn-kun-belyy-fon-5567.jpg"></img>
<span class="dot dot-1">
<h1>0,5</h1>
<h5>кг</h5>
</span>
</div>
<div class="banner-2">
<p>Card-2</p>
<img src="https://img2.goodfon.ru/original/1366x768/6/5e/koshka-kot-meyn-kun-belyy-fon-5567.jpg"></img>
<span class="dot dot-2">
<h1>0,5</h1>
<h5>кг</h5>
</span>
</div>
</div>
Problem 1:
I'm trying to crop the top left corners of the banners, but the cards move around while the crops stay where they are.
Problem 2:
The span with class="dot" should form a colored circle, but does not.
Not sure what you meant in Problem 1. As for problem 2, you need to add display: block to your .dot class and you also can remove left property form it.
I had to make several changes to your code to get this working, so see the code snippet below for all the changes. However, here are a few key points:
To position your ::before pseudo-elements in correct relation to the banners, add relative positioning to the banners.
To make your blue dot work, and to align its contents correctly, Flexbox layout is a good solution.
To simplify your code, it's preferable to style similar items together. For that reason, I've given your banners shared styles.
<img> elements should not have a corresponding closing tag (the technical term for this kind of element is "self-closing"). That said, I changed your image to be a background image. The reason is that you can't both have overflow: hidden on your banners and put the clipped corner over its borders.
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: white;
}
/* Target both banners together,
since they share styles */
.banner-1,
.banner-2 {
min-width: 200px;
max-width: 200px;
height: 300px;
margin: 70px;
border: 4px solid #01579B;
border-radius: 15px;
/* Relatively position the banner,
so that the clipped corners,
can be properly placed */
position: relative;
/* To have the image clip to
the banner, make it a
background image */
background: white no-repeat 10px bottom / auto 150px
url("https://img2.goodfon.ru/original/1366x768/6/5e/koshka-kot-meyn-kun-belyy-fon-5567.jpg");
}
.banner-1::before,
.banner-2::before {
content: "";
width: 22px;
height: 38px;
position: absolute;
left: 0;
top: -1px;
background-color: white;
border-right: 4px solid #01579B;
/* Adjust your transform origin,
to make the rotation easier */
transform-origin: top right;
transform: rotate(45deg);
}
.dot {
/* Use Flexbox to align the
content in your dot */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80px;
width: 80px;
background-color: deepskyblue;
border-radius: 50%;
position: absolute;
left: 20px;
bottom: 100px;
}
h1, h5 {
/* Remove margins on
dot content */
margin: 0;
}
p {
text-align: center;
}
<div class="container">
<div class="banner-1">
<p>Card-1</p>
<span class="dot dot-1">
<h1>0,5</h1>
<h5>кг</h5>
</span>
</div>
<div class="banner-2">
<p>Card-2</p>
<span class="dot dot-2">
<h1>0,5</h1>
<h5>кг</h5>
</span>
</div>
</div>
I've got a PNG image icon with un-even sides (64px x 42px) and I'd like to create a circle border around it.
My html looks like this:
<span class="cat_circle">
<div class="cat_icon">
<img src="https://cdn.pbrd.co/images/GNK97WG.png">
</div>
</span>
I created a circle border around the image, but I just can't get the icon to the exact middle of the circle. The icon sits on the bottom right of the circle.
Here is my CSS for the circle border:
.cat_circle {
border: 3px solid #7E9CC2;
border-radius: 50%;
width: 25px;
height: 25px;
overflow: hidden;
position: absolute;
padding: 30px;
left: 10px;
top: 10px;
text-align: center;
vertical-align: middle;
}
I then started fiddling with the actual png image and I gave it negative margins like this:
.cat_icon {
margin-top: -10px;
margin-left: -18px;
}
I mean it seems to work and I have my icon in the middle of the circle, but is this the right way I should be approaching this??
Here is my fiddle: https://jsfiddle.net/ox0anvL7/
You can do that a lot simpler. I added three flexbox properties for the centering, but erased one HTML wrapper and quite a few of the (too complicated) CSS settings:
.cat_circle {
border: 3px solid #7E9CC2;
border-radius: 50%;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.cat_circle img {
width: 80%;
height: auto;
}
<span class="cat_circle">
<img src="https://cdn.pbrd.co/images/GNK97WG.png">
</span>
This is a pretty good way to do it. This works for all cases too when trying to center something inside a div.
It can be better than using flex as I believe that flex is only available in versions of IE 10 onwards (source here).
.cat_circle {
position: absolute;
display: inline-block;
border: 3px solid #7E9CC2;
border-radius: 50%;
width: 70px;
height: 70px;
}
.cat_circle img {
position: absolute;
top: 50%; left: 50%;
width: 80%;
transform: translate(-50%, -50%);
}
<span class="cat_circle">
<img src="https://cdn.pbrd.co/images/GNK97WG.png">
</span>
You Can Try this way !!
<div class="image-circle">
<div>
<img class="img" src="https://cdn.pbrd.co/images/GNK97WG.png">
</div>
</div>
.image-circle {
width:25%;
}
.image-circle:after {
content: "";
background: #4679BD;
padding-bottom: 100%;
border-radius: 50%;
display: block;
width: 100%;
height:0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.image-circle div {
float:left;
width:100%;
line-height:1em;
margin-top:-0.5em;
padding-top:40%;
text-align:center;
}
I'd suggest flexbox, simplifies and reduces the need of another class.
.cat_circle {
border: 3px solid #7E9CC2;
border-radius: 50%;
width: 25px;
height: 25px;
overflow: hidden;
position: absolute;
padding: 30px;
left: 10px;
top: 10px;
/* new */
display: flex;
justify-content: center;
align-items: center;
}
<span class="cat_circle">
<img src="https://cdn.pbrd.co/images/GNK97WG.png">
</span>