Shaarlo 19/06/2015 Petit shaarli d'un amoureux des hover ;-)
(
Permalink)
KraZhtest - Liens utiles - C'est le bordel 19/06/2015 Salut!
C'est pas mal mais, en tant que pti dev amateur sympa ^_^, je trouve très dommage d'utiliser jquery + jquery-UI pour un effet smooth: Utiliser du CSS quand c'est possible, et là justement, c'est possible ;)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Aussi étant daltonien le gris sur le vert, perso j'en chie un peu :)
Au pire discutons en ici, c'est ouvert, on peut essayer de construire le css à plusieurs pourquoi pas:
http://user23.net/bin/?7379e7c1ca6ebd18#Zdf2w9y3qPMpPPT+dcREPjo9fFBCgsvNGR5IAjGU9lM=
Katie, Shaarli and Kentaro 19/06/2015 Sois le bienvenu..., presque 1800 liens déjà partagés (depuis avril 2012). Y a de quoi lire ! Quand au choix des technos, perso je fais en fonction de la situation, des besoins, du rendu, de l'accessibilité bref. Dans mon Shaarli j'utilise également Jquery et Jq-ui (pour ce dernier uniquement dans le cadre de l'affichage des propositions de tags). CSS est à préférer si cela permet de remplir les conditions. Sympa l'idée de travailler ensemble sur un css [
http://user23.net/links/index.php] :)
(
Permalink)
KraZhtest - Liens utiles - C'est le bordel 20/06/2015 Hey :)
Bon voilà en fait je l'ai fabriqué en javascript pour que ça marche sur tout shaarli d'origine sous forme de plugin. Ca recrée le même effet que le zoom au survol de la souris que le shaarli de Marc., mais en CSS3, sans jquery/jquery-UI donc avec 220ko de script en moins.
Ca va modifier le CSS des class existentes et créer 2 nouvelles règles pour les :hover.
Pour la démo, je l'ai intégré à mon shaarli.
Pour le tester sur tout shaarli d'origine, dans la console javascript (F12), onglet console, coller le code et run:
Ou poser ce code entre 2 balises script dans /tpl/page.footer.html pour les proprios d'un shaarli.
{code
var allClass = document.getElementsByClassName('publicLinkHightLight');
for (var i = 0; i < allClass.length; ++i) {
var all = allClass[i];
all.style="border-style: solid;border-width: 1px;display: block;transition:transform 1s;";
};
var css='.publicLinkHightLight:hover{transform:scale(1.,1.1)translateX(80px)}#linklist li:hover{transition:transform 1s;transform:scale(1.1,1.1)translateX(80px)}';
style=document.createElement('style');
style.appendChild(document.createTextNode(css));
document.getElementsByTagName('head')[0].appendChild(style);
code}
Testé ok sur des versions récentes de Firefox et Chromium
edit: Ajout de transitions sur les marges pour un effet exposé. Regarde Katie l'effet que ça donne sur ton shaarli, un vrai caroussel :)
{code
var allClass = document.getElementsByClassName('publicLinkHightLight');
for (var i = 0; i < allClass.length; ++i) {
var all = allClass[i];
all.style="border-style: solid;border-width: 1px;display: block;transition:transform 1s, margin 0.6s;";
};
var css='.publicLinkHightLight:hover{margin:1%;transform:scale(1.1,1.1)translateX(80px)}#linklist li:hover{margin:1%;transition:transform 0.6s, margin 0.6s;transform:scale(1.1,1.1)translateX(80px)}';
style=document.createElement('style');
style.appendChild(document.createTextNode(css));
document.getElementsByTagName('head')[0].appendChild(style);
code}
