Related
I have a problem with the text shadow property.
This works:
text-shadow: 1px 1px 0 var(--primary-color);
This doesn't work:
text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);
Does anyone know what the problem is?
Thank you!
--primary-color: #f00;
text-shadow: 1px 1px 0 var(--primary-color);
text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);
evaluates to
text-shadow: 1px 1px 0 #f00;
text-shadow: 1px 1px 0 rgba(#f00, 0.5);
rgba(#f00, 0.5) is not a valid rgba color.
Instead you could do:
:root {
--primary-color: 255, 0, 0;
}
.opaque {
text-shadow: 1px 1px 0 rgb(var(--primary-color));
}
.translucent {
text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);
}
<div class="opaque">Opaque</div>
<div class="translucent">Translucent</div>
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/
I would like to add a white background to my letters.
I have an image as example, but I would like to build this image with CSS.
To see the difference, edit html with editor and add black as body background.
I have tried this with text-shadow, but it didn't work great.
My question is how can I build this with css?
Kind regards,
Itouch
I believe that text-shadow is the only way to go.
something like :
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff
Demo : http://codepen.io/mbrillaud/pen/zGxdMQ
I have a solution which is not really answering your question but still it might help (i hope).
You can make use of SVG and stroke-linejoin.
<svg height="100" width="250">
<text
x="0"
y="50"
fill="red"
stroke="#ffffff"
stroke-width="3px"
font-size="50px"
letter-spacing="-4"
stroke-linejoin="round"
stroke-linecap="round"
font-weight="600">I love SVG!</text>
</svg>
JSBIN: http://jsbin.com/zemeya/2/edit?html,css,output
Edit: I changed the font to be more funky adding this line between head tags.
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
It's a combination of text-shadow and letter-spacing.
First of all you need to get a solid "border" around your text.
For that use this:
text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff,
-2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff
But that's not all. As there is another shadow which is kinda blurry you have to add another text-shadow:
text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff,
-2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff,
2px 2px 3px #000;
Now you may remove some letter-spacing. You can do this by use a nagative value for it:
letter-spacing: -6px;
#import url(http://fonts.googleapis.com/css?family=Chewy);
span {
font-family: 'Chewy', cursive;
letter-spacing: -6px;
font-size:50px;
color:#555;
text-shadow:-1px 0 #fff,
0 1px #fff,
1px 0 #fff,
0 -1px #fff,
-2px 0 #fff,
0 2px #fff,
2px 0 #fff,
0 -2px #fff,
2px 2px 3px #000;
}
<span>home</span>
Demo
You can play with text-shadow property, but than you would have to stack values to achieve thicker stroke this way:
body {
background-color: #ddd;
}
p {
font-size: 52px;
color: #666666;
text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,
4px 4px 6px #000, 4px 4px 6px #000;
}
<p>home</p>
Also on codepen.
You can do a colored outline on text by using the text-shadow in CSS. The trick is you have to do multiple shadows:
.white_background {
text-shadow: 0px 0px 1px #fff,
0px 0px 1px #fff,
0px 0px 1px #fff,
0px 0px 1px #fff;
}
CSS supports multiple listings of text-shadow. Each listing stacks with the others. If you stack up enough, they give the appearance of a solid outline.
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
I need to create a one pixel shadow on three sides of an element using box shadow. I'm using the following code, except it's creating a two pixel border but I only need one.
-moz-box-shadow: 0 1px 1px #c00
-webkit-box-shadow: 0 0 1px 0 #c00
box-shadow: 0 0 1px 0 #c00
Try 3 shadows, no blur. http://jsfiddle.net/leaverou/8tgAp/1/
body {
width: 300px;
height: 200px;
margin: 20px auto;
-moz-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
-webkit-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
}
Using the normal border declaration is the way to go, but if—for whatever reason—you're unable to use border, then you can hide one side of the shadow with the :before or :after pseudo-selector.
Example:
body {background-color: #000; color: #fff}
.module {
height: 100px;
width: 100px;
background-color: #000;
-moz-box-shadow: 0 0 2px #f00;
-webkit-box-shadow: 0 0 2px #f00;
box-shadow: 0 0 2px #f00;
}
.module:before {
content: '';
border-top: solid #000 1px;
display: block;
position: relative;
top: -1px;
}
You can see it in action here: http://jsfiddle.net/3nspR/