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?
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%}
1 Answer 1
Your code is perfectly valid, according to the HTML and CSS validators at W3C:
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.
-
\$\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– cimmanon2015年01月03日 15:16:44 +00:00Commented 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– darcher2015年01月03日 16:07:59 +00:00Commented 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– darcher2015年01月03日 16:27:35 +00:00Commented Jan 3, 2015 at 16:27
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\$