i was using a RGBA background, but it was not working in IE6. I found a way to sort this online.
table{
width: 100%;
border-radius: 20px;
border: 2px solid black;
padding: 10px;
text-align: center;
background: #87C4CF;
background: rgba(135, 196, 207, 0.7);
background:rgb(135,196,207);
background: transparent\9;
background:rgba(135,196,207,0.7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b287C4CF,endColorstr=#b287C4CF);
zoom: 1;
}
table:nth-child(n) {
filter: none;
}
This works in IE6 but now the table does not display in IE 8. Works fine in every other browser.
Is a translucent background really going to make or break your layout?
For IE8, make a translucent 10px x 10px PNG in PhotoShop with the color and transparency you want and set it
as the background image, repeating.
Give IE6 a solid background
color
Everything else will support your rgba() background syntax.
You can use CSS3 PIE to better your life with ie
Related
So basically the other day, I was messing around with Xcode.
I saw an Apple video explaining about UI and some new blur effects in IOS 13 so I tested it out and really liked it.
So what I achieved was an image with a blur effect and some text on top, but the text had a different blur than the image, so it was somehow see-tough.
Here is the result:
So basically I would like to achieve this using HTML and CSS but it looks quite difficult.
Is there any possible way to do this?
Thanks in advance anyway.
Using CSS, you can either use opacity property or use rgba colour values.
like so:
<style>
div.background {
background: url(https://loremflickr.com/320/240) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
/* using the opacity property */
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
/* Green background with 70% opacity */
color: rgba(76, 175, 80, 0.7);
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
My computer isn't allowing me to see the image at the moment, but if you want to blur the background, you can use:
filter: blur(8px);
-webkit-filter: blur(8px);
etcetera, for each browser. Be sure to apply those styles to the image itself, and not the container.
You can check out the effect here: https://theexplorerblog.com/learning-base.php
Hope this helps.
http://asifslab.com
I want to lighten the area behind and near the logo on which the logo is located. The purpose for this is because the border of the logo is mixed with the background. Please help
To softly lighten up the area behing the logo you can use a combination of an rgba background, rounded borders and a light shadow on the image:
.head > img {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
Don't forget to add vendor-prefixes to support all browsers...
You can add a background with rgba property to give a fake light background.
Try this
#logo {
background-color: rgba(255,255,255, 0.5);
/* Then other css */
}
In your case, modify your .head to this
.head {
padding-left: 5%;
background-color: rgba(255,255,255,0.5);
}
The "border" as you put it is margin on the body. To remove this, simply:
body { margin:0; }
What you can do is give the .head divider an opaque background:
.head { background:rgba(255,255,255,0.3); }
This isn't supported on older browsers, however.
You can do
convert to PNG and make the original image 0.2 opacity
(better) have a <div> that is position: absolute inside body and the same height as body, then apply the background image and opacity: 0.2; filter: alpha(opacity=20);
Try CSS3 please
.box_shadow {
-webkit-box-shadow: 0px 0px 10px 0px #fff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 0px 10px 0px #fff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
you can do this by 2 ways
1 text-shadow but you are using image so you have to do this in photoshop in layer style > drop shadow and select light color
you can do this in this also but it covers in rectangular form not behind your logo text
and
2 is to use background that also have the same effect in rectangular form
use background:rgba(255,255,255,0.6);
last 0.6 is opacity adjust this to darken or ligten the color
Ive tried to use the rgba() to define a div's background color, but instead of changing the opacity, the fourth value changes brightness (apparently), and rendering the rounded borders black. Here is my CSS, really simple stuff:
#content {
min-height: 200px;
padding: 25px;
border-radius: 50px;
background-color: rgba(169, 245, 208, 0.4);
}
And here is a picture of this issue in both Firefox and Chrome:
Finally, the URL of the site: http://lksonorizacao.com.br/newsite/
The #container parent has a background:#000 set on it. #content’s rounded corners are just revealing that black. rgba() does work the way you think it should.
Is it possible to have a border that is thinner than 1px and works in IE6+ and is not an image and renders properly visually?
Thank you.
I think you could define the width of a border using units like em which would come out to less than 1px, and it would be valid. However, like Will Martin said, for display purposes it would just round it up or down to a whole pixel.
Edit: I have overseen the IE6 restriction, but I leave the answer here for others ...
Its possible with transform:scale(0.5) and put a border element with border:1px; inside. So you get a half pixel border, that (although tricked and browser dependend) is displayed on screen. But I use that trick for printing.
sure, you have to adapt the content of the element, or play with position
.outer {
border:1px solid green;
}
.halfpix {
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
width:200px;
height:100px;
border:1px solid black;
}
<div class="outer">
<div class="halfpix">
</div>
zoom browser window if your browser does not display
</div>
I don't know about IE8-10 (IE6-7 definitily no go) , but in Chrome and FF I get the thinnest border with box-shadow. Works best to get a 1px <hr> instead of the autorendered 2px, but can be used on a border as well.
The thin border on the HR is more prominent in FF than Chrome, but also Chrome renders 2px.
http://jsfiddle.net/GijsjanB/3G28N/
.thin {
border: 1px solid white;
box-shadow: 0 0 1px black;
}
No. You can't show a size smaller than one pixel because pixels are the basic unit of the monitor. And anyway, no browser I know of allows you to specify sub-pixel widths. They just get rounded up to 1px or down to 0px.
Although this isn't (currently) possible in any version of IE or Edge, on the latest versions of Firefox and Chrome you can now use border width values less than 1px.
.borderTest {
box-sizing: border-box;
display: block;
margin: 0.5em;
padding: 0.5em;
width: calc( 100% - 1em );
}
.borderTest:nth-child(1){
border: 1px solid #000
}
.borderTest:nth-child(2){
border: 0.75px solid #000
}
.borderTest:nth-child(3){
border: 0.5px solid #000
}
.borderTest:nth-child(4){
border: 0.25px solid #000
}
<div class="borderTest">1px</div>
<div class="borderTest">0.75px</div>
<div class="borderTest">0.5px</div>
<div class="borderTest">0.25px</div>
This outputs the following on a UHD screen:
you can transform the line like that:
.thin{ -ms-transform:scale(1, 0.5); -webkit-transform:scale(1, 0.5); transform:scale(1, 0.5);}
or, if the line is vertical
.thin{ -ms-transform:scale(0.5, 1); -webkit-transform:scale(0.5, 1); transform:scale(0.5, 1);}
To render native 1px borders on high DPI/#2x/retina displays, there are a couple of tricks.
On Firefox and Safari (macOS and iOS), use a 0.5px border:
/* Fallback: Most browsers now render 0.5px as 1px though */
.el {
border: 1px solid red;
}
.retina .el {
border: 0.5px solid red;
}
On Chrome, use a box-shadow with a 0.5px spread:
.retina-chrome .el {
box-shadow: 0 0 0 0.5px red;
}
Use JS to add a class to the HTML element to only target #2x+ displays.
if (window.devicePixelRatio >= 2) {
document.documentElement.classList.add(
window.chrome ? 'retina-chrome' : 'retina'
);
}
For #1x displays, use a slightly lighter color 1px border.
Try adding a box-shadow
box-shadow: 0px 0px 1px 0px black;
Edit: Chrome 98 (February 1, 2022) added direct support for border-width values less than 1px.
As of mid 2020, current versions of Safari and Firefox both support border-width: .5px.
On the other hand, Chrome will treat it as 1px.
You can detect whether the browser supports it with something like:
var el = document.createElement('div');
el.style.position = 'fixed';
el.style.borderTop = '.5px solid';
document.body.appendChild(el);
var hasSubpixelBorder = el.getBoundingRect().height < 1;
document.body.removeChild(el);
Make sure this is called after document.body is created if you are doing it at startup.
If this is not supported (e.g. Chrome) you can add a class to document.body or some parent element to cause descendants to take on a different border style:
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.noSubpixelBorder .border-top {
border-top-width: 0;
background-image: linear-gradient(180deg, var(--mycolor) 0, var(--mycolor) .5px, transparent 0);
}
}
#media (-webkit-min-device-pixel-ratio: 3) and (-webkit-max-device-pixel-ratio: 3.5), (min-resolution: 3dppx) and (max-resolution: 3.5dppx) {
.noSubpixelBorder .border-top {
background-image: linear-gradient(180deg, var(--mycolor) 0, var(--mycolor) .333333px, transparent 0);
}
}
You can use multiple linear gradients to achieve borders on multiple sides. This takes over background-image so if you are using it for something else you will need to find another way (there are a couple others).
This is not particularly clean, but it seems to consistently work.
If you wanted to be super crafty, you could support oddball pixel ratios by computing the stylesheet on the fly.
0.1em displays border smaller then 1px try dotted border with 1px and compare it with 0.1em
Maybe late post ,
<table>
<tr>
<td style="border:1px ridge">
....text....
</td>
</tr>
<table>
using ridge(alternative) for thin border //IMO
For me this worked:
I needed a white border with less than 1px
So I added some opacity to the border color and it started to look thiner than 1px
like this:border-top: 1px solid #ffffff26;
try
border-top: 1px solid #c9d6df;
smaller than
border: 1px solid #c9d6df;
You could use CSS border-image to set an SVG or other image as the border, and then you could make the image line as narrow as you would like. It may still be rendered on screen as 1px, but if you then print or save the webpage out, the true size will be kept.
With border you have a hard time to achieve thinner line!
If you want to have a horizontal line like me, you can do that with height instead of border:
Note: Maybe you need to zoom in to see the real difference between the two lines!
.normal {
height: 1px;
background-color: #8bacda;
}
.thinner {
height: 0.01em;
background-color: #8bacda;
}
<p>Normal Line</p>
<div class="normal"></div>
<p>Thinner Line</p>
<div class="thinner"></div>
I have anchor element with CSS class.
All browser show the BG-image well, except IE 7 (it won't show the image at all). (I added the _attributes since I saw thats what is used in other sites).
When using IE Developr tools in IE7 it says background-image: none... Thanks
color: #FFFFFF;
cursor: pointer;
height: 102px;
left: 0;
margin-left: -7px;
position: fixed;
text-indent: -9999px;
top: 25%;
width: 35px;
z-index: 9998;
background-color: #279cff;
border-color: #279cff;
border-style: outset outset outset none;
border-width: 1px 1px 1px medium;
background-repeat: no-repeat;
height:170px;
background-image: url(../images/1.png);
background-position: 11px;
If the background has alpha transparency you won't be able to see that in IE6 properly because it doesn't render PNGs well. Either switch to gifs OR stop supporting ie6 :P
The underscore is a hack for CSS attribute to work only on 6, don't use it but use different CSS for IE.
IE6 doesn't handle very well with png. try to use jpg and it will probably work.
If not, try to float or display: block the element to see if it shows the background.
If your starting with _property it is for IE6 hacking. It will work only IE6. For IE6 use _property for IE7 use #property