I am currently attempting to create a two SVG overlay / masking like the image below: I have created a SVG for the overlay. As it stands, I am trying to create two elements one for the green side and one for the blue side. For what I am trying to achieve, is this the best approach? If not, what is? Is it worth creating two SVGs to achieve the overlay in the example below? ``` .hero-overlay { position: absolute; top: 0; height: 100%; width: 100%; -webkit-mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center; mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center; clip: rect(0px, 580px, 500px, 0px); } .mask-left { background-color: red; } .mask-right { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); background-color: blue; } ``` jsFiddle

In my webpage, I have the following `@media` queries: ``` /* Smartphones (iPhone 3GS/4 and others; portrait and landscape) */ @media only screen and (min-width: 320px) and (max-width: 480px){ html { font-size: 60%; } } /* iPhone 5 (portrait and landscape) */ @media only screen and (min-width: 320px) and (max-width: 568px){ html { font-size: 60%; } } /* iPhone 6 (portrait and landscape) */ @media only screen and (min-width: 375px) and (max-width: 667px){ html { font-size: 60%; } } /* iPhone 6 Plus (portrait) */ @media only screen and (min-width: 414px) and (max-width: 736px) and (orientation : portrait){ html { font-size: 60%; } } /* Other smartphones with smaller screen (portrait and landscape) */ @media only screen and (max-width : 319px){ html { font-size: 50%; } } /* iPads 1/2 iPad Mini (portrait and landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio : 1) { html { font-size: 90%; } } /* iPad 3/4 (portrait and landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio : 2) { html { font-size: 62.5%; } } /* Google Nexus 10 (portrait) */ @media only screen and (min-device-width : 800px) and (max-device-width : 1280px) and (orientation : portrait) { html { font-size: 100%; } } /* Google Nexus 7 (portrait) */ @media only screen and (min-device-width : 604px) and (max-device-width : 966px) and (orientation : portrait) { html { font-size: 100%; } } /* Google Nexus 7 2 (portrait and landscape) */ @media only screen and (min-device-width : 600px) and (max-device-width : 960px) { html { font-size: 100%; } } /* Desktops and laptops */ @media only screen and (min-width : 1224px) { html { font-size: 100%; } } /* Large screens */ @media

I've implemented a multicolored bar as shown in the image below. It is a bar that is placed above the legend of an HTML form. (Ignore the border radius for now.) I have accomplished this with a simple approach of using `span` elements. `*{ margin: 0px; padding: 0px; } span{ height: 5px; width: calc(100% / 7); background: black; display: inline-block; } span[data-color='green']{ background: #C3E279; } span[data-color='pale-yellow']{ background: #F7FEC8; } span[data-color='orange']{ background: #FFD069; } span[data-color='red']{ background: #F27669; } span[data-color='light-purple']{ background: #DC9CBE; } span[data-color='purple']{ background: #C59AE0; } span[data-color='blue']{ background: #969DCC; }` ` ` Is there a better way to do this to make the code smarter, presentable and easy to understand to other developers?

I currently have a working implementation of a + and - tank level thingy (I don't really know what to call it). In which will be able to 'add' or 'remove' so-called 'liquid' from the container. However, I feel my implementation of this is very inefficient, and would appreciate your input on this matter. ` $(document).ready(function() { $('#plus1').click(function() { var myVal = $('.loadingTank').css("box-shadow"); var x = myVal.slice(-1); if (x == 't') { myVal = myVal.split(" ")[4]; } else { myVal = myVal.split(" ")[2]; } myVal = -(parseInt(myVal, 10) / 5); if (myVal 99) { $('#tankPercentage').text("FULL"); } else { $('#tankPercentage').text(myVal + "%"); } myVal = myVal * 5; $('.loadingTank').css("box-shadow", "rgb(56, 56, 56) 0px -" + myVal + "px 0px -2px inset"); }); $('#minus1').click(function() { var myVal = $('.loadingTank').css("box-shadow"); var x = myVal.slice(-1); if (x == 't') { myVal = myVal.split(" ")[4]; } else { myVal = myVal.split(" ")[2]; } myVal = -(parseInt(myVal, 10) / 5); //gets percentage of tank //myVal=Math.round(myVal); if (myVal >= 1) { myVal -= 1; } if (myVal `.loadingTank { display: inline-block; border: 2px solid black; margin: 15px; max-width: 350px; height: 500px; width: 30%; background-color: #808080; box-shadow: rgb(56, 56, 56) 0px -200px 0px -2px inset; /*Change this value for leveling*/ float: left; position: relative; border-radius: 2%; } .loadingTank:before { content: ""; width: 70%; height: 100%; float: left; background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(208, 208, 208, 0))); background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0

Background Unsatisfied with existing implementations of Miller Columns (used to edit hierarchical data), I decided to re-invent the wheel. Problem Most of the existing implementations are too complex, offer extraneous functionality, reliance on complex (or unavailable) frameworks, have numerous dependencies, are riddled with severe bugs, or require non-hierarchical data. Source The source code has two parts. The JavaScript code performs a breadth-first traversal of an arbitrarily nested set of lists and wraps them into a consecutive, flattened hierarchy surrounded by `div` tags. The CSS code places the `div`s in left-floating columns (and applies superficial presentation items). `(function( $ ) { $.fn.millerColumns = function() { var $list = $(this).first(); var $columns = $(this); // Breadth-first traversal to rearrange list items into // consecutively ordered div wrapper elements. while( ($list = $list.children()).length ) { $list.each( function( index, element ) { var $parent = $(element).parent(); if( $(element).is( "li" ) ) { $parent = $($parent).parent(); } // Store the parent id for showing child columns. var id = $($parent).attr( "id" ); if( $(element).is( "ul" ) ) { // The parent element shall be marked as 0. if( id === undefined ) { id = 0; } var $item = $("li#" + id); $item.addClass( "parent" ); $item.on( "click", function() { // Hide everything. $("div.column[data-parent!=0]").addClass( "collapsed" ); $("li").removeClass( "selection" ); // The "id" for the clicked list item becomes the start of // the ancestral chain. var $child = $("div.column[data-parent=" + id + "]" ); $child.removeClass( "collapsed" ); var $li = $("li.parent[id=" + id + "]"); var $ancestor = $li.parent().

This code below works as needed, but I am not sure if there is a more elegant way with pure CSS. I have a table with two columns, and 4+ rows. I'll actually upload a picture. It's the first table in grey that I am messing with. I want to select all the TDs--except for the first TD, because that first one has been changed to vertical text--and give them a 100% width and text align center. Any thoughts? ``` .greyBG tr:nth-of-type(1) ~ tr > td { width: 100%; text-align: center; } ``` And the HTML: ` Landscape Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum `

I am a CSS and HTML5 newbie. I'm creating a minimal web page to demonstrate something in a blog post. So although it doesn't need to look great, I would like it to make sure it's solid. It has no errors or warnings when I use the W3C validator. `.navigation { float: left; } .content { float: left; } table { border:1px solid #000; border-spacing: 0px; background-color: #EEE; border-collapse:collapse; } thead { font-weight: bold; text-decoration: underline; } th { border:1px solid #000; padding: 4px; } td { text-align: center; vertical-align: middle; padding: 4px; border:1px solid #000; } .liked { background-color: #CD0; } .unliked { background-color: white; } .color_like { text-align: center; } .color_name { text-align: right; }` ` (Requires two or more characters) Searching for "gr": gray green Color Likenatorizer Title Favorite? aqua No black No blue No fuchsia Yes gray No green No lime No maroon No navy No olive No orange No purple No red No silver No teal No

This is a responsive navigation menu (pure css), that highlights the page with a short JavaScript I found online. I have it all working, but the CSS is totally a mess. The menu is actually a PHP .inc file, so that it can be used site wide. ` $(document).ready(function(){ var str=location.href.toLowerCase(); $('nav li a').each(function() { if (str.indexOf(this.href.toLowerCase()) > -1) { $("li.highlight").removeClass("highlight"); $(this).parent().addClass("highlight"); } }); $('li.highlight').parents().each(function(){ if ($(this).is('li')){ $(this).addClass("highlight"); } }); })` `/* nav menu css----*/ nav {padding: 50px 0 30px 0; font-size: 24px; border: none; color: #7E6B6E;} nav ul {list-style: none;} nav li {float: left;} nav li a { padding: 5px 5px; color: #DBA182; display: block; font-weight: normal; border-bottom: 3px solid #fff;} nav li.highlight a { color: #DB002E; display: block; border-bottom: 3px solid #DB002E;} nav ul li:hover a { color: #DB002E; display: block; font-weight: normal; border-bottom: 3px solid #DB002E;} nav ul li.highlight a { color: #DB002E; display: block; border-bottom: 3px solid #DB002E;} nav ul li.highlight:hover a { color: #DB002E; display: block; border-bottom: 3px solid #DB002E;} nav li ul { background: #F1EDED; display: none; position: absolute; z-index: 200;} nav li:hover ul { display: block;} nav li li { display: block; float: none; padding: 0; width: auto; color: #7E6B6E; border-bottom: 1px solid #FFF;} nav li:hover li a { background: none; color: #7E6B6E; border-bottom: 1px solid #FFF;} nav li.highlight li a { background

I am working on my Tritium website (hosted on Github: feel free to fork and send pull requests), and now am looking for a review of it. If you are looking to critique the design of the website, please visit the sister question over on Graphic Design. Here is what I would like reviewed: - Organization - Can you find where something should be easily? - Stale code - Is there code that isn't in use? - Modern conventions - Am I using the latest and greatest with HTML5 and CSS3? - Readability - Is the code formatted in a way that is compliant with today's standards? - Performance - Can I speed up any aspect of my code? - Portability - Websites can be hard to support for mobile devices. Is there anything I can improve so that these devices can have just as good of an experience? Also, I noticed that the animation of my atom is a bit laggy on those types of platforms; how can I fix that? - User Experience - What do you find annoying and how would you fix it? Those are just some suggestions though. Please feel free to comment on any aspect of the code. No matter how small that aspect may be, I consider it important. `index.html`: ``` Tritium Tritium About Contact Tritium A free, premium quality speech synthesis engine written

I am building a website with heavy CSS3 transitions. The menu is hidden on the left and slides in on hover pushing the main content right. The menu contains transformed elements and has a semi transparent background. I am concerned about the performance of the animations. When the animation is triggered several times (and also often on the first trigger) the frame rate goes under 30 FPS. How can I enhance the performance of the animation and have a higher frame rate? I tried making these animation with jQuery and it is worse. I made a simple example that has the FPS issue here (hover the envelope icons on the left). HTML: `body,html,ul,li {margin: 0; padding: 0;} nav { width: 0; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(255, 145, 0, 0.8); -webkit-transition: width .5s ease-out; transition: width .5s ease-out; } nav:hover { width: 40%; } ul { list-style-type: none; position: absolute; width: 60%; left: 20%; } nav li { position: relative; margin: 0.5em 0; padding: 0.5em; min-width: 5em; } nav li:before { content: ''; position: absolute; width: 100%; height: 100%; background: teal; z-index: -1; opacity: 0; -webkit-transform: skewX(30deg); -ms-transform: skewX(30deg); transform: skewX(30deg); -webkit-transition: opacity .5s ease-out; transition: opacity .5s ease-out; } nav:hover li:before { opacity: 1; } nav li * { vertical-align: middle; } nav img { height: 2em; } nav a { opacity: 0; -webkit-transition: opacity .5s ease-out; transition: opacity .5s ease-out; } nav:hover a { opacity: 1; } /* MAIN */ section { width: 60%; margin-left: 20%; min-height: 100%; background: url(http://lorempixel.com/output/nature-q-g-640-480-9.jpg); -webkit-transition: margin-left .5s ease-out; transition: margin-left .5s ease-out; } nav:hover +section { margin-left: 30%; }` ` - Home - About - Clients - Contact Lorem ipsum