We Keep Coding

why inner style is not working in html progress

I am trying to apply linear-gradient to html progress bar but it's not applying the gradient
var customColor = '#cf014d';
ReactDOM.render(React.createElement("progress", { max: "100", value: "80",
style: { color: "linear-gradient(to left, #fff, #fff)" } }), document.getElementById('root'));
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>

you need to use background: instead of color:
color - is for text color

Use background: for the background color. color is for the foreground color.
But, beyond that, progress bars are rendered in a proprietary way by each user agent, one set of styling rules won't work for all browsers. Just setting the style of the element is not enough, the browser renders a progress bar as a series of elements and each part must be styled correctly.
Here' is an example of creating the progress bar with React, but styling it with static CSS for rendering in browsers compliant with the -webkit- vendor prefix.
ReactDOM.render(React.createElement("progress", { max: "100", value: "80" }), document.getElementById('root'));
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
width: 500px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 25px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>

Background property will style the "background" part - not the value.
Here is a nice article for styling the progress bar.
https://css-tricks.com/html5-progress-element/

How to make all images look same

I am new to web developing, and forgive me if this is very naive question but I am facing an issue where I have a row which has 7 images basically certification that My company has. They all are different size and color and doesnt look good together.
I am trying to make them all look same size and responsive.
So far I have used:
clip: rect(0px,60px,200px,0px);
but this just cuts the images, so I need some other solution which can fix this
My first image is 250*100px whereas other is 250*250px likewise I have 7 images all different size so I have set max-width:250px; height:auto; and this is how it look now:
CSS:
.ribbon img{
height:150px;
margin: 2px 2px 2px 2px;
}
.ribbon img:hover{
border: solid 1px black;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px black;
}
.ribbon{
vertical-align:center;
}
What I am trying to get is those first to image should come in center I have tried vertical-align:middle but doesn't work and the PCGS image is full size 250*250 so it is the problem

You could try img { height: 250px; } to makes all img with the same height, browser will handle the width onscale if you leave the width not set
Edit 1 -
If you want they have the same width, you may replace the height with width that setup the value you want, please try this example, https://jsfiddle.net/e7wv86pc/
img { width: 14%; }

You can also use css property background-size set to cover, and set the images using css background-image property like this:
.image {
width: 250px;
height: 250px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.i1 {
background-image: url("http://ia.media-imdb.com/images/M/MV5BMjE4NDMwMzc4Ml5BMl5BanBnXkFtZTcwMDg4Nzg4Mg##._V1_UY317_CR6,0,214,317_AL_.jpg");
}
.i2 {
background-image: url("http://feelgrafix.com/data_images/out/20/932835-gerard-butler.jpg");
}
<div class="image i1"></div>
<div class="image i2"></div>

Generate outline effect on image using css3

How can I generate in realtime this outline effect similar to this image using css3 or javascript?
http://i.imgur.com/1OEnuKF.jpg

Here is an similar effect achieved with filter and background-blending
div {
width: 180px;
height: 400px;
display: inline-block;
}
.test {
background: url(http://i.imgur.com/1OEnuKF.jpg), url(http://i.imgur.com/1OEnuKF.jpg);
background-position: 0px 0px, 3px 3px;
background-size: cover;
background-blend-mode: difference;
-webkit-filter: blur(1px)invert(1);
}
.target {
background: url(http://i.imgur.com/1OEnuKF.jpg);
background-position: top right;
background-size: cover;
}
<div class="test"></div>
<div class="target"></div>
The left part of the image is achieved from the original image; the right hand is the target image.

there are some filter effects in CSS3 , only for webkit
I've no idea how to use them to make the effect you showed
but I think they can help
here is a link that you can test CSS3 filters and get the css code
http://html5-demos.appspot.com/static/css/filters/index.html
and here you can see it's Browser compatibility
hope that help's

Strange "initial" values in d3.js

By executing code that is similar to this (d3.select(..).append("div")), I get divs with such style properties:
<div id="id6"
style="
background-image: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(255, 255, 255);
background-position: initial initial;
background-repeat: initial initial; ">
5
</div>
Questions:
a) Where does initial comes from? b) Is it possible to redefine "defaults"?
Is it Ok that d3 litters in the properties with unnecessary values?
Chrome says that background-position: initial initial; and
background-repeat: initial initial; are Invalid property values. Is it a bug of d3? How can we deal with this error?

This has nothing to do with D3, but with the implicit nature of CSS. When you specify the CSS background property, you are actually specifying multiple properties in shorthand. For example,
background: url(chess.png) gray 50% repeat fixed;
Is actually shorthand for
background-image: url(chess.png);
background-color: gray;
background-position: 50% 50%;
background-repeat: repeat;
background-attachment: fixed;
So, when you set the style "background", your browser automatically expands this shorthand to the full form. That's why you see all of these additional styles; they represent the computed values.

How to draw a "smart" border in Javascript / CSS?

I mean something like this (look at the kids playing soccer tile). See how it increases the brightness of each pixel of the arbitrary picture? How do I do that with jQuery and/or CSS?

One option is to kind of fake it with a very small inset box shadow:
box-shadow: inset 0px 0px 5px 0px #ffff66;
Click here for an example.

Take a look at this: jsFiddle. Using a white-transparent border and the image starting at the same position as the border does the trick.

Try using this solution http://css-tricks.com/7423-transparent-borders-with-background-clip/ , it's not compatibile with IE, versions < 9, however.

You could use the <canvas> element to get/manipulate the image pixels, have a look here: https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas

put the image in the background of a div and set a inset box-shadow.
#myDiv{
background: url(http://dummyimage.com/300/09f/fff.png) 0 0 no-repeat;
-moz-box-shadow:inset 0 0 1px #fff;
-webkit-box-shadow:inset 0 0 1px #fff;
box-shadow:inset 0 0 1px #fff;
}
With the last pixel-parameter you can control the width of the inset-border

#jason; try this solution its also work in IE8 & above http://jsfiddle.net/sandeep/Ksr86/2/
CSS:
body{background:#000}
#test {
background:url('http://cdn.natural-life.ca/mlb-wrap-ie6.jpg') no-repeat center center;
width: 350px;
height: 350px;
position:relative;
}
#test:after {
position:absolute;
background:rgba(0,0,0,0.5);
content:"";
display:block;
top:2px;
left:2px;
right:2px;
bottom:2px;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8
}