Le Hollandais Volant

Et encore un, ici pour l’effet du « ripple », l’espèce de vague qu’on a quand on clique dessus.

Finalement j’ai repris le codepen avec l’animation utilisant le background.

Je l’ai nettoyé et amélioré pour qu’il fonctionne partout, sur les input et les textarea de la même façon.

En soi c’est très simple, vous regarderez le commentaire sur la page.

Ici un autre, utilisant une animation sur le background (donc pas besoin d’ajouter une HR), qui se décale de gauche à droite au focus et de droite à gauche au blur. Très ingénieux là aussi.

Joli :o

Je me note surtout l’usage du HR pour faire l’effet de la barre qui s’allonge en partant du centre.

J’avais déjà essayé un formulaire avec le label qui monte (histoire de ne pas compter que sur le placeholder), ici : http://lehollandaisvolant.net/?mode=links&id=20151219194340 (et je note que leur "transform" est largement plus réactif/lisse que mon "transition", du moins dans Firefox).

Et le tout sans JS.

Parfois je ne comprends pas.

Certains ont dû lire « les tableaux HTML cay le maaaal », et du coup ils n’utilisent plus JAMAIS ça. Leur vie dépend de l’absence de tableaux dans leur code. Que dis-je, la stabilité du système solaire en dépend.


Et pour afficher des données sous forme tabulaire ?
Ben ils utilisent une liste, avec "display: table" ou "display: table-row-group", et les éléments comme "display: table-cell".

*facepalm*

Ça t’arrive de se servir de ton cerveau putain ?

Les tableaux ce n’est pas mal. C’est à utiliser pour ce à quoi ça sert : des tableaux.
Si tu veux faire une disposition de pages en utilisant des tableaux, ce n’est pas fait pour : il faut pas.
Si tu veux afficher un tableau avec des tableaux : c’est fait pour, vas-y !

Tu veux un flow chart pour ça ou tu peux utiliser tes neurones sans dessin ?

Voilà ça aussi :
http://lehollandaisvolant.net/?d=2015/08/12/19/43/23-css-arretez-dutiliser-float-nimporte-comment
http://lehollandaisvolant.net/?d=2014/01/29/14/34/04-css-faire-des-menus-sans-flottants-avec-display-inline-block

À destination de ceux qui veulent utiliser des float partout.

Pour une raison que j’ignore totalement, je n’arrive pas à faire fonctionner les polices Ubuntu sur mon site.

Les autres polices ça marche, ce n’est pas un problème de .htaccess, ce n’est pas un problème de format non plus, car d’autres polices Woff ou Woff2 sont chargées.

Les polices que j’ai sur mon ordi fonctionnent (grâce au "local()" dans mon CSS) mais elles ne sont chargées sur les autres ordi ou téléphone.
Ça doit venir des polices de chez Google qui sont mal foutues, ou qui ne marchent pas quand on les télécharge pour un usage hors de son cloud.

Je ne veux pas utiliser les polices système non plus car elle font ~200 ko au lieu de ~25 ko, et elles sont en TTF au lieu de Woff.


Du coup je propose de se rabattre sur les fichiers Woff et Woff2 utilisés sur le site d’Ubuntu.

Voici une archive avec les fichiers dedans. J’ai mis le CSS ainsi que les polices : http://lehollandaisvolant.net/files/ubuntu-fonts.7z

Donner directement aux éléments de la page des rôles au sein de la page.
Ça pourrait être pratique, même si pour l’instant la syntaxe me semble lourde.

Ah ouais, tout bête : un bloc carré, avec une bordure sombre et les trois autres claires.
On applique border radius pour en faire un cercle, puis une animation pour la faire tourner. Genius !

(via)

ÉDIT : par contre, pourquoi passer par un div parent ? Il y a plus simple si on veut centrer : margin: 0 auto.

Du coup j’ai forké et simplifié encore plus : http://codepen.io/lehollandaisvolant/pen/pypRNZ?editors=1100

(j’ai aussi viré le code spécial lazyload, qui n’est utile que dans certains cas spécifiques)

J’ai décidé de faire une page avec mes différentes astuces CSS/JS/HTML.

Ça constituera également une bibliothèque de code pour moi.

Voici déjà les autres :
http://lehollandaisvolant.net/tuto/php
http://lehollandaisvolant.net/linux/scripts

Idem, jamais eu besoin d'utiliser autre chose que le CSS de base.

Je conçois que ça permet de gagner du temps, mais avec le nombre de sélecteur apparus ces dernières années, ça n'est plus nécessaire d'ajouter une couche en plus.

Je n'utilise pas non plus les générateurs de dégradés ou d'arrondi : une fois qu'on a appris à les faire de tête, ça va plus vite.

L’ajout d’un "outline" ça ne modifie pas la taille de l’élément, je note, même si ça semble logique.

Mettez la seconde ligne (pas jQuery, celle à 131 bits) ici : http://bookmarklets.org/maker/ et faites en un bookmarklet. Perso je me garde ça !

Un problème récurrent : les images, et vidéos, canvas, ont un ratio propre à eux.

Quand ils sont dans un élément flexible (avec flex), ils deviennent flexible et perdent leur ratio ou peuvent aussi dépasser de la page (pas pratique pour le responsive design).

Il faut appliquer un "min-width: 0" sur le bloc flexible, comme ça il peut de nouveau se reduire en deçà de la taille "naturelle" de l'image/canvas/video et ces éléments reprennent leur ratio normal.

J'en avais bavé aussi a plusieurs moment. Heureusement que c'est rapidement corrigé.

Une petite précision pour les troncatures dans le cas des liens.

J’aurais pu mettre dans le dernier article en date, mais ici c’est juste un petit truc de rien du tout.

Avec Transform, on peut modifier l’apparence des éléments : taille, rotation, translation.

Pour prendre un bloc de 400px qui est adjacent à un bord de l’écran et le faire sortir de l’écran, on peut faire ça :

#bloc {
    transform: translateX(-400px);
}

Ça marche mais ceci est mieux :

#bloc {
    transform: translateX(-100%);
}

Le truc c’est que transform considère la taille de l’élément lui-même et non celui du parent (contrairement à width, flex et toutes les autres : ceci est une grande nouveauté et permet d’intéressants effets de centrages, comme le centrage d’une image, quelque soit sa taille, quelque soit son ratio : http://lehollandaisvolant.net/?mode=links&id=20150731185744 et sans JS ).

Maintenant mon astuce : je veux déplacer le bloc hors de l’écran, mais qu’il dépasse quand même un tout petit peu (10px) pour qu’il soit possible de faire ressortir au hover (les 10px sont pour donner une zone ou mettre la souris pour le hover).

Je fais quoi ?
J’aurais tendance à faire ça :

transform: translateX(-390px);

Mais c’est en pixel, pas en taille absolue…
Ça alors :

transform: translateX(-97,5%);

Mais ça revient au même : les 2,5% manquant ici correspondent à 10px uniquement parce que le bloc fait 400px.

On peut essayer avec calc(), où on a plusieurs solutions :

transform: translateX(calc( -100% + 10px);

transform: translateX(- calc(100% - 10px);

mais ça ne fonctionne pas, en plus d’être confus et casse-gueule.

La solution c’est de faire ça :

transform: translateX(-100%) translateX(10px);

Et ça, ça marche. Le navigateur va prendre le bloc, le décaler sur la gauche de 100% de son "width" (attention aux marges), puis le décaller de 10px sur la droite, cette fois.
C’est tout à fait clair et logique quand on y pense.

La version complète du coup :

HTML :

<div id="scr" class="scrollbutton"><a href="#" onclick="event.preventDefault(); window.scroll(0, targetOffset);"></a></div>

JS :

// FastScroll
// Initial state
var scrollPos = 0;
var targetOffset = 0;
var scr = document.getElementById('scr');

// adding scroll event
window.addEventListener('scroll', function(){ scrolling() });

// the function : compares the "new" scrolling state with the previous
// (this allows detecting either "up" or "down" scrolling)
// then saves the new in the $previous for the next iteration.

function scrolling() {
	if ((document.body.getBoundingClientRect()).top > scrollPos) {
		scr.classList.add('scrollbutton-top');
		targetOffset = 0;
	} else {
		scr.classList.remove('scrollbutton-top');
		targetOffset = 100000;
	}

	if ((document.body.getBoundingClientRect()).top > -500) {
		scr.classList.remove('scrollbutton-on');
	} else {
		scr.classList.add('scrollbutton-on');
	}

	scrollPos = (document.body.getBoundingClientRect()).top;
}

CSS :

/* Fast Scroll button -----------------------------------*/
#scr {
	background: url(icon_top.png) no-repeat center center;
	opacity: 0;
	width: 0px;
	height: 80px;
	position: fixed;
	z-index: 99;
	bottom: 0; right: 0;
	transition: opacity .5s linear, width 0s .6s linear;
	overflow: hidden;
}

#scr.scrollbutton-on {
	opacity: .3;
	width: 80px;
	transition: opacity .5s linear, width 0s linear;
}

#scr.scrollbutton-top {
	transform: rotate(180deg)
}

#scr a {
	width: 80px;
	height: 80px;
	position: fixed;
}

FILE (icon_top.png file) :

http://lehollandaisvolant.net/img/icon_top.png