I'm trying to draw a textarea with alternate rows and line numbers.
A very simple solution to have line numbers is the following - see here for more details.
textarea {
background: url(http://i.imgur.com/2cOaJ.png);
background-attachment: local;
background-repeat: no-repeat;
padding-left: 35px;
padding-top: 10px;
border-color: #ccc;
}
<textarea rows="10" cols="40"></textarea>
While to have a textarea with alternate rows is just a simple as
textarea {
background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
background-size: 100% 4rem;
border: 1px solid #CCC;
width: 100%;
height: 400px;
line-height: 2rem;
margin: 0 auto;
padding: 4px 8px;
}
<textarea rows="10" cols="40"></textarea>
Both solutions works ok, but combining them it's tricky since both makes use of the background to hack the line numbers and the alternate rows background.
You could combine them by wrapping your textarea in a div then assign the stripped background styles to that wrapping div, so the 2 backgrounds are like layered.
textarea {
background: url(http://i.imgur.com/2cOaJ.png);
background-attachment: local;
background-repeat: no-repeat;
padding-left: 35px;
padding-top: 10px;
border-color: #ccc;
font-size: 13px;
line-height: 16px;
}
.textarea-wrapper {
display: inline-block;
background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
background-size: 100% 32px;
background-position: left 10px;
}
<div class="textarea-wrapper">
<textarea rows="10" cols="40"></textarea>
</div>
The wrapping div I set to display: inline-block so it wraps the textarea like an inline element and I positioned the background gradient 10px from the top to account for you padding-top.
You may have to play with the background size of the gradient to get it to properly match the line-height of the textarea.
UPDATE
To #DavidThomas's point, to help line up your text with the alternating gradient the background-size height value should be 2 times the line-height of the textarea (see updated snippet). But the harder thing is to make it line up with the image numbers.
You could use multiple backgrounds for the same element.
CSS allows you to add multiple background images for an element, through the background-image property.
In you case:
textarea {
width: 100%;
min-height: 100px;
background: url(http://i.imgur.com/2cOaJ.png) top -12px left / auto no-repeat,
linear-gradient(#F1F1F1 50%, #F9F9F9 50%) top left / 100% 32px;
border: 1px solid #CCC;
box-sizing: border-box;
padding: 0 0 0 30px;
resize: vertical;
line-height: 16px;
font-size: 13px;
}
body {
margin: 0;
}
<textarea rows="10" cols="40"></textarea>
Related
Sorry for my poor english.
How to implement this? It is necessary to smoothly appear and disappear when pointing. I tried, but it turns out quite differently. it is necessary that it is not just filled in with a rectangle, but that it is rounded. also, so that when passing "input" and "submit", he also painted them over. everything is as in the picture
(
.feedback {
display:flex;
padding: 40px;
background: linear-gradient(to right,
#000 50%, #FA5C45 50%);
background-size: 200% 100%;
background-position: 100%;
transition:all 2s ease;
}
.title__block {
width: 50%;
}
form {
display: flex;
flex-direction: column;
}
.input {
margin-bottom: 20px;
}
.feedback:hover {
background-position: 0 100%;
}
h3 {
color: #fff;
}
<div class="feedback">
<div class="title__block">
<h3> Оставьте заявку</h3>
</div>
<div class="form__block">
<form>
<input type="name" class="input">
<input type="phone" class="input">
<input type="submit" class="submit">
</form>
</div>
</div>
it took me a while but i hope it will work for you :)
I changed it from linear-gradient to radial-gradient, the reason is because you can't get rounded shape with a linear-gradient.
Then I resized it a little bit so it looks almost the same as you showed us the screenshots, changed the background size to go off the screen , i tried to use % but it didn't work so instead of that i used viewport for both width and height.After that i changed the position so it goes out from the viewport range and on your :hover function just changed back the position so it fills up your div.
If you find the animation too slow, its because i put too big numbers into the viewport sizes, therefore if you want it to be faster, just change the transition value in your .feedback div to a smaller value.
https://codepen.io/qnecro/pen/PomdVLr
.feedback {
display:flex;
padding: 40px;
background: radial-gradient(ellipse,
#000 40%, #FA5C45 40%);
background-size: 500vw 300vh;
background-position: -392vw 50%;
transition:all 2s ease;
}
.title__block {
width: 50%;
}
form {
display: flex;
flex-direction: column;
}
.input {
margin-bottom: 20px;
}
.feedback:hover {
background-position: -288vw 50%;
}
h3 {
color: #fff;
}
But be AWARE!
I made an Ellipse, so now it looks like this when you look at it from far away and you don't trigger your :hover function:
So when your :hover function triggers, you move the black Ellipse to the right side as the blue arrow shows you in your :hover function, you end up with this:
But if you change your viewport value to too big, it can end up looking like this:
Your div on the left side will be no longer covered by the black ellipse.
For you issue better away use pseudo-element like extra layer. And for input tags to set background: transparent.
.feedback {
display: flex;
padding: 40px;
background-color: #fa5c45;
position: relative;
overflow: hidden;
}
.feedback::after {
content: '';
position: absolute;
height: 300px;
width: calc(100% + 300px);
top: 50%;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
border-radius: 0 300px 300px 0 / 0 250px 250px 0;
transform: translate(-110%, -50%);
transition: all 2s ease;
z-index: 1;
}
.feedback:hover::after {
transform: translate(0%, -50%);
}
.title__block {
width: 50%;
position: relative;
z-index: 5;
}
form {
display: flex;
flex-direction: column;
position: relative;
z-index: 5;
}
.input {
margin-bottom: 20px;
background: transparent;
border: none;
}
.input[type='name'],
.input[type='phone'] {
width: 100%;
padding: 8px 0;
color: white;
border-bottom: 1px solid white;
}
::placeholder {
color: white;
}
.feedback:hover {
background-position: 0 100%;
}
h3 {
color: #fff;
}
<div class="feedback">
<div class="title__block">
<h3>Оставьте заявку</h3>
</div>
<div class="form__block">
<form>
<input type="name" class="input" placeholder="Имя" />
<input type="phone" class="input" placeholder="Телефон" />
<input type="submit" class="submit" />
</form>
</div>
</div>
$("#whoami").waypoint(function() {
console.log('you have scrolled to the h1!');
});
.d8{
border: 1px solid black;
width: 100%;
height: 2.5rem;
margin-left: 5rem;
border-radius: 1rem;
background: linear-gradient(to right, #e74c3c 85%, #FFF 50%);
}
<div class="d8"></div>
Now I have been trying to fill the color in the div when the waypoint reaches the particular section having some nice animation effect for the user and I am not able to achieve it though,
Have tried transition effect and keyframe none seems to work, any help would be very much appreciated.
In you case you can animate background-size instead of background-image (that you cannot animate) and make the linear-gradient to be one color as the white part will be the part without background:
.d8 {
border: 1px solid black;
width: 80%;
height: 2.5rem;
margin-left: 5rem;
border-radius: 1rem;
background-image: linear-gradient(to right, #e74c3c, #e74c3c);
background-size: 80% 100%;
background-repeat: no-repeat;
transition: 0.5s;
}
.d8:hover {
background-size: 100% 100%;
}
<div class="d8"></div>
I'm trying to make a transparent glass-like box, something similar to what is shown in this image:
I don't know whats wrong with my CSS because it looks like a white box (with low opacity) shown, basically it doesn't have the look or feel as shown in the picture. I was wondering if anyone knows how to achieve something like this?
My CSS (I tried a couple of things like blur or opacity but neither one yields the result I want):
.body-bg-color{
background: #00467F;
background: -webkit-linear-gradient(to right, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
}
div.glass-bg-color::before {
z-index: -1;
content: ' ';
width: 100%;
height: 100%;
position: absolute;
// filter: blur(4px);
// box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
opacity: 0.3;
background-color: rgba(255,255,255, 1);
}
.glass-bg-color {
color: white;
position: relative;
}
<div class="body-bg-color">
<div class="glass-bg-color">
Foo
</div>
<div class="glass-bg-color">
Bar
</div>
<div class="glass-bg-color">
Baz
</div>
</div>
The example you've shown uses a radial gradient as the background of the underlying element, and transparent white for the "glass" effect. For example I've created an elliptical background gradient ( by modifying an example on MDN) placed as a transparent image on top of a solid background of the body.
The glass effect is now just a transparent white background on a container element. I've used an inline-block for demonstration:
body {
margin: 0px;
width: 100vw;
height;: 100vh;
background-color: #00467F;
background-image:
radial-gradient(ellipse farthest-corner at 80vw 15vh ,
rgba( 250, 240, 128, 0.5) 5%, rgba( 250,240,128,0) 95%
);
background-attachment:fixed;
}
.glass {
background-color: rgba( 255,255, 255, 0.1); /* transparent white */
color:white;
display:inline-block;
border-radius: 15px;
padding: 10px;
}
<div class="glass"
style="margin-left:50vw; margin-top: 20vh; width: 80px; height: 180px;">
Hello Folks!
</div>
(Note the CSS for the body background can produce unwanted scrollbars if the body margin is non zero. An alternative to zero width body margins may be to create a fixed position background element with a z-index of -1. Previous discussion of the issue may be found at CSS3 gradient background set on body doesn't stretch but instead repeats? which I have already found useful.
The answer is really just applying white with a low opacity on the box backgrounds:
The CSS:
body {
position: relative;
width: 100%;
background: #00467F;
background: -webkit-linear-gradient(left, #A5CC82, #00467F);
background: -moz-linear-gradient(left, #A5CC82, #00467F);
background: -o-linear-gradient(left, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
}
.glass-bg-color {
position: relative;
display: inline-block;
float: left;
margin: 20px;
width: 200px;
height: 200px;
border-radius: 4px;
text-align: center;
background-color: rgba(255,255,255,.08);
color: white;
}
The HTML:
`
<div class="glass-bg-color">
Foo
</div>
<div class="glass-bg-color">
Bar
</div>
<div class="glass-bg-color">
Baz
</div>
`
See the fiddle here: https://jsfiddle.net/4y8bx2eg/
Your current background opacity is set to 1. It should be closer to 0.2. And your spread-radius of the box-shadow is 3000px, which should be set more relative to the size of your elements, I'd also suggest changing the blur-radius a bit, which is currently zero.
Is this more like what you are looking for?
.body-bg-color{
background: #00467F;
background: -webkit-linear-gradient(to right, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
text-align: center;
}
.glass-bg-color {
box-shadow: inset 0 0 50px 10px rgba(255,255,255,0.2);
background-color: rgba(255,255,255, 0.2);
color: white;
position: relative;
display: inline-block;
padding: 10em;
}
I have a button for which I want to slide his background from #000 to #ccc.
My problem is how to do that slide transition of button background on hover or mouseenter.
It is possible to do this with jQuery?
Very important , I don' want to use background images so all suggestions about images ..skip pls.
This is an annoying fiddle created only with css but is working only from top to bottom and not from left to right how I need.
http://jsfiddle.net/xu3ck/166/
Submit Form
.btn {
width: 180px;
text-decoration: none;
height: 40px;
border-radius: 10px;
text-align: center;
color: white;
line-height: 40px;
font-size: 20px;
font-family: arial, sans-serif;
margin: 20px;
float: left;
display: block;
color: white;
box-shadow: rgba(0,0,0,0.3) 1px 1px 3px inset;
}
.two {
background: linear-gradient(#111, #eee);
background-repeat: repeat;
background-size: 100% 200%;
transition: all .5s linear;
}
.two:hover, .two:focus, .two:active {
background-position: 0 -200%;
}
ty.
What the example does is it creates a liniar background on the button which spans 200% of the buttons height. When your mouse goes over the button it moves the background 200% up.
What I changed, is I changed the gradient from "top to bottom" to "left to right". Set the width 200% instead of the height, and on the hover I set the background 200% to the right.
I fixed it in this JsFiddle
What I changed was the following:
background: linear-gradient(#111, #eee);
To
background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background-size: 100% 200%;
To
background-size: 200% 100%;
And
background-position: 0 -200%;
To
background-position: -200% 0;
You can make it work with :before and :after pseudoelements, which are compatible with IE8. No need for jQuery. Just CSS.
See this demo here.
I know with some border tricks, I could create trapezoid shape. I can also set its border-color to rgba(r,g,b,a) to make it transparent.
But is it possible to create trapezoid that has transparent borders and background ?
See below image for an example,
Currently, I use some png images to achieve this effect，but generating images of different sizes is really boring work，so I'm looking for a css soluation。
Personally, I think it's overkill, but it can be done like this:
demo
HTML:
<div class='outer'>
<div class='content'><!--stuff here--></div>
<div class='label l1'></div>
<div class='label l2'></div>
</div>
CSS:
.outer {
position: relative;
width: 500px; /* whole thing breaks if this is not a multiple of 100px */
border: solid .5em rgba(0,0,255,.5);
border-bottom: solid 0px transparent;
margin: 7em auto 0;
background: rgba(0,0,0,.5);
background-clip: padding-box;
}
.outer:before, .outer:after {
position: absolute;
top: 100%;
height: .5em;
background: rgba(0,0,255,.5);
content: ''
}
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; }
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; }
.content {
padding: .5em;
margin: 1.5em;
border-bottom: solid 1.5em transparent;
background: lightblue;
background-clip: padding-box;
}
.label {
overflow: hidden;
position: absolute;
top: 100%;
width: 15%;
height: 3em;
}
.l1 { left: 15%; }
.l2 { left: 30%; }
.label:before {
position: absolute;
top: -.5em;
width: 100%;
height: 2.5em;
border: solid .5em rgba(0,0,255,.5);
background: rgba(0,0,0,.5);
background-clip: padding-box;
content: '';
}
.l1:before { left: 9%; transform: skewX(30deg); }
.l2:before { right: 9%; transform: skewX(-30deg); }
It works in Firefox, Chrome, Opera and Safari (I was afraid to test it in IE9, though both transform and background-clip work) but only if the width for .outer has a value that's a multiple of 100px.
Unless using a width that's a multiple of 100px, it only works in Firefox and Chrome (there is a little glitch in Chrome - could be fixed by using a WebKit-only left to right linear gradient that sharply goes from transparent to that semitransparent blue really close to the start).
It breaks in Opera and Safari (if using a width that is not a multiple of 100px):
You can make the bg color and border colors transparent, but the borders will not follow the shape of the trapezoid:
http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/1/
So your best bet is to stick with the pngs for now.