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

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
}

Related

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>

How to soften/feather image edges using box-shadow in slideshow?

I have an image slider. In order to have a shoother view I want to show image edges feathered when rolling.
I have tried to use box-shadow property but it did not help me. It is possible to feather image edges using an image editor. But I do not want that.
I have added an additional <div class="insetShadow"> next to <img>.
<div class="item">
<img src="images/01.jpg" alt="" />
<div class="insetShadow"></div>
</div>
.insetShadow
{
width: 100%;
height: 100%;
top:0;
left:0;
position:relative;
box-shadow: inset 0px 0px 13px 5px #fff;
z-index: 20;
}
.carousel img
{
width: auto;
height: 300px;
max-height: 300px;
margin: 0 auto;
position: relative;
z-index: 19;
}
box-shadow is not applicable to img element when inset feature enabled.
In the up-left picture you may see the actual view and in the bottom-right desired view.
Is there any other css solution for that or any jQuery plugin?
Try using a spread radius of at least half of the blur radius:
box-shadow: inset 0 0 12px 6px #fff;
Demo
You can use this generator to mess up with the box-shadow properly. It's just CSS and attach it to the slideshow element with jQuery.
Check this and work around!

Add box-shadow to table column (top to bottom)?

I have this simple table where if I click on a column - I need to make the whole chosen column ( from top to buttom ) as selected.
I don't have a problem with colors or html , but I do have a problem with the box-shadow css property.
This is how it should look :
Please notice "right-shadow" and "left-shadow" (bottom- I don't care)
But When I tried to make it ( JSBIN SAMPLE) via JQ :
$("#tblPlan td:nth-child(2)").addClass('shadow')
Where :
.shadow
{
box-shadow:0px 0px 10px black;
}
It applies it to all borders ( As it should obviously ) (including inside ):
Question
How can I achieve to a solution where only left and right ( bottom I don't care) - will be shadowed ?
jsbin
I updated the jsFiddle to use a inset-box-shadow with :before and :after elements, as shown in this great solution.
I think it's the best looking css-only solution for your problem, most other hacks have very round shadows, which looks odd.
Try something like this:
Your css class:
.shadow
{
box-shadow: 10px 0px 10px -5px black, -10px 0px 10px -5px black;
}
Giving a negative value in the fourth paramenter (-5px) you indicate the shadow spread.
You can see something similar in this answer: How can I add a box-shadow on one side of an element?
You may use pseudo element and relative/absolute position to draw shadow and bg colors: http://jsbin.com/manacigi/17/edit
Updated css:
#tblPlan
{
table-layout: fixed;
width:100%;
border-collapse: collapse;
border:solid 1px lightgrey;
position:relative;
overflow:hidden;
}
#tblPlan tr:first-child td+td
{
white-space: nowrap;
}
#tblPlan td:first-child
{
padding-left:20px;
}
#tblPlan td
{border:solid 1px lightgrey;
padding:15px 5px 15px 5px;
}
#tblPlan td+ td
{
text-align: center;
}
.shadow
{
box-shadow:inset 0 0 0 100px #5FCBE5;
position:relative;
}
.shadow:before,
.shadow:after {
content:'';
position:absolute;
height:100%;
top:0;
bottom:0;
width:1px;
box-shadow:-2px 0 2px;
}
.shadow:before {
left:0;
}
.shadow:after {
right:0;
box-shadow:2px 0 2px;
}

How do I add a mouseover drop shadow effect for circular images?

I'm trying to achieve something like the middle of https://www.popexpert.com, where a hovering over circular images activates a drop shadow effect. How can I achieve this? I tried using CSS, but the drop shadow effect resulted in a square shadow.
You can achieve that effect by using box-shadow and transition properties of CSS3. Here is the working example in the JSFiddle. Note that I've used the border-radius property to make a circle.
Something like this:
JSFiddle Demo
HTML
test
CSS
a {
width:100px;
height:100px;
display:block;
background:yellow;
-webkit-border-radius: 50px;
border-radius: 50px;
}
a:hover {
-webkit-box-shadow: 5px 5px 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 3px 3px rgba(0, 0, 0, 0.3);
}

How to bring drop shadow effect for a div on mouseover using jQuery / Javascript

I have many divs in an html page. I need to give these divs a drop shadow effect on mouseover using jQuery/Javascript. I can get it work if the drop shadow is to be applied initially but I am not able to get it work at the run time.
The divs which needs to have shadow applied has a common class. In the fiddle it is test.
I have created a fiddle
http://jsfiddle.net/bobbyfrancisjoseph/ZEuVE/2/
It should work on IE8 and above and so I guess CSS3 can be used.
use this css for the shadow effect (covers most browsers):
.classWithShadow{
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
use the following jquery:
$(".yourDiv").hover(function()
{
$(this).toggleClass('classWithShadow');
});
Complete code here: http://jsfiddle.net/ZEuVE/3/
EDIT: sorry , I editted your initial fiddle instead of making a new one. But it works ^^ :)
CSS3 shadow is not supported by IE8
For your Above IE8 and other browsers
$("div").hover(function() {
$(this).css(
"box-shadow", "10px 10px 5px #888"
);
}, function() {
$(this).css(
"box-shadow", "0px 0px 0px #888"
);
});
$("div").mouseover(function() {
$(this).css("box-shadow", "5px 5px 5px #555");
}).mouseleave(function(){
$(this).css("box-shadow", "0px 0px 0px #555");
});
OR use mouseenter event
$("div").mouseenter(function() {
$(this).css("box-shadow", "5px 5px 5px #555");
}).mouseleave(function(){
$(this).css("box-shadow", "0px 0px 0px #555");
});
There is little point in using jQuery to add simple hover effects when the CSS :hover psuedo-class works perfectly on its own.
The only problem you have is that IE8 does not support native CSS drop-shdows (box-shadow).
To overcome this you have two choices;
1) Attempt to coax microsoft's proprietary DropShadow and Blur filters into producing something resembling a drop-shadow. It's possible, as this guide shows, but in my experience using MS's filters is your first step on the path to a life filled with misery and pain. Filters affect other, seemingly unrelated styles and elements on the same page in ways that it is impossible to foretell. All you can really do is try it and see.
2) use an image. This is pretty bad, and is tricky to get the image right if the divs are all different sizes. But if you do it in an IE8 only style sheet and know the dimensions beforehand, it can work well.
This Is Universal Answer that works regardless of Codebehind Language
goes in the source aspx. use & CSS
<style>
.img {
border:2px solid #fff;
box-shadow: 1px 1px .5px #ccc;
-moz-box-shadow: 1px 1px .5px #ccc;
-webkit-box-shadow: 1px 1px .5px #ccc;
float:left;
width:auto;
border:solid;
border-width:.25px;
padding:15px;
margin-right:20px;
margin-bottom:20px;
margin-top:20px;
border-radius:5px;
text-align:center;
}
.img:hover {
box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
background: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
}
</style>
<MyShadowdivOnMousOver class="img">
<MyShadowdivOnMousOver >

Categories