Angular JavaScript exercise -directives 7/8


#1

Click here for the link to the exercise

Can anyone clarify the CSS used here:

.card {
   background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   display: inline-block;
   overflow: hidden;
   position: relative;
   width:25%;
   margin:0;
   min-height: 800px;
   height: 100%;
   border-right:1px solid #efefef ;
}

.card:last-child {
   border: 0;
}

What are background: -webkit-linear-gradient(), background: -ms-linear-gradient() and background: linear-gradient().? When and why we use these?

Also

.main button.btn-downloaded {
 background-color: #ababab ;
 color: #3f3f3f ;
}

There is no class as .btn-downloaded in any HTML file. What is the purpose of it?


#2

linear gradient allows to have a gradient color (starting at color x on the left, and ending at color y at the right), you can even specify the steps in which this gradient should occur and more

Why we use it? It looks cool i guess. the -webkit and -ms are browser prefixes, these property's are so new, they need the browser prefixes to work in the different browser, but if you look here you will see that they are no longer required, but this development is going so quickly, codecademy takes a while to update there courses.

maybe you will add a btn-downloaded later? I haven't progressed so far in angular, so i am afraid someone else will have to answer this question for you


#3

@stetim94 Thanks a lot! I will now have a look on your link.


#4

i should have looked more closely at your code, in case your use color gradient (i provide a link to color gradient in my previous answer) to go from 0 o-capacity to 1 o-capacity, you know what o-capacity is? It is the transparency. 0 is completely see through, 1 is completely solid


#5

No, I did not know 0 capacity. Now I know! Thanks for letting me know.


#6

in the gradient, you use rgba, which is short for: Red Green Blue Alpha.

red green and blue indicate how much red/gree/blue should be in the color, 0 is none and 255 is max. and the a for alpha is the o-capacity, which goes from 0 till 1.

It also seems, your gradient runs from top to bottom rather then left to right.

You're welcome :slight_smile: