patternhtmlMinor
Creating an iPad-style video frame with CSS and without images
Viewed 0 times
withoutcsscreatingipadwithvideostyleandimagesframe
Problem
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
CSS
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
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%}
Solution
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:
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:
Not like this:
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
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.
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:
Page Title
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.
Code Snippets
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>.vid {
max-width:800px;
width:80%;
margin:0 auto;
}.vid{
max-width:800px;
width:80%;
margin:0 auto}Context
StackExchange Code Review Q#43330, answer score: 2
Revisions (0)
No revisions yet.