I would like to make an arrow like so:
Is this possible with just CSS3, Notice how it's a black arrow with an inner white arrow slightly -1px from the black. Ideas? Thanks
It can be done with just a singular div and CSS3 transformations. Here is an example: http://jsfiddle.net/yVTr3/5/
It could easily be modified to adapt to the size and exact colors you would need.
Sure you can do that, even with css 2.1 - http://css-tricks.com/snippets/css/css-triangle/
However you'll need to create 3 arrows one on top of each other - black + white + black - and position them accordingly (1px from right for the middle one, 2px from right for the topmost)
Related
I have two containers, with zero distance between them, each has its own border. At the exact point two borders touch (see image below) the upper border is truncated in the form of a triangle, which irritates me a lot. I've done my research, but found no way to fix that, except adding outer container with overlaying border.
Is there any better way to make that triangle disappear?
This comes from having borders defined but the color is actually set to the background, if you add border-top: none; and border-bottom:none; to your css on the the tables the issue will be resolved. The triangle you speak of is the border transitioning from the left border to the bottom or top border.
May be this is because you are having border-radius so only you getting rounded corner at bottom. Please remove radius and try .
I'm trying to make a grid background out of dots. I can't just use an image, because I need everything to be configurable:
background color
dot color
dot size
space between dots
Unless there's a better solution, I think the only way I can achieve this is with pure CSS. I've done some looking around and so far the closest thing i've found is using a radial-gradient. I'm having trouble though; I haven't been able to find a solution that lets me configure both the dot size and the space between dots while keeping a circle shape. I've gotten close, but than my dots end up looking like diamonds instead of circles. Here's what i've come up with so far:
https://jsfiddle.net/yzpuydtn/
body {
background-image: radial-gradient(black 2px, white 2px);
background-size:40px 40px;
}
Does anyone have any suggestions? Initially i'd like to have my dots be 2px x 2px and 40 px apart. Is there a better way to do this, or am I just configuring my gradient incorrectly? I think i'm close, but depending on how I zoom they look like either circles, diamonds or squares and I need it to always look like circles.
Using %: https://jsfiddle.net/yzpuydtn/11/
Using vw: http://jsfiddle.net/otwhu0uk/2/
Here is an example. I really hope this helps you.
body {
/* Controls size of dot */
background-image: radial-gradient(black 5%, white 0%);
/* Controls Spacing, First value will scale width, second, height between dots */
background-size:5% 10%;
}
I want to recreate an interface similar to Windows Phone 10.
You can see an example of what I try to achieve in HTML in this picture:
The middle tiles act like Windows on the baby picture while the space between tiles is black.
There's no magic going on here. In the picture you've supplied the phone has a desktop of a child that is letterboxed (black stripe across top and bottom). The tiles on the top and bottom of the screen are opaque and show their own backgrounds. The tiles in the middle are fully transparent, but have a solid black border to them to show the child behind them.
To make the tiles, you simply need this:
.tile { background-color:rgba(0,0,0,0);
border: 3px solid black;
}
Take a look at this fiddle for a basic example: https://jsfiddle.net/Lnafvvx9/6/
For a dynamic approach:
You could slice a picture in many litte parts (and delete the sliced borders). Then you create and align different divs with a individual background image containing your sliced picture parts.
There is also a kind of work around for static pages:
Create one div with the big (not sliced picture).
Use a transparent PNG image containing only the "border" of the black background. Place that in a div on top of the other div and you got the style. Then you need to add little divs ontop of the positions where you can see the picture.
The important thing is, that these designs require pixel perfect static layout. This means you can't scale divs size or change the position when the browser window or screen is smaller. But its also the easiest way do do that and the last suggestion allows to change the picture without slicing it.
For real dynamic approach you could load the same picture (unsliced) in every button (use different css id for everyone) and position the background of them individually to fit together. The advantage of this is, that you can then use CSS3 for instance to scale the button size on hover. This can lead to a cool expanding image effect. Just look up
http://www.w3schools.com/cssref/pr_background-position.asp
http://www.w3schools.com/css/css3_animations.asp
I hope that helps :)
This is how my current header looks like. I want to edit it that the part in the picture below has the same color as the div next to it / the border. How can I do this?
Code on jsbin: http://jsbin.com/ezeyib/3/
You can acheive this by oversizing the border thickness and then setting the parents overflow to hidden.
See this example.
http://jsbin.com/ezeyib/5/edit
I mean you need to create a png file using Photoshop or Illustrator to retrieve the expected result.
If you can have a plain background instead of a gradient background, you can create two big blocks (one green and one blue), and on top of those, create a shape with rounded corners which matches the actual look.
I have multiple divs where the left side is an image (varying heights per div) that will determine the height of each div.
The right side of the div has a header on top with content below, so header is solid color and content another solid color.
My issue is the right side has rounded corners, so I need to have an image on the top and bottom for all x-broswering. I don't want to adjust the height for every div based on the height of the left image. Is there a way of setting it up so the the right side will match the height of the left image?
does this make sense?
EDIT: Sorry, this wasn't clear. This should help: http://jsfiddle.net/xtian/cMs7m/
I was not able to use PIE because I need only specific corners to be rounded and it only supports all 4 being rounded. I had to just use images, which I would love to get away from but with IE, its not really possible yet.
I'm not sure I understand you exactly, but let's try...
If leaving IE out is not an option, you should look for solutions such as CSS PIE and others that can emulate CSS3 features in IE. I've used PIE and it does the trick marvellously for border radius. Can't quite remember what other things could be used, but I'm pretty sure there were like 2 more solutions that are pretty common. Would using CSS3 instead of rounded corner images solve your problems?
Not quite sure that I understood the question well, but if it's about having rounded corners, I think the time is totally right to stop using images for this and start using CSS3:
http://www.css3.info/preview/rounded-border/
easy...
for old IE's I think there are alternate solutions:
http://msdn.microsoft.com/en-us/library/bb250413%28v=vs.85%29.aspx