I'm trying to create a transparent right trapezoid with color border using CSS 3 This is what I've gotten so far.
http://jsfiddle.net/bodyfarmer/bdhtn7kr/1/
Any help is appreciated
You have to place a right border on the containing object to get the correct look. Like this:
border-right: 20px solid red;
Here is the updated fiddle
I also changed skew to skewX. Per this link:
Note: The skew() function was present in early drafts. It has been
removed but is still present in some implementations. Do not use it.
To achieve the same effect, use skewX() if you were using skew() with
one parameter or matrix(1, tan(ay), tan(ax), 1, 0, 0) for the general
way. Note that tan() isn't a CSS function and you have to precalculate
it yourself.
In your code, you are missing part of the border rule.
border: 20px solid red;
Related
Couple extra requirements I'm working under:
Needs to be reactive/mobile friendly
Needs to also be compatible with chrome, firefox, and ideally opera.
<button class="outline">
Lol A button
</button>
button{
background-color: blue;
color: white;
padding: 15px;
}
.outline:focus{
outline: 2px solid white;
outline-offset: -6px;
}
JS Fiddle example of what I'm doing now
Edit:
JS Fiddle Example of the trouble I'm having with past similar question answers
If you take a look at the second link and tab through the examples, possibly try changing some of the internal borders in the box class, you'll see that this option is pretty rigid, and I have failed to get a proper offset inner border with a sufficient gap from the outside edge.
In particular, 2px would probably be the minimum gap between the inner border and the outer edge. The intended use is like 4-6px in, so that there is a really clear border so I can create a 7.5:1 contrast ratio for high visibility of the focus box. In my particular use case, this is not possible with an external border without breaking the site color scheme, so it's really undesirable.
I'm kind of dubious about getting this to work as a generic solution across 3+ types of buttons as well, and also looking nice on mobile.
Additionally, if the correct answer here is just, "that's impossible you need to do something else entirely," that's fine as long as it really is true. I don't have the CSS experience to know for sure.
I was never able to find a solution like what I was looking for. Instead I ended up doing this:
box-shadow: 0 0 0 2px rgb(255, 255, 255),
0 0 0 4px rgb(0, 84, 164) !important;
outline: none !important;
Basically, you have to use a box shadow to mimic an outline, so I used two box shadows that match the colors/look of the button to create the same effect with an expansion of the button. This meets accessibility contrast requirements by sandwiching a color band in between the button and the outer band. As long as this inner band and the button are different enough in contrast, and the outer band matches the button, or another high contrast color.
Not really what I wanted, but there's not a lot (any) of other options that work in the context of this problem (older IE compatibility) unfortunately.
You can see the implementation here:
http://jsfiddle.net/Wtcdt/
In FireFox on Mac, that circle is round/solid. I want it either dashed or dotted.
What makes it even weirder is that the same property (i.e. border: 4px dashed #000) works fine on an HR. So why does it not work when border-radius is involved?
This is so bizarre to me.
It's a bug, WebKit had a similar issue but it was fixed in June. Here are all the other outstanding border-radius defects in Firefox.
Your circle is too small. If you increase the height and width you will notice that the shape expands to a rounded-rectangle, the rounded edges remain solid but the lines become dashed.
Its a Firefox bug. Typically you have to either make solid border or remove radius. But if both of the properties are important then you can replace the corner with image like this: http://eblog.foysalremon.com/dashed-border-radius-corners-rendered-as-solid-on-firefox-solved/
I want to/need to have a border of 1px thickness and dotted appearance, where the pattern is x-o-o-x-o-o etc. (dot, not, not, dot...)
This has to be done with border-image IIRC, but I went mad trying to create the image and applying it properly with the CSS statements.
Can anybody give me a hint how both has to be laid out?
Thanks and best!
I could get it to work by making a 7x7 image with dots in the corners and in the middles of the sides. Like this.
And then they can be evenly spaced by making a 2px border, so that the corners and the sides of the element use one dot each (see the markers how the slicing is done). So the css would be something like
border:2px solid transparent;
border-image: url(7x7.png) 2 2 round;
Like many front-end devs, I've been using the border trick to render triangles in CSS.
http://apps.eky.hk/css-triangle-generator/ this generator helps with the technique.
Today, the Firefox team released a new version without any clear changelog on the rendering engine.
Now we can see an ungraceful gray border around those triangles. I haven't found a trick to get rid of it yet.
edit : it's easier to see if you force the "chess-like transparent" background to something like "green"
On top of that, before Firefox 17, when people were complaining about how aliased those triangles looked, an additional trick was to set the border-style property to "dashed" instead of solid.
Using firebug on the triangle generator, you can quickly see how it shows up now.
Does anyone know a fix for this?
edit : using border-style:inset as suggested renders a lighter color on my FF17
This combination of Adeher's fix and the other dotted border fix seems to solve the problem perfectly in FF23.
In long form:
border-top: 10px solid #FF0000;
border-left: 30px dotted rgba(255, 0, 0, 0);
border-right: 30px dotted rgba(255, 0, 0, 0);
Combining Adeher's rgba() fix with the dotted border fix (but only on the transparent borders) seems to render a perfect triangle without ugly blurry borders.
Ok here is the best solution I have so far :
get the rgb value of your triangle, and use this as a 0 opacity rgba instead of "transparent" for the opposing borders of your triangle.
Keeping the old syntax "transparent"-based will work as a fallback for IE8
that ends up with something like this :
border-color: transparent transparent transparent #ffffff;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #ffffff;
as said in replies : setting the border-style to "inset" as suggested alters the color on FF17.
I hope somebody will find a simpler solution, or that this post will help other people.
I'd like to be able to add a class to images that adds a border that makes them look like a stack of photos. Anyone know how to do this?
Clarifications: Ideally something like the stack shown here but it doesn't need to be interactive and only needs to work for a single photo. I also don't mind using javascript if needed (jQuery would be preferred though).
The "depth" affect is probably going to be some type of drop shadow. Do you need to rotate the photos as well for the "messy photo pile" effect or are you looking for a "neatly stacked" look?
The "messy photo pile" effect seems to me to break down into three components:
Put a background behind the image for the "polaroid" look (explained in other comments
Put a drop shadow behind the image for the "depth" effect (explained above and in other comments
Rotating images. I've never done this myself but it looks like someone has coded the Jquery plugin you are looking for.
Place your IMG tag inside a nested set of DIV elements (the number of divs will determine the number of photos in the stack). Then use CSS to set the border and padding so that the DIV elements get progressively larger than the photograph. Generally you will add more padding to the bottom and right.
CSS3 it's supported by everyone yet, but you might want to look into border-image.
Put a div around the image and then have 2 styles defined.
<div class="img-shadow"><img ...></div>
.img-shadow {style.css (line 456)
background-color:#505050;
float:left;
margin:5px 0 0 0;
}
.img-shadow img {style.css (line 461)
background-color:#FFFFFF;
border:3px solid #000000;
display:block;
margin:-8px 8px 8px -8px;
padding:10px;
position:relative;
}
in the .img-shadow class, define a graphic for your background that's large enough for your images, and looks like a stack of photos. The above makes it look like the photo is casting a shadow.
Below is my recommendation which has a clear and simple CSS which results in a perfect photo stack.
http://dabblet.com/gist/2023431