Richard Richard - 28 days ago 8
CSS Question

CSS Text Colour

I have some text that I rotate and fade in. My problem is the text has no colour, and I would like to make it blue.

As you can see, I do assign a

color
attribute to the
rubber
class, but it does not seem to be taking effect.

Please can anyone advise how I can change my css to achieve this? Thank you



.rubber {
padding: 5px 2px;
color: blue;
font-family: 'Black Ops One', cursive;
text-transform: uppercase;
text-align: center;
width: 155px;
transform: rotate(-10deg);
}
// fade-in
.fade-in p {
margin-top: 25px;
text-align: center;
animation: fadein 8s;
-moz-animation: fadein 8s;
/* Firefox */
-webkit-animation: fadein 8s;
/* Safari and Chrome */
-o-animation: fadein 8s;
/* Opera */
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
@-moz-keyframes fadein {
/* Firefox */
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
@-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
@-o-keyframes fadein {
/* Opera */
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}

<div class="rubber fade-in">
<p>Job Offered</p>
</div>




Answer

Please replace // fade-in with /* fade-in */ . In css to add comment line you should use /* comment here */

Here is the working code

.rubber {
  padding: 5px 2px;
  color: blue;
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
  text-align: center;
  width: 155px;
  transform: rotate(-10deg);
}
/* fade in */
.fade-in  p{
    margin-top: 25px;
    text-align: center;
    animation: fadein 8s;
    -moz-animation: fadein 8s; /* Firefox */
    -webkit-animation: fadein 8s; /* Safari and Chrome */
    -o-animation: fadein 8s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
<div class="rubber fade-in"><p>Job Offered</p></div>