I've got this working nicely on objects with a solid background colour, by applying multiple box-shadows:
jsFiddle
html:
<div></div>
css:
div{width: 50px;
height: 50px;
margin: 100px;
border-radius: 25px;
background: rgb(0,150,0);
box-shadow: -15px 0 12px rgba(0,150,0,0.2)
, -11px 0 10px rgba(0,150,0,0.4)
, -8px 0 8px rgba(0,150,0,0.6)
, -6px 0 6px rgba(0,150,0,0.8)}
This isn't ideal as you get shadow bleeding up and down from the element instead of just to the left, but it kinda does the job.
But what I really want is for it to work nicely with a background image, e.g. in this jsFiddle I'd like the colours on the edge of the div (or the edge of the background image at least) to be stretched out.
How can I do that? Can I?
Thank you
You could add a ::before then duplicate your element and blur it.
div{
position: relative;
width: 50px;
height: 50px;
margin: 100px;
border-radius: 25px;
background: url(https://i.imgur.com/pDj7wo9.png);
background-size: cover;
background-position: left center;
}
div::before {
background: url(https://i.imgur.com/pDj7wo9.png);
background-size: cover;
background-position: left center;
position: absolute;
width: 55px;
height: 55px;
overflow: hidden;
z-index: -1;
filter: blur(5px);
content: "";
border-radius: 100%;
}
<div></div>
Related
I'm designing my website, and I have a problem with the positioning a box, in CSS. When you see it from the desktop it looks good, but at the moment of the phone it is not totally responsive, nor centered. I do not understand what is wrong with my code.
HTML
<div class="cuadrado">
<div class="franja">
<h1>Mario</h1>
<h4>Web Developer</h4>
</div>
CSS
.cuadrado {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
background-attachment: fixed;
background-color: #f7f7f7;
height: 500px;
width: 462px;
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
border: 0px none #000000;
}
.foto {
position: relative;
left: 190px;
top: -125px;
height: 100px;
width: 100px;
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
background-size: 100% auto;
}
.franja {
position: relative;
top: 62px;
height: 150px;
width: 100%;
background-color: #EFF2F2;
}
Here you can see it online: https://mariomuratori.github.io/contact
Thanks for the help!
The reason it doesn't look as good on your phone is because you're using static pixels, and the resolution on your phone is not the same as your monitor.
You can try checking out a tutorial like this for help to make it responsive on both devices:
https://www.w3schools.com/html/html_responsive.asp
I've researched this and am unable to understand why my padding won't work for this div. I won't the dashed border to be evenly distributed around the image. (see below). Here is my CSS:
#jspsych-tree-stim-bottom-left, #jspsych-tree-stim-bottom-right {
position: relative;
display: inline-block;
margin-top: 30px;
margin-left: 55px;
margin-right: 55px;
margin-bottom: 15px;
width: 200px;
height: 200px;
border-width: 4px;
border-style:dashed;
border-color: rgba(0,0,0,0);
padding: 20px;
background-repeat: no-repeat;
vertical-align: top;
background-position: center bottom;
}
Example of border problem:
After looking into it further myself, I've convinced myself that the bottom in
background-position: center bottom;
is pulling the image to the bottom of its container. Take out the bottom if you want the margin and padding to work there
background-position: center;
I would like a div to look like this:
but would only like to use CSS, how would I go about creating a shape like this?
Do I create custom border for the top and bottom?
You can look at the code here, it does exactly what you want: http://codepen.io/orhanveli/pen/tbGJL
The code from the website:
HTML
<!-- Lets create a CSS3 stamp -->
<div class="stamp">
<!-- the image -->
<img src="http://thecodeplayer.com/uploads/media/css3logo.png" />
</div>
CSS
*{margin: 0; padding: 0;}
body {
background: #B1d202;
padding: 100px;
text-align: center;
}
.stamp {
width: 280px;
height: 180px;
display: inline-block;
padding: 10px;
background: white;
position: relative;
-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
/*The stamp cutout will be created using crisp radial gradients*/
background: radial-gradient(
transparent 0px,
transparent 4px,
white 4px,
white
);
/*reducing the gradient size*/
background-size: 20px 20px;
/*Offset to move the holes to the edge*/
background-position: -10px -10px;
}
.stamp:after {
content: '';
position: absolute;
/*We can shrink the pseudo element here to hide the shadow edges*/
left: 5px; top: 5px; right: 5px; bottom: 5px;
/*Shadow - doesn't look good because of the stamp cutout. We can still move this into another pseudo element behind the .stamp main element*/
/*box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);*/
/*pushing it back*/
z-index: -1;
}
/*Some text*/
.stamp:before {
content: 'CSS3';
position: absolute;
bottom: 0; left: 0;
font: bold 24px arial;
color: white;
opacity: 0.75;
line-height: 100%;
padding: 20px;
}
.stamp img {
}
If you want to only have the borders on the top and on the bottom of your image you can create this by using pseudo elements.
.stamp {
margin-top: 50px;
margin-left: 50px;
position: relative;
width: 500px;
height: 300px;
background: #bbb;
-webkit-filter: drop-shadow(3px 3px 1px black);
filter: drop-shadow(0px 0px 5px white);
}
.stamp:before {
position: absolute;
top: -20px;
display: block;
content: "";
background: radial-gradient(circle, transparent 15px, #bbb 16px);
background-size: 50px 40px;
background-position: -20px -20px;
width: 100%;
height: 40px;
z-index: -1;
}
.stamp:after {
position: absolute;
bottom: -20px;
content: "";
display: block;
background: radial-gradient(circle, transparent 15px, #bbb 16px);
background-size: 50px 40px;
background-position: -20px -20px;
width: 100%;
height: 40px;
z-index: -1;
}
body {
margin: 0;
background-color: #333;
}
<div class="stamp">
</div>
You could use the mask-box-image property to do this.
FIDDLE
See this html5 Rocks article on masking
<img src="http://www.html5rocks.com/en/tutorials/masking/adobe/humayun-thom-arno.jpg" />
CSS
img {
-webkit-mask-box-image: url(http://www.html5rocks.com/en/tutorials/masking/adobe/stampTiles.svg) 35 repeat;
mask-box-image: url(http://www.html5rocks.com/en/tutorials/masking/adobe/stampTiles.svg) 35 repeat;
}
I tried a lot on oval shape which have cut in both sides but not able to do it please
I need code for oval shape with cut in both side..
Here's my code below:-
.demo{
width: 100%;
height: 600px;
background: white;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 178px;
border-radius: 694px / 208px;
z-index: 100;
position: relative;
}
Is this OK ?
HTML
<div id="oval_parent">
<div id="oval"></div>
</div>
CSS
#oval_parent{
background:black;
width:200px;
height:120px;
overflow:hidden;
}
#oval{
width: 220px;
height: 100px;
margin:10px 0 0 -10px;
background: white;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
DEMO.
Try this:
#oval-shape {
width: 200px;
height: 100px;
background: blue;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Notice the ratios in the corner values in relation to the height.
Demo - http://jsfiddle.net/XDLVx/
Change the values on css:
#demo {
width: 100%;
height: 600px;
background: white;
-moz-border-radius: 50% / 250px;
-webkit-border-radius: 40% / 250px;
border-radius: 50% / 250px;
z-index: 100;
position: relative;
}
Put it inside another div which is high enough to show all the oval, not quite wide enough, and set overflow: hidden. If it's positioned at the centre the edges will be cut off, but you won't be able to side-scroll.
Here are two possible variants:
Method #01:
Use radial-gradient():
background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
body {
background: linear-gradient(orange, red);
padding: 0 20px;
margin: 0;
}
.oval {
background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
height: 100vh;
}
<div class="oval">
</div>
Method #02:
Create an overlay with :before or :after pseudo element.
Add border-radius.
Apply a large box-shadow with overflow: hidden on parent to hide undesired area.
body {
background: linear-gradient(orange, red);
padding: 0 20px;
margin: 0;
}
.oval {
position: relative;
overflow: hidden;
height: 100vh;
}
.oval:before {
box-shadow: 0 0 0 500px #000;
border-radius: 100%;
position: absolute;
content: '';
right: -10%;
left: -10%;
top: 10%;
bottom: 10%;
}
<div class="oval">
</div>
JS fiddle : http://jsfiddle.net/Rkh8L/
I am trying to vertically middle div inside div. The class i want to be vertically middles is MonsterImage.
Here the whole code
<div style="float: left; text-align: center; vertical-align: middle; margin:10px;">
<asp:RadioButton ID="RdButtonMonsterImages" ClientIDMode="Static" runat="server" />
<div class="permonster" >
<div class="MonsterImage"></div>
</div>
</div>
.permonster
{
width: 130px;
height: 120px;
text-align: center;
vertical-align: middle;
border-top: 1px solid #f7fcff;
background: #ababab;
background: -webkit-gradient(linear, left top, left bottom, from(#e3e6e8), to(#ababab));
background: -webkit-linear-gradient(top, #e3e6e8, #ababab);
background: -moz-linear-gradient(top, #e3e6e8, #ababab);
background: -ms-linear-gradient(top, #e3e6e8, #ababab);
background: -o-linear-gradient(top, #e3e6e8, #ababab);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-decoration: none;
padding:2px;
}
.MonsterImage
{
border-width: 0px; border-style: none;
background-image: url(http://static.monstermmorpg.com/images/csssprites/RegisterCSS.png);
background-color: transparent;
margin:auto;
background-repeat: no-repeat;
background-position: -0px -120px;
width: 130px;
height: 96px;
}
You can center (vertical and horizontal align) a div inside a div as below
HTML
<div id="parent">
<div id="child">
</div>
</div>
CSS
#parent {
background-color: #333333;
position: relative;
height: 300px;
width:300px;
}
#child {
background-color: #cccccc;
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
See this article which explains how it works.
Note: Background color is only for illustration purposes only.
See the result below.
You can't vertical-align that element, just add some margin to the top of your .MonsterImage class, something like margin-top:13px; should do it.
Hate to disappoint you, but this is just not possible with CSS alone.
Here's some things you can do:
use fixed top and bottom margins on the inner div, and leave the outer div's height at 'auto' (you'll lose control over the outer div's height)
hard-code everything (you'll lose automatic resizing, obviously)
use javascript to adjust the sizes on-the-fly after loading the document