color opacity is not matching even tho value is same.
in figma and css the values are same but in browser it is showing totally different
for better understanding i have attached half cut image of pc and first image that shows micro is figma design.
blue : rgba(48, 122, 193, 0.2)
green : rgba(181, 191, 161, 0.2)
57 Replies
when i apply those colors to .wb which is before state of cards they get the color right but when i apply it .wb:hover then it shows lighter color
you do know it is absolutely impossible to know what's going on without actually seeing the site, right?
but, i bet you have a
filter: brightness(0.7) somewhereno i don't think so
let me setup the codepen for this
it's actually impossible to be certain without seeing
here's the codepen for this
As far as I can tell you are seeing this difference because you have given the elements a pseudo element with a background color of semi-transparent white
rgba(255, 255, 255, 0.2); This initally has an opacity of 0 but transitions to 1 on hover.
This pseudo element is covering your main background colors (which are also have a transition from "none" to the defined color on hover) which is giving them this toned down effect that you are seeing.any solution on that ?
remove
.wb::before?don't add the psuedo element - why do you need it?
from what i read in the code, all it does is to be on top of everything
and since it has 0.2 opacity on the white background, it will make things whiter/washed out
just simply remove it
as a side note, not relevant to the issue, "//" is not a valid way to comment out code in CSS
left image: pseudo-element is there
right image: pseudo-element is disabled
this is supposed to be sass code
OK 👍
but you are right
in css, it is invalid but is valid sass
this was copy-paste from sass
i did not know
can you tell me how can i do it proper way
css itself only supports
/* ... */and that can be on single or multiple lines to cover a code block
oh i see
but what you have is absolutely perfectly fine in sass
In CodePen you can also use sass, you just need to select it from the "settings" icon (cog wheel) in the CSS pane.
guys you seen the animation of those cards, i don't quite like it and it's not what i had thought. do you guys have any better animation which looks classy ?
"animation" and "classy" are opposites, in my opinion
haha how ?
this is the rough idea what i'm expecting the animation to be or the way this cards should behave
2 nd is to show how they will hide on each other
also this is for smaller screen like 750px
My first suggestion would be to not try to animate so many elements, at least not at the same time.
For example, in your case I would only animate the size width of the cards.
Also, you are currently expanding the width of the child element within the <a> elements. As far as I can tell you don't really need this extra element, you could apply the .wb styles to the <a> element itself and reduce the markup. You would then be able to make better use of the .cards "flex" property to expand the children.
how this will work on smaller screen
i mean text get closer and increases height of card
i just don't want it to be messy
just more squashed as you haven't added any code or given any indications as to how you would expect it to work on smaller screens.
I personally would be tempted to stack them into a single column (I would also use Grid rather than flex but that is another matter)
so you mean i should replace .wb to a
I just did this to remove the extra element:
i can use grid but i had never used so it will be something else for me
you removed .wb div and gave class of wb to a ?
am i right ?
yes
less markup (where possible) is always a good thing
there's a problem i can't remember why i created wb div and can't even remember where i used it.
you could possibly reduce the amount of child elements too but I don't know if you plan to do things with them
can i make a codepen of full website ? including html and css if you don't mind can you take a look at it if i'm doing anything wrong ?
Based on the designs that you posted a few minutes ago, I would probably reduce each card contents to something like this:
this is how it is the complete code of one card
exactly, unless you are actually doing something with all of those divs and elements you really don't need them (based on your design).
The code that I posted before should be enough to achive the same result.
this is how it looks in mobile
chris let me know what do you think
https://codepen.io/kev00690/pen/BaXgqrd
As you say, you have issues with your "animations" on the cards block.
I say "animations" as there really isn't any animation as such, they are just jumping between states.
As I mentioned earlier, I would look at reducing the amount of elements that you are attempting to animate, just the background color and the width (on wider screens would be enough.
For example, rather than trying to increase the padding and positioning of the elements within each card, you could give the cards an initial padding and, assuming that you want them to align with the rest of the contents, give them a subtle background color to define the blocks.
Something like this
This is the link to the CodePen in case you want to see how I did this.
Note - There are things in there that I might possibly do differently but I wanted to base it on your existing code where possible.
differently ?
this is already very arranged and minimal
you are right, I probably modified it more than I should have 😆
i can definitely use this insted of long css
by the way, I forgot to mentione, I used SVGs for the arrows as I didn't have the paths to your original images.
But the same code should work for your images (obviously changing the selector)
why isn't this text is fully out i'm scratching my head
trying to understand
yes yes i will past my arrow svg code over there if it's too confusing for me
Is that from my version? There was a max-width set on that element - I have removed it now from my pen
ahh it's column
yes from your pen
yes 20vh
i removed it
and it is working
so i don't need
.line and .year now ?actually I have just updated my pen to put the line and year back in as an actual element (rather than the pseudo element that I had for the year) to make it a little clearer. I now have the line as a pseudo element as it is purely decorative.
chris i'm facing one issue
as mobile device doesn't have hover feature so how can i manage this css code ? which part i should use for mobile and which part of css i should put under 700px media query
I don't really see why that is an issue???
The only thing hover dependant on smaller screens is the background color of the cards. As, as you say, mobile devices don't have "hover", if you want the cards to show your background colors either you give them that color directly (ie on load) or you add to an "active" class (but as they are links you will only see the color for a few of miliseconds)
On larger screens you also have the box resizing and the arrow appearing but that will only be needed on desktop so shouldn't be an issue.
oh my mistake i understood later
haha sorry to disturb you
i put the code on it's place
how can i make that line to baseline
i replaced svg tag with
<img src="arrow.svg" alt=""> this but it's not showing when i hover and i changed .wb h2 svg to img
oops again
it's done