Is there any possible way or workaround that I can fade an element from 100% to 0% opacity top to bottom? Similar to a linear gradient background, but transparency on the element itself (not the background color).
The idea is that on the hover state, it would brighten up, and when clicked, move up to the spot of the active popup
There are alot of online css generators why don't you use that.
Here is a help link for you, go there and generate your desired Gradient.
http://www.colorzilla.com/gradient-editor/
ok, I see two different types of transparency, the first one is a alpha css just like that:
div {
opacity: 0.5;
filter: alpha(opacity=50);
}
this style made transparent the entired div (Custom sharing dialogue) and the other css that creates a linear gradient style on the button of the page:
#bottom_fade { z-index: 99;
position: fixed;
bottom: 0%;
background-image: url("bottom-fade.png");
/*in your case use a grey image with transparency*/
}
or you can use a div that covers all the button of your pages and add a linear-gradient:
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow);
/* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */
}
hopefully this snippets helps you, regards.
Related
Is there similar property to -webkit-box-reflect for the mozilla and other browsers? I could not find on google which other browsers have support for this. So if someone can tell me or give me link, that would be really nice.
This is possible with not only webkit (latest chrome or safari) but also in latest firefox.
Here is the example: http://codepen.io/jonathan/pen/pgioE
HTML:
<div id="someid">
<img src="image url" />
<div/>
CSS (webkit):
#someid {
/* need some space for the reflection */
margin-bottom: 120px;
/* the gradient makes the reflection fade out */
-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
}
CSS (Firefox - Gecko):
#someid {
position: relative;
/* need some space for the reflection */
margin-bottom: 120px;
}
#someid:before {
content:""; /* needed or nothing will be shown */
background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, -moz-element(#someid) 0px -127px no-repeat;
-moz-transform: scaleY(-1); /* flip the image vertically */
position:relative;
height:140px;
width: 360px; /* should be > image width + margin + shadow */
top: 247px;
left:0px;
}
Firefox uses -moz-element to do the reflections (https://developer.mozilla.org/en-US/docs/CSS/element), whereas webkit uses a proprietary vendor prefix for reflections.
I hope this helps!
The -webkit-box-reflect property is only supported by webkit browsers, namely Chrome and Safari. As it is a proprietary webkit property, there is no equivalent for other browsers.
The alternative would be to use javascript to create a mirror element with faded opacity.
I am trying to make the background a linear gradient. I have tried
nav {
background: -webkit-linear-gradient(black, gray, black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(black, gray, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(black, gray, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(black, gray, black); /* Standard syntax */
}
but it looks very choppy... Does anyone know any fixes to that off the top of their head? No need to go out of the way to look it up, though!
With the help of KyleT, I was able to use colorzilla.com in order to get code for a premade gradient, which is the website I recommend for anyone with the same question! Also, I used jsfiddle.com to test the gradient, and now I know about the basics of stackoverflow.com!
I am trying to code a button where, on hovering, will produce an ease-in-out effect. I used the following code:
#quotebutton {
padding:20px;
margin-top:-55px;
/* fallback/image non-cover color */
background-color: #000;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#333));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #000, #333);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #000, #333);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #000, #333);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #000, #333);
font-size:18px;
color:#fff;
float:right;
transition: background 300ms ease-in-out;
-webkit-transition: background 300ms ease-in-out;
-moz-transition: background 300ms ease-in-out;
}
#quotebutton:hover {
/* fallback image non-cover color */
background-color: #000;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #333, #000);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #333, #000);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #333, #000);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #333, #000);
}
#quotebutton a {
text-decoration:none;
color:#fff;
}
The HTML is as below:
<div id="quotebutton">
Download Now
</div>
But the button is not showing the effect on hovering. What might be the problem?
Unfortunately, the short answer is that you can't animate background gradients with CSS3 transitions. There are a few ways that you can accomplish the same goal using alternative techniques:
Use jQuery to animate a transition between two different background images on hover. You can accomplish this most easily by stacking three elements on top of each other using absolute positioning, where the bottom two are the background images and the top contains the content, which in this case is your button text. On hover, fade out the top background image to reveal the bottom one smoothly. See this tutorial for making a background animation on hover with jQuery.
Use a semitransparent gradient background in conjunction with a webkit transition to create a partial animation. CSS3 transitions can easily animate the background-color CSS attribute, which is only visible through nonexistent or transparent background images or gradients. See this example for an idea of how you might implement this.
Of the two options, (1) is more flexible but more work and requires a companion script, while (2) is less flexible and less cross-browser compatible.
Like Ryan mentioned, you cannot animate background gradients.
Although, there are jQuery plugins that help you accomplish that.
Try jQuery Blend
Another idea I have, is to apply a linear transparent gradient image on top of a solid color.
You can then animate the solid color with transition. The transparent gradient image on the top will make it look like a gradient animation.
Hope it helps.
Cheers.
When I hover unto my button, it gives a white flash first when starting the transition. Why does it sort of flickers when I apply a css3 transition to my button? My browser is Google Chrome
See here
<button>Log In</button>
CSS:
button {
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
border:1px solid #890000;
display:block;
margin:0 auto;
width:200px;
padding:5px 0;
border-radius:8px;
color:#fff;
font-weight:700;
text-shadow:0 1px 1px #000+50;
box-shadow:0 2px 3px #000+150;
-webkit-transition:background linear .5s;
}
button:hover {
background:#ff3019;
}
button:active {
background:#cf0404;
}
I got rid of the flickering. Add «-webkit-backface-visibility: hidden;» to the elements you are transitioning. Voilà!
Miguel is right about backface-visiblity fixing the annoying flash. However, I'm using transform scale and the SVG animated will not be sharp after scaling. It is sharp if you don't use the backface-visiblity property.
So either you got a nice animation with a blurry graphic, or a nice looking graphic with screen flashes.
You can however add the following line to the parent of the object to be transitioned, which will fix the flashing of the screen and still renders your graphic sharp after scaling.
-webkit-transform: translate3D(0, 0, 0);
I believe it is currently an issue without a fix. I too have run into this before playing around and could not get it to work. Using a solid color seems to be fine, or faking it with a background image.
Similar Question here: Webkit support for gradient transitions
More detail: http://screenflicker.com/mike/code/transition-gradient/
The flicker you're noticing is actually the button's background color being changed to transparent (so, the button "flashes" or turns white in your Fiddle because the body's background-color is white).
If you overlay your button on top of another element with the exact same size/height/background-color (including gradients), the "flicker" won't be noticeable.
Check here for an example using your fiddle: http://jsfiddle.net/hrDff/12/
Still definitely a bug tho...
I think the issue is that you are switching from a linear-gradient background to a solid background color for Google Chrome and Microsoft Edge web browsers. To fix this issue you would add a similar linear-gradient background to your pseudo classes, in this case the :hover and the :active. I tried it myself on your jsfiddle and I had no flashing in the rendering while hovering over the button.
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
I changed the top color of the linear-gradient to give a noticeable change to the hover effect.
button:hover {
background: -webkit-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
}
There are no more issues with flashing when I hover over the button in Chrome or Microsoft Edge. I hope this helps.
With a similar issue, Jan's suggestions helped improve for all background images but one. I got rid of the flickering of the last one by noticing two conflicting positioning rules. I had for a position:static one rule margin-top:-3em (minus) and the other one margin-top:5em (plus). Thus, I suggest you carefully check the consistency of the positioning when you experience such an issue.
In your case Michelle, I've been testing with a longer delay 1s to 3s, which helped me understand what is that clearer stage, a flash with a very short delay. Your gradient starts with no background in fact and what you see is the background of the page. I got this information by changing the background of the body of my test page from ivory to black.
When I tried your gradient on a black background I got a black stage/flash (easier to see at 3s).
Perhaps it should be wise to test the order of your rules, and also try to understand why the gradient starts from the background of the body or parent and not from your background.
A workaround could be to set your button in a div with your button red background at the exact size and shape of your button.
I solved the blinking like this:
Html as follows:
<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>
css as follows:
.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}
This link fixed it for me. You just have to add a line to the css of the element that's flickering:
http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit
I would like a div to have a transparent background.
I tried to do this using background-color and opacity, but the problem is that the border and the text inside become also transparent. Example here.
Is this possible to achieve this without using transparent PNG background image ?
If you just want the color of the background to be transparent and not the child content, use
background-color: rgba(0,0,0,.5); // Sets to 50% transparent
See this page for more details - it's a css3 spec so won't show up in every browser:
http://www.css3.info/introduction-opacity-rgba/
Yes.
Set
background-color: transparent;
and do not use opacity, as that is what makes semi-transparent the whole div..
updated your example at http://jsfiddle.net/eU7By/1/
UPDATE after comments
you can use rgba for the background-color as #DHuntrods mentions. IE needs some tweaking of'course.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/
The most cross-browser solution is to use the opacity property on an additional "absolutely positioned" child element (in a relatively or absolutely positioned parent): it only there to contain the colored transparent background.
Then you can use the opacity property to make this element transparent. Since this element has no children, the opacity will not affect any other element.
Opacity is an IE5+ property, just use (see http://css-tricks.com/snippets/css/cross-browser-opacity/):
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
see the jsFiddle example http://jsfiddle.net/DUjzX/1/
The whole code looks like:
The HTML:
<div class="my-cool-wrapper">
<div class="text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
<div class="transparent-background">
</div>
</div>
The CSS:
.my-cool-wrapper {
position: relative;
}
.my-cool-wrapper .text-and-images-on-top {
padding: 10px 15px 19px 15px;
z-index: 1;
position: relative; /* needed to enable the z-index */
}
.my-cool-wrapper .transparent-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /* IE 8 */
filter: alpha(opacity=10); /* IE 5-7 */
-moz-opacity: 0.1; /* Netscape */
-khtml-opacity: 0.1; /* Safari 1.x */
opacity: 0.1; /* Good browsers */
background-color: blue;
}
read more:
Set opacity of background image without affecting child elements
Screenshots proofs
ps: I did not add the screenshots for Chrome, Firefox & Safari since these are much "better" browsers... trust me, it works for them too.
I had to use a 30x30 transparent gif as a background.
background:url('absolute path here');
A very simple CSS method to have a clear transparent background in html is this code.
background: rgba(0, 0, 0, 0.6)!important;