Is there a way to write a CSS transition that would fade in an input text element while the user is typing?
Currently, text can fade in within a normal HTML text element because we can tell it to transition from 0 to 1 opacity; but input text doesn't exist before a user types it in.
So for example, if I type in my username, the letters that I type fade in, each one going from 0 to 1 opacity in .3 seconds.
I've tried using transition and animation, but want to keep it within CSS.
A possible way to achieve a similar effect: create a partially transparent overlay using linear-gradient and gradually reveal as you type by moving the mask position.
<div id='container'>
<input type='text'></input>
<div class='fader'></div>
</div>
$("input").on("keydown", function(e) {
var width = $("input").val().length + 1;
$(".fader").css("left", (width * 8) + 3);
});
#container {
position: relative;
height: 25px;
width: 400px;
}
input {
width: 100%;
}
input, .fader {
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
font-family: monospace;
}
.fader {
top: 2px;
bottom: 4px;
pointer-events: none;
background: linear-gradient(90deg, transparent 0px, white, 15px, white 100%);
transition: left 1s ease;
}
Here's what it looks like as a fiddle:
http://jsfiddle.net/go7trwzx/1/
I don't believe there is any way to do this with an HTML input element, and certainly not without Javascript. Any solution would require you to create individual elements for each letter, then apply transitions to each element individually.
If you'd like a visual of what that would look like, check out the "type" example and accompanying source code here:
http://codyhouse.co/demo/animated-headlines/index.html
Related
I cannot figure out why this breaks it. I have an a element which uses CSS transitions to fade into a gradient background on hover. For whatever reason whenever I set the text color on hover to white the transition breaks?
.social-item {
margin-left: 0.25vw;
padding: 0.1vw;
transition: 0.2s;
color: white;
}
.social-item:hover {
background: linear-gradient(to left, #8E2DE2, #DC0486);
color: white;
}
<i class="fab fa-keybase"></i> Keybase
I'm also using Bulma and Font Awesome.
You can't simply make transitions with background gradients.
Animatable CSS Properties
Use pseudo-element and do an opacity transform.
.social-item {
position: relative;
color: white;
z-index: 1;
}
.social-item::before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to left, #8e2de2, #dc0486);
z-index: -1;
transition: opacity 0.5s linear;
opacity: 0;
}
.social-item:hover::before {
opacity: 1;
}
<i class="fab fa-keybase"></i> Keybase
A nice article about this.
Thank you!
What I figured your problem to be is that you're trying to do gradient transition. It is not supported. But if you want to simulate it, you can use the opacity property in css. Add opacity: 0 to the main element (.social-item) and opacity: 1 to the hover state (.social-events:hover). Hence the transition: 0.2 will apply on the opacity, as it is supported, thus simulating the desired outcome.
Thus the final css, shall be.
.social-item {
margin-left: 0.25vw;
padding: 0.1vw;
transition: 0.2s;
color: white;
opacity:0;
}
.social-item:hover {
background: linear-gradient(to left, #8E2DE2, #DC0486);
color: white;
opacity: 1;
}
If you actually want to have the thing display normally, and not just on hover, then opacity: 0 wont work for you. You have to use the pseudo-selector :after to add a dummy element to the main class and work all the transitions and background gradient stuff on that. Here is a codepen example.
I have a requirement of displaying multiple images in cards and I want to write some text over them. These are random images uploaded by users, so can be of any color. Need the white text on top of them to not be transparent as shown in attached fiddle.
This is an example fiddle - http://jsfiddle.net/7dgpbLd8/1/
This was my solution to add some gray div over image. But, the text should be always white on a gray background. But it is also shadowed here. It would be great to know how to shadow the actual background so text is readable.
Either follow Lee's advice (though I'd recommend adding some padding) or use text-shadow, like so.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
color: white;
text-shadow: 0 1px black;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
<div class="dark">Some text</div>
<div class="light">Some text</div>
Or you can ever merge our two approaches.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
span {
color: white;
text-shadow: 0 1px black;
background: #333;
background: rgba(0, 0, 0, 0.18);
padding: 4px 8px;
}
<div class="dark"><span>Some text</span></div>
<div class="light"><span>Some text</span></div>
The problem with your post is that you set the opacity. However, when you lower the opacity, not only does the background change, but also all its content. In other words, the text also has a lower opacity in your fiddle. In my fiddle, presented above, you do not have this problem because you use rgba. RGBA uses the default RGB color representation, but adds an alpha layer component to that (i.e.: opacity). This means that you can add a color that is (semi-)transparent.
It works in the same way as opacity, simply add the value you want for the color (let's say 0.8), and add it after the default rgb values. An example: RGB for white is 255,255,255 and for black 0,0,0. If you want those to have an opacity of 0.8, add 0.8 at the back: rgba(255,255,255,0.8) or rgba(0,0,0,0.8) respectively. By doing this, only the opacity of the background will change, and not that of the text. For an example, see the examples above.
I would put the image(s) in a div with a dark background, then lower the opacity of the images themselves, darkening the images so you can read the text. This way you can also darken the image on hover for better readability.
http://jsfiddle.net/3w34k1ea/
.img-wrapper{
width: 100%;
height: 100%;
background: #000;
}
img {
width: 100%
height: 100%;
opacity: .5;
}
img:hover{
opacity: .3;
}
p {
color: white;
position: absolute;
top: 15px;
left: 15px;
font-size: 20px;
}
I would use text shadow in your position but insteed of one I would experiment with multiples shaodws till reaching the best solution. For example:
text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px rgba(0,0,0,1);
FIDDLE
The easiest way and best result at the same time is simply using a semi-transparent overlay, e.g.: https://jsfiddle.net/zmpwunr7
<div class="box">
<div class="overlay top">
text
</div>
<img ... />
</div>
.box {
position: relative;
}
.box .overlay {
background-color: rgba(0, 0, 0, 0.50);
color: rgb(255, 255, 255);
position: absolute;
}
.box .overlay.top {
top: 0px;
}
Put the text inside a <span> tag and give it a class, then in your CSS file:
span.your-class {
background:rgba(255,255,255,0.5);
padding:1em; // Adds a nice comfortable spacer between the text and the div edge
}
This will put the text inside a semi-transparent box ontop of the image.
Experiment with your text colour, and the background colour until you're happy.
Here's an example: http://jsfiddle.net/9svp8qoh/
There are some answers here that will help you make the text more readable. But they do not darken the background images which is what you asked for. You could achieve this by using css filters, e.g. the brightness filter:
img {
filter: brightness(20%);
}
A value of 0 means a completely black image, a higher value will bring you a brighter result. Example: http://codepen.io/anon/pen/OPqRJK
Attention: only Firefox supports at the moment the unprefixed version, IE has no filter support. See http://caniuse.com/#feat=css-filters
If you need to support these browser, have a look at the answer from BenSlight. It's basically the same solution.
For further reading: there's a nice article on css-tricks.com explaining all possibilities we have with css filters: https://css-tricks.com/almanac/properties/f/filter/
I had this scenario once. I compromised creating span with opacity 0.5 and giving dark background, and then placing the text. If I understood you question correctly this could be a solution for you.
You can add opacity only to background:
rgba(255,0,0,0.5)
Check this post
you can use background property of css where in you can give color and image path
eg :-
background:#FFFFFF url("image path");
This will add background color to image.
I just created a hover for my menu, but I have a problem with the "span".
I cant't set the width for 100%, so that I will see the all text from the button.
I know that it is possible to set the width rigidly but it should be inherit from the text width.
Can anyone help me with that?
Thanks.
jsfiddle.net/35ufuzw4/
I think you've made this a bit more complex than it needs to be. Here's an updated version of your fiddle:
DEMO
HTML:
Home
About
CSS:
* {
box-sizing: border-box;
}
.navi {
float: left;
text-decoration: none;
position: relative;
color: #000;
font-size: 14px;
padding: 0 20px;
line-height: 40px;
}
.navi:hover {
color: #582d1d;
}
.navi:before {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-color: #000;
-webkit-transition: all 0.4s cubic-bezier(0.05, 0.06, 0.05, 0.95);
transition: all 0.4s cubic-bezier(0.05, 0.06, 0.05, 0.95);
}
.navi:hover:before {
top: 0;
}
Here's how it works:
Instead of using lots of extraneous markup, we keep things semantic using a pseudo element. The ::before pseudo element has position set to absolute, so when its top/left/right/bottom properties are all set to 0, it will be fill the space of the .navi element that has its position set to relative. Setting its top position to 100%, means that we're going to move the top all the way to the bottom. This allows you to set the top to 0 on hover and have the background-color appear to grow from the bottom up.
The .navi class itself is applied to an anchor tag, so since anchor tags are inline, we can float this element and give it some padding left and right. Using line-height, you can control how tall the element is and ensure that the text inside it is vertically aligned in the center. Add a hover pseudo class and you can change its color when the background 'grows' up behind it.
I've searched everywhere for many weeks but I can't find an answer for my problem.
Is it possible to have an image inside a regular triangle?
I've seen many ways to create a shape or a mask, but I need a real triangle because I need to have several triangles next to each other, with some of them aligned upside-dwn, like in this= image:
http://www.tiikoni.com/tis/view/?id=d49c960
I've used color to divide the two types of triangle, but all of them have images instead colors.
I've tried using skewX, skewY and rotate, I have a sufficient result but it's not perfect:
<div class='pageTri2'>
<a href='#' class='option2'>
<img src='image.jpg'>
</a>
</div>
<style>
.pageTri2 {
overflow: hidden;
position: relative;
margin: 40px auto;
width: 250px; height: 250px;
display: inline-block;
}
.option2, .option2 img { width: 100%; height: 100%; }
.option2 {
overflow: hidden;
position: absolute;
transform: skewX(-25deg) skewY(45deg);
transform-origin: 50% 50% 0;
}
.option2:first-child {
transform-origin: 100% 0;
}
.option2:last-child {
transform-origin: 0 100%;
}
.option2 img { opacity: .75; transition: .5s; }
.option2 img:hover { opacity: 1; }
.option2 img, .option2:after {
transform: skewX(-20deg) skewY(-20deg) rotate(-50deg);
transform-origin: 0 100% 0;
}
.option2:first-child:after { top: 0; left: 0; }
.option2:last-child:after { right: 0; bottom: 0; }
</style>
Is it possible to have a perfect result?
Or maybe I'm thinking in the wrong direction?
Thanks
Ale
EDIT: I've done it!! Thanks to #Spudley for address me to SVG and thanks to #o.v. for the suggestion to use jsfiddle.
Here's my code: http://jsfiddle.net/wkJKA/
In all seriousness, having seen your mock-up image of what you're trying to achieve, I'd say drop the idea of doing it in CSS.
Stuff like this is much better done using SVG rather than CSS. CSS simply wasn't designed for creating complex shape patterns. It can do it, but it gets messy quickly, and for something like the effect you're after, you'll end up needing some extra HTML markup. SVG is designed for exactly this kind of thing, and does it well.
The only downside is lack of support for SVG in old IE versions, but there are work-arounds for this. (and in any case, old-IE support clearly isn't a priority for you, given that you're already using transform and other CSS that doesn't work with old IE)
use transparent png or simply do triangles with css. Here is a link to css shapes http://www.css3shapes.com
You could rely on specifics of border rendering to achieve a triangle-looking shape. The shape could then be added with pseudoelements.
.pointy:before {
border:50px solid transparent;
border-bottom:86px solid green;
border-top:0px solid transparent;/*renders looking like a triangle with 100px sides*/
width:0;
height:0;
display:inline-block;
content:"";
margin:0 -75px -5px 0; /*for a 50x50 icon*/
}
Fiddled
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 6 years ago.
I am using something similar to the following code:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
I expected this to make the background have an opacity of 0.4 and the text to have 100% opacity. Instead they both have an opacity of 0.4.
Children inherit opacity. It'd be weird and inconvenient if they didn't.
You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color.
Example, 50% faded black background:
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
You can use pseudo-elements ::before or ::after to get a semi-transparent background and you can do this with just one container. Use something like this:
<article>
Text.
</article>
Then apply some CSS:
article {
position: relative;
z-index: 1;
}
article::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .4;
z-index: -1;
background: url(path/to/your/image);
}
Example:
body {
background: red;
}
article {
position: relative;
z-index: 1;
}
article:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
opacity: .4;
z-index: -1;
background: url(https://31.media.tumblr.com/8ec07e49f33088c2e32c158ca4262eb2/tumblr_n5wav6Tz4R1st5lhmo1_1280.jpg);
}
<article>
Text.
</article>
Note: You might need to adjust the z-index values.
The following methods can be used to solve your problem:
CSS alpha transparency method (doesn't work in Internet Explorer 8):
#div{background-color:rgba(255,0,0,0.5);}
Use a transparent PNG image according to your choice as background.
Use the following CSS code snippet to create a cross-browser alpha-transparent background. Here is an example with #000000 # 0.4% opacity
.div {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
zoom: 1;
}
.div:nth-child(n) {
filter: none;
}
For more details regarding this technique, see this, which has an online CSS generator.
I would do something like this
<div class="container">
<div class="text">
<p>text yay!</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.container::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('/path/to/image.png');
opacity: .4;
content: "";
z-index: -1;
}
It should work. This is assuming you are required to have a semi-transparent image BTW, and not a color (which you should just use rgba for). Also assumed is that you can't just alter the opacity of the image beforehand in Photoshop.
You can use Sass' transparentize.
I found it to be the most useful and plain to use.
transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)
See more: #transparentize($color, $amount) ⇒ Sass::Script::Value::Color
.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
This is because the inner div has 100% of the opacity of the div it is nested in (which has 40% opacity).
In order to circumvent it, there are a few things you could do.
You could create two separate divs like so:
<div id="background"></div>
<div id="bContent"></div>
Set your desired CSS opacity and other properties for the background and use the z-index property (z-index) to style and position the bContent div. With this you can place the div overtope of the background div without having it's opacity mucked with.
Another option is to RGBa. This will allow you to nest your divs and still achieve div specific opacity.
The last option is to simply make a semi transparent .png image of the color you want in your desired image editor of choice, set the background-image property to the URL of the image and then you won't have to worry about mucking about with the CSS and losing the capability and organization of a nested div structure.
Just make sure to put width and height for the foreground the same with the background, or try to have top, bottom, left and right properties.
<style>
.foreground, .background {
position: absolute;
}
.foreground {
z-index: 1;
}
.background {
background-image: url(your/image/here.jpg);
opacity: 0.4;
}
</style>
<div class="foreground"></div>
<div class="background"></div>