I want to create the following div border:
I have the green border part sorted, but not the red line along the top. Any ideas?
Code so far:
#myborder {
border: 4px solid green;
}
use this css http://jsfiddle.net/PESHk/3
#myborder {
box-shadow: 0 0 0 4px green, 0 0 0 4px green inset;
border-top:2px solid red;
padding:8px;
}
Working on Hushme's answer: http://jsfiddle.net/PESHk/2/
#myborder {
box-shadow: 0 0 0 4px green, 0 0 0 4px green inset;
border-top: 2px solid red;
padding: 8px;
}
And here by using ::before:
#myborder {
box-shadow: 0px 4px 15px rgba(0,0,0,0.15);
border: 8px solid green;
border-top: 0;
padding: 16px 8px 8px 8px;
position: relative;
}
#myborder::before {
width: 100%;
background: red;
height: 2px;
border: 4px solid green;
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
}
Related
I know it doesn't by default, but I'm trying to force it to.
I'm building a button-like anchor that has a solid box-shadow (no blur) to create the illusion of depth, and when hovered it reacts.
Only problem is that it reacts only when the cursor is above the anchor itself, and since it moves a few pixels when hovered, depending on how close is the cursor to the edge, it causes the anchor to flicker.
Is it possible to order the shadow to be included in the element's total size? And I know it's kind of bothersome that a button misbehaves in this way, but is it terrible coding? I realize it's kind of a design question, but I'm after the code, really.
TLDR: my anchor flickers when hovered too close to the edge. alternatives?
The code is working, but I'll paste it anyway.
Here's the code:
.btn {
display: inline-block;
width: 50%;
margin-left: 25%;
/*center*/
padding: 10px 20px;
border-radius: 20px;
background-color: #71e2ff;
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff;
}
.btn:hover {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff, 0 5px #34d6ff, 0 6px #34d6ff;
transform: translateY(-2px);
}
.btn:active {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff;
transform: translateY(0);
}
<a class="btn" href="#">suscribe</a>
EDIT:
Thanks Paulie_D, worked like a charm! Pseudo element with absolute position stretched in all directions was the way to go.
No you can't include a box-shadow in the height/width calculations but you can increase the click / hover area by using a pseudo-element which is sized to include the box-shadow.
From CSS-Tricks
button {
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
color: white;
white-space: nowrap;
padding: 9px 16px;
position: relative;
}
button:hover,
button:focus {
background: #3d57b4;
}
button:hover,
button:active {
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
-moz-transform: translate(3px, 3px);
-ms-transform: translate(3px, 3px);
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -5px;
bottom: -5px;
outline: 1px solid red;
/* for demo */
}
button:hover::after,
button:active:after {
top: -3px;
left: -3px;
right: -2px;
bottom: -2px;
}
body {
padding: 30px;
}
#message {
padding: 10px 0;
}
<button>A Button</button>
How to add bootstrap focus glow to Bootstrap Tags Input (for Bootstrap 3)?
bootstrap-tagsinput.css file:
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit;
}
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
}
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
content: "x";
padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
Is it possible to vertically align labels?
Thanks.
It is currently impossible in pure CSS as there is no parent selector but you can do it in JavaScript:
$('.bootstrap-tagsinput').focusin(function() {
$(this).addClass('focus');
});
$('.bootstrap-tagsinput').focusout(function() {
$(this).removeClass('focus');
});
and CSS:
.focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
}
Straight from Bootstrap site. If you look at their focus CSS it looks like this.
#focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
What you might want to try is add the above onto your class from your code above. It would look like this.
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
I have not tried this on anything. But I think this might help you.
I have seen other complex effects being done with just CSS like the stacked paper effect:
http://jsfiddle.net/thefrontender/LwW7g/
<div class="slide expandable-slide">Title</div>
<div class="slide">Title</div>
.slide {
float: left;
display: block;
position: relative;
background: #FFF;
height: 10em;
width: 10em;
padding: 1em;
border: solid 2px #000;
margin-right: 2em;
}
.expandable-slide {
margin: 2em 2em 0 2em;
box-shadow: -1em -1em #666,
-2em -2em #333;
}
My need is very similar except the 2 outer edges need to connect with the main frontal div:
Anyone know of any tricks that can make this possible?
If you're able to use CSS pseudo-elements:
.slide {
position: relative;
width: 200px; /* arbitrary, adjust to taste */
height: 500px; /* arbitrary, adjust to taste */
border: 2px solid #000;
border-right-width: 40px; /* this is the 'depth' of the 'sides' */
border-bottom-width: 40px;
}
.slide::before {
content: '';
position: absolute;
top: -2px; /* to cover the top of the border */
left: 100%;
border: 20px solid #fff;
border-bottom-color: transparent; /* allows the containing element's border to be seen */
border-left-color: transparent;
}
.slide::after {
content: '';
position: absolute;
top: 100%;
left: -2px;
border: 20px solid #fff;
border-top-color: transparent;
border-right-color: transparent;
}
JS Fiddle demo.
The above uses the following HTML:
<div class="slide">Title</div>
You could stack multiple box shadows to attain the effect you're after:
.slide {
height: 200px;
width: 100px;
padding: 1em;
border: solid 2px #000;
}
.expandable-slide {
margin: 10px 10px 0 10px;
box-shadow: 1px 1px #999,
2px 2px #999,
3px 3px #999,
4px 4px #999,
5px 5px #999,
6px 6px #999,
7px 7px #999,
8px 8px #999,
9px 9px #999,
10px 10px #999;
}
jsFiddle example
You could do it this way (not the most elegant but works like a charm):
.expandable-slide {
margin: 2em 2em 0 2em;
box-shadow: 0.05em 0.05em #555,
0.1em 0.1em #555,
0.15em 0.15em #555,
0.2em 0.2em #555,
0.25em 0.25em #555,
0.3em 0.3em #555,
0.35em 0.35em #555,
0.4em 0.4em #555,
0.45em 0.45em #555,
0.5em 0.5em #555
;
}
fiddle
.expandable-slide {
position: relative;
margin: 2em 2em 0 2em;
box-shadow: 20px 25px 0px 0px #333;
}
.expandable-slide:before {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-right: 15px solid #333;
border-top: 10px solid #333;
border-bottom: 15px solid #fff; /*match background color*/
border-left: 10px solid #fff;/*match background color*/
top: 194px;
left: 0px;
}
.expandable-slide:after {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-bottom: 15px solid #333;
border-left: 10px solid #333;
border-right: 10px solid #fff; /*match background color*/
border-top: 15px solid #fff;/*match background color*/
top: 0px;
left: 194px;
}
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
;
}
How to create a border shadow inset as in the above image
jsfiddle
<div id="progress-bar">
<div id="bar"></div>
</div>
#progress-bar {
margin-top: 50px;
margin-bottom: 100px;
}
#bar {
width: 97%;
height: 20px;
background-color: #eeebf1;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
You can use the css box-shadow property : Box Shadow
#bar {
width: 97%;
height: 20px;
background-color: #eeebf1;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: 3px 3px 3px #CCC inset;
-webkit-box-shadow: 3px 3px 3px #CCC inset;
box-shadow: 3px 3px 3px #CCC inset;
}
http://jsfiddle.net/8kbwd/2/
Give this a shot...
.shadow {
-moz-box-shadow-top: inset 0 0 10px #000000;
-webkit-box-shadow-top: inset 0 0 10px #000000;
box-shadow-top: inset 0 0 10px #000000;
}