I have this page https://apoerin.github.io/crepes-burgers/
As you can see, all images are nicely rounded.
But on mobile Safari images from About section are displaying like this
I have this on img-container
.details .img-wrapper {
height: auto;
}
And this on image itself
.preview{
width: 350px;
border-radius: 50%;
border: 2px solid #8281815e;
margin: 20px auto;
-webkit-box-shadow: 1px 5px 22px -4px #000000;
box-shadow: 1px 5px 22px -4px #000000;
}
I tried set width:350px to img-container, and width:100% to image but it cause change of width in desktop mode in Chrome( only for 2 images of 3)
make .preview fixed height to make it square:
add:
.preview {
width: 350px;
height: 350px;
object-fit: cover;
}
Related
I tried to create this canvas in css:
this is my jsfiddle:
http://jsfiddle.net/alonshmiel/kyfha/35/
I have a problem only with the circle border, it's not exactly like the canvas.
this is my css:
.PersonaCanvas {
width: 100px;
height: 100px;
border-top: 12px solid rgb(238,238,238);
border-left: 12px solid rgb(238,238,238);
border-right: 12px solid rgb(238,238,238);
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
}
.PersonaCanvas img {
display: block;
margin-top:16px;
width:100%;
height:80%;
}
and my html:
<div class="PersonaCanvas">
<img src="http://s8.postimg.org/ij71l6xol/New_Pers_achiever_1.png"/>
</div>
any help appreciated!
Basically you set a width and height of the container to 100px, but when you add a border, it automatically grows in size; if you inspect, you have the final width which is 124px, which comes from the 100px you set, along with the 12px border-left and another 12px border-right. You would either have to manually change it to accommodate the size to add up to 100px, or you can use a css3 method of box-sizing: border-box to do the calculation for you. Also, we had to change the width of the img to 80%, since you want it to stay in proportion to its height within the container. Lastly, the size of the img is fixed, but we have to align its margin: 16px auto 0. Try this updated one:
.PersonaCanvas {
width: 100px;
height: 100px;
border-top: 12px solid rgb(238,238,238);
border-left: 12px solid rgb(238,238,238);
border-right: 12px solid rgb(238,238,238)
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
box-sizing: border-box
}
.PersonaCanvas img {
display: block;
margin: 16px auto 0;
width: 80%;
height: 80%;
}
The issue with the width of the border decreasing is cause by the lack of a bottom border (which is assumed to be 0 pixels)
So by adding a transparent bottom border you can make the width consistent.. (but you will need extra elements to make the ends be curved)
border-bottom: 12px solid transparent;
http://jsfiddle.net/kyfha/39/
I added two other div's. One for a white circle to cover part of the solid bottom border. And I also added the css elements and made te absolute so they will still fit wherever you need them. The border ends are not perfect, but if you made a white image with the correct edhe you have and inseted it into the thrid div tag, you will be perfect.
I hope this helps :)
http://jsfiddle.net/kyfha/44/
<div class="PersonaCanvas">
<img src="http://s8.postimg.org/ij71l6xol/New_Pers_achiever_1.png"/>
</div>
<div class="PersonaCanvas2">
</div>
<div class="PersonaCanvas3">
</div>
Here is the CSS
I changed the size of the image slightly and moved it around a little to give you your image.
.PersonaCanvas {
width: 100px;
height: 100px;
border-top: 12px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid transparent;
overflow: hidden;
position: absolute;
z-index: 100;
}
.PersonaCanvas2 {
width: 100px;
height: 100px;
border-top: 12px solid rgb(238,238,238);
border-left: 12px solid rgb(238,238,238);
border-right: 12px solid rgb(238,238,238);
border-bottom: 12px solid rgb(238,238,238);
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
position: absolute;
z-index: 1;
}
.PersonaCanvas3 {
position: absolute;
width: 50px;
height: 50px;
-webkit-border-radius: 50px;
-khtml-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #FFF;
top: 110px;
left: 46px;
z-index: 10;
}
.PersonaCanvas img {
display: block;
margin-top:16px;
width:80px;
height:80px;
position: absolute;
left: 10px;
top: -0px;
}
Basicallly I have two instances of the div tag and the image is in one without the border or the radius.
When I changing the background of wrapper, is not changing, but when I changing the border,he is changing. I want my wrapper(content) to be transparent. I am using responsive theme in wordpress. This is my code:
#wrapper {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background:transparent;
border: 4px solid #fffffff;
border-radius: 1px;
clear: both;
margin: 40px auto 40px auto;
padding: 0 20px 20px 20px;
position: relative;
Change background to:
background-color:transparent;
I'm trying to create a webpage with some tabs and I want the tabs that are not selected to "lie behind" the active tab. I've got different tabs with different appearances, one is plain square but the other is a trapezoid.
I've managed to create the shadow effect on the square tab by using
"-webkit-box-shadow: inset 0 -10px 30px -10px #555;"
but that doesn't work for the trapezoid.
This is a simplified example of my code:
HTML
<div id="first-tab">
</div>
<div id="second-tab">
</div>
<div id="main-content">
</div>
CSS
#first-tab {
position:relative;
float: left;
background-color: #ED3627;
-webkit-box-shadow: inset 0 -10px 30px -10px #555;
width: 100px;
height: 70px;
}
#second-tab {
position:relative;
float: left;
margin-left: 50px;
border-bottom: 70px solid #365F91;
border-right: 40px solid transparent;
height: 0;
width: 60px;
-webkit-box-shadow: inset 0 -10px 30px -10px #555; /* Doesn't work */
}
#main-content {
clear:both;
position:relative;
float: left;
height: 100px;
width: 250px;
background-color: #365F91;
}
JSFiddle: http://jsfiddle.net/Nx9ex/
Does anyone have any suggestions how I can fix this?
It only has to work for Chrome!
Thanks!
Not perfect, but can be a start:
demo
It didn't work because the second tab had really a height of 0px, and was in top of the trapezoid, the visible portion being the border.
I changed the method of creating a trapezoid, now it has all the space and the corner is hide setting there a transparent background:
#second-tab {
position:relative;
float: left;
margin-left: 50px;
background: linear-gradient(-114deg, transparent 30px, #365F91 31px);
height: 70px;
width: 100px;
-webkit-box-shadow: inset 0 -10px 30px -10px #555; /* Doesn't work */
}
The remaing problem is that the shadow is slightly visible in the transparent border
On my site I am working on a new page. When I view it it on a bigger screen the box is to the left. I am trying to make it left to align with everything.
CSS:
.contactbox {
width: 200px;
height: auto;
margin-left: 400px;
left: 400px;
padding: 12px
background-color:#F5F5F5;
border: 1px solid #9C9C9C;
text-align: left;
box-shadow: 2px 2px 7px 2px #DBDBDB;
-moz-box-shadow:2px 2px 7px 2px #DBDBDB;
-webkit-box-shadow:2px 2px 7px 2px #DBDBDB;
}
Instead of using margin-left: 400px; use margin: 0 auto;. This will automatically make the left and right margins equal, centering the div.
EDIT:
Move it 400px left like so:
.contactbox {
margin: 0 auto;
// Allow it to be moved relative to its original (centered) position
position: relative;
// Move to the left (left means the left edge not the direction of movement)
left: -400px;
}
How would you achieve an 10px high oval blurry shadow below a 200px box?
.box {
width:200px;
height:200px;
background: #c00;
position:relative;
}
.box:before {
content:'';
position: absolute;
bottom: -20px;
left:20px;
width: 210px;
height: 10px;
background: none; /*This cuts off some portion of the box shadow*/
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
-webkit-box-shadow: 0 15px 10px #000000;
-moz-box-shadow: 0 15px 10px #000000);
-0-box-shadow: 0 15px 10px #000000);
box-shadow: 0 15px 10px #000000;
}
http://jsbin.com/uqugob
The above code is almost perfect, except that I want a more thin oval blurry shadow, and remove the disturbing white background of :before.
Thanks, finally I got it as expected, almost, except that the left and right should be more blurry:
http://jsbin.com/uqugob/4
Thanks
removed the styles with vendor-prefixes (they were annoying, you can add them back using what i provided) but here's the shadow's code:
.box:before {
content:'';
position: absolute;
bottom: -50px;
left:20px;
width: 210px;
height: 30px;
background: #333;
border-radius: 200px / 30px;
box-shadow: 0 0 10px 10px #333;
}
I always like a challenge. Here's what I came up with: http://jsbin.com/uqugob/3/edit
Like #Joseph, I got rid of the vendor prefixes.
.box:before {
content:'';
position: absolute;
bottom: -10px;
left:20px;
width: 210px;
height: 8px;
background: transparent; /*Without a color, the box shadows fails*/
border-radius: 100px / 5px;
box-shadow: 0 25px 25px #000000;
}
I try to change the code for showing shadow after 'hover' event , doesn't work
try using:
margin:0 auto;
to make a shadow in the center and want to reduce the shadow from both left and right sides. Tried assigning it width less than the width of the div/box.