With most modern browsers is easy to create rounded corners in CSS, so I was wondering if its posible to create a rounded corner that bend outwards or if I still need to fire up PhotoShop for creating such an effect.
The bottom foot in "See tab" from the picture below demonstrates what I am trying to do with CSS:
note: I am unsure if foot is the correct word for this (which have made googling it hard) so if anyone knows the real (or better) term then please let me know and I will update the question accordingly.
Chop that problem up into segments so that the illustration would have a blue shape with one rounded corner on top of a white background, next to the "See" tab, and so on. By picking the colors carefully, and using shapes that you know you can generate, you can establish a pattern that will work with the tools available.
Notice that you do not have to round all corners on a rectangle. You can specify, for example, bottom right.
Reference: http://www.css3.info/preview/rounded-border/
Related
I am new to Illustrator. I watched some videos about image tracing to make vectors and it worked for me so far until today. If i try to make simple colours and shapes into vectors it is brilliant. Today though i have an image that uses 3 colours and a pattern. The colours i use are black, orange and dark grey. I have a pattern of thick grey lines covering 50% of the image. I played with the tracing settings for hours but it just refuses to keep the lines straight. It makes the lines rounded. Check out the first image versus the second one.
[1] https://ibb.co/eoEVYa
[2] https://ibb.co/nOu8KF
Image Trace is a great tool, but it's not perfect. Adjusting the settings may improve it but it won't be perfect. If possible depending on the design, especially one as simple as the example images you've included here you should use another method. To recreate the lines there maybe:
create a line at the angle you want (Pen or Line tool),
duplicate that line and move it above the first,
align the two,
use the blend tool to add as many copies between the two as needed,
expand them,
make a background to fill the negative space and move behind the lines,
create a rectangle shape with no fill and position above the others,
shape build the excess areas away
Example
Notice the blue sidebar has a grain effect added to it.
How to I achieve this without using an image?
You can create a textured image with only a few colours to achieve a grain effect. As a GIF or similar, it will only amount to a few hundred bytes if you do it right. That is, make a small image and tile it.
If you want to find out how a specific site achieved that effect, use a DOM inspector to check the code behind the element. Chrome has this functionality built-in if you right click and choose "Inspect Element". I bet you'll find there's a background image.
I am trying to make a 3d transition/transformation so that when a link is click a bar run the length of my website rotates to reveal different options. However it currently looks very untidy, in that each face of the cube has gaps around it, and you can see each face of the cube, regardless of whether it not view (i.e when it is animating you can see text you should be able to see, it also gives the impression that bar grows in width when animating.
Is there anyway I can tidy this up?
I have made a fiddle which can be found here
I’m not sure about the gaps, but applying -webkit-backface-visibility: hidden to .face should sort out the visible text issue.
There‘s a good cube example at the end of this blog post which might help with the gaps — maybe you need to use translateX to get the faces into the right position?
Even though I've read alistapart - slidingdoors, I'm stuck.
Here's what I want to do:
The problem, you may have guessed, is in the middle.
Here's how I've "cut" into divs the tab (I'm sorry it's ugly but it's faster to explain this way) (a green square = a div):
Even though it's not IE6-7 compatible (many thanks Microsoft), here's what it gives under Firefox, Chrome and Opera:
Now I want to finish the borders left, and right, and finish with round corners on the bottom (like the first picture). Have you any idea how I should do (and keep in mind that I'm planning to give the work to another person whose task will be to make my work compatible with IE 6 and 7)? I'm stuck.
[EDIT] After hours of searching, and thanks to the help of "Gaby aka G. Petrioli" (many many thanks), I've managed to do almost all want I wanted.
Here's what I get:
And here's what I'd like to get:
If you have any idea...
You can do that with css and a single image for the right side of the tab.
Have a look at this demo http://jsfiddle.net/uwUwK/3/ and add a background-image to the red element (the one with class .tab-separator)
If you could do with a different right side of the tab (less elongated), you do not need an image at all, demo at http://jsfiddle.net/uwUwK/4/
if it should be compatibel to IE 6 and 7 the only way would be to use images.
Either as one big background image (which only works, if the height and width is noct dynamic) or use a set of images (divs with background-image and repeat for borders) for each border and corner.
which could work too (i found it with a short google search) is http://css3pie.com/
But depending on the methods they use, it coul affect the performance on ie heavily.
btw. if you use pure css3, you have border-radius and even border-image to do such things.
( http://www.css3.info/preview/border-image/ )
At work i am given a task to create a simple menu UI that resembels the Ribbon UI. It doesn't have to be that sophisticated or nice looking, but it needs to have a specific look that I don't know how to do.
I need to make the bottom of a selected tab round, but facing outwards, just like in Office. It was easy to make the top of a selected tab round using CSS3 (border-top-left-radius:4px and same for right), which is supported in all modern browsers (we don't need round corners on old browsers. They can easily upgrade if they want to :) ). But if I use border-bottom-left-radius:4px on a selected tab, it has the normal round bottom corner, facing inwards, not outwards (sorry for my bad english).
Can it be achieved somehow using CSS3?
If I understand correctly, than this is what you want: http://jsfiddle.net/U84ng/
This is faking a little, and gets more complex when your background is an image instead of solid color. But unless it's an image that changes horizontally (ie. not a gradient or pattern) and your tabs aren't flexible in width (depending on text width, rather than one fixed in css) it can be done.