Soft Edges Using CSS

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/

Screenshot

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



Leave a reply



Submit