Im creating a CSS triangle, code:
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0px 9px 9px;
border-color: transparent transparent rgb(255, 255, 255);
position: absolute;
top: 14px;
left: 133px;
The problem is that this triangle is rendering a border in Firefox 16.0.2 while using windows 7.
Screen Shot of triangle in FF - There are two triangles, superior and inferior, creating the same shadow
I checked in MAC's FF and it does not show any border for the triangle.
The triangle displays correctly in Chrome, Safari, IE, Opera, MAC and Windows
Any idea why this is happening??
EDIT:
you can check it here: https://metrikstudios.com/want/fbapp/triangle-display.php The page displays the code shown above with a larger triangle
Try using rgba colours instead, like so:
border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(255, 255, 255);
The default border colour is black, so maybe these borders are a weird transition artifact.
Instead of moving from invisible black to solid white, you'd be moving from invisible white to solid white.
Do you mean the fine line between the two triangles in my example?
.one {
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 90px 90px;
border-color: transparent transparent rgb(0, 0, 0);
position: absolute;
}
.two {
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 90px 90px;
border-color: transparent rgb(0, 0, 0) transparent;
position: absolute;
}
<div class="one"></div>
<div class="two"></div>
I see this line on every Browser on Win7 i have tested. I think it is rendered this way and you won't get rid of this. Fiddle
Related
I have this box with a linear gradient background created as a two tone solid color. One color is 44px - the rest has another color, like this:
background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0);
Works great. Now I would like to add a two-tone border to the top and bottom of this element using border image linear gradients the same way - so that the colors of the border follow the color of the background. The trick is to use linear gradients as solid colors.
I have tried something like this:
border-image: linear-gradient(right, #365aa5 44px, #000 0);
border-style: solid;
border-width: 2px 0 2px 0;
But obviousley, it's not working.
Any ideas how I could make this work?
JsFiddle here.
You need to add a number in the end of the border-image property. In your case it has no effect but it is still required. Also use to right instead of right
div {
height: 50px;
width: 80%;
padding: 4px;
box-sizing: border-box;
position: relative;
background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0);
/* What I'm trying: */
border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0) 1;
border-style: solid;
border-width: 2px 0 2px 0;
}
body {
padding: 20px;
background-color: #fff;
}
<div>Two tone solid color top and bottom border to<br> match the two tone background</div>
I took the blue color so it is easier to see.
EDIT: Also possible as vibhu suggested:
border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0);
border-image-slice: 1;
You can add the two tone border by using the below additional code::
div::after {
content: "";
position: absolute;
height: 2px;
width: 44px;
right: 0;
background: #365aa5;
top: -2px;
}
div::before {
content: "";
position: absolute;
height: 2px;
width: 44px;
right: 0;
background: #365aa5;
bottom: -2px;}
Jsfiddle added here: https://jsfiddle.net/y2Ln2h86/
In CSS is there a way to make the border transparent, but the box (inside) with the border the same?
Please see this link:
http://jsfiddle.net/xiiJaMiiE/LfWBn/14/
#white_box {
position:absolute;
min-width:90%;
max-width:90%;
margin:0 auto;
height:92%;
top:0%;
left:5%;
right:5%;
background:white;
z-index:1;
width:80%;
border:5px #0F0 solid;
}
I would like to know if I can make the green border 0.6 opacity and keep the white inside normal.
Is that possible or would I have to make 2 divs on top each other?
Thanks in advance!
You could just use: border: 5px rgba(0, 255, 0, 0.6) solid;
UPDATED EXAMPLE
#white_box {
position: absolute;
min-width: 90%;
max-width: 90%;
margin: 0 auto;
height: 92%;
top: 0%;
left: 5%;
right: 5%;
background: white;
z-index: 1;
width: 80%;
border: 5px rgba(0, 255, 0, 0.6) solid;
}
Alternatively, you could use outline too; both have different results.
outline: 10px solid rgba(0, 255, 0, 0.6);
EXAMPLE HERE
Here if you want fully transparent than, you can use border-color: transparent-
border: 5px solid transparent;
Try in fiddel
Unfortunately, in Explorer, border-color: transparent is rendered as black.
Or if you you only want partially-transparent border, than you can use rgb with alpha transparency-
border: 5px solid rgba(255, 255, 255, 0.5); // 0.5 means 50% of opacity
The alpha transparency variate between 0 (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)
Try in fiddle
this answer to add some info only. (3 ways : box-shadow:outset x x x ; or box-shadow: inset x x x; , or background-clip )
if you want opacity on borders and see through background of parent container, and not mixe with the background of the element itself, you can draw the background-color with inset shadow. http://jsfiddle.net/Y78Ap/1/ (increased voluntary border-width and added a gradient to body to have it more 'telling')
html,body {
Background-color:rgba(255,165,0,0.5);
background-image:linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(255,255,255,0.3));
}
#white_box {
position:absolute;
min-width:90%;
max-width:90%;
margin:0 auto;
height:92%;
top:0%;
left:5%;
right:5%;
box-shadow:inset 0 0 0 2000px white;
z-index:1;
width:80%;
border: 15px rgba(0, 255, 0, 0.6) solid;
}
You can as well just draw borders with box-shadow: 0 0 5px rgba(0,255,0,0.6); instead border
The easiest way suppose to be, nowdays, is background-clip : http://css-tricks.com/transparent-borders-with-background-clip/
How can I make a shadow effect like the one below with pure CSS?
I am new to CSS.
The following is what I have tried so far, but I am unable to come close to what I want. Please advise how I can make it look like the shadow in the image? Thanks!
box-shadow: 1px 1px 5px #999999 inset
This is the closest I could get : Demo. I think it's actually not bad.
It combines a black shadow and a white one on top of it.
.yourclass{
background-color: #fff;
box-shadow: -15px 0px 60px 25px #ffffff inset,
5px 0px 10px -5px #000000 inset;
}
Browsers' shadows smoothing might differ. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
Read the CSS Tricks article about box-shadows to get how they're used.
For two shadows (both sides) you need 4 shadows (demo) :
Result:
.yourclass{
background-color: #fff;
box-shadow: 0px 100px 50px -40px #ffffff inset,
0px -100px 50px -40px #ffffff inset,
-5px 0px 10px -5px rgba(0,0,0,0.5) inset,
5px 0px 10px -5px rgba(0,0,0,0.5) inset;
}
Beware, browsers' shadows rendering/smoothing can differ a lot. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
For more info on css shadows, read this article from CSS Tricks
What you want is basically the opposite of a page curl shadow. Take a look at this tutorial - you should be able to easily adapt it.
Here is an example: jsFiddle
div {
position: relative;
width: 250px;
height: 150px;
margin: 100px auto;
border: 1px solid black;
background-color: white;
}
div:after {
position: absolute;
height: 80%;
width: 10px;
content: " ";
right: 0px;
top: 10%;
background: transparent;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
z-index: -1;
}
We insert a pseudo-element, position it below our div and have it cast a shadow. This way, you have control over the shadows height and position.
I just noticed a problem that is only happening in IE10, works in IE9, and I can't exactly put my finger on what is happening. I am using a lot of rgba elements on my site and IE10 seems to run them all just fine. The only problem it is having is processing something like this:
.links:before {
content: "";
border-left: 105px solid transparent;
border-right: 105px solid transparent;
border-bottom: 25px solid rgba(255, 255, 255, 0.77);
bottom: 0;
left: 0;
position: absolute;
}
I then thought maybe it is just because of the Pseudo elements that IE10 doesn't like. So I tried :
.linkTri {
border-left: 105px solid transparent;
border-right: 105px solid transparent;
border-bottom: 25px solid rgba(255, 255, 255, 0.77);
bottom: 0;
left: 0;
position: absolute;
}
I then just added it into there as a semitransparent triangle to get around IE hating everything but, sadly, it did not work as well. It just displays the triangle as a solid white triangle.
Any ideas?
jsfiddle (Doesn't seem to display IE problem in the fiddle)
Live site (This will show the problem)
I also just tried opacity: 0.77; but same problem :/
It seems that the semitransparent triangle isn't truly showing through to the background of the page, if that is what you need. For that effect, perhaps try creating two right triangles using both :before and :after pseudo-elements, where your border color matches the background color of the list. For example:
.links:before,
.links:after {
content: "";
position: absolute;
bottom: -25px;
border: solid #c7c7c7;
}
.links:before {
left: 0;
border-width: 25px 105px 0 0;
border-right-color: transparent;
}
.links:after {
right: 0;
border-width: 25px 0 0 105px;
border-left-color: transparent;
}
If you are cool with not showing the dashed line borders on the right and left, you could try something like this: DEMO. (If that styling is needed, you could wrap the list inside another element, and style that accordingly.)
Works in Chrome, Firefox, IE9, IE10. Didn't test beyond that.
I am trying to create a triangle in css with a gradient background. I have not had any success as yet. Is there way to do this to bring off this effect seen in the image below.
(The triangle that is attached to the Wrong password error box.)
Design in Photoshop
This is the design I have so far in HTML and CSS.
Here is the css I have for the triangle at the moment.
.error-triangle {
wwidth: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid blue;
margin-top: 64px;
margin-left: 350px;
position: fixed;
-webkit-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
-moz-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
background-image: -webkit-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
background-image: -moz-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
background-image: -o-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
background-image: -ms-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
background-image: linear-gradient(to top, #eb6767, #d94040 35%, #eb6767);
}
I was using this tutorial on CSS tricks.
Creating triangles (or other shapes - pentagons, hexagons, octagons, decagons, dodecagons, tetradecagons, octadecagons and so on) with a gradient (or any other kind of image background) is really easy with CSS transforms.
But in this case you don't even need a triangle. You just need to rotate a square pseudo-element by 45deg and apply the gradient on that from corner to corner.
demo
<div class='warn'></div>
CSS:
.warn {
position: relative;
margin: 0 auto;
border: solid 1px darkred;
width: 12em; height: 3em;
border-radius: .2em;
background: linear-gradient(lightcoral, firebrick);
}
.warn:before {
position: absolute;
top: 50%; left: 0;
margin: -.35em -.45em;
border-left: inherit; border-bottom: inherit;
/* pick width & height such that
the diagonal of the square is 1em = 1/3 the height of the warn bubble */
width: .7em; height: .7em;
border-radius: 0 0 0 .2em;
transform: rotate(45deg);
background: linear-gradient(-45deg, firebrick -100%, lightcoral 200%);
content: '';
}
You can create a CSS triangle, but not a CSS triangle that is itself a gradient. The only trick I would suggest is to pick a color that most resembles the color within the gradient background. It just depends on how big your gradient actually is, and how well the triangle will blend in.
For the red div, you could try using the color #d94040, but then it will lack a border and a drop shadow. However, these can be added. To add a border to a CSS triangle, you can place a inside your that is also a CSS triangle that is the same size. TThis would require using absolute positioning and z-index to overlap them.
Or you can use ::after or ::before to create your CSS triangles without the added HTML code, but then that would only work in modern browsers only.
In CSS3, you can create a triangle with the 'border trick'. This border can be colored and can have a background.
WebKit now (and Chrome 12 at least) supports gradients as border image.
For a more supported solution i suggest you to 'gradient' the background of a :before pseudo element for witch you would apply a 'background-gradient' + the ( css triangle with border ) trick.
Here is a cssTriangle generator for you to experiment.