Does anyone know the CSS or tut for the style to make this type of text shadow/indent?
A google search for css text shadow/indent is not bringing it up...
I couldn't post the image inline so here's the direct link: http://i.minus.com/ibr0BdDsx0IaBT.png
The CSS for it should be something like this:
text-shadow: -1px -1px rgba(0, 0, 0, 0.6);
Link: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp
text-shadow: 2px 2px 2px #000;
meaning
text-shadow: x-position y-position shadow-size shadow-color;
if you look at the page the screenshot is comming from with FireBug, you could have found that the effect is made with:
#footer-wrap #footer .foot-col {
text-shadow: 0 1px 0 #FFFFFF;
}
Complete CSS3 shadow tut and many examples - http://bit.ly/WKd65x
Might this works for you
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow property.</p>
</body>
</html>
Here is the source: CSS Text & Font Properties
Related
I am trying to achieve an effect where I have a shadow that follows text content closely.
I've documented my progress here: https://codepen.io/wolfr/pen/QEGOdY?editors=1100
text-shadow doesn't fit my needs. It produces an inferior shadow (test: https://codepen.io/wolfr/pen/KMNyXj?editors=1100 )
The problem with my current approach is that it's pretty bad for people using screen readers.
I've tried several methods to hide HTML content from being read by sceen readers in another pen here. They include using media queries and the speak: none attribute. None of them work. I can't position the box off-screen (the classic method) since I actually needs its layout. I've also tried hiding content in a :before attribute but that doesn't work either.
You want make a shadow that follows close the text around? If do, you can use multiple text-shadow in order to make a more elaborated shadow.
p {
color: #d53400;
font-size: 32pt;
font-weight: 500;
text-shadow: 2px 0 8px #555, -2px 0 0 #555, 0 2px 0 #555, 0 -2px 0 #555, 1px 1px #555, -1px -1px 0 #555, 1px -1px 4px #555, -1px 1px 0 #555;
text-align: center;
}
<p>Text shadow<br />This is another line</p>
I know this could be a silly question. I have been trying to remove the shadow which comes after clicking any button in ThemeRoller for a while. There is no option given in the data theme roller to change the color or remove it.
Can anyone help me with that.
Thanks
Edit 1
Okay after dwelling into the css this is what worked for me
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-c .ui-focus,
html .ui-bar-c .ui-focus,
html .ui-body-c .ui-focus,
html body .ui-group-theme-c .ui-focus,
html head + body .ui-btn-c.ui-focus,
html head + body .ui-body-c.ui-focus {
-webkit-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
-moz-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
}
made the shadow to 0px instead of default 12px.
Note: you have to do it in the respective theme like mine was data-theme-c
Thanks to the people who shared there answers
Well you could try the following styles:
button:active{
box-shadow: none !important;
}
If the issue isnt related to box-shadow, try outline.
Okay after dwelling into the css this is what worked for me
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-c .ui-focus,
html .ui-bar-c .ui-focus,
html .ui-body-c .ui-focus,
html body .ui-group-theme-c .ui-focus,
html head + body .ui-btn-c.ui-focus,
html head + body .ui-body-c.ui-focus {
-webkit-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
-moz-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
}
made the shadow to 0px instead of default 12px.
Note: you have to do it in the respective theme like mine was data-theme-c
Thanks to the people who shared there answers
property in CSS is a good way to have shadows for dynamic text in HTML. However the browsers (especially safari, firefox) render a quite strong shadow with quite low settings:
text-shadow:1px 1px 2px #000; // still quite strong
text-shadow:1px 1px 2px #000; // still quite strong
text-shadow:0.01em 0.01em 0.01em #000; // some browsers do not even display this
How can I achieve cross browsers-compatible text shadows which are still not as strong as the first two given text shadows, but still displayed? Is there a solution for this problem?
Try using a "weaker" colour:
text-shadow: 1px 1px 2px rgba(0,0,0, 0.25);
Adjust that 0.25 as needed - a value of 0 will be invisible, and 1 will be the same as the #000 you're currently using.
You could try semi-transparent text-shadow:
text-shadow:1px 1px 2px rgba(0,0,0,0.25);
Demo
I have a html sturcture like that:
<form class="form">
<div class="row">
<input id="search" class="search-input" type="text" placeholder="Search">
<div class="input-icon" data-icon="s"></div>
<div class="triangle-left"></div>
</div>
</form>
and the following css code witch is important to know:
input[type="text"]:focus, input[type="text"]:hover, input[type="password"]:focus, input[type="password"]:hover {
border:1px solid #ffa800;
box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset;
-moz-box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset;
}
input[type="text"]:focus + .input-icon:before, input[type="text"]:hover + .input-icon:before, input[type="password"]:focus + .input-icon:before, input[type="password"]:hover + .input-icon:before{
color:#ffa800;
border-color: #ffa800;
}
input[type="text"]:focus .triangle-left, input[type="text"]:hover .triangle-left, input[type="password"]:focus .triangle-left, input[type="password"]:hover .triangle-left{
border-color:transparent transparent transparent #ffa800;
}
The first code works great if i hover or focus the input the div with class input-icon get a new color and border-color. My question is can i also make changes in the second div (.triangle-left) ? i have tried it but i doesn't work. only first div is effected. if i change the div so first triangle-left than the css code works.
Do you know a way to do this or is the only possibility to use a small jquery script?
Thanks for your help:)
Regards
Crazymodder
As a quick edit:
http://jsfiddle.net/xngbv/
The problem is that you didn't actually have anything setting .triangle-left to use the styles you wanted for hover and focus. .triangle-left is a div, not any kind of an input, so the styles you had set in your last block, where you used .triangle-left, had no effect
Edit: the changes I made that affected the rendering are using
.triangle-left:focus, .triangle-left:hover
instead of
input[type="text"]:focus .triangle-left, input[type="text"]:hover .triangle-left
because the way you had it, the style applies to an input with type text when focused/hovered, that also has style triangle-left. Since the only element with class triange-left was a div, no elements were affected. What you want is to apply the style directly to the element that actually does have triangle-left set. If you didn't want to go by just the classname, you could use div.triangle-left:focus or something similar.
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons