How do I make the 'banner' smaller and change the color?

HTML & CSS
1

https://www.posweyb.net/ I thought I understood what was dictating the height of the banner in which the slideshow is. But I can’t seem to understand what I need to change or how to change the color. I put a horizontal rule in so I can differentiate it from the next section down…I want to make the banner height smaller, closer to the height of the slideshow.

2

Try removing the vertical padding on the banner. :slight_smile:

Do you mean the opacity of the images?

That’s probably controlled by the slideshow Javascript, you’ll see a color flash if you refresh the page.

2 Likes
3

If you mean the opacity that has been placed on the image then that is caused by this keyframe rule in your code.

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration:60s;
  animation-name: fade;
  animation-duration: 60s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 100}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 100}
}

The animation is taking 60 seconds and starts from .4 opacity. As the slideshow changes every 5 seconds or so the element will never become fully opaque. I would suggest reducing the time down to 1second (1s) or whatever suits your eye.:slight_smile:

You don’t need the prefixes for those rules these days either so the code could be reduced to this:

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1s;
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

Note that opacity values range from zero to one (or from 0% to 100%) so the 100 is interpreted as 1 (although I guess a browser could ignore it as an incorrect value but most don’t).

3 Likes
4

Thank you, actually I meant the background color of the whole banner, but I figured that out based on how to change the height. With respect to removing prefixes on the rules. When I ran the css validator, I got tons of warnings with all those prefixes. Does it mean that I can remove all the following prefixes?

-moz-transition: color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;

5

Also, somehow I have lost the opacity on the slides (which I want). I had made the height, color changes and animation fade changes. Thinking that might have affected the overlay, I changed it all back. Nope, it is still gone…any thoughts? Imade no changes to any of the js.

6

Yes prefixes are not valid css but they are often used before the real property becomes fully established in all modern browsers. Originally prefixes were never meant to be used except for testing new properties out but too many people used them anyway and now we are stuck with them. :slight_smile:

You can remove those prefixes as they are well established. You can always check on caniuse and see how well the property is supported and them make your decision whether to include them or not.

The validator will throw an error as they are not valid but there is an option on the validator to suppress warnings for prefixes because they are so common. The danger with leaving prefixes in place is that they bloat the code and are likely never to be removed. There is also the danger that the specs changes during a prefix stage and you end up with a broken version instead of the real version.

Also think of the validator as a tool and even if it throws up an error its up to you to decide whether you can live with that error because you know the cause and effect.

I probably confused you when I misunderstood your requirements. The opacity setting is here.

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

Remember you had set the timing to 60s which means the image transitioned from .4 opacity to fully opaque over 60 seconds. However you were sliding to a new image before that transition had finished resulting in the opacity still being around .5 or so.

If you adjust the 1 down to about .6 (or whatever you need) then it will still have partial opacity.

@keyframes fade {
  from {opacity: .4}
  to {opacity:.6}
}

However that effect will likely be unnoticeable as there is little change from .4 to .6 and thus renders the keyframes redundant. If you just want a constant .4 opacity then remove the keyframes and the animation property values code and set a default opacity.

.fade {
 opacity:0.4;
}

It all depends what you intended :slight_smile:

2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.