I was working on folded paper effect and this seems to work on almost all browsers except IE8.
Here is the JSBIN code : http://jsbin.com/oLepimiK/6/edit
I saw a different question on SOF where :before and :after tags are supported, but I guess I am missing something here. Can someone point that out to me?
MY IE8 MODE:
I believe that box-shadow is not supported in IE8, so the shadow under the 'fold' will not appear.
CanIUse.com
It is working, you are having problems with Z-INDEX, and I changed the top and left to -1.
.clear{
padding-left: 30px;
}
.complaint:after {
border-color: transparent #F58C1E #F58C1E transparent;
border-style: solid;
border-width: 10px;
content: "";
left: 0;
position: absolute;
top: 0;
z-index: 12;
}
.complaint:before {
border-color: white #A65807 #A65807 white;
border-style: solid;
border-width: 11px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
content: "";
left: -1px;
position: absolute;
top: -1px;
width: 0;
z-index: 11;
}
.complaint {
background-color: #F58C1E;
border-style: solid;
border-width: 1px 1px 0;
padding: 4px;
position: relative;
}
RESULT:
Related
I need an outline of a button that is curved on the top and bottom, but not the sides. See the Sample Image below to understand what I'm asking for. I will style all the buttons on my website like this one. I've tried a few ways of doing this with border-radius but I haven't been successful yet. Thank you.
Use :before and :after to button
.btn {
border-top:none;
border-bottom:none;
border-right: 2px solid white;
border-left: 2px solid white ;
background-color: #273649;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
body{
background-color: #273649;
}
.btn:after {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 48px;
left: 7px;
border-radius: 40%;
}
.btn:before {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 4px;
left: 7px;
border-radius: 40%;
}
<button class="btn">Info</button>
I know this is not the answer that you expected, but I think that the best way to get this result (being the easiest way to get decent results) is with a backgroung-image.
.button {
background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png);
background-size: 100% 100%;
}
I just post it in case that someone with similar needs wants to have an alternative.
here an example: https://codepen.io/dknacht/pen/qKbWaY
Dknacht.
I am trying to add a ribbon/a way to highlight a particular cell in my table. I have found some code for a ribbon, but I can't get it to work with my table.
Presently I just get a square in the cell I want the ribbon to go in
Here is the fiddle
https://jsfiddle.net/4xwzuqpn/2/
The code for the ribbon:
thead th p.promo { font-size: 1em; color: #fff; position: absolute; top: 9em; left: -17px; z-index: 1000; width: 100%; margin: 0; padding: .625em 17px .75em; background: #c00; box-shadow: 0 2px 4px rgba(0,0,0,.25); border-bottom: 1px solid #900; }
thead th p.promo:before { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #900 transparent transparent; bottom: -7px; left: 0; }
thead th p.promo:after { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 7px 7px 0 0; border-color: #900 transparent transparent transparent; bottom: -7px; right: 0; }
You had an error with your CSS on line 233 on your jsFiddle (an extra } character).
That error caused your CSS rule:
thead th {
position: relative;
}
not to render. Once the error is fixed, the position: relative works and that fixes the position of the ribbon.
edit: Actually, anything under line 233 won't render. Not only the positioning, but the entire definition on your ribbon.
Check this out:
https://jsfiddle.net/4xwzuqpn/3/
I have the following css arrow fiddle:
<div class="arrow"></div>
.arrow { background-color: #F4922D; width: 300px; background: rgba(244,146,45,0.9); padding: 40px 30px; min-height: 100px; position: relative; }
.arrow:after { left: 100%; top: 0; bottom: 0; border: solid transparent; content: " "; width: 0; position: absolute; pointer-events: none; border-color: rgba(244, 146, 45, 0); border-left-color: #F4922D; border-width: 90px; }
My questions are
1: how would I make the arrow tip thinner - ie at the moment to get the point it has to be 90px border-width but I would like the point to show at around 30px but if I change the border width the point just gets cut off
2: how would I make the tip opaque, I tried using border-color: rgba(244, 146, 45, 0.5); but that didn't change anything
Adjust only the width of the left border on it to get the 'thin-ness' I think you mean. To make give the tip the same transparency as the <div> itself, again, you need to target only the left border:
.arrow:after {
left: 100%;
top: 0; bottom: 0;
border: solid transparent;
content: " ";
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-left-color: rgba(244,146,45,0.9);
border-width: 90px;
border-left-width: 160px;
}
JSFiddle
To solve the opacity issue,
just simply set
opacity: 0.9;
on the pseudo :after element that should solve the issue,
and if you want a cross browser implementation of it then take a look at this
http://css-tricks.com/snippets/css/cross-browser-opacity/
I'm trying to create a tag shape with the css only so that it looks like:
I'm trying following but unable to use the border for the triangle area.
HTML:
Test
CSS:
a{
float: left;
height: 35px;
position:relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before{
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 18px 18px;
}
JSFiddle:
http://jsfiddle.net/Sac3m/
You could rotate a square instead, although i doubt the results will be great cross-browser
Modified code:
a {
float: left;
height: 35px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:after {
content: "";
position: absolute;
top: 4px;
right: -13px;
width: 25px;
height: 25px;
border: 1px solid red;
border-left: none;
border-bottom: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<a></a>
(Latest IE, Firefox and Chrome seems OK with it)
Update
If you need IE8 support, you could try to put a white triangle on top of the (original) red triangle:
a {
float: left;
height: 36px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before {
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 19px 19px;
}
a:after {
content: "";
position: absolute;
top: 0;
right: -17px;
width: 0;
height: 0;
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 18px 0 18px 18px;
}
<a></a>
The below code helps to create a tag shape. It works in all major browsers.
#swc {
position: relative;
margin: 0 5px 0 10px;
display: inline-block;
height: 66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height: 65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background: #f3f3f3;
transition: background 0.3s;
}
#swc:after {
position: absolute;
content: "";
right: -19px;
width: 1px;
height: 0px;
border-left: 18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
#swc:hover {
background: green;
color: #ffffff;
}
#swc:hover:after {
border-left-color: green;
}
<span class="pricetag-right" id="swc">Tag Content!</span>
We had a slightly different implementation of this that produces rounded corners. This uses a rounded square that's turned 45°.
.tag {
display: inline-block;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 transparent #c8d7f2 #c8d7f2;
border-radius: .25em 0 0 .25em;
padding: 0.1em 0.6em 0.1em 0.3em;
background-color: #e5ecf9;
line-height: 1.2em;
}
.tag:after {
content: "\25CF";
position: absolute;
display: inline-block;
height: 1.2em;
width: 1.17em;
transform: rotate(45deg);
color: white;
text-indent: 0.3em;
line-height: 1em;
text-shadow: 0 0 1px #333;
background-color: #e5ecf9;
border-radius: 0.33em 0.33em 0.33em 1em;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 #c8d7f2 transparent transparent;
}
<h1 class="tag">my-tag</h1>
A couple things to note:
The square contains a circle punctuation mark. To adjust it you use line-height and text-indent.
The borders on the square need to be set to transparent color with a width of 1px. If you don't, the other borders (the visible ones) taper off where they go from 1px to 0px.
his works pretty well and it's nearly pixel-perfect, but it does render slightly differently across Chrome and Firefox. I tried to make it work with a transparent background, but you need some sort of color to cover up the funkiness where the square meets the tag. It's not quite perfect.
The nice thing about this is that it can be applied as a class and it can be used on H1-H6, or p tags.
Context
I did a pure CSS tooltip with pseudo-element :before and :after for the arrow.
The rendering is different from Chrome 16 to Firefox 9 and 10.
You see what's wrong?
Chrome screenshot
Firefox screenshot
Demo
http://jsfiddle.net/wDff8/ reproduces the same issue.
Code
html:
<span class="tooltip">Déposez votre fichier dans ce dossier</span>
css:
span.tooltip {
display: inline-block;
background: #eee;
margin-left: 20px;
padding: 0 10px;
color: #111;
border-radius: 2px;
border-top: 1px solid #bbb;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
line-height: 1.5;
position: relative;
}
span.tooltip:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent #eee transparent transparent;
left: -18px;
top: -1px;
z-index: 1;
}
span.tooltip:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 11px;
border-color: transparent #bbb transparent transparent;
left: -21px;
top: -2px;
z-index: 0;
}
body {
font-family: Georgia;
font-size: 12px;
letter-spacing: 1px;
}
May be Instead of transparent you have to write this rgba(238,238,238,0)in your css check this for more
CSS Transparent Border Problem In Firefox 4?
Solution
I juste removed a few pixels, which corrected the rendering on Firefox.
The rendering is not identical but close enough.
Chrome screenshot
Firefox screenshot
Demo
http://jsfiddle.net/wDff8/1/
Modified code
span.tooltip:after {
border-width: 10px;
left: -19px;
top: -1px;
}