I would like to reproduce the border color made by firebug when you try to inspect the DOM element in a web page.
It looks like the border around the text "Link2" of the following image.
The border around the text "Link" is what I did. The code is visible from this link.
jsfiddle.
Can someone help me to write the css code to reproduce the border of Link2?
Thanks
You'll need to use box-shadows, like this:
http://jsfiddle.net/GolezTrol/AEDsY/
.cl3 {
-webkit-box-shadow: 0 0 3px 3px lightblue;
-moz-box-shadow: 0 0 3px 3px lightblue;
box-shadow: 0 0 3px 3px lightblue;
}
That effect is achieved using the box-shadow css property.
To get as much support as possible, use -moz-box-shadow, -webkit-box-shadow and box-shadow.
To get your desired effect, use:
-moz-box-shadow: 0 0 5px 2px blue;
-webkit-box-shadow: 0 0 5px 2px blue;
box-shadow: 0 0 5px 2px blue;
You would use something like this:
-webkit-box-shadow: 0px 0px 3px blue; /* Saf3-4 */
-moz-box-shadow: 0px 0px 3px blue; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 3px blue; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
Check out http://css3please.com/ - it's a great resource for playing with new CSS properties.
Related
Original code that puts a drop shadow at the bottom of my home page header (http://gsmile.org/Word-Dev/) in all browsers except Chrome:
.page-id-48 #main-header {
box-shadow: 0 1px 10px 0 #000000 !important;
}
Revised code, based on other suggestions, but still doesn't work:
.page-id-48 #main-header {
-webkit-box-shadow: 0 1px 10px 0 #000000 !important;
-moz-box-shadow: 0 1px 10px 0 #000000 !important;
box-shadow: 0 1px 10px 0 #000000 !important;
}
Do not know exactly why Chrome is behaving like this. At first it looked like the shadow was hidden on page load. In Chrome it works if you set the "spread" value to at least one Pixel instead of zero (I tried in the debugger console).
.page-id-48 #main-header {
box-shadow: 0 1px 10px 1px #000000 !important
}
Play a bit with different properties on your page.
More info on box-shadow here: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
This is just for old browsers for a newer Google Chrome this will definitly have no impact:
-webkit-box-shadow: 0 1px 10px 0 #000000 !important;
-moz-box-shadow: 0 1px 10px 0 #000000 !important;
.page-id-48 #main-header {
box-shadow: 2px 2px 10px 1px #666 !important;
}
looks like you had you height and spread set to zero, just change those values and it should be fine ... I also changed to black to a dark grey for aesthetic reasons
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.
Here's my source image:
And my source image zoomed in:
Any thoughts on how to accomplish this with only CSS3? Notice the slight bleed upwards into the element.
Update: I've removed the vendor prefixes, since almost every browser that supports these properties do not need them. Dropping them is considered a best practice at this point.
See Caniuse page for border-radius and box-shadow.
the best (and only) way to do this is to use multiple box-shadows:
element {
box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
border-radius: 20px;
}
box-shadow works like this:
box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size];
border-radius works like this:
border-radius: [size];
/*or*/
border-radius: [topleft/bottomright size] [topright/bottomleft size];
/*or*/
border-radius: [topleft] [topright] [bottomright] [bottomleft];
you can specify the Height an length of the curve like this:
border-radius: [tl-width] [tr-width] [br-width] [bl-width] / [tl-height] [tr-height] [br-height] [bl-height];
It's just using two box shadows, one inset and the other outset, i.e:
.box {
width: 100px;
height: 100px;
box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1);
border: solid #ccc 1px;
border-radius: 10px;
margin: 50px 0 0 50px;
}
See it here: http://jsfiddle.net/WYLJv/
This is actually done with two CSS3 box-shadows.
CSS:
#fuzz
{
height: 100px;
width: 100px;
border-radius: 5px;
border: 1px solid #333;
box-shadow: 0px 0px 5px #333, inset 0px 0px 2px #333;
}
You can see it in action when i get back to real computer to edit the fiddle :-) (using my tablet now)
Obviously change the colors to your taste :)
Look at css3 property border-radius. It has options for x and y offset color and the blur radius. In your case a greyish color no offset and blur if 4px ought to work.
I'm a bit late but, yes, use border radius and box-shadow(s) and you should be good to go.
.block {
border-radius:6px;
box-shadow: inset 0px 0px 2px 2px #aaa, 3px 3px 5px 0px #eee;
}
Try adding a border-radius and a text-shadow in your css.
.box {
border-radius:20px;
text-shadow:2px 2px black;
}
Hope this helps.
You can probably just get away with setting the border to a light colour and outline to a darker colour, then just set the border-radius. Note I haven't tested this, and if memory serves the outline does not curve with border-radius. Also note that border-radius requires several attributes to be set to become cross-browser compatible. Refer to http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/ for more info.
If this fails, you could always use an inner-div, which you set to position absolute, left 0, right 0, top 0 and bottom 0 and then use that as either the inner or outer border. Setting the border-radius will definitely work then.
Regards,
Richard
So how can I do this, using css3, mabe box-shadow? http://screencast.com/t/48LooBwz
Can someone help me?
I need to apply that styling to an element?
Best Regards,
You could use box-shadow, and hack it for IE:
.shadow {
zoom:1; /* This enables hasLayout, which is required for older IE browsers */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#b0b0b0', Direction=135, Strength=3);
-moz-box-shadow:2px 2px 2px #b0b0b0;
-webkit-box-shadow:2px 2px 2px #b0b0b0;
box-shadow:2px 2px 2px #b0b0b0;
}
Here's an example: http://www.splashdust.net/2010/05/ie-hack-css-dropshadow/
What do you mean, a 1px drop shadow? Yep, 'box-shadow' would do (except for IE of course).
/* horizontal offset, vertical offset, blur radius, color */
box-shadow: 0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
Do you mean this : box-shadow: 0px 10px 5px #888; ?
info : http://www.css3.info/preview/box-shadow/
Doesn't work in all browser.
I have a searchbox with auto-suggest that pops a div up underneath it with multiple search string suggestions (like google). Is it possible to have drop shadow on the auto-suggest box with CSS or will I need a script of some sort? I tried a background image but the number of suggests can vary from 1 to 10 or 15.
I'd prefer something that works in IE6+ and FF2+ if possible. Thanks!
This works for me on all my browsers:
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
then just give any div the shadow class, no jQuery required.
CSS3 has a box-shadow property. Vendor prefixes are required at the moment for maximum browser compatibility.
div.box-shadow {
-webkit-box-shadow: 2px 2px 4px 1px #fff;
box-shadow: 2px 2px 4px 1px #fff;
}
There is a generator available at css3please.
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
The most widely compatible way of doing this is likely going to be creating a second div under your auto-suggest box the same size as the box itself, nudged a few pixels down and to the right. You can use JS to create and position it, which shouldn't be terribly difficult if you're using a fairly modern framework.
you might want to try this. Seems to be pretty easy and works on IE6 and Moz atleast.
<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div>
The general syntax is :
border-[postion]:[border-style] [border-width] [border-color] | inherit
The list of available [border-style]s are :
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid
inherit
You can try using the PNG drop shadows. IE6 doesn't support it, however it will degrade nicely.
http://www.positioniseverything.net/articles/dropshadows.html