Glow Round an Image on Hover [duplicate] - html
I have a PNG image, that has free form (non square).
I need to apply drop-shadow effect to this image.
The standard approach ...
-o-box-shadow: 12px 12px 29px #555;
-icab-box-shadow: 12px 12px 29px #555;
-khtml-box-shadow: 12px 12px 29px #555;
-moz-box-shadow: 12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow: 12px 12px 29px #555;
... displays shadows for this image, like it is a square. So, I see my image and square shadow, that doesn't follows the form of object, displayed in image.
Is there any way to do it properly?
Yes, it is possible using filter: dropShadow(x y blur? spread? color?), either in CSS or inline:
img {
width: 150px;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">
<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">
A little late to the party, but yes, it is totally possible to create "true" dynamic drop shadows around alpha masked PNGs, using a combination of dropshadow-filter (for Webkit), SVG (for Firefox) and DX filters for IE.
.shadowed {
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
<!-- HTML elements here -->
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="12" dy="12" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
Some comparisons between true drop-shadow and box-shadow and an article on the technique I've just described.
img {
-webkit-filter: drop-shadow(5px 5px 5px #222222);
filter: drop-shadow(5px 5px 5px #222222);
}
That worked great for me. One thing to note tho in IE you need the full color (#222222) three characters don't work.
If you have >100 images that you want to have drop shadows for, I would suggest using the command-line program ImageMagick. With this, you can apply shaped drop shadows to 100 images just by typing one command! For example:
for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done
The above (shell) command takes each .png file in the current directory, applies a drop shadow, and saves the result in the shadow/ directory. If you don't like the drop shadows generated, you can tweak the parameters a lot; start by looking at the documentation for shadows, and the general usage instructions have a lot of cool examples of things that can be done to images.
If you change your mind in the future about the look of the drop shadows - it's just one command to generate new images with different parameters :-)
As Dudley mentioned in his answer this is possible with the drop-shadow CSS filter for webkit, SVG for Firefox and DirectX filters for Internet Explorer 9-.
One step further is to inline the SVG, eliminating the extra request:
.shadowed {
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
Add border with radius in you class if its a block. because by default shadow will apply on block border, even if your image have rounded corner.
border-radius: 4px;
change its border radius according to your you image corner.
Hope this help.
Just add this:
-webkit-filter: drop-shadow(5px 5px 5px #fff);
filter: drop-shadow(5px 5px 5px #fff);
example:
<img class="home-tab-item-img" src="img/search.png">
.home-tab-item-img{
-webkit-filter: drop-shadow(5px 5px 5px #fff);
filter: drop-shadow(5px 5px 5px #fff);
}
Here is ready glow hover animation code snippet for this:
http://codepen.io/widhi_allan/pen/ltaCq
-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
When i posted this originally it wasnt possible so this is the workaround. Now I simply suggest using other answers.
There is no way to get the outline of the image exactly but you can fake it with a div behind the image in the center.
If my trick doesn't work then you have to cut up the image and do it for every single of the little images. (the more images the more accurate the shadow will look)
but for most images it looks alright with just one img.
what you need to do is to put a wrap div around your img like so
<div id="imgWrap">
<img id="img" scr="imgLocation">
</div>
then you put an empty divider inside the wrap (this will serve as the shadow)
<div id="imgWrap">
<div id="shadow"> </div>
<img id="img" scr="imgLocation">
</div>
and then you have to make the shadow appear behind the img with CSS:
#img {
z-index: 1;
}
#shadow {
z-index: 0; /*make this value negative if doesnt work*/
box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
width: 0;
height: 0;
}
now position the imgWrap to position the original img...
to center the shadow of the img you can mess with the first two values
of the box-shadow making them negative....
or you can position the img and the shadow divs absolutely
making img top and left values = 0
and the shadow div values = half of img width and height respectively.
If this looks horrid cut your img up and try again.
(If you don't want the shadow behind the img just on the outline then you need to make your img opaque and make it act as if it was transparent which is not that hard and you can comment and I'll explain later)
In my case it had to work on modern mobile browsers, with a PNG image in different shapes and transparency. I created drop shadow using a duplicate of the image. That means I have two img elements of the same image, one on top of the other (using position: absolute), and the one behind has the following rules applied to it:
.image-shadow {
filter: blur(10px) brightness(-100);
-webkit-filter: blur(10px) brightness(-100);
opacity: .5;
}
This includes brightness filter in order to darken the bottom image, and a blur filter in order to cast the smudgy effect drop shadow usually has. Opacity at 50% is then applied in order to soften it.
This can be applied cross browser using moz and ms flags.
Example: https://jsfiddle.net/5mLssm7o/
There's a proposed feature which you could use for arbitrarily shaped drop shadows. You could see it here, courtesy of Lea Verou:
http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom
Browser support is minimal, though.
This won't be possible with css - an image is a square, and so the shadow would be the shadow of a square. The easiest way would be to use photoshop/gimp or any other image editor to apply the shadow like core draw.
A trick I often use when I just need "a little" shadow (read: contour must not be super-precise) is placing a DIV with a radial fill 100%-black-to-100%-transparent under the image. The CSS for the DIV looks something like:
.shadow320x320{
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
This will create a circular black faded-out 'dot' on a 320x320 DIV. If you scale the height or width of the DIV you get a corresponding oval. Very nice to create eg shadows under bottles or other cylinder-like shapes.
There is an absolute incredible, super-excellent tool to create CSS gradients here:
http://www.colorzilla.com/gradient-editor/
ps: Do a courtesy ad-click when you use it. (And, no,I'm not affiliated with it. But courtesy clicking should become a bit of a habit, especially for tool you use often... just sayin... since we're all working on the net...)
Maybe you are in search of this.
http://lineandpixel.com/blog/png-shadow
img { png-shadow: 5px 5px 5px #222; }
You can't do this reliably across all browsers. Microsoft no longer supports DX filters as of IE10+, so none of the solutions here work fully:
https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx
The only property that works reliably across all browsers is box-shadow, and this just puts the border on your element (e.g. a div), resulting in a square border:
box-shadow: horizontalOffset verticalOffset blurDistance spreadDistance color inset;
e.g.
box-shadow: -2px 6px 12px 6px #CCCED0;
If you happen to have an image that is 'square' but with uniform rounded corners, the drop shadow works with border-radius, so you could always emulate the rounded corners of your image in your div.
Here's the Microsoft documentation for box-shadow:
https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx
Related
How can I reflect contents downwards [duplicate]
Is there similar property to -webkit-box-reflect for the mozilla and other browsers? I could not find on google which other browsers have support for this. So if someone can tell me or give me link, that would be really nice.
This is possible with not only webkit (latest chrome or safari) but also in latest firefox. Here is the example: http://codepen.io/jonathan/pen/pgioE HTML: <div id="someid"> <img src="image url" /> <div/> CSS (webkit): #someid { /* need some space for the reflection */ margin-bottom: 120px; /* the gradient makes the reflection fade out */ -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%); } CSS (Firefox - Gecko): #someid { position: relative; /* need some space for the reflection */ margin-bottom: 120px; } #someid:before { content:""; /* needed or nothing will be shown */ background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, -moz-element(#someid) 0px -127px no-repeat; -moz-transform: scaleY(-1); /* flip the image vertically */ position:relative; height:140px; width: 360px; /* should be > image width + margin + shadow */ top: 247px; left:0px; } Firefox uses -moz-element to do the reflections (https://developer.mozilla.org/en-US/docs/CSS/element), whereas webkit uses a proprietary vendor prefix for reflections. I hope this helps!
The -webkit-box-reflect property is only supported by webkit browsers, namely Chrome and Safari. As it is a proprietary webkit property, there is no equivalent for other browsers. The alternative would be to use javascript to create a mirror element with faded opacity.
CSS apply gradient to right triangle shape with solid fill
I want to apply the same gradient to the triangle (class="triangle-right") as the rectangle (class="fillblue"). I have seen some other examples but they are not working for me. Combining both shapes and using a single class would be awesome too! JS FIDDLE HERE! CSS: .fillblue { background: rgb(208,228,247); /* Old browsers */ background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); /* IE6-9 */ height: 40px; width: 100px; display: inline-block; float: left; color: white; text-align: center; line-height: 40px; font-weight: bold; } .triangle-right { width: 0; height: 0; border-top: 20px solid transparent; border-left: 40px solid lightblue; border-bottom: 20px solid transparent; float: left; } HTML: <div class="fillblue">Step 1</div><div class="triangle-right"></div>
Part 1: Giving the triangle a gradient The easiest way to achieve this would be to invert your triangle. and extend the length of the element with the gradient. JSFiddle demo. Inverting the triangle Rather than giving the border-left on the triangle a solid colour, you want to give the top and bototm borders the colour (in this case we want to match the background colour, so lets make these white as that's the JSFiddle background colour): .triangle-right { ... border-top: 20px solid white; border-left: 40px solid transparent; border-bottom: 20px solid white; } If you're unsure what this achieves, here is an example of the triangle when the top and bottom borders are set to red instead of white: Increasing the width of your gradient element As your triangle is 40px wide, we need to increase the width of our gradient element by 40px. For this I've used padding to ensure the text remains in the same place: .fillblue { ... padding-right: 40px; } With the same red triangle we used above, this is what it now looks like: Positioning the inverted triangle on top of our gradient element Now we simply need to set a negative margin on our inverted triangle to make it appear on top of our gradient element: .triangle-right { ... margin-left: -40px; } Finally, using the red triangle again, our finished result looks like this: Part 2: Combining both shapes into one element To do this we can make use of the :after pseudo-element. JSFiddle demo. First off, lets modify our HTML: <div class="fillblue">Step 1</div> Now lets give our .fillblue element relative positioning. We do this so that we can absolutely position our triangle in the next step: .fillblue { ... position: relative; } Now we modify our previous .triangle-right styling to use this :after pseudo-element instead: .fillblue:after { width: 0; height: 0; border-top: 20px solid white; border-left: 40px solid transparent; border-bottom: 20px solid white; } Finally we give it the new properties to position it correctly and actually make it display: .fillblue:after { ... content: ''; position: absolute; top: 0; right: 0; }
I wanted to suggest using border-image: linear-gradient(...); but then I looked up https://developer.mozilla.org/en-US/docs/Web/CSS/border-top and saw that it's not possible to apply a border-image to just 1 of the borders, and then make the other borders transparent. There's also no border-left-image, so that won't work either. Since border-image is a relatively new addition to CSS (it's part of CSS3), it's not integrated in CSS as well as the other border styles. That's why doing this with borders is not possible. (It looks like this (simple webkit-only demo) if you do try to add a border-image, and then try to override it with transparent borders - it doesn't work) Assuming you want to keep using borders to create your triangle, I would say this is not possible. The only way you could make it work then is by changing the div to a square that's got a diagonal gradient, and is rotated 45 degrees via CSS transforms. That would end up being something like this: .triangle-right { display:inline-block; background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */ /* etc. */ width:28px; /* ~ sqrt(2*40^2)/2 */ height:28px; -webkit-transform: rotate(45deg); /* etc. */ margin-top:6px; margin-left:-14px; } Demo Keep in mind that that is probably not the best solution, since it'd rely purely on transforms, which are not supported in every browser, and there are no good fallbacks for it. It does have one advantage over James Donnely's solution, which is that it keeps its soft borders instead of becoming jagged. It does have other significant downsides though, namely that you're relying on fixing its position with transform and margin. It is possible other browsers don't handle this exactly the same as Chrome does, and therefore show your triangle differently. They should all show it the same way, but there's always a chance some browser decides to do things slightly differently. Explanation of the code: The /* etc. */ stands for the other browser prefixes, the width and height are 28px because that's the height of the rotated square, its diagonal length (sqrt(width^2 + height^2)). This is also the reason the margin-left needs to be -14px (half of this diagonal length): it needs to move 14 pixels to the left, so that its corner is moved over the .fillblue element. As was asked below in the comments, it is also possible to scale the triangle to be wider (or slimmer). This can be done by simply changing the transformation to scale(2, 1) rotate(45deg) so that it applies the stretching and rotating in the right order. A demo of this can be found at http://jsfiddle.net/x61Lyar0/2/. PS: If you want your arrow to be less pointy, you can apply border-radius: 0 2px 0 0; (or border-top-right-radius: 2px) to smooth it out just a little bit.
How to draw multiple horizontal lines (Notebook Paper effect) using css?
I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page. Here is my CSS code: .horizontalLines { border-bottom: 2px solid #CCCCCC; padding-top: 25px; width: 100%; } This code only allows me to make only one line, how can i make multiple lines?
As an alternate solution, there's a beautiful lined paper effect written using CSS available here. background-color: #fff; background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em); background-size: 100% 1.2em; Browser Support: The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients).
Using your way you have to insert multiple of these elements. You can't simply repeat them. Another - and I guess more suitable way - would be using a background image that you repeat horizontally and vertically to achieve this effect. body { background: transparent url(path/filename) repeat 0 0; } Or, if you can use gradients, nikhita dkslfslg's answer (+1 for that) might help.
Here you go. .paper { background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs="); } Just Encode an image in base64 and it works fine. You can try encoding HERE.
You can do it with box shadows: .lines{ width:500px; height:400px; background: red; box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue; } http://jsfiddle.net/7DkKc/ Or simply with images: .lines{ background: transparent url(url) 0 0 repeat-x; } Or with gradients. http://www.colorzilla.com/gradient-editor/
Lighten an area using css
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
How to create a CSS shade effect with a faded sidebar
Hi I'm not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.
Check this out: CSS3 gradient Generator, pick the colors and generate the code, then add it to the body in your CSS (Or whatever element you want it on). .body /*or element of your choice*/ -webkit-gradient( { linear, left bottom, left top, color-stop(0.02, rgb(91,204,245)), color-stop(0.76, rgb(5,37,70)) ) -moz-linear-gradient( center bottom, rgb(91,204,245) 2%, rgb(5,37,70) 76% ) } For the shadow from your main content use: .MyElement { box-shadow: 10px 10px 5px #888; } And also check out CSS3 Box-shadow. Also, because not every browser supports the box-shadow yet (IE), you can use border images. But IE doesn't suppport that either so, what I did on a site was to just make a 1px high PNG image of the shadow and set it as the background to my wrapper div, repeated it down/up (can't remember if that's X or Y) and it worked fine :) Hope some of that helps.
img.shady { display: inline-block; webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; padding: 10px; margin-bottom: 5px !important; min-height: 240px; width: 630px; border: 1px solid #D7D7D7 }
Your sidebar should use a png image that has an opacity/transparency, then the shaded sidebar will work with gradient background. (Note, IE6 wont like this solution, so you have to find an IE6PNG hack solution which can be found almost everywhere nowadays) For gradient background, either create a background image or use the css3 gradient