Does anyone know of a way to create horizontal rules within a <textarea> without using a background image?
CSS3 would be fine. I can bodge an image fallback for IE if necessary.
Example:
You can do this using linear gradients:
.notes {
background-attachment: local;
background-image:
linear-gradient(to right, white 10px, transparent 10px),
linear-gradient(to left, white 10px, transparent 10px),
repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
line-height: 31px;
padding: 8px 10px;
}
<textarea class="notes"></textarea>
JSFiddle Version
.notes {
background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-size: 100% 100%, 100% 100%, 100% 31px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
line-height: 31px;
font-family: Arial, Helvetica, Sans-serif;
padding: 8px;
}
.notes:focus {
outline: none;
}
body {
background-color: #eee;
}
<textarea class="notes"></textarea>
I think that may be a background image. Look up on CSS background or background-image property then assign it the textarea in question.
I think using an image is the right solution.
Fallback: transparent background on the textarea, background-image on a wrapper DIV.
Short answer, it's not possible to format text inside a textarea.
If this is really important I'd suggest using <div contenteditable="true"></div> which allows you to style the text (but it's open to potential abuse from pasted HTML), and then parse our innerHTML to a hidden input field upon submitting your form.
Universal solution
Create two divs with the same styling.
First div is a "mirror" div with color: transparent; position: absolute.
Second div is contenteditable="true", with injected span elements.
Add any border-bottom and padding-bottom
Live Demo
CodeSandbox editor (using Vue, but easy to port to anything else)
Note: Please be careful with contenteditable and make sure you secured it from XSS attacks.
Related
I'm looking to create a yellow div with wide left and right borders. Towards the outside edges of the div, the left and right borders taper in colour down to white to simulate transparency.
So far I've been able to construct the div, but not the gradient:
.fade {
margin: 2em 2em; padding-top: 2em; padding-bottom: 2em;
background: rgb(242,242,194);
border-right: 3em black solid;
border-left: 3em black solid;
border-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 242, 194) 100%);
{
<div class="fade">Text</div>
What happens can be seen above: the linear gradient correctly overrides the black to make a yellow border, but there's no fade to white that I'm looking for. There's no gradient at all, in fact.
The final product should look like this:
Where am I going wrong?
If you aren't familiar with gradients and you don't want to mess with them you should use Colorzilla gradient tool: http://www.colorzilla.com/gradient-editor/
.fade {
margin: 2em 2em; padding-top: 2em; padding-bottom: 2em;
background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 5%, rgb(242, 242, 194) 95%, white 100%);
}
<div class="fade">Text</div>
Maybe something like this can be useful?
I will explain what I did.
I deleted every attribute that contains border and I only used background.
background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 5%, rgb(242, 242, 194) 95%, white 100%);
This gradient has 4 steps:
The first step tells that the gradient has to start in white.
The second step (5% of the width of the element) tells that the gradient follows yellow.
Until third step (95% of the width of the element).
Then, in fourth step it ends with white again.
Note that this percentages are for the width because you have rotated the gradient 90 degrees, with 0 or 360 you will affect the height part of the gradient.
A last detail, you will need some padding inside the div to make the text looks exactly like your photo.
div {
background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 8%, rgb(242, 242, 194) 92%, white 100%);
padding: 15px;
margin: 30px;
}
p {
padding-left: 50px;
}
<div><p>Text</p></div>
I am tried to do something in CSS, but I failed miserably.This is what I got so far:
#stripes {
height:90vh;
background-image: linear-gradient(-45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
background-size:4px 4px;
}
<div id="stripes"></div>
As you can see, the "black-white-ratio" is always the same. So you got a 1px stripe, then a 1px gap, 1px stripe, 1px gap,...But what I am trying to achieve, is that there are like 5px space between the stripes.I tried changing the percentages, but that doesn't result in what I try to do either.I'm sure this is possible somehow. Does anyone know how? Thanks for your help!
Something like this using repeating-linear-gradient
#stripes {
height: 100vh;
background: repeating-linear-gradient( -45deg, transparent, transparent 5px, /* gap */
black 6px, /* overall width incluing gap */
black 6px);
}
* {
margin: 0;
padding: 0;
}
<div id="stripes"></div>
I've a problem removing a (border) color from a overlapping linear gradient. In IE 11 it workes as expected. In Firefox there is a small visible grey line between the gradients. How can I remove this?
I tried it this way:
.box2 {
background-image: -webkit-linear-gradient(154deg, red 67%, transparent 33%), -webkit-linear-gradient(26deg, transparent 67%, red 33%);
background-image: -moz-linear-gradient(154deg, red 67%, transparent 33%), -moz-linear-gradient(26deg, transparent 67%, red 33%);
background-image: -ms-linear-gradient(154deg, red 67%, transparent 33%), -ms-linear-gradient(26deg, transparent 67%, red 33%);
background-image: -o-linear-gradient(154deg, red 67%, transparent 33%), -o-linear-gradient(26deg, transparent 67%, red 33%);
background-image: linear-gradient(154deg, red 67%, transparent 33%), linear-gradient(26deg, transparent 67%, red 33%);
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 80% 100%;
height: 100px;
width: 100%;
border: 0;
}
Here's a fiddle:
https://jsfiddle.net/aam6roaf/
I can see the very same issue in Firefox v45.0.2 or Windows 10. While I have no idea why that line is appearing, it goes away when I set the color-stop points like in the below snippet. Setting color stops like in the below snippet also has the advantage of producing smoother angled gradients.
This works well in Firefox v45.0.2, Chrome(v51.0.2704.19 dev-m), Opera v36, IE11 and Edge.
.box2 {
background-image: linear-gradient(154deg, red 67%, transparent 67.25%), linear-gradient(26deg, transparent 67%, red 67.25%);
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 80% 100%;
height: 100px;
width: 100%;
border: 0;
}
<div class="box2"></div>
What I am trying to do is I want to keep the top 50% of the html button to have a gradient say from #FFF to #BBB and the bottom 50% should remain in one color lets say #111. I can't figure out a way to do it, any help would be largely appreciated.
The code of my button is:
<button class="Button1" type="submit">Submit</button>
The css:
.Button1 {
background-image: linear-gradient(to bottom, #fff 0%, #bbb 50%, #111 50%);
}
This should do the trick in latest browsers. It's up to you to make it cross-browser compatible. (I personally like the Photoshop-esque interface of http://www.colorzilla.com/gradient-editor/)
Here is a sample from Bootstrap that should help you out with button gradients. This also covers most modern browsers.
.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
Hope that helps.(these are sort of teal, so you'll have to change that part)
Does anyone know of a way to create horizontal rules within a <textarea> without using a background image?
CSS3 would be fine. I can bodge an image fallback for IE if necessary.
Example:
You can do this using linear gradients:
.notes {
background-attachment: local;
background-image:
linear-gradient(to right, white 10px, transparent 10px),
linear-gradient(to left, white 10px, transparent 10px),
repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
line-height: 31px;
padding: 8px 10px;
}
<textarea class="notes"></textarea>
JSFiddle Version
.notes {
background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-size: 100% 100%, 100% 100%, 100% 31px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
line-height: 31px;
font-family: Arial, Helvetica, Sans-serif;
padding: 8px;
}
.notes:focus {
outline: none;
}
body {
background-color: #eee;
}
<textarea class="notes"></textarea>
I think that may be a background image. Look up on CSS background or background-image property then assign it the textarea in question.
I think using an image is the right solution.
Fallback: transparent background on the textarea, background-image on a wrapper DIV.
Short answer, it's not possible to format text inside a textarea.
If this is really important I'd suggest using <div contenteditable="true"></div> which allows you to style the text (but it's open to potential abuse from pasted HTML), and then parse our innerHTML to a hidden input field upon submitting your form.
Universal solution
Create two divs with the same styling.
First div is a "mirror" div with color: transparent; position: absolute.
Second div is contenteditable="true", with injected span elements.
Add any border-bottom and padding-bottom
Live Demo
CodeSandbox editor (using Vue, but easy to port to anything else)
Note: Please be careful with contenteditable and make sure you secured it from XSS attacks.