Is there a way for the white backdrop of my web site to be completely see-through? I tried using rgba but it doesn't give me the result I desire. Any input leading to a solution to my problem would be greatly appreciated.
Completly see-through?
You can use the css:
selector
{
background: transparent;
}
But you might also want to set the background to none;, but i'm not sure where this is exactly for.
If you mean the browsers background itself. No that's not possible. It will only be possible if you modifie the client, but that will still be offline(unless others download the same client). So short answer; No, that's not possible.
Related
I have this HTML code in which a QR-code is generated via AJAX :
<div class="qr-border">
<p id="qr" class="ajax_qrcode{if $cart_qties < 1} hidden{/if}"></p>
</div>
and I would like to set a border image around the QR-code. I have this image :
and a right corner image :
So I tried this in the CSS :
div.qr-border p.ajax_qrcode {
text-align: center;
padding-bottom: 1.0em;
float: center;
border-image: url('../img/qr-code-border/border.png') 27 27 27 27 stretch stretch;
border-bottom-right-image: url('../img/qr-code-border/corner.png');
}
but nothing works... Do someone has any suggestion ?
thank you for your help !
I don't think it's possible at the moment in any browser. I don't know of any browser that has implemented the full set of rules. Webkit, for example only seems to have implemented the shorthand border-image property. So you will not be able to set a separate right image.
This site has the best explanation of how CSS3 border-image works. It also has an interactive demo from which I take the following quote:
The border-image property in CSS3 is freakin' complicated. Way beyond a simple border, it is really like 9-slice scaling.
I don't actually think it's even possible to do what you want with CSS3 border-image even if a browser had implemented the full set due to the way in which a single image is sliced up to make a border.
border-image is a very new property in CSS3, and as far as i know, no browser supports it natively.
However, you can probably get it to work in Chrome and Safari by using the proprietary -webkit-border-image property instead.
Edit: try -moz-border-image for firefox as well.
Edit again: Your css selector is wrong, there's your problem. It should look like this:
div.qr-border p.ajax_qrcode
You treated the qr-border class as an ID.
If you just want a straight black border, why not just place the image in a slightly larger box (div) and make the background color black? The margin between the outside of the box and the QR-image should be black, and should ultimately provide the same effect right? Unless QR codes work differently with transparency...
Is it possible to blur a div with CSS3? And I don't mean the javascript blur, I mean the photoshop blur.
I don't want the edges of the div to be blurred, I want to contents of the div to be blurred as well. (Am I asking too much out of browsers?)
If not possible, what would be some good workaround techniques?
It is possible with an SVG filter.
The basics of it is that it's just a simple feGaussianBlur.
Here it is: http://jsfiddle.net/aXUtU/1/
This works in Firefox 4, and should work from 3.5 up except for the matter of using the svg element without namespace/xmlns stuff (I think it should work in 3.6).
There are some issues with how much space it gives it to flow in; if you take that text down to one line you'll see the last in particular is getting clipped.
Depending on your content, combining multiple box-shadows (inset and outset) and text-shadow could achieve a similar effect. The link above also contains a start on achieving a similar effect on text.
Well... I came up with this:
.blur {
color: transparent;
text-shadow: 0px 0px 2px #000000;
}
This will make the text blurry, for sure! Only thing is that it will make only text blurry. No images affected or anything. But I think that together with this http://plugins.jquery.com/project/blurimage you could make it more powerful!
Have fun with experiments!
Hey everyone,
Again I need your help :D
Is it possible to add the shadow effect to the text in HTML using only CSS ?? I'm working on a project that has a lot of buttons and I need to find a way to add the shadow effect to the text in them without using images and to be compatible with the most used browsers. I tried using the "text-shadow" property in the CSS but it didn't work.
Thanks
Yes, here is the syntax:
text-shadow: 2px 2px 2px #000;
Generally:
text-shadow: x y blur color;
and a link to the page I found it: http://www.css3.info/preview/text-shadow/.
Yes. And you can find several answer to your question via Google, but this is one of the bests: http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
As IE is still the most used browser, I´m afraid the answer is no.
However, if you are willing to let go of your requirement of only css, you can use for example this jQuery plugin.
While this question has been answered already, I thought it worth adding that it's possible to add support for IE8, using the following filters:
filter: glow(color=#ffff00,strength=3);
filter: dropshadow(color=#ffff00,offX=5,offY=5);
Unfortunately this only seems to work if the element has display: block; and a defined height (or) width; or the element has position: absolute; which is a little less than wonderful.
Citing my source for this: Text-shadow, at: http://www.howtocreate.co.uk/textshadow.html, although I'm unable to verify the accuracy, since I don't routinely use IE (any version) or Windows, given the chance.
Does anybody know how to remove the dotted outline on buttons in Opera?
I have done it.
Here you go: http://jsbin.com/oniva4. [tested on Opera 10.5/11]
The secret is using outline-offset:-2px; (effectively covering the dots) and the background's color for the outline. outline-offset is supported since version 9.5.
The introduction of the article Do not lose your focus
For many web designers, accessibility conjures up images of blind users with screenreaders, and the difficulties in making sites accessible to this particular audience. Of course, accessibility covers a wide range of situations that go beyond the extreme example of screenreader users. And while it’s true that making a complex site accessible can often be a daunting prospect, there are also many small things that don’t take anything more than a bit of judicious planning, are very easy to test (without having to buy expensive assistive technology), and can make all the difference to certain user groups.
In this short article we’ll focus on keyboard accessibility and how careless use of CSS can potentially make your sites completely unusable.
And the list of test given by the article on outline management.
Update 2011-02-08
I can confirm that it is not possible for now. There is an open bug for it.
I say this with the clear proviso that you shouldn't remove the outline unless you replace it with something else that indicates focus state ...
If you apply a transform to the element, it kills the outline in opera; it doesn't even need to do a visible transform, merely applying the property is enough. So this will do the job:
#myButton:focus
{
-o-transform:rotate(0);
}
But I can't promise that wouldn't be considered a rendering bug, and consequently something that may change in the future.
I believe the problem lies in where you specify the outline properties. Try this:
*:focus, *:active {
outline: none; (or possibly outline: 0)
}
I researched this more and it looks like on input fields and buttons it will not work unless you edit the browser's config, like Firefox's about:config page. It seems to be done for accessibility reasons so that a keyboard can be used to fill out and send a form without using a mouse.
I used that trick above for my text area and worked fine! Using a Text Area with an id "itens", here it goes!
#itens:focus, #itens:active{
outline: 1px solid white;
outline-offset: -2px;
}
So, you can play with that:
#itens:focus, #itens:active{
outline: 1px solid lime;
outline-offset: -2px;
}
Are you looking for:
button{
outline:none;
}
or if your button is an input...
input[type=button]{
outline:none;
}
Just read this forum post on the opera website
http://my-beta.opera.com/community/forums/topic.dml?id=712402
There seems to be no fix for it
Further to my tip above -- with experience I've found that it doesn't always work, and isn't always appropriate anyway, since it can change the way the element is rendered in subtle and sometimes unpleasant ways.
So, if that doesn't work, another thing you can do which often does, is to specify the outline color as "rgba(0,0,0,0)"
if you attached css-reset in your stylesheet should solve the issue.
Remove outline for anchor tag
a {outline : none;}
Remove outline from image link
a img {outline : none;}
Remove border from image link
img {border : 0;}
This is less of an answer, and more of an explanation as to what seems to be going on:
The story
My reason for removing opera's outline was to add an outline of my own. To add an outline I used:
:focus{
outline:1px dotted #999;
outline-offset:-3px;
}
This works perfectly fine in every other browser... except Opera. Opera instead gives you this weird interference pattern, which looks like a dotted-dashed outline:
now if you remove your outline, you still have the standard outline that Opera provides, a nice simple 1px spaced dotted line:
Since I have no way of adding a style to every browser except Opera, I instead decided on removing Opera's outline before adding my own. Using brothercake's solution, -o-transform:rotate(0); to do this and then applying my own outline:
Voila!
An Explanation?
From what I can tell, Opera adds it's own secondary outline on top of any outline defined by CSS.
This secondary outline seems to have an independent color, width, style, and offset.
Color is the opposite of the background,
Width is 1px,
Style is dotted,
and the offset is 2px smaller than the border.
sorry there is no style image, the upload didn't work correctly
one interesting thing is that the dotted style of the Opera outline is not the same as the CSS outline's dotted, otherwise there would be no interference pattern with both:
Conclusion:
As I stated above, I am using brothercake's solution which is to nullify the opera border with:
-o-transform:rotate(0);
As he mentioned in his later comment this 'fix' does have some issues as it is a rendering bug:
I have noticed that when returning window or tab focus to the page containing the button, if the button previously had focus, the Opera outline will reappears until the button loses focus or is hovered over.
better:
outline: solid 0;
for all web browsers
I am wondering if there is some way to make an box have the Safari's light highlight all of the time. I would assume there would be a way to replicate this, however I have not found one.
Thanks for any help!
If there is a doubling up, you can remove Safari's blue outline with outline:none.
Currently the only way to achieve this would be to use a background image. You'd take a screenshot from the field and use that as the background for the input. The main drawback here is that you can only have a fixed-size field because the image is static.
However, you may wish to take advantage of some CSS3 styles such as box-shadow which will work in Safari, Chrome and Firefox. Take a look at this page for more info. For your example you'd probably want something like this:
box-shadow: 0 0 4px #aaf;
One final point to make - if you replicate Safari's highlight outline, it's very likely Safari itself will "double up" the effect, so you need to be careful...