Is it possible to create a button that look like this in CSS:
Of course I don't mean using an image as background, I can easily do that. I'm talking about the webkit type of solution.
The short answer is yes, it can be done. I went ahead and gave it a shot.
These are the steps I took:
I opened your bitmap in Sketch, my favorite graphical tool for all things web
I zoomed in to your bitmap, traced the outline with a rounded rectangle and gave it the correct color
I started adding box-shadows, both outside and inset, to replicate the bitmap as close as possible. Note that I only used black and white (with varying alpha values) for the box shadows. This way you can easily change the color of the button by just changing the background-color.
I also added two extra shapes for the bottom shadow and the top glow, as I did not manage to get this right with just box shadows. As long as it are just 2 elements that should not be a problem however, you can use the :before and :after pseudo elements to include these in your css.
The resulting image looks something like this (not exact, but pretty close I think):
And then I translated the drawing to css, by choosing 'copy css attributes' and manually adding the :before and :after elements and doing some fine tuning. This is the (unprefixed) css I came up with:
.button {
display: inline-block;
color: #fff;
text-shadow: 0 0 2px rgba(0,0,0,.3);
font-family: sans-serif;
box-shadow:
inset 0 0 2px 0 rgba(255,255,255,.4),
inset 0 0 3px 0 rgba(0,0,0,.4),
inset 0 0 3px 5px rgba(0,0,0,.05),
2px 2px 4px 0 rgba(0,0,0,.25);
border-radius: 4px;
padding: 8px 16px;;
font-size: 12px;
line-height: 14px;
position: relative;
}
.button.red { background: #EA3D33; }
.button.green { background: #7ED321; }
.button.blue { background: #4A90E2; }
.button:before, .button:after {
content: '';
display: block;
position: absolute;
left: 2px;
right: 2px;
height: 3px;
}
.button:before {
top: 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: rgba(255,255,255,.6);
box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
}
.button:after {
bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: rgba(0,0,0,.15);
box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
}
and a fiddle to demonstrate: http://jsfiddle.net/pn4qk3wL/
Related
I am having real trouble trying to track down a blue border in a site at the min http://innovativeapps.dk/ you will see on top of the video its their but when I look on the css i cant find it.
.video-container .description .inner {
/*background: rgba(255, 255, 255, 0.79) none repeat scroll 0 0;*/
border-radius: 4px;
color: #ffffff;
font-size: 28px;
font-weight: bold;
line-height: 42px;
margin: 0 auto;
padding: 8px 25px;
width: 68%;
}
Would anyone know where it is it almost looks like its in the video.
Look at the code, there is a blue box shadow box-shadow: 0 0 7px #1E70B9; under .navbar-default in your custom.css file line no.47..
There was a shadow given in navbar-default in your custom.css file line no.47
.navbar-default {
background: #ffffff none repeat scroll 0 0;
box-shadow: 0 0 7px #1E70B9; /*This is a blue shadow*/
position: fixed;
top: 0px;
}
Box shadow is used to make border like shadows for any container mostly.
Its like text-shadow for text.
navbar-default {
background: #ffffff none repeat scroll 0 0;
**box-shadow: 0 0 7px #1E70B9; //this line make the blue shadow.**
position: fixed;
top: 0px;
}
I've got a challenge for you all. I'm trying to make the following shape without using any
What's difficult about it (impossible?) for me is the double border. Sure, I could put some other shapes over the cutouts but then the border lines would be disrupted. Anyone got any ideas?
I believe that SVG is the way you should go. However, just to see if it was possible, I decided to make this shape using pure HTML and CSS.
Here's the fiddle.
HTML
<div id="wrap">
<div id="mainshape"></div>
<div id="upperleftcut"></div>
<div id="diamondcut"></div>
</div>
We will be using 3 shapes here, and they'll be positioned inside a wrapper that will act as the overall shape. The two cutaways are their own divs.
CSS
#wrap {
width: 206px;
height: 150px;
position: relative;
overflow: hidden;
}
#upperleftcut, #mainshape, #diamondcut {
position: absolute;
background-color: white;
border-style: double;
}
#upperleftcut {
border-style: none double double none;
width: 100px;
height: 20px;
}
#diamondcut {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
width: 30px;
height: 30px;
left: 197px;
top: 50px;
border-style: double;
}
#mainshape {
border-style: double;
background-color: white;
width: 200px;
height: 144px;
}
The CSS property you are looking for is border-style: double;. The divs have each been absolutely positioned within the wrapper, and the diamond one has been rotated to form the desired triangle cut.
Conclusion
This would be far easier to do with an SVG, and far more flexible as well. The borders here between the different shapes also don't line up nicely. Don't do this with CSS, but know that you can.
As far as I can tell, you can't get rid of those border overlaps.
I answered to something simular using box-shadow to draw borders and cut off background a couple of days ago.
Here , i come with something close to your drawing http://codepen.io/gc-nomade/pen/lqzcm
div {
margin:3em;
border:1px solid;
box-shadow:inset 0 0 0 4px white,
inset 0 0 0 5px black;
min-height:10em;
position:relative;
background:pink;
}
div:before {
content:'';
display:inline-block;
float:left;
width:5%;
height:2em;
height:12vh;
background:white;
box-shadow:
-1px -1px white,
2px 2px 0 2px white,
1px 4px 0 0 black,
4px 5px 0 0 black,
5px 4px 0 0 black,
inset -1px -1px 0 0 black;
}
div:after {
position:absolute;
content:'';
height:32px;
width:32px;
background:white;
box-shadow:1px 1px 0 0 black,
4px 4px 0 0 white,
5px 5px 0 0 black;
right:0;
top:3em;
margin-right:-18px;
transform:rotate(135deg);
}
This question already has answers here:
Two color borders
(12 answers)
Closed 1 year ago.
With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow.
On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible?
NOTE: I'm giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a dynamic look so that it feels like an inset element, and the white element is pillow embossed. So thing is a bit:
div.white{
border: 2px solid white;
border: 1px solid grey;
}
But you know it's a double declaration, and is invalid. So how can I manage such thing in CSS?
And if I put border-style: double then you know I can't pass two different color for the singe double border.
div.white{
border: double white grey;
}
Additionally, I'm familiar with LESS CSS Preprocessor. So if such a thing is possible using CSS Preprocessor, please let me know.
Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
padding: 2em;
width: 16em;
height: 16em;
position: relative;
margin: 0 auto;
}
.double-border:before {
background: none;
border: 4px solid #fff;
content: "";
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
pointer-events: none;
}
<div class="double-border">
<!-- Content -->
</div>
If you want borders that are consecutive to each other (no space between them), you can use multiple box-shadow declarations (separated by commas) to do so:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
box-shadow:
inset 0 0 0 4px #eee,
inset 0 0 0 8px #ddd,
inset 0 0 0 12px #ccc,
inset 0 0 0 16px #bbb,
inset 0 0 0 20px #aaa,
inset 0 0 0 20px #999,
inset 0 0 0 20px #888;
/* And so on and so forth, if you want border-ception */
margin: 0 auto;
padding: 3em;
width: 16em;
height: 16em;
position: relative;
}
<div class="double-border">
<!-- Content -->
</div>
I use outline a css 2 property that simply works. Check this out, is simple and even easy to animate:
.double-border {
display: block;
clear: both;
background: red;
border: 5px solid yellow;
outline: 5px solid blue;
transition: 0.7s all ease-in;
height: 50px;
width: 50px;
}
.double-border:hover {
background: yellow;
outline-color: red;
border-color: blue;
}
<div class="double-border"></div>
you can add infinite borders using box-shadow using css3
suppose you want to apply multiple borders on one div then code is like:
div {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3 */
outline: 5px solid hsl(0, 0%, 60%);
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
}
Use of pseudo-element as suggested by Terry has one PRO and one CON:
PRO - great cross-browser compatibility because pseudo-element are supported also on older IE.
CON - it requires to create an extra (even if generated) element, that infact is defined pseudo-element.
Anyway is a great solution.
OTHER SOLUTIONS:
If you can accept compatibility since IE9 (IE8 does not have support for this), you can achieve desired result in other two possible ways:
using outline property combined with border and a single inset box-shadow
using two box-shadow combined with border.
Here a jsFiddle with Terry's modified code that shows, side by side, these other possible solutions. Main specific properties for each one are the following (others are shared in .double-border class):
.left
{
outline: 4px solid #fff;
box-shadow:inset 0 0 0 4px #fff;
}
.right
{
box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}
LESS code:
You asked for possible advantages about using a pre-processor like LESS. I this specific case, utility is not so great, but anyway you could optimize something, declaring colors and border/ouline/shadow with #variable.
Here an example of my CSS code, declared in LESS (changing colors and border-width becomes very quick):
#double-border-size:4px;
#inset-border-color:#fff;
#content-color:#ccc;
.double-border
{
background-color: #content-color;
border: #double-border-size solid #content-color;
padding: 2em;
width: 16em;
height: 16em;
float:left;
margin-right:20px;
text-align:center;
}
.left
{
outline: #double-border-size solid #inset-border-color;
box-shadow:inset 0 0 0 #double-border-size #inset-border-color;
}
.right
{
box-shadow:0 0 0 #double-border-size #inset-border-color, inset 0 0 0 #double-border-size #inset-border-color;
}
You can use outline with outline offset
<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}
Maybe use outline property
<div class="borders">
Hello
</div>
.borders{
border: 1px solid grey;
outline: 2px solid white;
}
https://jsfiddle.net/Ivan5646/5eunf13f/
Try below structure for applying two color border,
<div class="white">
<div class="grey">
</div>
</div>
.white
{
border: 2px solid white;
}
.grey
{
border: 1px solid grey;
}
You can use the border and box-shadow properties along with CSS pseudo elements to achieve a triple-border sort of effect. See the example below for an idea of how to create three borders at the bottom of a div:
.triple-border:after {
content: " ";
display: block;
width: 100%;
background: #FFE962;
height: 9px;
padding-bottom: 8px;
border-bottom: 9px solid #A3C662;
box-shadow: -2px 11px 0 -1px #34b6af;
}
<div class="triple-border">Triple border bottom with multiple colours</div>
You'll have to play around with the values to get the alignment correct. However, you can also achieve more flexibility, e.g. 4 borders if you put some of the attributes in the proper element rather than the pseudo selector.
<div class="row">
some content
<div class="info-box">
some other content
</div>
</div>
.row {
float: left;
margin-bottom: 1.5%;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background-color: rgb(250, 250, 250);
width: 685px;
-webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}
.row:hover {
background-color: rgb(240, 245, 245);
-moz-box-shadow: inset 0 0 5px #4d4d4d;
-webkit-box-shadow: inset 0 0 5px #4d4d4d;
box-shadow: inset 0 0 5px #4d4d4d;
}
.info-box {
position: relative;
border-left: 1px solid #e3e3e3;
padding: 15px;
width: 170px;
font-size: 0.93em;
color: #363636;
float: left;
}
Alright, I have this info box inside row. Since at .row:hover, I'm creating an inner shadow. The border-left of the info-box seems to show on top of the shadow when you hover on row.
My question is if you can make the shadow on top of the border. Thanks in advance.
Note: z-index doesn't work for me.
Of course it's on top: the child has to appear above the parent, otherwise it'd be hidden by it. To achieve the desired effect, you would have to apply the shadow to an element that came above, ie after, the .info-box. You can achieve this with no additional markup by using the :after pseudo-element.
If you take a look at this fiddle, I've achieved the basic proposition — although you may want to shift the border to the pseudo element or adjust dimensions to get it positioned just right.
Basic guide to what I did:
Gave .row the CSS position: relative so we can place children in relation to it.
Moved everything apart from the background property in the .row:hover rule to a new .row:hover:after rule.
Added content: ' ' to force the pseudo element to display.
Added positioning, height and width, top and left to make the pseudo element cover available width.
EDIT: Felipe points out in the comments that any attempt to click in through to object within .row will be intercepted by the :after element, but suggests you can use pointer events set to pointer-events: none to mitigate the problem (in everything other than IE and Opera). I've updated my example to show this in action.
Does anyone know the CSS required to add an outer border around textboxes like this example from Twitter?
Thanks for the help
outline:
input{outline:solid 4px #ccc}
(another option it to wrap the input with div of course)
You can use the box-shadow property
http://jsfiddle.net/VXJdV/
input {
display: block;
margin: 2em;
box-shadow: 0 0 10px gray;
}
input[type="text"],input[type="password"]{
border: solid 1px #ccc;
padding: 4px;
border-radius:4px;
}
You'll want to cover the other border radius too, -moz- & -webkit-
Demo: http://jsfiddle.net/BqpZh/
.classname
{
box-shadow:0 0 2px red
}
use this class or you and add box-shadow property to your existing class. You can increase 2px to 5px or 10 for broder shadow
.front-card .text-input:focus {
border:1px solid #56b4ef;
-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6)
}
Using box shadow will help you like this:
class{
box-shadow: horizontal vertical blur-radius spread-radius color;
box-shadow:2px 0 3px 5px red;
}
horizontal (-value will move towards left) (+value on right)
vertical (-value will move upwards) (+value on downwords)
blur-radius: will blur the color you choose around box
spread-radius: will spread color to the chosen distance
You can use a wrapping div outside of the input box and give it that background color and rounded corners!
HTML:
<div class="outter"><input class="inputbox"></input></div>
CSS:
.outter {
margin: 20px;
padding: 10px;
border-radius: 15px;
background-color: red;
display: inline-block;
}
.inputbox {
border-radius: 5px;
}
Here you have a jsfiddle: http://jsfiddle.net/dsBgw/
You can consider using multiple shadows:
input[type="text"]{
box-shadow: 0 2px 2px rgba(0,0,0,0.2),
0 1px 5px rgba(0,0,0,0.2),
0 0 0 12px rgba(255,255,255,0.4);
}
i have a demo, it it like the login form for twitter. if you want to view, pls click here.