9
\$\begingroup\$

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

<div class="vid">
  <a href="#" class="vidlink"></a>
</div>

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%}
\$\endgroup\$
4
  • \$\begingroup\$ Minor note : it's iPad and not ipad. I have no idea about what I could change your title to, but you don't need review of. Good result, it has a good look. Just for curiosity, why do you want your video links to look like an iPad ? \$\endgroup\$
    – Marc-Andre
    Commented Mar 3, 2014 at 20:23
  • \$\begingroup\$ @Marc-Andre misread initially, mine is not to question why, mine is but to do or... you get the idea, Client wants what the client wants. I ended up using border-image and opting out of IE10 support for the "iPad" look. Turns out removing all box-shadow's from the source shaved a full second off load time of the page. \$\endgroup\$
    – darcher
    Commented Mar 4, 2014 at 9:26
  • \$\begingroup\$ Achieving the same thing without images doesn't necessarily mean you're making it faster. The heavy use of CSS features (like box-shadows, transition) have quite an impact on page load times as well. \$\endgroup\$
    – kleinfreund
    Commented Dec 17, 2014 at 19:18
  • \$\begingroup\$ That it does, in this particular instance there was already a fair amount of HTTP Requests on the page, so was trying to limit that. I should rewrite this though, I see various ways to improve it. \$\endgroup\$
    – darcher
    Commented Dec 17, 2014 at 19:26

1 Answer 1

Reset to default
2
\$\begingroup\$

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:

<!DOCTYPE HTML>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

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.

\$\endgroup\$
3
  • \$\begingroup\$ I do not agree with your criticism of the OP's style of indentation. It is not that uncommon to indent related selectors like this. In fact, Sass offers an output style (nested) that is very similar to this. I may not like the style, but the OP uses it consistently. \$\endgroup\$
    – cimmanon
    Commented Jan 3, 2015 at 15:16
  • \$\begingroup\$ This is just easier for me to read in large scale stylesheet files. Formatting is, for the most part, preference. When i have an additional developer working in my projects I run prettify in sublime text 3 and it formats similar to your liking. \$\endgroup\$
    – darcher
    Commented Jan 3, 2015 at 16:07
  • \$\begingroup\$ Yup, it's valid, I actually use your preferred formatting in the updated fiddle, even with the semicolon on the last property. \$\endgroup\$
    – darcher
    Commented Jan 3, 2015 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.