public marks

PUBLIC MARKS from decembre with tag design

2020

3D - SculptGL (sculpter directement dans Firefox ou Chrome avec Web version))

SculptGL is a digital sculpting web app, with sources available on github. Also available on the chrome web store. If you want to download a standalone version, you can download it here (identical as the web version). Sketchfab made a fork of the old SculptGL version with a new design : Sculptfab.

2018

JAVASCRIPT / CSS - DEMO - Scrolling Letters Animation | Codrops

A switching title effect where a fixed text element changes with an animation depending on the scroll position.The animations are powered by anime anime.js. We also use imagesLoaded for preloading the images and Charming.js for the handling the letter structure of the titles.

ART et RECHERCHE - LABEX Arts-H2H

Le Laboratoire d’excellence des arts et médiations humaines est lauréat des Investissements d’avenir depuis 2011. Dans ce cadre, les membres développent des recherches selon trois axes majeurs : situations, technologies, hybridations.

DEV - TUTO - the new code – Web Developer Reading List: CSS Typography

A well-known dictum states that web design is 95% typography. Despite the prevalence of rich media, videos and games, people come to the web primarily to read. Making that reading experience comfortable, interesting and enjoyable is a major factor in keeping people on web sites longer and enhances their ability to retain and remember information. Goals: Control the display of web page text to enhance communication. Prerequisite: Color Total time: 8 hours

2017

ONLINE TOOL - resizeMyBrowser

by 10 others
Outer means outerWindow size (including toolbar, addressbar and such), Inner means innerWindow size (interior of the browser window).

CSS - DESIG ONLINE TOOL - Responsive web design tool, CMS, and hosting platform | Webflow

(via)
Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.

VHS - CAPTURE ADAPTATEUR - IIEasy Enregistreur Convertisseur Adaptateur de Vidéo/Audio-Carte de Capture Vidéo USB 2.0 - Câble de Transfert S-Vidéo / RGB à USB compatible avec Windows 8 Win 10 / Mac OS X: Amazon.fr: Informatique

(via)
à partir de EUR 26,99: Compatible avec les ordinateurs Mac® ou Windows®. Choisissez parmi les encodages vidéo MPEG-1, MPEG-2 - Prise en charge de l'acquisition vidéo NTSC, PAL et SECAM - La fonction de snapshot vous permet de procéder à l'acquisition d'images vidéo fixes - Son design compact et léger lui confère une portabilité pratique pour vos applications lors de vos déplacements - Compatibilité système d'exploitation - Windows® 10 (32/64bit), 8/8.1 (32/64bit), 7 (32/64bit), Vista(32/64), XP(32/64), 2000 (Aero 3D interface supported) Apple® OSX Mavericks (10.9) Mountain Lion (10.8), Lion (10.7), Snow Leopard (10.6)

SVG - ONLINE TOOL - 20 Useful SVG Tools for Better Graphics - Hongkiat

(via)
SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web design, we should always optimize for lighter results. Here the 20 tools that you can use to work with SVG quickly and efficiently. We have mostly online tools, that can help in optimization, conversion, making patterns, and more.

SVG - ONLINE TOOL - Draw SVG

You can perform a wide variety of designs, art as the icon of DRAW-SVG, mapping, technical, presentation slides, etc. ..

CSS - How to Resize Background Images with CSS3 — SitePoint

(via)
Fortunately, CSS3 introduces the background-size property which allows backgrounds to be stretched or squashed. It’s ideal if you’re creating a template using Responsive Web Design techniques. There are several ways to define sizing dimensions — view the CSS3 background-size demonstration page.

jQuery - javascript - JS scrollbar recommendations? - Stack Overflow

by 1 other
I like to use: - Tiny Scrollbar for the minimalist design - JQuery Custom Content Scroller

jQuery - LIBRARY - SCROLL - jQuery custom content scroller – malihu | web design

by 1 other (via)
(Last updated on Jul 11, 2016 ) Highly customizable custom scrollbar jQuery plugin. Features include: - vertical and/or horizontal scrollbar(s) - adjustable scrolling momentum - mouse-wheel (via jQuery mousewheel plugin) - keyboard and touch support - ready-to-use themes and customization via CSS - RTL direction support - option parameters for full control of scrollbar functionality - methods for triggering actions like scroll-to - update, destroy etc - user-defined callbacks and more.....

CSS - Using DevTools to Tweak Designs in the Browser | CSS-Tricks - 2017

Let's look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy!

CSS - RESPONSIVE - MEDIA QUERIES - The math of CSS locks

A CSS lock is a Responsive Web Design technique that lets you transition smoothly between two values, depending on the current viewport size, rather than jump straight from one value to the other.

❤️ ART - BONNE Idées - Ces vélos dessinés à main levée ne rouleraient pas bien loin s'ils existaient

(via)
ART - Dessiner un vélo à main levée et de tête? A priori, ça ne semble pas bien compliqué. Sauf que sans modèle sous les yeux, le résultat risque en fait d'être assez éloigné de la réalité. Et quand bien même le croquis apparaîtrait satisfaisant, il renfermerait à coup sûr bon nombres d'erreurs qui rendrait le vélo en question inutilisable. Voilà le constat qu'à voulu mettre en évidence le designer italien Gianluca Gimini. Depuis 2009, cet artiste installé à Bologne s'amuse à aller voir des amis, des membres de sa famille et des inconnus pour leur tendre une feuille de papier et un crayon avant de leur demander de lui dessiner un vélo sur-le-champ. "Je me suis rapidement rendu compte que la plupart des gens avaient beaucoup de mal à se rappeler comment un vélo était fait. La majorité d'entre eux finissent par dessiner quelque qui ressemble à peine à un vélo", commente-t-il sur son site internet. Après avoir récolté des centaines de croquis, Gianluca Gimini a vu en 2016 qu'il avait entre les mains une source inestimable d'inspiration pour créer de nouveaux modèles. "Un seul designer ne pourraient jamais inventer tout ça, même en vivant 100 fois", assure-t-il.

JQUERY / CSS - EQCSS • Element Query CSS | Scoped CSS, Meta-Selectors, Element Queries

by 1 other
What are Element Queries? Element queries are a new way of thinking about responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser. Unlike CSS @media queries, @element Queries are aware of more than just the width and height of the browser, you can write responsive conditions for a number of different situations like how many characters of text or child elements an element contains. Another concept that element queries brings to CSS is the idea of ‘scoping’ your styles to one element in the same way that JavaScript functions define a new scope for the variables they contain.

SCROLL - Responsive YouTube Player with Scrolling Thumbnail Playlist - Wooster Web Design

(via)
Responsive YouTube Player with Scrolling Thumbnail Playlist In this post we will work with an embedded YouTube video player using YouTube’s iframe embed code. Below the iframe we’ll add a horizontal playlist that includes a thumbnail image and title for each video. The playlist will scroll or slide left and right on click or tap. The player we are building in this is based on the MyList Video Player, but instead of automatically populating with a YouTube playlist, we are manually building our own playlist of selected YouTube videos.

2016

2015

FLICKT - mars 2015 - Introducing the New! Shiny ! Photolist framework - code.flickr.com

(via)
Some photolist pages on Flickr use infinite scrolling, and some display results one page at a time. Regardless of how a page shows its photos, it starts to feel messy when there is an incomplete row of photos hanging off the end of the page. If there is more content in the set, the last row should be full. However, since we fetch photos from the API in fixed batch sizes, things don’t always work out so nicely, leaving “leftovers” in the bottom row. Borrowing from typesetting terminology, we call these leftover photos orphans. (We can also paginate backwards; leftovers at the top are technically widows but we’ll just keep using the term orphans for simplicity.)

SVG - Using SVG (witth Online TOOLS) | CSS-Tricks

(via)
Why use SVG at all?: Small file sizes that compress well__ Scales to any size without losing clarity (except very tiny)__ Looks great on retina displays__ Design control like interactivity and filters__

INFINITE SCROLLING - To Infinite Scroll or Not to Infinite Scroll: Where We’ve Come So Far | Design Shack

In fact, infinite scrolling was removed from the site after the number of clicks on favorites decreased and the search function was not used anymore.

2014

Intelligence Artificielle : Marlowe blogue Automatique

Christopher Marlowe est un personnage virtuel, ayant accès au langage grâce à des scripts assez compliqués qu'il manie avec un certain talent littéraire... Le blog utilise jekyll avec textile et le design s'inspire de celui de überduper.

GITHUB - Un blog statique sur github avec Jekyll et Octopress

Les avantages d'un blog statique Voici ce que j'apprécie particulièrement dans un blog statique : Ultra light : Juste des fichiers .html et .js à déposer sur le serveur. La sécurité : On élimine les failles applicatives (sqli, exec(), file upload et cie...) même si la configuration du serveur n'est pas à négliger (bruteforce, SSI, webdav, etc.) Zero maintenance : Adieu MySQL, configuration PHP et surtout, plus besoin de penser aux mises à jour... La performance : Quoi de plus rapide à délivrer qu'un simple fichier statique qui va être mis en cache ? Hosting : Comme on a plus besoin de PHP+MySQL, on trouve plus facilement de l'hosting gratuit, notamment github. Le coté leet : Allo, t'es leet t'as pas de blog statique ? Allo ? Bien entendu un site statique a ses limites, mais javascript et les plugins/services third party sont là pour ça. Jekyll serphacker.com est généré par Jekyll et hosté sur github. C'est sûr, niveau design on peut mieux faire (normal je l'ai fait avec twitter bootstrap et le web design c'est pas ma tasse de thé), mais je vous rassure y a un max de site qui rendent bien avec Jekyll et Octopress a un bon thème par défaut. Clairement Octopress est beaucoup plus simple à utiliser que Jekyll : site créé en 2/3 lignes commandes avec un super design, avec Jekyll on part presque de zero. D'ailleurs si vous n'êtes pas très technique, je vous conseille de skipper les 3/4 de cet article que je me suis fait chier à rédiger, et voir directement comment Octopress est juste awesome et super fast à mettre en place : go TL;DR. Mais comme Octopress utilise Jekyll, mieux vaut comprendre comment Jekyll fonctionne sinon vous louperez pas mal de trucs pratiques. Je trouve la doc de Jekyll plutôt mal faite et mal organisée, d'où cet article (qui lui aussi sera mal fait et mal organisé).