I have this code:
background:url("someimage.gif") repeat-y 50px right;
the problem here is that I need the background to start 50px from top so there is a 50px space between the image and the top but that wont happen. I know very well that the image would position right if not repeated but I need it to be repeated vertically. Is there any way around? How can I achieve that space between top and the start of the repeated image?
There a way to fake it if there is nothing in that top space.
Apply 50px (or your chosen value) of padding-top to the div.
The apply the background as usual (repeat-y) but clip the background to the content-boxof the div.
Background-clip # MDN
div {
background: url(http://placekitten.com/50/50) repeat-y;
padding-top: 50px;
height: 50vh;
background-clip: content-box;
width:50vw;
margin:2em auto;
border:1px solid red;
}
<div></div>
OR
Use a position pseudo-element suitably sized/positioned
div {
height: 50vh;
width: 50vw;
margin: 2em auto;
border: 1px solid red;
position: relative;
}
div:before {
content: '';
position: absolute;
width: 100%;
height: calc(100% - 50px);
background: url(http://placekitten.com/50/50) repeat-y;
top: 50px;
left: 0;
}
<div></div>
Related
I want to create a top-right border of a div like the following picture
I am pretty new to css. Could anyone give me a pointer to this?
You can use an absolutely positioned ::after pseudo element ( or an element in your markup ) to create the green area. Setting the upper right border radius and overflow: hidden; will finish the job.
body {
background: #ddd;
}
div {
background: white;
width: 100px;
height: 50px;
}
.funky-border {
border-top-right-radius: 30px;
position: relative;
overflow: hidden;
}
.funky-border:after {
content:'';
background: green;
width: 20px;
height: 60px;
transform: rotate( 135deg );
position: absolute;
top: -20px;
right: 0;
}
<div class="funky-border"></div>
Here is an easy way with one element:
.box {
width:200px;
height:100px;
border-top-right-radius:30px;
background:
linear-gradient(to top right,transparent 49%,green 50%) top right/50px 50px no-repeat,
gray;
}
<div class="box">
</div>
In CSS, I am looking for a way to add space between an svg and the div element containing it.
Now, the svg is included in the background attribute with no-repeat, which causes it to appear cramped inside of the div container.
Is there a trick or workaround to uniformly add space so that there is padding between the svg and the container?
#rack-button {
position: absolute;
background: url('simple_rack.svg') no-repeat top left;
background-size: contain;
display: inline-block;
background-color:white;
width: 34px;
height: 34px;
left: 10%;
border-radius: 5px;
border-width: 2px;
border-color: #B8B8B8;
}
I have tried few but is there a way to create an outline to right side of the div?
somthing like the purple line in the below image
https://unsee.cc/geduzopi/
use a pseudo element absolutely positioned to the right of the parent, then use translateX() to push it outside of the parent.
div {
display: inline-block;
width: 5em;
background: orange;
text-align: center;
position: relative;
}
div:after {
content: '';
width: .5em;
background: purple;
position: absolute;
right: 0; top: 0; bottom: 0;
transform: translateX(200%);
<div>1</div>
You can use border-right. For example
border-right: aqua 2pt solid;
See
https://www.w3schools.com/cssref/pr_border-right.asp
If you want to create an outline on one side and NOT a border, you can use box-shadow with inset like I did in my codepen example below. My example is good to look at if you have a border radius.
https://codepen.io/drewkiimon/pen/qeWQVx
div {
background: pink;
height: 250px;
width: 250px;
box-shadow: inset 0 1px black;
}
<div>
</div>
How can I use HTML and CSS to make a div with an image inside it that is clipped and masked so that it looks like the following:
I've been trying to find a way to do this for about 2 hours now and got nowhere so I was just hoping someone could point me in the right direction. To be specific here, I wish to clip the image such that the top two corners are rounded, and embed it in a div element with four rounded corners and a 1/4 bottom padding, with both elements transformed such that it appears the right edge is further away from the viewer than the left.
In order to create such an effect, where the image remains the same, but the outer shape has this perspective look, you could use something similar to the demo below.
div.inner {/*gives top section effect, also crops the image*/
position: absolute;
top: 0;
left: 0;
border-radius: 20px 20px 0 0;
height: 200px;
width: 300px;
overflow: hidden;
border: 10px solid red;
transform: skewY(5deg);
}
.inner img {/*removes transform skew from image*/
transform: skewY(-5deg);
transform-origin: top left;
height:100%;width:100%;
}
.wrap {
display: inline-block;
height: 200px;
width: 300px;
position: relative;
/*for demo only*/
margin: 100px 100px;
}
.wrap:after { /*give bottom section the effect*/
content: "";
position: absolute;
bottom: -50%;
left: 0;
height: 100%;
width: calc(100% + 20px);
transform: skewY(-10deg);
transform-origin: bottom right;
background: red;
z-index: -1;
border-radius: 20px;
}
<div class="wrap">
<div class="inner">
<img src="http://lorempixel.com/500/500" />
</div>
</div>
In order to create the effect, I have had to incorporate this wrapper div. This allows the use of a pseudo element (the :after css) to generate the lower part of the shape:
+----------------------------+
| |
| _______/ <-- curved corner
| ------/
| ------/
\-----/
/\
\_____ also curved corner
The inner div is then hence used to generate the upper part of the shape. Using the skew declaration, the shape allows the opposite of the :after element, bringing the right hand side of the red shape down wards.
The overflow:hidden ensures any part of the image that does not fit within this inner div will be cropped (the border-radius:20px 20px 0 0; ensures only the upper corners are affected).
The last point to note is the .inner img css. Since I have skewed the .inner div, it is important to then 'unskew' the image so it remains the rectangular shape. This is why there is a 'counter-skew' here (transform: skewY(-5deg);).
Here's my attempt using perspective.
Thanks to #vals for the pointing out that perspective can be used as part of the transform.
* {
box-sizing: border-box;
}
figure {
perspective: 1000px;
width: 420px;
margin: 5em auto;
height: 350px;
background: red;
text-align: center;
padding: 10px;
border-radius: 25px;
transform: perspective(1200px) rotateY(50deg);
}
img {
border-radius: 20px 20px 0 0;
}
<figure>
<img src="http://lorempixel.com/400/200/sports/1/" alt="" />
</figure>
Related to this question.
Here's a fiddle: http://jsfiddle.net/DRbRS/
Notice how the red-outlined list div does not align at the bottom of the green container div.
The problem is that there is no way of knowing ahead of time what the resulting height of the list ought to be, even if the height of the header is known.
Is there any way to deal with this without resorting to javascript?
What we need is a style like height: fill;
Using position: absolute and setting top, left, right, and bottom: http://jsfiddle.net/QARC9/
This article describes why it works.
http://www.alistapart.com/articles/conflictingabsolutepositions/
Replace your CSS with this
#container {
left: 50px;
width: 200px;
position: fixed;
height: 90%;
border: 2px dashed green;
}
#header {
height: 30px;
line-height: 30px;
text-align: center;
border: 2px dashed blue;
margin-left:-2px;
margin-top:-2px;
width:200px
}
#list {
border: 2px dashed red;
overflow: auto;
height: 91%;
width:200px;
margin-left:-2px;
margin-top:-2px;
}
or see the demo here http://jsfiddle.net/enve/DRbRS/3/