Magnific Popup: Responsive jQuery Lightbox Plugin Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js). Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered. Dialog with CSS animation Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen. Popup with form Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button. Ajax popup Fast
<length> Le type de données CSS <length> correspond à une mesure de distance. De nombreuses propriétés CSS utilisent des valeurs de longueurs. Entre autres, on pourra énumérer width, margin, padding, font-size, border-width, text-shadow, … Pour certaines propriétés, l'utilisation d'une longueur négative est une erreur de syntaxe, pour d'autres, elles sont autorisées. On notera que bien que les valeurs <percentage> soient aussi des dimensions CSS et acceptées par certaines propriétés CSS acceptant les valeurs <length>, ce sont bien deux types distincts. Syntaxe Une longueur est un nombre (type <number>) immédiatement suivi d'une unité de longueur (px, em, pc, in, mm, …). Interpolation Les valeurs du type <length> peuvent être interpolées de manière à rendre les animations possibles. Unités Unités de longueur relatives Longueurs liées à la police em Cette unité représente la font-size calculée de l'élément. ex Cette unité représente la hauteur d'x de la font de l'élément. cap ch ic lh rem rlh vb vh vi vw vmin vmax px q
CSS: Center text/image/div in middle of parent div (container) | CSS-WORKSHOP.COM It is a common situation, that you want to put some element (like text, image or div) in the center (horizontally and vertically) of parent div (container). Setting some element in the center horizontally is usually quite easy – just put CSS rule “margin: 0 auto” to element or “text-align: center” to its parent element and it is done. But when we want to put html element in center vertically – then it is not so easy! You can try to use “vertical-align: middle;” but quickly you will discover that it is not so easy to use. It works not as we expect. Check code below, of course, “vertical-align: middle;” is not working as we want. And as you can see, it is not working 😉 “vertical-align: middle;” works in different way than we could think. So now the question is: How to center vertically one element inside another? The answer is easy – we must use one trick and combine two rules coming with CSS3. Check code below 🙂 And thats it! Tags: css, css3, html
Les 3 leviers à activer pour optimiser sa stratégie web to store - E-Hello De plus en plus de consommateurs se renseignent sur internet avant d’aller acheter en magasin*, la présence en ligne d’un commerce ou d’une TPE nécessite donc un ensemble de pratiques pour qu’elle soit efficace. Voici quelques conseils pour votre stratégie web to store. Web to store #1 : D’abord, s’assurer d’être présent partout avec des informations à jour Nous en parlions récemment ici, il est essentiel que vos informations de base soient correctes. Moyens de contacts, adresse et horaires d’ouverture sont les trois points indispensables qu’il faut mettre à jour sur vos différents lieux de présence en ligne : votre site, PagesJaunes, Google Mybusiness, Facebook… Web to store #2 : Ensuite, indiquer quels sont les produits disponibles en magasin Même si vous ne vendez pas via internet, rien ne vous empêche de proposer à vos clients la liste des produits disponibles chez vous. Web to store #3 : Enfin, communiquer efficacement auprès de vos clients
css - Vertically center image on page and maintain aspect ratio on resize Building a Responsive Mega Menu with Foundation Mega menus are a design trend often used on large sites such as e-commerce and educational sites. For example, eBay’s mega menu: But what exactly is a mega menu? Well, let’s see how Jakob Nielsen describes it: A mega menu (a big, 2-dimensional drop-down panel) groups navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users’ choices. So, with that in mind, this article aims to help you understand how to build a simple responsive mega menu with Foundation. If you’d like to jump ahead, the final demo is located here. Building the Main Menu Before jumping into the process of creating our custom mega menu, let’s first build the main menu itself (i.e. the “topbar”). As you can see, nothing fancy happening here. The code below shows the markup for the top bar: Notice that we wrap the menu within a div element, with a class of contain-to-grid. At this point we’re ready to start focusing on the mega menu (which we will give a class of m-menu). Conclusion
Tutoriel Vidéo HTML-CSS Présentation de Susy Lorsqu'il s'agit de créer des grilles en CSS plusieurs solutions s'offrent à nous, on peut utiliser des Frameworks comme Twitter Bootsrap ou générer une série de classes pour placer nos éléments. Le problème dans ce cas-là est que l'on brise la règle essentielle qui est de séparer le fond de la forme et on se retrouve du coup avec des classes HTML qui déterminent le style de notre élément. Cette manière de faire est certes pratique lorsque l'on prototype l'application, mais s'avère relativement limitée lorsque l'on souhaite faire évoluer le site (on se retrouve alors à devoir modifier le code HTML pour changer la disposition des éléments). Installation de susy Avec ruby SASS Avant d'installer Susy, sachez que celle-ci (je parle d'elle au féminin, car son auteur en fait autant !) gem install susy --pre // le --pre permet d'installer la dernière version de de Susy (2.0) et non pas la première require "Susy" @import "susy"; Voilà Susy est maintenant chargée. Avec libSASS npm i susy --save-dev
Asynchronous vs Deferred JavaScript In my article on Understanding the Critical Rendering Path, I wrote about the effect JavaScript files have on the Critical Rendering Path. JavaScript is considered a "parser blocking resource". This means that the parsing of the HTML document itself is blocked by JavaScript. When the parser reaches a <script> tag, whether that be internal or external, it stops to fetch (if it is external) and run it. This behaviour can be problematic if we are loading several JavaScript files on a page, as this will interfere with the time to first paint even if the document is not actually dependent on those files. Fortunately, the <script> element has two attributes, async and defer, that can give us more control over how and when external files are fetched and executed. Normal Execution Before looking into the effect of the two attributes, we must first look at what occurs in their absence. Take, for example, this script element located somewhere in the middle of the page - <html><head> ...
L’intérêt du SEO pour les entreprises du bâtiment et de l’industrie | WPNormandie Aujourd’hui, encore trop d’entreprises négligent leur stratégie de développement sur internet. Certaines sociétés du bâtiment ayant besoin de se faire connaitre, préfèrent faire appel à un commercial B2B plutôt que de mettre en place une politique de référencement naturel. Pourtant bien souvent les acheteurs débutent leur recherche d’information seul devant un ordinateur. Une visibilité accrue et un trafic ciblé Le SEO ou référencement naturel ouvre la voie vers de nouvelles sources de trafic pour votre site internet. Un positionnement efficace sur les moteurs de recherches permet d’occuper plusieurs positions et ainsi de placer plusieurs pages d’un même site sur une même requête. Bien moins couteuse qu’un poste de commercial B2B, une stratégie de référencement naturel permet en plus de se développer sur le plan local et international, tout en ayant une présence en continu, 24 heures sur 24. Pourquoi mettre en place une stratégie SEO ? Amélioration des objectifs de conversion
html - CSS scale down image to fit in containing div, without specifing original size Please Stop "Fixing" Font Smoothing - The Usability Post I wrote two posts on the topic of WebKit font smoothing before, but unfortunately the situation has grown worse since then. In allowing the designer to pick their own font smoothing mode with the -webkit-font-smoothing CSS property, WebKit developers have opened up an opportunity for typographic abuse, namely, the disabling of subpixel font rendering. As I mentioned before, WebKit gives designers three font smoothing modes: Nothing, which gives you jagged fontsSubpixel-rendering, i.e. the default font smoothing mode that is used for most other stuff on your desktop OS (mobile devices don’t use subpixel rendering due to having to suport both vertical and horizontal screen orientations)Antialiased, which disables subpixel-rendering and smoothes the font on the level of the pixel, as opposed to the subpixel. Why the choice? Subpixel rendering gives us optimal font clarity for your typical dark text on light background. Abusing antialiasing It’s not a “fix” Why do designers keep misusing it?