I'm trying to make an inset pill using pure CSS:
Where the two color blocks are clickable separately.
But I can't figure out how to apply the box shadow to the containing element. The closest I got was using an :after element and positioning it over the links; but that covers up the links, making them un-clickable:
(jsFiddle)
<div class="pill">
✚
⦿
</div><!--/.pill-->
.pill {
position: relative;
float: left;
&:after {
content: "";
display: block;
border-radius: 8px;
box-shadow: inset 1px 2px 0 rgba(0,0,0,.35);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
a {
display: block;
padding: 4px 6px;
text-decoration: none;
color: #fff;
float: left;
&.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid darken(#3c55b1, 30%);
}
&.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
border-left: 1px solid lighten(#40be84, 15%);
}
}
}
I'm aware of the pointer-events property, but browser support is pretty shabby.
So what do we think? Possible?
You are not using the spread property on the box shadow, so you want to create a border, instead using box shadow add a border to each element.
Remove the:after property and will get the normal behavior
jsFiddle
Make it simple,
draw your box-shadow from a, so it doesn't matter wich size they take.
http://codepen.io/gcyrillus/pen/xwcKg
.pill {
position: relative;
float: left;
background:#eee;
padding:0.5em;
}
a {
display: inline-block;
padding: 4px 6px;
width:1em;
text-align:center;
text-decoration: none;
color: #fff;
font-weight:bold;
box-shadow:inset 1px 2px 0 rgba(0,0,0,.35);
}
.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid #0c2571;
position:relative;
}
.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
box-shadow:
inset 0px 2px 0 rgba(0,0,0,.35),
inset 1px 0 0 #70de94
;
}
Related
I'm trying to style the heading of a page with the CSS border property, using the following code:
h2 {
display: inline-block;
margin: 5px 0 5px 0;
padding: 0 0 0 5px;
background-color: #eee;
border-color: #aaa;
color: #000;
border-style: dotted dotted dotted solid;
border-width: 1px 1px 1px 5px;
}
The result is
,
which Is ok, but the left border has "pointy" tips, with gaps (what looks like a kind of "provision" for a, in this case, non-existent similar border), like in the image below
Is there a way to get "square" tips for the left border?
No you can't with a native border. But you can fake it using a :before element:
h2 {
position: relative; /* make title relative */
display: inline-block;
margin: 5px 0 5px 0;
padding: 0 0 0 5px;
background-color: #eee;
border-color: #aaa;
color: #000;
border-style: dotted dotted dotted solid;
border-width: 1px 1px 1px 5px;
}
h2:before {
content: "";
position: absolute;
height: calc(100% + 2px); /* 2px is the addition of the border-bottom (1px) and the border-top (1px) */
width: 5px; /* same size than the border-left */
background-color: #aaa;
left: -5px;
top: -1px; /* size of the border-top */
}
<h2>A title</h2>
I have a selector created as a component:
<my-selector
...
</my-selector>
and this is its css file:
my-selector{
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px;
}
.select-container {
position:relative;
display: inline;
margin-right: 10px;
}
.select-container:after {
content:"";
position:absolute;
pointer-events: none;
}
.select-container:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: .5em;
right: .75em;
border-top: 5px solid black;
}
select::-ms-expand {
display: none;
}
}
The problem I've is the distance between the words and the left margin. I've tried margin-left, padding and others in order to remove it or make it smaller but without success.
Any suggestions?
You added the padding via the css for the selector:
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px; /* this is the problem, and it's overwriting the padding attribute 4 lines up */
}
you need to remove the first incidence of padding, then set padding to something like:
padding: 3px 26px 3px 5px; /* top right bottom left */
Take a look at these photos
JSFiddle link at the bottom
firefox:
chrome:
they are both the same element taken from chrome and firefox and as you can see the one from firefox has some space around it's top and left side but the one from chrome doesn't
now, There is no margin or anything that's causing this and it works fine in any other browser except for firefox.
the important styles for the main element is
float: left;
height: 30px;
line-height: 30px;
margin: 12.5px 0;
and for the Pseudo-element ::before
float: left;
display: block;
content: '\F011';
height: 30px;
line-height: 30px;
margin: 0 10px 0 0;
padding: 0 10px;
and the HTML for the element
<button class="like" onclick="item_like()">500</button>
this is the link of JSFiddle
run it in chrome and firefox and see the difference
http://jsfiddle.net/79cEb/5/
what am I doing wrong here?
Maybe try positioning the like absolutely using CSS
.like{
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
position:relative;
padding: 0 10px 0 40px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;}
.like::before{
position:absolute; top:0; left:0;
width:30px;
content: 'like';
margin: 0 10px 0 0;
padding: 0 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC; display:block; border:0;
}
I'd recommend you to specify top:0; left: 0; to your ::before pseudo elements. Sometimes cheeky browsers take a few px up and left to the actual position. CSS:
.like:before {
float: none;
width: 30px;
content: "like";
margin: 0px 10px 0px 0px;
padding: 0px 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
position: absolute;
top: 0;
left: 0;
border-radius: 4px 0 0 4px;
}
.like {
float: none;
height: 30px;
border-radius: 4px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
padding: 0px 10px 0px 0px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border: medium none;
position: relative;
width: 88px;
text-align: right;
}
Fiddle: http://jsfiddle.net/79cEb/13/
I made you this solution, it places the button relative and the :before class absolute. Then you can use the top, bottom and left position, which will be relative to parent.
Note that I added a overflow: hidden to the button, so the rounded borders are still visible.
This is the altered CSS:
.like {
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
padding: 0 10px 0 40px;
overflow:hidden;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;
position: relative;
}
.like::before {
float: left;
width:30px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
content:'\F011';
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
}
Also, see the updated Fiddle.
i have a box whose width is variable because it depends of the size of a container. The box has no content so im using margins to define its width relatively but it is not working. This is my code:
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
content:"";
border-top: 2px solid red;
margin: -20px 0 7px -7px;
position:absolute;
width:auto;
}
This is my fiddle http://jsfiddle.net/x7rrj/3/
Please notice how the red border goes outside of the box without honoring the right margin and if i set the width to auto then the red border wont display at all. Is it possible to solve this using CSS only?
Thank you.
I looked at the fiddle and noticed the top red border wasn't showing.
It had a line with the padding: 0 100%;
Removing that line seem to fix your issue.
Is this the final result you wanted?
http://jsfiddle.net/z5952/
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
border-top: 2px solid white;
content: "";
margin: -9px 0 7px -7px;
position: absolute;
width: auto;
}
Is this something you are looking for?
http://jsfiddle.net/x7rrj/16/
since you are using position:absolute to position the line, you may also use top, right and left to control the position and width as well:
.box:before {
border-top: 2px solid red;
content: "";
padding: 0 100%;
position: absolute;
top: 3px;
right: 3px;
left: 3px;
}
Okay, i found the answer thanks to an idea given to me by Edward. The problem was solved by replacing margins with top, left and right.
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
border-top: 2px solid white;
content: "";
width: auto;
position: absolute;
top: 3px;
right: 3px;
left: 3px;
}
Over the last year, I noticed that lots of sites have moved their share/popularity stats to a left sidebar that remains visible on the screen even if you scroll the window down. Here is the URL for a page that has this kind of functionality: http://news.cnet.com/8301-31921_3-57371426-281/anti-sopa-forces-have-isp-snooping-bill-in-their-crosshairs
What's the best way to create that kind of sidebar?
an easy way is to use CSS to absolutely position it and set the Z index so that it appears above everything else
try this on your HTML page
<style>
.side-sharebar {
display: block;
left: 482px;
position: fixed;
top: 20px;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #EEEEEE;
border-color: #CCCCCC transparent #CCCCCC #CCCCCC;
border-radius: 3px 0 0 3px;
border-style: solid;
border-width: 1px;
box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.25) inset, 0 1px 0 #FFFFFF inset;
left: auto !important;
margin-left: -98px;
margin-top: 2px;
position: absolute;
top: 0;
width: 76px;
}
.side-sharebar ul li {
border-bottom: 1px solid #CCCCCC;
box-shadow: 0 1px 0 #FFFFFF;
padding: 10px 2px 10px 0;
position: relative;
text-align: center;
}
.side-sharebar ul {
list-style: none outside none;
}
</style>
....
<div class="side-sharebar"><ul><li>one</li><li>two</li></ul></div>