Related
please have a look at my exampleI have added background color, and now i want to slice some point and must be with background transparent like i added
.single_cat_list_in .meta:before {
content: "";
width: 20px;
height: 20px;
background: #ffffff !important;
position: absolute;
right: -35px;
bottom: -10px;
border-radius: 50%;
border-left: 1px solid rgba(0, 0, 0, 0.5);
}
https://prnt.sc/pi94k5
You can use multiple linear and radial gradients to create the rounded corners (taken from this article):
.item {
height: 100px;
background:
linear-gradient(45deg, transparent 10px, gold 0) top left,
linear-gradient(315deg, transparent 10px, gold 0) top right,
linear-gradient(225deg, transparent 10px, white 0) bottom right,
linear-gradient(135deg, transparent 10px, white 0) bottom left;
background-image:
radial-gradient(circle at 0 100%, transparent 14px, gold 15px),
radial-gradient(circle at 100% 100%, transparent 14px, gold 15px),
radial-gradient(circle at 100% 0, transparent 14px, white 15px),
radial-gradient(circle at 0 0, transparent 14px, white 15px);
background-size: 50% 50%;
background-repeat: no-repeat;
}
body {
background: silver;
}
<div class="item"></div>
I am trying to put a grid pattern behind some <divs>, like shown in the following (https://jsfiddle.net/4e5mcmk4/25/):
<div id="parent">
<div id="childA"></div>
<div id="childB">
hello
</div>
</div>
And here is the CSS:
body {
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
}
This is the look I am going for, but instead of applying this CSS rule to body, I want "#childA" to fill the parent (and parent to fill body), and apply the same background. More generally, I want a full-size div to appear underneath its sibling div.
However, I can't seem to get parent, childA, or childB to expand to fill the space of the div.
Any suggestions?
All you need then is to set the width and height of the parent while applying the background property
#parent{
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
width:100%;
height:100%;
position:absolute;
}
#childA{
width:100%;
height:100%;
}
I added position absolute because it has no parent with a fixed width
https://jsfiddle.net/4e5mcmk4/27/
Is this what you are going for? http://jsfiddle.net/DIRTY_SMITH/e9ypqy5t/12/
#parent{
width: 100%;
height: 100vh;
}
#childA{
width: 100%;
height: calc(100% - 20px);
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
}
#childB{width: 100%; height: 20px; background-color: lightblue;}
CSS overflow:visible doesn't seem to get applied to inputs.
See the following JS fiddle: https://jsfiddle.net/b4sr578j/
input {
border: 1px dashed black;
overflow: visible;
height: 28px;
font-size: 30px;
}
<input type='text' value='gggyyyXXX'/>
Is it possible to make the bottom of the gs and ys visible (without increasing the height of the text input)?
Thanks for any help.
Answer to the original question - As indicated already by Sebastian Hens, this is not possible. The reason is because input elements are replaced elements and the overflow property applies only to non-replaced elements.
Quote from MDN about overflow property:
Applies to - non-replaced block-level elements and non-replaced inline-block elements
As already mentioned in comments, the ideal solution would be to make use of contenteditable elements because they do respect the overflow settings.
Here is a workaround solution which uses multiple linear-gradient to generate the dashed border effect. Part of the answer is adopted from Danield's answer (the parts about padding and removal of height). On top of it, I have modified the appearance and added the gradients.
Though we haven't added the height explicitly, the actual height of the area within the border would still be the same as that in your original code. I have added an input box with your original code on the left side for comparison. I don't know if that is acceptable for you. If you mandatorily want the height to be set then this would not work.
input.test {
appearance: none;
box-sizing: border-box;
font-size: 30px;
padding: 2px 0px 6px;
border: 0;
background: linear-gradient(to right, gray 50%, transparent 50%), linear-gradient(to right, gray 50%, transparent 50%), linear-gradient(to bottom, gray 50%, transparent 50%), linear-gradient(to bottom, gray 50%, transparent 50%);
background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: 0px 0px, 0px 1em, 0px 0px, 100% 0px;
box-shadow: inset 0px -10px 0px white;
width: 200px;
}
input.original {
border: 1px dashed black;
overflow: visible;
height: 28px;
font-size: 30px;
width: 200px;
}
input{
vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type='text' value='gggyyyXXX' class='original' />
<input type='text' value='gggyyyXXX' class='test' />
In the above snippet a white box-shadow is used to hide the bottom part of the gradient so that it doesn't overflow (you can see the effect by removing the box-shadow) and because of this it needs a solid color background. On the other hand if the height of your text box is fixed then you could use something like the below snippet to even support non solid backgrounds.
input.original {
border: 1px dashed black;
overflow: visible;
height: 28px;
font-size: 30px;
width: 200px;
}
input.test-fixedheight {
appearance: none;
box-sizing: border-box;
font-size: 30px;
padding: 2px 0px 6px;
border: 0;
background: linear-gradient(to right, crimson 50%, transparent 50%), linear-gradient(to right, crimson 50%, transparent 50%), linear-gradient(to bottom, crimson 12.5%, transparent 12.5%, transparent 25%, crimson 25%, crimson 37.5%, transparent 37.5%, transparent 50%, crimson 50%, crimson 62.5%, transparent 62.5%, transparent 75%, crimson 75%, crimson 87.5%, transparent 87.5%), linear-gradient(to bottom, crimson 12.5%, transparent 12.5%, transparent 25%, crimson 25%, crimson 37.5%, transparent 37.5%, transparent 50%, crimson 50%, crimson 62.5%, transparent 62.5%, transparent 75%, crimson 75%, crimson 87.5%, transparent 87.5%),linear-gradient(to bottom, transparent 0%, white 0%);
background-size: 8px 1px, 8px 1px, 1px 1em, 1px 1em, 100% 1em;
background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
background-position: 0px 0px, 0px 29px, 0px 2px, 100% 2px;
width: 200px;
}
input.test-fixedheight-transparent {
appearance: none;
box-sizing: border-box;
font-size: 30px;
padding: 2px 0px 6px;
border: 0;
background: linear-gradient(to right, beige 50%, transparent 50%), linear-gradient(to right, beige 50%, transparent 50%), linear-gradient(to bottom, beige 12.5%, transparent 12.5%, transparent 25%, beige 25%, beige 37.5%, transparent 37.5%, transparent 50%, crimson 50%, beige 62.5%, transparent 62.5%, transparent 75%, beige 75%, beige 87.5%, transparent 87.5%), linear-gradient(to bottom, beige 12.5%, transparent 12.5%, transparent 25%, beige 25%, beige 37.5%, transparent 37.5%, transparent 50%, beige 50%, beige 62.5%, transparent 62.5%, transparent 75%, beige 75%, beige 87.5%, transparent 87.5%);
background-size: 8px 1px, 8px 1px, 1px 1em, 1px 1em;
background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
background-position: 0px 0px, 0px 29px, 0px 2px, 100% 2px;
width: 200px;
}
/* Just for demo */
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
input{
vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type='text' value='gggyyyXXX' class='original' />
<input type='text' value='gggyyyXXX' class='test-fixedheight' />
<input type='text' value='gggyyyXXX' class='test-fixedheight-transparent' />
This approach is tested in Chrome, Firefox, Opera and IE11. Because gradients is supported in IE10, it should work fine there also but would not work with any of the lower versions as they don't support gradients.
Here's a solution for Webkit and Firefox:
(This won't work in IE - because it doesn't support outline-offset)
1) Remove the height
2) Use outline instead of border
3) Add a negative outline-offset
4) Add padding to fine tune the offset
FIDDLE
input {
overflow: visible;
font-size: 30px;
outline: 1px dashed black;
border: 0;
outline-offset: -8px;
padding: 6px 0 2px 8px;
}
<input type='text' value='gggyyyXXX' />
To make it short: No this is not possible!
The only thing what you could do is to create a javascript/html/css replacement for an input. But this would be an overhead.
To get an idea:
set the input to visibility hidden
position a DIV with the "input styling" under the input
let a javascript check if the user does a keypress while focusing the input an copy the input value to the div
More of a workaround really, but why not absolutely position an input with no border over the top?
body {
position:relative;
}
input {
border: 1px dashed black;
overflow: visible;
height: 28px;
font-size: 30px;
}
input.noborder {
border:1px transparent solid;
height:34px;
position:absolute;
left:0;
background:transparent;
}
<input type='text' value=''/>
<input class="noborder" type='text' value='gggyyyXXX'/>
Solution 1
Use Contenteditable
const editorElement = document.getElementById("editor");
editorElement.addEventListener("input", function(event) {
console.log("value: ", editorElement.innerText );
}, false);
<div contenteditable="true" id="editor">Please type something in here</div>
Solution 2
Use negative Margins on top and Bottom To prevent the text from overflowing the input:
input {
display: block;
margin-top: -5px;
margin-bottom: -25px;
height: 30px;
}
<div>Content before</div>
<input type="text" value="input Value"/><br>
<div>Content after</div>
i doubt it can be done like this. input uses size attribute for this. so manipulate size, using code. for eg. in php;
<input type="text" name="nm" size = "<?php if(strlen($text)<=10)echo 10;
else echo strlen($text); ?>" >
I want to create the same linear gradient for each border.
The border gradient with 5 colors starts from
transparent to white to black to white to transparent
That way I have transparent corners.
How can I do this for all 4 borders?
Is it possible to assign a linear-gradient to a border?
Sidenote: It should run without too much effort on IE9+ else IE10+ :P
How about using a radial gradient? Although this is just a mock up, you can see the basic effect.
.outer {
vertical-align:top;
display:inline-block;
height: 100px;
width: 100px;
position: relative;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(90%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.inner {
height: 90%;
width: 90%;
position: absolute;
left: 5%;
top: 5%;
background: white;
}
<div class="outer">
<div class="inner">
text
</div>
</div>
<div class="outer" style="height:100px; width:200px">
<div class="inner">
text
</div>
</div>
Resources
1 * gradient generator
Note
Not suitable for projects for <=IE9
You could also do this with multiple linear-gradients as backgrounds and position them as required like in the below snippet.
To change the size/width of the border, modify the 20px value in the background-size. (Note: Depending on the desired output, you may have to change the linear-gradient percentages also when you change the size. But that should be reasonably straight-forward to do.)
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
Gradients on the whole have no support in IE 9 but should work in IE 10+. Border-image on the other hand works only from IE 11 upwards.
.border-image {
height: 200px;
width: 200px;
background: -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background: -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background: linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px;
padding: 20px;
}
<div class="border-image">Some Test Content</div>
I have this code which creates a line of triangles. It's quite nice, but I want it inverse. Instead the edges to be up, to be down. I tried like for 30 minutes to make it work... I just don't get the linear-gradient.
Here is the current output
And I want it to be like this:
Here is the code:
background-image: linear-gradient(45deg, #E4E1D6 25%, transparent 25%,transparent),
linear-gradient(-45deg, #E4E1D6 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #E4E1D6 75%),
linear-gradient(-45deg, transparent 75%, #E4E1D6 75%);
width: 100%;
background-position: 0px 7px;
position: relative;
top: -47px;
height: 7px;
background-size: 10px 12px;
Thanks for help.
Simply change background-position: 0px 7px to background-position: 0 0
div {
background: linear-gradient(45deg, #E4E1D6 25%, transparent 25%,transparent),
linear-gradient(-45deg, #E4E1D6 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #E4E1D6 75%),
linear-gradient(-45deg, transparent 75%, #E4E1D6 75%);
width: 100%;
background-position: 0 0;
position: relative;
height: 7px;
background-size: 10px 12px;
}
<div></div>