You don’t need jQuery for Selctors

By | How to, Tutourial & Tips

If you want to use the jQuery style to select elements you can add the below code to your project without loading the full jQuery Library. window.$ = function(selector) { var selectorType = ‘querySelectorAll’; if (selector.indexOf(‘#’) === 0) { selectorType = ‘getElementById’; selector = selector.substr(1, selector.length); } return document[selectorType](selector); };…

Read More

Cinemagraph: Motion in Stills

By | Journal

Cinemagraphs are still images in which a subtle and repeated movement of elements occurs, forming a video clip. They are then exported as an animated GIF or in other video formats, and can give the illusion that the viewer is watching an animation. Source: Cinemagraphs Steaming Tea and Biscuit Source:…

Read More

Semantic – UI

By | Resources

Design Beautiful Websites Quicker Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits…

Read More

Materialize CSS

By | Resources

A modern responsive front-end framework based on Material Design   Materialize simplifies life for developers and the users they serve. Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide…

Read More

YouTube – Responsive video aspect ratio and embedding options

By | Tutourial & Tips

Maintain iFrame video aspect ratio for responsiveness HTML <div class=”aspect-ratio”> <iframe src=”https://www.youtube.com/embed/NV3bPEjNeKU” frameborder=”0″ width=”550″ height=”275″ frameborder=”0″ allowfullscreen></iframe> </div> CSS /* This element defines the size the iframe will take. In this example we want to have a ratio of 25:14 */ .aspect-ratio { position: relative; width: 100%; height: 0; padding-bottom:…

Read More

Linear CSS Gradient Background

By | How to, Tutourial & Tips

CSS: html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { background: linear-gradient(270deg, #18f0b8, #18a2f0, #db5640); background-size: 600% 600%; -webkit-animation: Gradient 60s ease infinite; -moz-animation: Gradient 60s ease infinite; animation: Gradient 60s ease infinite; } @-webkit-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes…

Read More