and apologies if this has been addressed before. I learned a bit about fading in gradients via opacity transitions, but I'm having trouble fading them out.
I have a div that is a link, and my goal is to have a gradient fade in when the mouse is over it, and then fade back out when the mouse leaves the area.
Here is a link to a jsfiddle with the relevant CSS: http://jsfiddle.net/94KEZ/
This is the div itself (opacity set to 0):
nav .nav-right {
position: absolute;
right: 0;
top: 0;
width: 8%;
min-width: 110px;
height: 100%;
z-index: 8020;
cursor: pointer;
opacity: 0;
transition: opacity 2.75s;
-moz-transition: opacity 2.75s;
-webkit-transition: opacity 2.75s;
-o-transition: opacity 2.75s;
}
Here is the CSS for the hover (seems to be working ok…)
nav .nav-right:hover {
opacity: 1;
background: -moz-linear-gradient(left, rgba(255,242,0,0) 0%, rgba(255,252,0,0) 80%, rgba(255,255,0,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,242,0,0)), color-stop(80%,rgba(255,252,0,0)), color-stop(100%,rgba(255,255,0,0.8))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fff200', endColorstr='#ccffff00',GradientType=1 ); /* IE6-9 */
transition: opacity 5.75s;
-moz-transition: opacity 5.75s;
-webkit-transition: opacity 5.75s;
-o-transition: opacity 5.75s;
}
I have also tried this, but it didn't seem to work:
nav .nav-right:link {
opacity: 0;
transition: opacity 2.75s;
-moz-transition: opacity 2.75s;
-webkit-transition: opacity 2.75s;
-o-transition: opacity 2.75s;
}
Is there something I'm missing here? Or is it not possible to transition a gradient's opacity out like this?
As always, thank you for any help and advice you can offer. I am also open to suggestions of a better way to achieve this.
Yes, it is posible to transition the opacity.
But to do so, the background must be constant; that is, it must be set in the base state:
CSS
nav .nav-right {
position: absolute;
right: 0;
top: 0;
width: 50%;
min-width: 110px;
height: 100%;
z-index: 8020;
cursor: pointer;
opacity: 0;
transition: opacity 2.75s;
-moz-transition: opacity 2.75s;
-webkit-transition: opacity 2.75s;
-o-transition: opacity 2.75s;
background: -moz-linear-gradient(left, rgba(255,242,0,0) 0%, rgba(255,252,0,0) 80%, rgba(255,255,0,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,242,0,0)), color-stop(80%,rgba(255,252,0,0)), color-stop(100%,rgba(255,255,0,0.8))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fff200', endColorstr='#ccffff00',GradientType=1 ); /* IE6-9 */
}
nav .nav-right:link {
opacity: 0;
transition: opacity 2.75s;
-moz-transition: opacity 2.75s;
-webkit-transition: opacity 2.75s;
-o-transition: opacity 2.75s;
}
nav .nav-right:hover {
opacity: 1;
transition: opacity 2.75s;
-moz-transition: opacity 2.75s;
-webkit-transition: opacity 2.75s;
-o-transition: opacity 2.75s;
}
updated demo
Related
I was looking to customize the active color for md-tab.
The classes in chrome dev console shows ==> -mat-tab-label mat-ripple mat-tab-label-active. But none has any border bottom. There was a chevron class which i tried to change, but no effect.
I tried /deep/ with almost all classes. Dint work.
Also checked md-tab-header, but nowhere am seeing even that color! Any help would be appreciated :)
Try to it's work for me
::ng-deep .mat-ink-bar {
background-color:#ee2925 !important;}
It's worked for me in Angular 6
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: #1f29a2;
}
Works in Angular 7
.mat-tab-group.mat-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: #2C702A;
}
To customize the active underline, modify this class
mat-ink-bar{ background-color:#fff; }
In your component, set ViewEncapsulation to None and add the styles in your component.css file.
Changes in Typescript code:
import {Component, ViewEncapsulation} from '#angular/core';
#Component({
....
encapsulation: ViewEncapsulation.None
})
Component CSS:
/* Styles for tab labels */
.mat-tab-label {
min-width: 25px !important;
padding: 5px;
background-color: transparent;
color: red;
font-weight: 700;
}
/* Styles for the active tab label */
.mat-tab-label.mat-tab-label-active {
min-width: 25px !important;
padding: 5px;
background-color: transparent;
color: red;
font-weight: 700;
}
/* Styles for the ink bar */
.mat-ink-bar {
background-color: green;
}
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
background: black;
}
This works with Angular 10.
This solution is tested and works fine in Angular 10 -
.tabs .mat-tab-label.mat-tab-label-active {
background-color: #5e70db;
opacity: 1 !important;
}
.tabs .mat-ink-bar {
background-color: #3f51b5 !important;
}
any of those solutions didn't work for me but i did a general solution without use the encapsulation.none
/* Styles for tab labels */
::ng-deep .mat-tab-label {
min-width: 25px !important;
padding: 5px;
background-color: transparent;
color: red;
font-weight: 700;
}
/* Styles for the active tab label */
::ng-deep .mat-tab-label.mat-tab-label-active {
min-width: 25px !important;
padding: 5px;
background-color: transparent;
color: red;
font-weight: 700;
}
/* Styles for the ink bar */
::ng-deep .mat-ink-bar {
background-color: green;
}
using ::ng-deep you are telling to css inside material being overrite, then you can customice it
Hello guys im having a hard time configuring out what is the missing part of my css, because the animation in hover out is not the same in hover in, here is the fiddle link thank you.
[https://jsfiddle.net/m2Lz4euv/][1]
You need to apply the timing properties in the not-hover selectors.
jsFiddle
What I've done is changing this:
.hamburger-wrap span:first-of-type {
top: 0;
}
.hamburger-wrap:hover span:first-of-type{
top: 12px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
transition-property: top, transform;
transition-duration: .3s, .3s;
transition-delay: 0s, .1s;
}
To this:
.hamburger-wrap span:first-of-type {
top: 0;
transition-property: top, transform;
transition-duration: .3s, .3s;
transition-delay: 0s, .1s;
}
.hamburger-wrap:hover span:first-of-type{
top: 12px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
}
If you want different timing for the in- and out state you can set the in-timing in the :hover selector and the out-timing in the regular selector.
HOVER FIDDLE DEMO
* {
margin: 0;
padding: 0;
}
/* Icon 1 */
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #d3531a;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 18px;
}
#nav-icon1 span:nth-child(3) {
top: 36px;
}
#nav-icon1:hover span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1:hover span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1:hover span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 18px;
}
#nav-icon3 span:nth-child(4) {
top: 36px;
}
#nav-icon3:hover span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3:hover span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3:hover span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3:hover span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
/* Icon 4 */
#nav-icon4 {
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 36px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4:hover span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;
}
#nav-icon4:hover span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4:hover span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 39px;
left: 8px;
}
<div id="nav-icon1">
<span></span>
<span></span>
<span></span>
</div>
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
How to set transition delay on li:after so that it aligns with transition for li:hover? Seems like it doesn't work when transition: all 0.3s; is set, because it appears instantly.
Here is the Fiddle
Maybe if you do something like this, where you first set up the :after and then show it on :hover
body {
background-color: #f01;
}
ul {
background-color: #fff;
}
li {
position: relative;
list-style-type: none;
display: inline;
line-height: 2em;
padding: 5px;
transition: all 1s;
}
li:hover {
background-color: #414C52;
transition: all 1s;
}
li:after {
top: 25px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #414C52;
margin-left: -10px;
transition: all 1s;
border-width: 10px;
opacity: 0;
}
li:hover:after {
opacity: 1;
transition: all 1s;
}
a {
padding: 12px 10px color: #333;
}
<ul class="nav navbar-nav">
<li>asdfasdf</li>
<li class="active">ffffft</li>
</ul>
yes, it should do it but you need an inital li:after before your li:hover:after
I am trying to replicate a green square image in pure css3. You can see the image here:
So far I have managed to generate the square, looking just like the one in the image. The problem is the border of the circle in the square. As you can see, the border of that circle in the image is gradient and mine is not (see fiddle) and I have no idea how to replicate this in CSS...
Here is my fiddle of the square
The CSS code I am currently using:
.greenBlock, .greenCore {
background-color: #00c200;
border: 3px solid;
border-top-color: #00de00;
border-right-color: #006900;
border-bottom-color: #006900;
border-left-color: #00de00;
z-index: 10;
width: 42px;
height: 42px;
}
.greenCore {
width: 22px;
height: 22px;
border-radius: 50%;
-webkit-transform: translate(25%, 25%);
transform: translate(25%, 25%);
}
How can I do this gradient circle border in CSS3?
Thanks a lot
I would use a pseudo-element (:before) and style it with a gradient background.
(that is because border-image cannot be combined with border-radius)
.greenBlock {
background-color: #00c200;
border: 3px solid;
border-top-color: #00de00;
border-right-color: #006900;
border-bottom-color: #006900;
border-left-color: #00de00;
width: 42px;
height: 42px;
position:relative;
z-index:10;
}
.greenCore {
background-color: #00c200;
width: 22px;
height: 22px;
border-radius: 50%;
top:50%;
left:50%;
margin-left:-11px; /*half width*/
margin-top:-11px;
position:relative;
}
.greenCore:before{
content:'';
position:absolute;
z-index:-1;
border-radius:50%;
width:28px; /*22 of greenCore + 3 + 3 for the borders*/
height:28px;
left:-3px;
top:-3px;
background: -moz-linear-gradient(-45deg, #00ff00 0%, #004900 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ff00), color-stop(100%,#004900));
background: -webkit-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: -o-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: -ms-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: linear-gradient(135deg, #00ff00 0%,#004900 100%);
}
<div class="palette greenBlock" data-code="2">
<div class="greenCore"></div>
</div>
One possibility is to make a slightly larger circle with a diagonal gradient background, and place it behind the "core"-circle. This way the larger circle will appear to be a border to the second circle. By modifying your fiddle, I got something like this.
In order to make the gradient I used the linear-gradient function, and assigned it as the background:
background: linear-gradient(135deg, #00de00, #006900);
The first value is the direction of the gradient in degrees. The second two values is the start and end color of the gradient.
Perhaps you can try adding this:
box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
-moz-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
-webkit-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
To your .greenCore class. This may be close. You may want to play with the values to get it closer to your liking.
I have a menu which changes the color from white to brown progressively when the mouse is over. However, when I leave the mouse, the transition begins from white when it should be from brown to white and I don´t know why. When I move the mouse over, the transition is fine. I copy the CSS:
li{
letter-spacing: 2px;
margin-bottom: -10px;
max-width: 280px;
opacity: 0.5;
transition: opacity 1s linear;
}
li:hover{
color: #9b2108;
opacity:1;
transition: opacity 3s linear;
}
Greetings.
Not really sure on how you mean, but have a look at these changes. Is it what you are looking for?
li{
letter-spacing: 2px;
margin-bottom: -10px;
max-width: 280px;
opacity: 0.5;
transition: all 1s linear;
}
li:hover{
color: #9b2108;
opacity:1;
transition: opacity 3s linear, color 3s linear;
}
As you can see, I'm transitioning both opacity and color on hover, and all when you hover out. EDIT: realized that you can actually change the hover transition to all as well.
Or if you want the colorto take an immediate effect on hover you can leave the hover transition as you had it.
Only the li element needs the transition applied to it.
li {
letter-spacing: 2px;
margin: 0 0 -10px;
max-width: 280px;
opacity: 0.5;
transition: opacity 1s linear;
}
li:hover {
color: #9b2108;
opacity: 1;
}