Soft Edges using CSS?
Another option is to use one of my personal favorite CSS tools: box-shadow
.
A box shadow is really a drop-shadow on the node. It looks like this:
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);
The arguments are:
1px: Horizontal offset of the effect. Positive numbers shift it right, negative left.
2px: Vertical offset of the effect. Positive numbers shift it down, negative up.
3px: The blur effect. 0 means no blur.
color: The color of the shadow.
So, you could leave your current design, and add a box-shadow like:
box-shadow: 0px -2px 2px rgba(34,34,34,0.6);
This should give you a 'blurry' top-edge.
This website will help with more information: http://css-tricks.com/snippets/css/css-box-shadow/
Apply soft edges to image using CSS
You can try something like this:
JSFiddle Example
HTML :
<div id="image-container"><div>
CSS:
#image-container {
background: url(http://pic2.ooopic.com/11/26/30/31b1OOOPIC48.jpg) left top no-repeat;
box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset;
width: 300px;
height: 300px;
}
Round edges on shorter side in CSS
Just use a huge number, e.g.
border-radius: 9999999px;
.horizontal { width: 175px; height: 50px;}.vertical { width: 50px; height: 175px;}.box { border-radius: 9999999px; display: inline-block; vertical-align: middle; margin: 0 10px; background: blue;}
<div class="horizontal box"></div><div class="vertical box"></div>
Blur the edges of an image or background image with CSS
If what you're looking for is simply to blur the image edges you can simply use the box-shadow with an inset.
Working example:
http://jsfiddle.net/d9Q5H/1/
HTML:
<div class="image-blurred-edge"></div>
CSS
.image-blurred-edge {
background-image: url('http://lorempixel.com/200/200/city/9');
width: 200px;
height: 200px;
/* you need to match the shadow color to your background or image border for the desired effect*/
box-shadow: 0 0 8px 8px white inset;
}
How to feather the edges of an image using CSS
You need to change some stuff around to get this to work. First, take inline-block off the <a class='divLink'>
tag. Then try the following:
.vignette {
width: 80%;
margin: 1em auto;
box-shadow: 50px 50px 113px #defeec inset,-50px -50px 110px #defeec inset;
height: 150px;
background-size: contain;
background-repeat: no-repeat;
}
Then use the following html (and scrap the <img>
tag)
<p class="vignette" style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg);"></p>
Of course, you could also put the background-image
rule inside the css block, but sometimes declaring a background image inline makes a lot more sense, especially if you expect to have a number of photographs or similar.
CSS - Fading All Edges of div to Transparent over Defined Distance
I've used box shadows in the past to achieve this sort of effect.
box-shadow: 0px 0px 25px 25px rgba(55,54,51, 1);
By adding a box shadow with a translation of 0px in any direction, a spread distance of 25px, and a blur radius of 25px, it makes it the 50px blur you like. By changing the margin to 50px and using top
, right
, etc. for positioning you can get it exactly where you want.
HTML:
<div class="formBackground">
<form id="gform" method="POST" action="***">
<input type="text" id="name" name="name" placeholder="Name" style="width: 100%; float: left;">
<input type="text" id="email" name="email" placeholder="Email" style="width: 100%; float: left;">
<input type="textarea" id="message" name="message" placeholder="Write your message here..." style="width: 100%; float: left;">
</form>
</div>
CSS:
.formBackground {
height: auto;
background-color : rgba(55,54,51, 1);
overflow: hidden;
margin: 50px;
box-shadow: 0px 0px 25px 25px rgba(55,54,51, 1);
}
How do I make a CSS triangle with smooth edges?
Even in pure CSS we can get the smooth diagonals.
.triangle {
width: 0;
height: 0;
border-top: 0;
border-bottom: 30px solid #666699;
border-left: 20px solid rgba(255, 255, 255, 0);
border-right: 20px solid rgba(255, 255, 255, 0);
}
Instead of giving transparent you can make use of rgba(255, 255, 255, 0). This again gives transparent. But the alpha=0 makes smooth diagonals.
Check the browser support for rgba css-tricks.com/rgba-browser-support
Thanks
How to style a vertical line with rounded edges?
There's quite a few ways to do this with CSS. You can use a span and just style it with height and width or you can use a pseudo element like :before or :after and style that.
Here's the span for example:
div {
display: flex;
padding: 10px;
align-items: center;
}
span {
height: 40px;
width: 5px;
background-color: #FECC01;
border-radius: 99px;
margin: 0 20px;
}
<div>
<p>
9:30am
</p>
<span></span>
<p>
School Tour
</p>
</div>
Related Topics
Why Won't Opera (11.00) Display Custom (@Font-Face) Fonts
Body { Font-Size: 100.01%; } Vs Body { Font-Size: 100%; }
Twitter Bootstrap - Position Issue with Row-Fluid
Reactjs How to Use Ref Inside Map Function
How to Override Scoped Styles in Vue Components
CSS Background-Position Animate Right to Left
CSS Table-Like Alignment Using No Tables? (CSS Relativelayout)
CSS Table-Like Alignment Using No Tables? (CSS Relativelayout)
Responsive CSS - Target 1024 X 768 Screen Size Only
CSS Text-Align: Center; Is Not Centering Things
How to Format CSS for 8.5X11 Inch Printed Pages
Trying to Do a CSS Transition on a Class Change
How to Tell Org-Mode to Embed My CSS File on HTML Export