I'm trying to style an <a> tag with a gradient background and a gradient border.
I followed a tutorial online and tweaked it with the right colours, however then realised it needs to set the background-image property in order to give the borders a gradient.
.btn-primary {
background-color: blue;
background-image: linear-gradient(to bottom, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%);
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 10% 100%;
border-bottom: 4px solid #f15a24;
border-top: 4px solid #f7931e;
box-sizing: border-box;
margin: 50px auto;
}
Is there a way I can modify the code so that I can specify a different gradient for the background of the button?
you can use border-image for the border, and just use background-image for the background gradient. Just like this:
.btn-primary {
background-color: blue;
background-image: linear-gradient(to bottom, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%);
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 10% 100%;
border-bottom: 4px solid #f15a24;
border-top: 4px solid #f7931e;
box-sizing: border-box;
margin: 50px auto;
border-image: linear-gradient(to left, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%
}
You could probably apply your rule to a pseudo-element :before or :after and then position the pseudo-element over your anchor.
how to add a pseudo-element gradient effect
Hope that helps!
Here is a way to create the illusion of a gradient border using multiple background gradients:
.btn-primary {
display:inline-block;
padding:80px;
background: linear-gradient(to bottom, transparent 0, transparent 30px, blue 30px, white calc(100% - 30px), transparent calc(100% - 30px), transparent 100%), linear-gradient(to left, red 0%, yellow 100%);
background-repeat: no-repeat;
background-position: 30px 0, 0 0;
background-size: calc(100% - 60px), auto;
}
<a class="btn-primary">test</a>
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 working on a rectangular background which is divided into 2 triangles by a line from top left to bottom right, as shown in the pic.
What I want to achieve is color transition in each triangle:
In triangle ABD: pink becomes darker from left to right
In triangle ACD: blue becomes darker from left to right
Note: The width and height are not fixed to 600 and 250. I just use them for demo purpose.
HTML code:
<div class="background-wrapper">
<p class="float-left">A</p>
<p class="float-right">B</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p class="float-left">C</p>
<p class="float-right">D</p>
</div>
CSS code:
.background-wrapper {
position: relative;
width: 600px;
height: 250px;
color: #FFFFFF;
padding: 20px 50px 80px 50px;
background: linear-gradient(to left bottom, pink 50%, blue 50%);
}
.float-left {
float: left;
}
.float-right {
float: right;
}
Demo jsfiddle here
One posibility, that is cross-browser but that gives washed colors, is to overlay the triangles with a semitransparent gradient that is white on one side and black in the other.
This effect gets much better using blend modes, but the support is lower.
.test {
width: 400px;
height: 300px;
background-image: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,0) 40%,
rgba(255,255,255,0) 60%, rgba(255,255,255,.5)),
linear-gradient(to top right, blue 50%, fuchsia 50%);
}
<div class="test"></div>
I modified your code quite a bit from the original. I added two new elements to act as the background. May not be the solution you're looking for but off the top of my head this is what works.
Fiddle
.background-wrapper {
position: relative;
width: 600px;
height: 250px;
color: #FFFFFF;
padding: 20px 50px 80px 50px;
overflow: hidden;
}
.triangle {
position: absolute;
top: -65%;
right: -30%;
width: 125%;
height: 125%;
transform: rotate(26.5deg);
background: linear-gradient(to right, pink, #f44274);
}
.triangle.bottom {
top: initial;
right: initial;
left: -30%;
bottom: -64.8%;
background: linear-gradient(to right, blue, navy);
}
<div class="background-wrapper">
<div class="triangle top"></div>
<div class="triangle bottom"></div>
</div>
You can use more colors after you define the linear-gradient position, so you can do stuff like:
background: linear-gradient(to left bottom, deeppink 0%, pink 50%, blue 50%,midnightblue 100%);
Check your updated fiddle
.background-wrapper {
position: relative;
width: 800px;
height: 450px;
background: #ffffff;
/* Old Browsers */background: -moz-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* FF3.6+ */background: -webkit-gradient(left bottom, right top, color-stop(0%, #ffffff), color-stop(49%, #6176ff), color-stop(50%, #ff80d9), color-stop(100%, #ffffff));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* IE 10+ */background: linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
.float-left {
float: left;
}
.float-right {
float: right;
}
you can specify the angle in the gradient. Try the above code. it works with width and height.
I need to create a dashed line with a linear gradient.
I managed to create a dashed line using <hr /> and the following styling:
line {
border: 0px;
border-bottom: 2px dashed;
}
And I also know that to achieve a gradient I need to do:
background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(black));
Based on the code in your own answer, it looks like you need a line which is a gradient in itself (from blue to green) and also have dashed pattern. This is not possible to achieve with one gradient image because spaces cannot be introduced in the middle of a gradient.
However, you can achieve the same effect without using any extra elements (real/pseudo) by using background-image stacking like in the below snippet:
.line {
margin-top: 50px;
height: 2px;
background: linear-gradient(to right, transparent 50%, #223049 50%), linear-gradient(to right, #00b9ff, #59d941);
background-size: 16px 2px, 100% 2px;
}
body{
background-color: #223049;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="line"></div>
The second gradient in the above snippet is the same as the one in your answer (except the usage of the latest standard cross-browser syntax). The first gradient is the replacement for your hr and it is nothing but a repeating gradient which is transparent for 50% of image's width and the color you need for the other 50%. The background-size of the first gradient image is set as 16px 2px where 16px is the width and 2px is the height. The width of the image determines the width of the dashes. The height (2px) determines the thickness of the line.
Thanks for help I finally got it working myself but embedding a dashed line into a div. The <hr/> has the colour of the element I want the line in, giving the effect of "hiding" part of the line. Here is the code, however if someone has a nice answer I'm curious.
.line {
height: 2px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#00b9ff), to(#59d941));
}
.dashed {
border: 0px;
border-bottom: 2px dashed;
border-color: #223049;
}
<div class="line">
<hr class="dashed"/>
</div>
jsFiddle
Using pseudo-elements you can achieve dashed-border and can customize it also, in any direction(have described for one side in my JSFiddle).
Here's my JSFiddle
HTML
<div class="dashed-border"></div>
CSS
.dashed-border {
position: relative;
border-bottom: 3px dashed #fff;
}
.dashed-border::before {
content:"";
border-top:3px dashed #FFF;
position: absolute;
top:0;
left:6px;
right:0;
width: 100%;
height: 3px;
z-index: 2;
}
.dashed-border:after {
content:"";
position: absolute;
bottom: -3px;
left: -3px;
}
.dashed-border::after {
right: -3px;
height: 3px;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(51%, #207cca), color-stop(100%, #7db9e8));
background-image: -webkit-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -o-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -ms-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* IE10+ */
background-image: linear-gradient(to right, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* W3C */
}
Hope it will work for you.
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); ?>" >
What i am trying to achieve is simple. A client wants this button:
http://i59.tinypic.com/207b56p.png
provided in the design PSDs replicated in html. I have been playing around with different gradients and such and have only been able to achieve this:
background-image: -webkit-gradient(linear, left top, left bottom, from(#FEC1F4), to(#FF2DFF));
background-image: -webkit-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: -moz-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: -ms-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: -o-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: linear-gradient(to bottom, #FEC1F4, #FF2DFF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FEC1F4, endColorstr=#FF2DFF);
which is by far not even close.
Is there a way to make this button with gradients in CSS or not?
If theres not what is the proper way to use images as button backgrounds in HTML? Because not all buttons are the same size and an image background might be distorted in places. (Any best practices?)
You could do it like this:
DEMO
body {
margin: 50px;
}
div {
overflow: hidden;
position: relative;
width: 400px;
height: 50px;
background: -webkit-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: -moz-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: -ms-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: -o-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
}
div:before, div:after {
content:'';
position: absolute;
bottom: 0;
height: 36px;
width: 36px;
margin-left: -36px;
transform-origin: 100% 100%;
transform: rotate(45deg);
background: #FEC1F4;
}
div:before {
left: 0;
}
div:after {
right: 0;
}
<div></div>
*Side note: You may need to change the colors.
Solution without using CSS 3:
Use background-image in order to recreate the 3D effect inside the button.
Use box-shadow in order to create the shadow effect around the button.
Just a quick example how your code would be:
.btn{
width:100px;
height: 50px;
background-image: url('image.png');
background-color: #cccccc;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
If you need to reuse your button with on different size inside your website, you can slice your PSD button in three parts (look image attached), HTML would be something like this.
<div class="btn">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
You can set the widht of .center as percentage and .left and .right with fixed sizes and background images.