Creating an iPad-style video frame with CSS and without images In an effort to reduce the images being used on the page, I've manipulated box-shading, etc. to make a "vector" looking monitor/ipad look. 

This is great and all, gets the job done, however, seems there is still a large load draw on the box-shading rendering. Is there a better method or tweak to this method that would be a better approach?

Original Demo | 
Updated Demo

HTML



&lt;div class="vid"&gt;
  &lt;a href="#" class="vidlink"&gt;&lt;/a&gt;
&lt;/div&gt;


CSS



.vid{
    max-width:800px;
    width:80%;
    margin:0 auto}

  .vidlink{
    margin-top:50px;
    background:url('img/vidbg.svg') no-repeat;
    background-position:50%;
    background-size:cover;
    border:1px solid rgba(0,0,0,.6);
    box-shadow:0 0 0 25px #fff, 
               0 0 5px 27px #777;
    border-radius:5px 5px 0 0;
    display:block;
    margin-bottom:-5px;
    padding:25% 0}

    .vidlink:before{
      content:" ";
      position:relative;
      left:50%;
      top:50%;
      margin:-40px 0 0 -40px;
      padding:28px 40px;
      background:url('img/icon/play.svg') no-repeat;
      background-size:75px;
      background-position:50%}

      .vidlink:hover:before{
        background:url('img/icon/play-hover.svg') no-repeat;
        background-size:75px;
        background-position:50%}
Your code is perfectly valid, according to the HTML and CSS validators at W3C:


  HTML Validator
  CSS Validator


However, there are a couple things you could improve.

HTML:

I assume you already know to always specify the doctype and character encoding in your HTML files.  The character encoding is not required by the validator, but it is good to always include it:

&lt;!DOCTYPE HTML&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;


Your CSS is difficult to read because of your indentation and your use of braces.  All of your indentation should match, not have some blocks at the nested indentation level, and some at their proper level.  Also, most CSS files use braces like this:

.vid {
    max-width:800px;
    width:80%;
    margin:0 auto;
}


Not like this:

.vid{
    max-width:800px;
    width:80%;
    margin:0 auto}


Edit

After clarification in the comments, this is a valid CSS style, but I still prefer the above style.

End Edit

The CSS validator does not require that you have a semi-colon ; after the very last item, but you should to keep things all the same style.

Overall, your code is good and the UI is beautiful.  These are just a few things you could improve on and a few tips that just because they are so important, they deserve to be here.