i'm working on my personal website and i have an idea. Better it will show as a image.
img
I want to ask how to do the geometry in the header only with css. It must always be the center of the page. Logo could be fixed at the center of the header. Thanks for your answer!
Analysing the design shows it is mostly made up of a lot of triangular shapes, plus three boxes. You can therefore do the whole thing with CSS. The way to create a triangle in CSS is to use a div, give it zero width and height, and a border of a suitable thickness. There are many articles on the web on how to do this, and it has been explained before on StackOverflow as well, with some excellent explanations of the theory behind it.
So there's a lot out there to consult and I won't go into it again at length here. But basically the CSS is like:
.triangle {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-left: 50px solid green;
margin : 0;
padding : 0;
}
This particular example produces a right angled triangle with one side sloping in the direction of the main diagonal in your design - i.e. from bottom-left to top-right. Making border-left and border-bottom the same length would produce a diagonal at 45 degrees, but in your design it's a different angle, so I've used different lengths. You can experiment to get exactly the slope you want. Whether you use border left, right, bottom, or top decides the orientation of the triangle.
Having achieved that main diagonal, identify the other triangles in the design and create some more, smaller divs and add similar CSS. You can then overlay them on top of the design using absolute positioning, and a bit of z-index if needed. One bit of the stuff in the center will also need a tiny rectangular div putting on top of the triangles.
It's as neat an exercise in CSS triangles as ever I've seen, but I'll leave you to work out the details!
Related
I want to make a speech bubble like the image below with an outline/border. The arrow is a square with two borders, rotated by 45 degress.
It does work, but the borders do not connect perfectly, as you can see when you zoom in.
Is this even cleanly solvable with CSS? If not, how would you solve it?
Source: https://levelup.gitconnected.com/how-to-create-simple-triangle-borders-with-css-665d26372825
I think you can probably just shift it outwards by one pixel to fix this, i.e. change top: -12px to top: -13px
I am trying to create a very precise matrix on top of a board. I know it's 48cm tall and wide, and therefore I am using the metric system. According to my code, they should align perfectly, but I'm experiencing some weird issues, which might be related to anti-aliasing. I honestly have no idea.
Take a look at this screenshot:
and then at this code: https://jsfiddle.net/o21rdwvw/3/
I use two methods:
background: black;
//one of these according to horizontal/vertical
width: 4px;
height: 4px;
and
outline: 4px solid black;
As you can see in this image, that is not really the case. It looks like some of the boxes has a shadow, with the HEX color #576c73, which has no relation to the color #000000 (unless the browsers somehow pick a shadow, which is some % brighter or darker than the original color).
I have tried changing the units around to pixel (even and odd numbers) as well as remove the transform: scale(), but none of them changed anything.
What kind of wizardry is this, and how can I prevent them from messing up my alignment?
EDIT: As you can see, the small boxes are differently sized, even though all the browsers report they're the same size. The bottom one is square, whereas the top and middle ones are slightly shorter:
EDIT 2: It appears to be a browser problem. Edge does not render the actual shadow, for example. It's just not as tall or wide as the others.
I am trying to construct this shape in CSS:
But I can't figure out how to put the triangle shape (considering I have a rectangle for the "body" of the tag and a triangle for the tip) facing right. Because I'm working with positions, how can I tell the triangle to appear right after the rectangle, when tags can all have different sizes? I just can't work it out.
You can check the fiddle: http://jsfiddle.net/ExZFe/ with a similar tag to the one I'm making. This example uses just positions, so giving the triangle a fixed position is useless. I tried with :after but got stuck too, because of the same reason. What am I missing? Thank you in advance.
Simply position the triangle using the right property (which start from the right of the rectangle) instead of the left (which starts from the left of the rectangle and is useless here as you can't know the width of the tags): http://jsfiddle.net/Gv3rf/
Just add a line-height to .tag
.tag {
line-height: 10px;
/* the rest of your styles here */
}
http://jsfiddle.net/ExZFe/3/
I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.
1) e.g. 3 Variable-Width, Equally-Spaced DIVs
[[LEFT] [CENTER] [RIGHT]]
2) e.g. 4 Variable-Width, Equally-Spaced DIVs
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.
The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.
Any help is greatly appreciated.
EDIT 07/20/2012 5:00PM
Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.
e.g. http://jsfiddle.net/c3yrm/1/
As you can see, the final element in the list is displayed improperly.
Any help is again greatly appreciated!
EDIT 07/20/2012 7:16PM
Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/
Reference: jsFiddle Pure CSS Demo
The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.
You could use percentages, then it just comes down to simple math:
[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px
You could then specify a width for its container and use
display:inline;
to keep them inline.
Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensure equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
like here: http://jsfiddle.net/QzYAr/
One way I've found to do it is using flex boxes (or inline-flex).
Here is a great explanation and example of how it can be done.
I think in the future, flex boxes will be the superior way of handling this sort of thing, but until other browsers catch up with Mozilla's way of thinking for how to use the flex-basis attribute (with min-content, max-content, fit-content, etc. as values), these flex boxes will continue to be problematic for responsive designs. For example, occasionally the inner content (a_really_really_long_word) can't fit in the allotted space when the window is squished down, and so sometimes some things might not be visible off to the right of the screen if you're not careful.
I think perhaps if you make use of the flex-wrap property, you might be able to ensure everything fits. Here is another example of how this might be done (in Mozilla browsers anyway).
I tend to use flex boxes for letterheads or tables where the width is fairly fixed (not too small) because they usually space themselves nicely; I tend to use nested float and inline-block objects for websites where the content must squish down very small (as suggested in some of the other answers here).
I'm getting a tiny rounded corner halo effect that I'd like to get rid of. In this example, look for the effect in the red circle. Here's a zoom in of the effect:
I seem to recall a while back reading an article on just this problem. Anyone have a link to that article? Otherwise, any good ways to get rid of the halo?
It is being caused because the dl has all four corners rounded. This allows the bottom of the dl to be rounded. The dt sits over the dl and has its top left and top right corners rounded. But there is a slight overflow of the dl curve behind the dt curve, causing the halo.
My solution is to increase the border-radius of the dl so that it is hidden behind the dt corner. But it seems like a hack and adds a fair amount more CSS. I'm wondering if there is a better solution. Here it is without the halo:
If you don't mind a 2 pixel discrepancy you could add...
div.content dt.top {
position: relative;
top: -2px;
}
But I think your solution is good, it can be improved by using the shorthand version of border radius:
http://jsfiddle.net/DAjWS/
border-radius: [topleft] [topright] [bottomright] [bottomleft]
The article you are mentioning probably has to do with the combination of border with border-radius (it produces a halo similar to yours), but in your case it's expected. The same thing would happen in a vector editing app if you overlapped two boxes with rounded corners. you just have to find an elegant way of covering the anti-aliasing of the bottom box.
I just came across the article that I mentioned in my question. It was linked to from html5boilerplate.com. Essentially, the following webkit CSS will get rid of the bleed (or halo as I called it):
-webkit-background-clip: padding-box;