I want to create a CSS effect with text-shadow to get dashed or dotted border around text. Like this:
or this:
Is it possible to do that with CSS3 or/and JavaScript?
As per above comment, Find that text-shadow and text-stroke here:
h1 {
font-size: 40px;
color: #000;
text-shadow: -1px 0 #ff0000, 0 1px #ff0000, 1px 0 #ff0000, 0 -1px #ff0000;
}
h2, h3{
text-transform: uppercase;
font-size: 40px;
margin: 30px 0 0;
-webkit-text-stroke: 1px black;
color: #fff;
text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
h3{
text-shadow: none;
}
<h1>Text Shadow</h1>
<h2>Text Stroke</h2>
<h3>Text Stroke</h3>
For more you can also refer this https://css-tricks.com/adding-stroke-to-web-text/
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.
Can an inset box-shadow work on an inputfield?
JsFiddle: http://jsfiddle.net/hKTq2/
Yes, this is something I was working on the other day, it is indeed possible.
input
{
box-shadow:inset 0 0 5px 5px #888;
background: #fff;
}
You just need to have a background set for the shadow to fall onto :)
http://jsfiddle.net/Kyle_/ZCq6w/
In the meantime, this has become a common, though here's my "the perfect inset input".
input {
background: #fff;
color: #525865;
border-radius: 4px;
border: 1px solid #d1d1d1;
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
font-family: inherit;
font-size: 1em;
line-height: 1.45;
outline: none;
padding: 0.6em 1.45em 0.7em;
-webkit-transition: .18s ease-out;
-moz-transition: .18s ease-out;
-o-transition: .18s ease-out;
transition: .18s ease-out;
}
input:hover {
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
}
input:focus {
color: #4b515d;
border: 1px solid #B8B6B6;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}
body {
background: #fff;
margin: 20px;
}
<input type="text" />
Yes you need to add :
background-color:transparent;
Hi ADD this css then you able to insert shadow
.innershadow{ -moz-box-shadow: inset 0 0 5px 5px #888; -webkit-box-shadow: inset 0 0 5px 5px#888; box-shadow: inset 0 0 5px 5px #888; height:15px; background-color:transparent; height:50px}
Just add background:none; on class .innershadow
http://jsfiddle.net/jack_fiddle/hKTq2/6/
you could do something like this to realize a inset dropshadow inside the text-input:
.innershadow {
font-size: 16px;
color: #999;
padding: 6px;
-moz-box-shadow:inset 2px 2px 5px #888;
box-shadow:inset 2px 2px 5px #888;
border: 1px solid #b8b8b8;
}
HTH,
--hennson
I have tried this css code for menu button, but its not look like the one which i wanted, can any one help me out in this.
button.menu
{
background: #e3e3e3;
border: 1px solid #bbb;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
padding: 5px 0px 8px;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 45px;
float:left;
margin-left:15px;
font-family:Segoe UI Semibold, Calibri;
margin-top:-1.5px;
}
button.menu:active
{
background: #d0d0d0;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: black;
}
You can give your buttons an inner shadow with ccs like this:
.shadow {-moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000;}
the text may have a text-shadow which is not supported by IE
.text-shadow {text-shadow: #c0c0c0 3px 3px 5px;}
to achieve the rounded edges you have to use
#example1 {-moz-border-radius: 15px;border-radius: 15px;}
Hope it helps you build your menu!
The new Google Docs UI features cool gray scrollbars.
These appear to be regular scrollbars styled with selectors like ::-webkit-scrollbar-thumb. Which is nice and accessible.
However, I can't get arrow buttons to appear (circled on the screenshot). Inspector shows no corresponding DOM elements or any special CSS. So the question is, how these custom scrollbars are made, including the arrow buttons?
Please check out this fiddle.
Edit:
So it seems that just not all css rules appear in the Inspector.
In particular, you'd need ::-webkit-scrollbar-button:vertical:decrement and ::-webkit-scrollbar-button:vertical:increment, and their horizontal equivalents.
Please see new fiddle (updated 27 Apr. 2012).
Hope this can help you:
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #ebebeb;
overflow: visible;
}
::-webkit-scrollbar-corner {
display: none;
background: #f5f5f5;
}
::-webkit-scrollbar-button {
display: none;
height:0;
width: 0;
}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
display: block;
}
::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
::-webkit-scrollbar-track {
-moz-background-clip: border;
-webkit-background-clip: border;
background-clip: padding-box;
background-color: #f5f5f5;
}
::-webkit-scrollbar-track:vertical, ::-webkit-scrollbar-track:horizontal {
border-left-width: 0;
border-right-width: 0;
}
::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal {
border-style: solid;
border-color: transparent;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
background-clip: padding-box;
background-color: rgba(0,0,0,.2);
min-height: 28px;
padding-top: 100px;
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
background-color: rgba(0,0,0,.4);
}
::-webkit-scrollbar-thumb:active {
-webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.35);
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
border-width: 0;
border-left-width: 0;
border-right-width: 0;
}
It looks like the css tags for the handles don't show up in Chrome's dev tools. You have to examine the source of the sample to see what is really going on.
http://www.webkit.org/blog/363/styling-scrollbars/
Try this:
<style rel="stylesheet" type="text/css">
::-webkit-scrollbar{height:16px;overflow:visible;width:16px}
::-webkit-scrollbar-button{height:0;width:0}
::-webkit-scrollbar-track{background-clip:padding-box;border:solid transparent;border-width:0 0 0 7px}
::-webkit-scrollbar-track:horizontal{border-width:7px 0 0}
::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)}
::-webkit-scrollbar-track:active{background-color:rgba(0,0,0,.05);box-shadow:inset 1px -1px 0 rgba(0,0,0,.14),inset -1px 1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-track:horizontal:hover{box-shadow:inset -1px 1px 0 rgba(0,0,0,.14),inset 1px -1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-track:vertical:hover{box-shadow:inset 1px 1px 0 rgba(0,0,0,.14),inset -1px -1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);background-clip:padding-box;border:solid transparent;border-width:0 0 0 7px;min-height:28px;padding:100px 0 0;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px -1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4);box-shadow:inset 1px 1px 1px rgba(0,0,0,.25)}
::-webkit-scrollbar-thumb:horizontal{border-width:7px 0 0;padding:0 0 0 100px;box-shadow:inset -1px 1px 0 rgba(0,0,0,.1),inset 1px -1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.5);box-shadow:inset 1px 1px 3px rgba(0,0,0,.35)}
::-webkit-scrollbar-corner{background:transparent}
body::-webkit-scrollbar-track-piece{background-clip:padding-box;background-color:#f5f5f5;border:solid #fff;border-width:0 0 0 3px;box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)}
body::-webkit-scrollbar-track-piece:horizontal{border-width:3px 0 0;box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07)}
body::-webkit-scrollbar-thumb{background-clip:padding-box;border-width:1px 1px 1px 5px}
body::-webkit-scrollbar-thumb:horizontal{border-width:5px 1px 1px}
body::-webkit-scrollbar-corner{background-clip:padding-box;background-color:#f5f5f5;border:solid #fff;border-width:3px 0 0 3px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.14)}.whiteBox,.greyBox{padding:16px 0;margin-bottom:16px}.greyBox{background:#f1f1f1}.kd-ruledBox{width:100%}.kd-greyRuled{border-top:1px solid #e5e5e5}.kd-whiteRuled{border-top:1px solid #ebebeb}#openid-icon{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") -36px -70px;width:16px;height:16px}#lj-icon{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") -45px -165px;width:16px;height:16px}#wp-icon{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") -16px -101px;width:16px;height:16px}#typekey-icon{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") 0 -101px;width:16px;height:16px}#aol-icon{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") -45px -133px;width:16px;height:16px}.icon_delete{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") -32px -101px;width:13px;height:13px}.errormsg{text-align:left;background:url("data:image/gif;base64,R0lGODlhEAAPAMQfAP+tHgAAAC4tLR4eHkRDQ//0kIB/f7q3rf/LU/rvsF9eXvr49f/mdv/WZ0I+MtrU0v/Xid++U8+hN7+/j//9w5OQjt/di7+wW/+7OIB/S6+WQhAPDc/PqMC+vSAbC+7n5SH5BAEAAB8ALAAAAAAQAA8AAAWB4CeORCA8Y5oegRIYauw4lBOgsVgFU8EFhJxo4LBkLK5DbjfJBC6JzSBHpDgvjB0stTsULs9GQrDBDQmUbyCCQLAUo12nwGA42hiIqzOk1TUeEhiDCxsOH3J0DBobggAAEAYBFQMCCwl1EA1tCHkLAwMBAwakpaakGyYBq6ytrQIhADs=") no-repeat left top;padding-left:24px;margin-top:5px;color:#c00}#openIdUrlPreviewFade{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==) 0 0 repeat-y;position:absolute;right:.5em;width:32px;height:100%;-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/openid-preview-fade.png',sizingMethod='scale',height='100px')";_background-image:none;z-index:1000}#comments-block dt{margin-top:10px;padding-top:0;padding-bottom:.25em;white-space:nowrap;cursor:pointer}#comments-block dt.collapsed{border-bottom:1px solid #ccc}#comments-block dd{margin:0 0 .75em;line-height:140%;border-bottom:1px solid #ccc}#comments-block dd.collapsed{display:none}.profile-image-container{float:right;margin:.4em 0 .2em .8em;position:relative;z-index:2}img.profile{padding:.2em;border:1px solid #bbb}.status-msg-outer{position:relative;margin:33px auto 0 auto;z-index:100;text-align:center}.status-msg{visibility:hidden;padding:6px 16px;background:#f9edbe;border:1px solid #f0c36d;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;opacity:0;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);-moz-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2);-webkit-transform:scale(.2);-moz-transform:scale(.2);-o-transform:scale(.2);transform:scale(.2);-webkit-transition:opacity 1s,-webkit-transform 0 linear 1s,left 0 linear 1s;-moz-transition:opacity .13s;-o-transition:opacity .13s;transition:opacity .13s}.status-msg.status-msg-yellow-on-white{visibility:visible;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scal(1);transform:scale(1);-webkit-transition:all .13s,left 0 linear 0;-moz-transition:all .218s;-o-transition:all .218s}.status-msg span{margin:0;line-height:29px;font-size:11px}.status-msg a{color:#333;text-decoration:underline}.kd-butterbar a:hover{color:#202020}.kd-butterbar.mini{margin-bottom:-5px}.kd-modaldialog.visible{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}.kd-modaldialog{-webkit-box-shadow:0 4px 16px rgba(0,0,0,.2);-moz-box-shadow:0 4px 16px rgba(0,0,0,.2);-ms-box-shadow:0 4px 16px rgba(0,0,0,.2);box-shadow:0 4px 16px rgba(0,0,0,.2);background:#fff;left:50%;border:1px solid #ccc;padding:30px 42px;position:fixed;right:auto;width:512px;height:auto;overflow:hidden;z-index:100;top:72px;margin-left:-256px;opacity:0;-webkit-transform:scale(1.05);-moz-transform:scale(1.05);transform:scale(1.05);-webkit-transition:all .218s;-moz-transition:all .218s;transition:all .218s}.kd-modaldialog.medium{padding:28px 32px;width:384px}.kd-modaldialog.small{padding:16px 20px;width:256px}.kd-modaldialog h1{margin-bottom:1em}.kd-errormessage{color:#dd4b39;padding:9px 0}textarea.kd-formerror{border:1px solid #dd4b39}</style>
</style>
A quick, easy, cross browser solution would be to use a jQuery plugin like jScrollPane