I am trying to create background carve in CSS. Take a look in the picture below.
How can I add radius like this in CSS3? Anyone can help?
Use:
border-top-left-radius: 50%;
border-top-right-radius: 50%;
I made an example of it here: http://jsfiddle.net/DFs6H/2/
Add another div on the bottom with a border radius.
html:
<div class="content">
<div class="bottom_border"></div>
</div>
css:
.content{
background:#CCC;
height:100px;
width:100px;
position:relative;
overflow:hidden
}
.bottom_border {
position:absolute;
top:0;
bottom:0;
background:#FFF;
width:100px;
height:20px;
top:90px;
bottom:-10px;
border-radius: 50%
}
Related
Is it possible to set image in same shape with clip-path css.
Original Image
Expected image with css
You don't really need clip-path or mask. A skew transformation with border-radius can do it:
.box {
margin:50px;
border-radius:80px 0;
height:300px;
background:red;
position:relative;
background:url(https://i.stack.imgur.com/rYeuk.jpg) center/cover;
transform:skewY(-7deg);
transform-origin:right;
overflow:hidden;
}
.box::before {
content:"";
position:absolute;
background:inherit;
top:-20%;
left:0;
right:0;
bottom:-20%;
transform:skewY(7deg);
}
body {
background:red;
}
<div class="box">
</div>
I there a way to make each border in a div extend 1 or 2 pixels in each way so that they form a cross in each corner?
You can't do it by default css border property. However, you can achieve what you want by trying :before and :after selectors for the div:
<div class="cross-borders"></div>
.cross-borders {
width:200px;
height:200px;
border:1px solid #000;
border-top:0;
border-bottom:0;
position:relative;
margin:20px auto;
}
.cross-borders:before,
.cross-borders:after {
content: ' ';
width:210px;
height:1px;
background-color:#000;
position:absolute;
top:5px;
left:-5px;
}
.cross-borders:after {
top: auto;
bottom: 5px;
}
JSFiddle
I have a container div with several smaller div:s inside, all of them with float:left;. If I hover one of the smaller div:s the height and width should be increased and it should overlay the other div:s without moving them.
HTML:
<div id="boxcontainer">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS:
.box {
float:left;
position: relative;
width:150px;
height:150px;
margin:5px;
background-color: yellow;
}
#boxcontainer {
position: relative;
width:500px;
height:auto;
}
.box:hover {
z-index:100;
width:300px;
height:auto;
}
How can I achieve this?
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Instead of float left try position absolute.
I have added a container around each box and positioned each element absolutely within it. This way you can add as many boxes as you wish and keep the same class.
EXAMPLE
HTML
<div id="boxcontainer">
<div class="box">
<div class="Inside"></div>
</div>
<div class="box">
<div class="Inside"></div>
</div>
<div class="box">
<div class="Inside"></div>
</div>
</div>
CSS
#boxcontainer{
position: relative;
width:500px;
height:500px;
}
.box{
position:relative;
float:left;
width:150px;
height:150px;
margin:5px;
}
.Inside{
background:green;
position:absolute;
top:0;
left:0;
width:150px;
height:150px;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
.Inside:hover{
z-index:100;
width:250px;
height:250px;
background:#666666;
}
http://jsfiddle.net/JJ3v4/3/
Live Demo: http://jsfiddle.net/hKL4f/1/
I think the easiest way to do what you want would be to use a CSS transform.
.box:hover {
transform: scale(2, 2);
}
That way you alter the dimensions of the element on hover without affecting any of the other elements in the document flow around it.
If you want the boxes to expand in a different way (ie, to the right and bottom rather than in all directions) you can set a transform-origin property (default is 50% 50%).
Try this...works somewhat
.box{
float:left;
postion: fixed;
width:150px;
height:150px ;
margin:5px;
background-color: yellow;
}
#boxcontainer{
postion: fixed;
width:500px;
height:auto;
}
.box:hover{
z-index:1;
width:260px;
height:160px;
position:absolute;
}
I had the Same problem in my project when i hover , the box changes its width and height but it efffects the other boxes as well so to solve this problem best way is to use transform property as below
.box:hover {
transform: scale(1.2 , 1.2); // This increses the dimmensions of the box and overlay
to others boxes without disturbing others
}
Hey so I'm trying to create a nested div element so that it lies within another div element but fills up its parent entirely except for a perfect border around it that 30 px or so like this http://s23.postimg.org/su2o83m7v/div.png
I've tried padding, margins and positioning with css but cant seem to keep its width and the bottom part of the padding, any suggestions?
Two ways to go about this.
1) Box-sizing
.OuterDiv {
box-sizing:border-box;
border:30px solid green;
}
.InnerDiv {
background-color:red;
border:4px solid blue;
}
Here is the jsFiddle for it.
2) Position absolute
.OuterDiv {
position:relative;
height:100px;
background-color:green;
}
.InnerDiv {
position:absolute;
top:30px;
left:30px;
right:30px;
bottom:30px;
background-color:red;
border:4px solid blue;
}
Here is the jsFiddle for that.
Personally I would choose the first option any day of the week (hell of a lot easier to maintain, and really you should use box-sizing:border-box; for everything), but if you desperately need IE7 support the second one will work there whereas the first is only IE8+.
Try the below code
<html>
<head>
<style>
.outer{
height:200px;
width:200px;
padding:30px;
background-color:#ff0000;
}
.inner{
height:100%;
width:100%;
background-color:#00FF00;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
I am giving the outer div padding of 30px, and rest is simple just made height & width 100%
used background-color to show the div differently
I found this too work as well
#parent
{
border:1px solid black;
background:#ddd;
display:inline-block;
}
#child
{
width:180px;
margin:30px;
background:grey;
}
http://jsfiddle.net/Y37su/
suppose i have a div, i want it to be out of visible area of computer monitor screen, so that when i use CSS transitions to move it to a specific position, an effect of element moving in slowly from outside of screen is created, and i also would like to create its reverse effect.
position: absolute; then do something like left: -100px;
working example(hover over the box and wait): http://jsfiddle.net/fDnPj/
http://jsfiddle.net/DZFtt/
<div id="example"></div>
<div id="example2"></div>
<div id="example3"></div>
#example{
width:50px;
height:50px;
background-color: #386a95;
position:relative; /*Not moved*/
}
#example2{
width:50px;
height:50px;
background-color: rgb(177, 35, 35);
position:relative;
left:-25px; /*Pushed halfway off the screen*/
}
#example3{
width:50px;
height:50px;
background-color: green;
position:relative;
left:-50px; /*This is now totally hidden from view*/
}
IF you know the width of the div you can use the combination of position and left property like this
#my-div {
position:absolute;
left:-100px;
top:0;
width:100px;
background-color:red;
}
<div id="my-div">Hello</div>
Play here by adjusting the left property.