In this tutorial, I will guide you in building something similar to Apple TV parallax effect using CSS, HTML, and jQuery. Apple TV Poster Parallax Effect in CSS3 & jQuery →
Tag Archives: css
CSS Color Names Game
CSS Text Color as the Inverse Background Color
Image diffing using CSS
Grid Style Sheets 2.0
GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout. Using Constraint CSS and GSS Selectors it’s really easy to, for example, make two elements have the same width: .container { &[width] == #elm[width]; } Next to …
Crayon.css – Because colors have a name
Quantity Ordering With CSS
Here is your mission, should you choose to accept it: create a table of items. Each item should span a third of the content area, with the fourth item starting on a new row, much like floats. However, a particular item must always display the price at the end of the first row. Visually, we …
Targetting the OS X System Font in CSS
body { font-family: system-font, -webkit-system-font, -apple-system-font, “.SFNSDisplay-Regular”, HelveticaNeue, LucidaGrande; } On a fresh install of OS X 10.11 (El Capitan) there’s no San Francisco font installed. But it’s the system font, so how is this possible? Hence the sort of magic above to actually get it working. I Left My System Fonts in San Francisco …
CSS-Grid-Polyfill
CSS Grid Layout Polyfill: The polyfill’s css parser was built by following the CSS Syntax 3 specification, the polyfill should be able to process any css stylesheet. It can react to dynamic pseudo-classes like ‘:hover’, to media queries changes or window resize events. It also detects changes to the DOM that may affect the layout …