How to Draw Realistic Smooth Slit Shadow with Pure CSS3

How to draw realistic smooth slit shadow with Pure CSS3?

This is the closest I could get : Demo. I think it's actually not bad.

It combines a black shadow and a white one on top of it.

.yourclass{
    background-color: #fff;
    box-shadow:  -15px 0px 60px 25px #ffffff inset, 
        5px 0px 10px -5px #000000 inset;
}

Browsers' shadows smoothing might differ. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...

Read the CSS Tricks article about box-shadows to get how they're used.

For two shadows (both sides) you need 4 shadows (demo) :

Result:

.yourclass{
    background-color: #fff;
    box-shadow:  0px 100px 50px -40px #ffffff inset,
        0px -100px 50px -40px #ffffff inset,
        -5px 0px 10px -5px rgba(0,0,0,0.5) inset,
        5px 0px 10px -5px rgba(0,0,0,0.5) inset;
}

Beware, browsers' shadows rendering/smoothing can differ a lot. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...

For more info on css shadows, read this article from CSS Tricks

CSS Box Shadow Bottom Only

Do this:

box-shadow: 0 4px 2px -2px gray;

It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.

How to create a drop shadow only on one side of an element?

UPDATE 4

Same as update 3 but with modern css (=fewer rules) so that no special positioning on the pseudo element is required.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

How can I add a box-shadow on one side of an element?

Yes, you can use the shadow spread property of the box-shadow rule:

.myDiv

{

  border: 1px solid #333;

  width: 100px;

  height: 100px;

  box-shadow: 10px 0 5px -2px #888;

}

<div class="myDiv"></div>

Cut Corners using CSS

If the parent element has a solid color background, you can use pseudo-elements to create the effect:

div {

    height: 300px;

    background: red;

    position: relative;

}

div:before {

    content: '';

    position: absolute;

    top: 0; right: 0;

    border-top: 80px solid white;

    border-left: 80px solid red;

    width: 0;

}

<div></div>

How to increase space between dotted border dots

This trick works for both horizontal and vertical borders:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

You can adjust the size with background-size and the proportion with the linear-gradient percentages. In this example I have a dotted line of 1px dots and 2px spacing.
This way you can have multiple dotted borders too using multiple backgrounds.

Try it in this JSFiddle or take a look at the code snippet example:

div {

  padding: 10px 50px;

}

.dotted {

  border-top: 1px #333 dotted;

}

.dotted-gradient {

  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);

  background-position: top;

  background-size: 3px 1px;

  background-repeat: repeat-x;

}

.dotted-spaced {

  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);

  background-position: top;

  background-size: 10px 1px;

  background-repeat: repeat-x;

}

.left {

  float: left;

  padding: 40px 10px;

  background-color: #F0F0DA;

}

.left.dotted {

  border-left: 1px #333 dotted;

  border-top: none;

}

.left.dotted-gradient {

  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);

  background-position: left;

  background-size: 1px 3px;

  background-repeat: repeat-y;

}

.left.dotted-spaced {

  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);

  background-position: left;

  background-size: 1px 10px;

  background-repeat: repeat-y;

}

<div>no

  <br>border</div>

<div class='dotted'>dotted

  <br>border</div>

<div class='dotted-gradient'>dotted

  <br>with gradient</div>

<div class='dotted-spaced'>dotted

  <br>spaced</div>

<div class='left'>no

  <br>border</div>

<div class='dotted left'>dotted

  <br>border</div>

<div class='dotted-gradient left'>dotted

  <br>with gradient</div>

<div class='dotted-spaced left'>dotted

  <br>spaced</div>

What are the naming guidelines for ASP.NET controls?

The reason Visual Studio adds "TextBox1" when you add it to the page is because Microsoft has no way of knowing how you intend to use it. Naming it "Control1" would be too confusing because it could be any number of controls.

Microsoft provides guidance in general for OO naming conventions, but not specifically for naming UI controls. Since UI controls are ultimately variables used in code, they should follow the same convention as any other variable - no hungarian notation prefix.

• msdn.microsoft.com/en-us/library/xzf533w0(vs.71)
• msdn.microsoft.com/en-us/library/ms229002(VS.80)

The main reasons are...

• Type of control may change from textbox to listbox, then all associated code will have to be fixed (noted earlier)
• Your code should be more concerned with the content of the control and less with what type of control it is. When you are concerned with the type of the control, you start to depend on certain functionalities and you break encapsulation - you should be able to easily swap controls without changing much or any code. (Basic OOP principle)
• It is fairly easy to come up with prefixes for the standard controls, but new controls are being developed every day. You may make your own WebUserControl, or you may purchase a set of third party controls. How will you decide which prefix to use for the custom controls? Instead of focusing on the type of control, your code should be concerned with what information is contained in it.

Examples

• txtFirstName => firstName or FirstName
• txtState => state or State
• cboState => state or State (prime example of changing control types what about lstState or rdoState - they should all have the same name because your code is not concerned about the type of control,rather the state the user selected)
• ctlBilling => billingAddress or BillingAddress (custom control - with hungarian notation it is not very evident what the control even is, but with a meaningful name I begin to understand the information contained in it. i.e. billingAddress.Street, billingAddress.FullAddress etc.)

---

Related Topics