I'm currently coding a design mockup into HTMl and I'm trying to figure out the best way to achieve this look responsively. As you see, there's a purple line that stems from the hero CTA button in the bottom right corner. How would I go about changing the line color when it enters the new section; purple to white?
I thought about making two separate lines, but It's difficult to always have them line up right. I wonder if there's some sort of masking trick?
I added a red circle to show the interlacing I'm having issues with.
Screenshot
Related
Regarding color contrast:
In this example, do I need to be careful of the blue background even though there is no copy directly on top of it? I.e. do I only need to be concerned with background color when there is copy on top of it, and I could hide the element with the background color from screen readers without causing an issue?
And in this one, do I need to be careful of the contrast between the light blue background and the button or am I only concerned with the contrast between the copy and the button? (I know the image is blurry. It's just an example.)
Both examples are fine as they are.
There are two things that are applicable here.
The first is contrast between text and the background for that text - you must have a contrast ratio of 4.5:1 for normal text and 3:1 for large text / bold text to be WCAG AA compliant. In the first example it is essentially black on white so it will pass easily.
The second is for controls. Buttons, inputs etc. should have a contrast ratio with their background of 3:1 minimum, no matter what state they are in (so if your above button turned white with black text on hover it probably wouldn't pass). In your second example your button is black on light blue so it certainly passes this also.
Also worth noting is that text within controls (your button) has the same 4.5:1 contrast requirement. Yet again white on black passes easily so you are fine.
Just check the contrast (almost certainly fine) on the red button with white text, reds and oranges can be deceiving in their contrast ratios (but as it is quite a dark red I am 99% sure you are fine just by looking at it).
For clarity your blue background in the first one could be 1% darker than the white box and it would be fine as it is not an interactive control that it surrounds.
I've tried every option in the Pathfinder tool. No luck there. I have a red bar overtop an icon that has a circle as a background. I'd like to remove the sections of the red bar that overlap the circle. The objects are on the same layer, and I'm selecting the circle and the red bar before I click on the various Pathfinder options.
Any suggestions as to what mistake I'm making? Thanks.enter image description here
Answer noted above:
I figured it out. "Minus Back" in Pathfinder works. The reason I didn't see it when I first chose Minus Back is that I assumed ALL the overlapping sections would be deleted automatically. Minus Back just cuts them into new objects. You have to select them and delete them. Another reason I didn't see the result of the action is that I wasn't zoomed in close enough to notice that MB had cut new paths. It pays to be zoomed in at the overlap when you're using Pathfinder.
I am trying to create HTML Table and give some cells a special border,
you can see the example here - I marked it with Arrow..
Please help me to understand how can I create such border , without using images.
I read this topic, but I could not be able to transfer it to table element or do it as the border of it..
Customizing border properties using zigzag edges
Thanks,
Gabi.
The answer is to use an image as a background to the cell. The image contains the curve and the image could be white and grey, or transparent and grey depending on your use case.
Always try to see what could be there instead of what you think is there
i am trying to create the following image using css.... so far i've got this after googling a bit http://jsfiddle.net/w9Zgc/ and i want to make the following shape..
is there any way this can be done... any help would be appreciated.. oh and i would like the shadow to be like the one here... http://jsfiddle.net/w9Zgc/
So I managed to create an icon that renders more or less the same in all current browsers. I had to use an extra useless span, unfortunately.
http://codepen.io/myajouri/full/nJDzl
The triangle is made of two parts:
the upper (triangular) part is a transformed (skewed and rotated) square with rounded corners.
the bottom of the triangle is the bottom part of a rectangle with rounded corners.
Both parts are cut and joint at certain places to form the triangular shape with rounded corners and shadows.
In an image like this, I want to remove the white background but keep the grayness of the dropshadow. Reomving mapping the actual image is not a problem!
This is what I enden up doing instead after lots and lots of trial and error.
Duplicate the layer with the paper in it.
Invert the new layer.
Painting the "paper-part" clear white
Using the inverted layer as a mask on the first layer.
Worked like a charm, perfect masking!
Two options that I can think of:
a) Edit the image in photoshop and make the background transparent.
b) Overlay the "white" background w/ a div overlay that has a white background.
a is the preferred option. Post a comment on this reply if you need me to do this for you.
did you make that image? Why not make the image on a transparent background?
But if you didn't make the image, I don't know if you really can unless you plan on putting it on another whitish background because the dropshadow itself is going to be a little transparent and whatever is underneath it will show through.