So I'm using this: border-left:1px solid rgba(96, 96, 96, 0.61); of course is not working on IE, and I found this site: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer that converts RGBA values for IE, now how I adapt the code below with border-left?
{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#9B606060,endColorstr=#9B606060)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#9B606060,endColorstr=#9B606060); /* IE6 & 7 */
zoom: 1;
}
to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
}
div {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, 0.5);
}
</style>
Related
I want to make a blue-style CSS framework. I was dealing with input tag now and I want to use Border-color in it. However, when I was editing the text, it will turn into black instead of this color.
Here is my code:
CSS:
input[class*=bright][type=text]::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgb(150,230,255);
}
input[class*=bright][type=text]::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: rgb(235,255,255);
opacity: 1;
}
input[class*=bright][type=text] {
color:rgb(50,200,255);
background:rgb(235,255,255);
border-style:solid;
border-color:rgb(50,200,255);
border-radius:5px;
}
HTML:
<input class="bright" type="text" placeholder="test">
The border will be black when I tested it on Edge and Chrome and they both show the black border.
I also tried this but it did not work neither:
input[class*=bright][type=text]:active{
border-color:rgb(50,200,255);
}
I wonder if there is a solution to make it work when editing, or changing it into a different bonder color when editing the text.
I want a CSS3-only solution in that this is only a framework by CSS3.
Try this and see if this suits your requirements:
input[class*=bright][type=text]::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgb(150, 230, 255);
}
input[class*=bright][type=text]::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: rgb(235, 255, 255);
opacity: 1;
}
input[class*=bright][type=text] {
color: rgb(50, 200, 255);
background: rgb(235, 255, 255);
border-style: solid;
border-color: rgb(50, 200, 255);
border-radius: 5px;
}
input[class*=bright][type=text]:focus {
outline: none !important;
border-color: rgb(50, 200, 255);
}
<input class="bright" type="text" placeholder="test">
Is there a way to have every alternating repeat of a gradient background go inverse? At the moment I have the following CSS:
html {
background: white; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(blue, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(blue, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(blue, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(blue, white); /* Standard syntax */
background-size: cover;
height: 100%;
}
body {
height: 100%;
}
<html>
<head>
</head>
<body
Hello world
</body>
</html>
Currently it goes from blue to white top to bottom but as I scroll down it repeats again from blue to white Eg. blue->white; blue->white; blue->... . I would like it to go from blue -> white -> blue -> white ->... .
You can use repeating-linear-gradient to achieve it as follows:
html {
background: white;
background: repeating-linear-gradient(blue, white 100vh, white 100vh, blue 200vh);
height: 1980px;
}
body {
height: 100%;
margin: 0;
}
remove the height:100%; from body and check it
or check this website to make your page prettier http://colorzilla.com/gradient-editor
I understand you have that background and at some action, you want the inverse effect. For this you can use transform: scaleY(-1). You can use the gradient in a pseudo-element, in :before{} to prevent child element from inheriting parent styles.
div{
height: 100px;
width:100%;
float:left;
margin-top:20px;
}
.div1 {
background: white; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(blue, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(blue, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(blue, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(blue, white); /* Standard syntax */
background-size: cover;
}
.div2 {
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
<body>
<div class="div1"></div>
<div class="div1 div2"></div>
</body>
I am putting a background Image and overlaying a gradient to make it darker of the overlay text is clearly visible. In IE its not working so I am using the filter: but that makes the gradient opaque. and the background is not visible... how to fix it?
.more {display:block;width:33.33%; padding:15px;padding-top:6em;background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url(http://placeimg.com/760/460/tech ) no-repeat; background-size: cover; border:2px solid white; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); text-decoration:none; color:white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#000000',GradientType=0 ); background-color: #eee;font-family: 'Fira Sans', sans-serif; width:350px;font-weight:bold; font-size:1.45em}
<a class="pod more" href="/markup-html-tags-and-formatting/">Markup: HTML Tags and Formatting</a>
user the following style will hopefully do the job for you
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#000000');
check the the Following link for quick understanding http://www.css3please.com/
This seems to work...
/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#550000FF, endColorstr=#550000FF
);
/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#550000FF, endColorstr=#550000FF
);
Link : http://jsfiddle.net/ps7h7bf3/
Having some problems with adding a different color to my transparency. Previously it was a black fill on top of the image, so when I hover my image to it, the shade would light open. However, when I tried adding a red rgba color to it, the transparency remains the same color.
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
color: rgba(255, 0, 0, 0.2);
}
img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
color: rgba(255, 0, 0, 0.2);
}
You need to change your colorproperty to background-color.
CSS
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
background-color: rgba(255, 0, 0, 0.2);
}
img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
background-color: rgba(255, 0, 0, 0.2) !important;
}
JSFIDDLE
I use this in my CSS:
text-shadow: 1px 1px 1px black;
Text on IE:
Text on Firefox:
and here Fiddle
How can I let it work on IE too? thanks.
USE MS-Filter..
p.shadowed {
text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */
filter: glow(color=#0000ff,strength=3); /* IE */
//alternative
//filter: dropshadow(color=#ffff00,offX=5,offY=5);
}