background preloader

Hamburgers by Jonathan Suh

Hamburgers by Jonathan Suh
Table of Contents Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Sass .scss source files are available if you use Sass as your CSS precompiler. It’s customizable and modular. Hamburgers is available via npm, yarn and Bower.npm install hamburgers yarn get hamburgers bower install css-hamburgers Also available as a Ruby gem to use within your Rails application—see below for more information. * Be sure to run the CSS through Autoprefixer since the Sass doesn’t account for vendor prefixes. Install for Ruby on Rails Add Hamburgers to your Gemfile.gem 'hamburgers' Run bundle install. ** More information on why Sass’s native @import + why you should ditch Sprockets directives altogether. Customization To override default settings, declare them before importing Hamburgers: $hamburgers-padding-x: 20px;$hamburgers-padding-y: 15px;$hamburger-types : (collapse); @import "hamburgers"; @import "hamburgers-settings"@import "hamburgers"; $hamburger-padding-x : 15px !

https://jonsuh.com/hamburgers/

Related:  kscotetHTML/CSSAnimationsCSS Animations

Animated Letters ashin bogyoke nang maung tekkatho sawbwa binnya In the following effects we also use mo.js for additional animations: thakin zeya sanda duwa sao If you enjoyed this demo you might also like: 18 CSS Effect Libraries for Creating Beautiful Animations CSS animations lets you run animations smoothly, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they’re well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible and letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren’t currently visible. In this roundup, we would like to present our audience 18 Best CSS Effect Libraries that enable you to create stunning animations to make your designs more attractive and eye catching.

Completely CSS: Custom checkboxes, radio buttons and select boxes Typically, forms are the most uninteresting, uninviting and inaccessible parts of the web. This is mainly due to the complexities that come with styling form elements, and overriding browser defaults. With a little extra markup, our form elements can be styled in almost any way, and be as accessible as we choose to make them - no JavaScript required. Tutoriel Vidéo HTML-CSS Animer l'icône hamburger Aujourd'hui nous allons apprendre à animer l'icône hamburger, cette fameuse icône composée de 3 traits horizontaux qui est de plus en plus incontournable. Au niveau du code HTML on va essayer de rester le plus simple possible en évitant au maximum les éléments inutiles Malheureusement, on sera tout de même obligé de rajouter un élément vide à l'intérieur de notre élément pour créer les 3 petits traits. L'élément .menu-icon permettra de définir la zone cliquable mais aussi de mettre un fond si besoin.

A Complete Guide to Flexbox Background The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex"). The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow. Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

CSS3 Flexbox Layout module Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Au sein de ce schéma, on ne raisonne plus en “block” ou “inline”, ni même en float ou autres types de boîtes “classiques” CSS, mais en “Modèle de boîte flexible”, dont les quatre possibilités principales sont : Note : ce tutoriel a été initialement rédigé en octobre 2010. Il a subi une refonte intégrale en décembre 2014 pour se mettre à jour.

Une grille responsive avec CSS3 Flexbox et LESS (ou Sass) Ce tutoriel a pour but de présenter dans les détails une technique de conception de grille de mise en forme responsive à l’aide du positionnement CSS3 Flexbox Layout, actuellement parfaitement adapté à ce genre de fonctions en attendant une meilleure implémentation de Grid Layout. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Le concept de grille produite permettra de gérer les espaces inter-colonnes (gouttières), les décalages (“offsets”), les différentes tailles d’écran et d’être automatisable.

Related: