http://bjango.com/articles/adjustmentlayers/
https://lh3.googleusercontent.com/-Z3QwsfWW4zs/U9mOChwPQTI/AAAAAAAAKsU/e_i3T2qdPxY/s426/Bty3VgNCcAAVcuw.jpg
A méditer lors de la réflexion sur l'interface user ^^
http://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html
Parcouru en diagonale, je reviendrai dessus plus tard -> coude
http://korben.info/comment-activer-cache-nouvelle-generation-firefox.html
@Timo: la lenteur de Firefox devient même préoccupante... dès qu'une page est un peu lourde, les effets css rament comme un galérien stakhanoviste en période de grève des transports... alors que chrome ne ralentit même pas... quid ?! (pour les plus jeunes WTF ?!)
Je bosse sur une refonte de la maquette de mon shaarli, ben ya des ralentissements de malade sur firefox. Bouhououou
POURQUOI ?
Lien vers le message anterieur http://lehollandaisvolant.net/?id=20140505172336
http://macaw.co/
Un genre de dreamwaever mais plus orienté code et très bien foutu... la vidéo de démo est bien: on voit les avantages de ce logiciel et surtout la propreté du code généré, à la fois sémantique, non redondant et sans excès de spécificité dans les balises.
Je pense qu'on peut gagner du temps avec ça... surtout en phase de recherche et de test de maquette.
http://thepatternlibrary.com/#wild-sea
le contraire de http://subtlepatterns.com/ ^^
des fonds répétables et colorés... très.
http://www.zerobundle.com/?ref=catswhocodezb3
des ressources sympa, à récupérer.
http://css-tricks.com/svg-fallbacks/
Une méthode fallback pour utiliser des .svg ...
http://noisepng.com/
Un générateur de bruit pour créer des images de fond (permet créer des fonds bruités en couleur répétables)
donne le code base64 de l'image ou permet de la télécharger
http://korben.info/ink-outil-framework-interface-web.html
Ca peut servir...
http://lehollandaisvolant.net/?mode=links&id=20131205213747
Je note, pour la prochaine version d'auto_css, un jour ^^
Merci Timo ;)
http://matthewkosloski.me/labs/pixem/
Un convertisseur de px vers em ultra simple et minimaliste...
A conserver par devers soi ;)
http://sebsauvage.net/links/?wxykOw
Se passer de jquery est assez facile si on ne cherche pas les effets visuels et tout...
jquip est très bien pour une fraction du poids de jquery sinon, on peut toujours passer par le js pur, voire même se faire son propre jquery minimaliste...
http://css-tricks.com/centering-percentage-widthheight-elements/
Bonne idée ça: utiliser translate pour centrer un élément dont on ne connaît pas la taille.
http://www.grafikart.fr/tutoriels/html-css/box-sizing-427
un bon résumé des avantages du box-sizing (comment on a pu vivre avant ^^)
http://goodui.org/
Des conseils pour la mise en page et l'organisation d'une user interface propre et efficace (basée surtout sur la charge cérébrale)
http://bajazet.fr/shaarli/?plATHg
Ces sélecteurs sont très utiles pour cibler des objets n'ayant pas de classe ou d'id quand tu n'as pas complètement la main sur la structure HTML du projet ou quand l'objet va se répéter dans la page et que l'ajout d'une classe pour chaque itération alourdirait le code inutilement.
De plus, ils permettent des fioritures uniquement via les css sans passer par un codage spécifique pour isoler les objets en questions (genre des styles spéciaux pour les liens qui s'ouvrent dans une nouvelle page ou qui ouvrent un document en particulier... on se passe d'une portion de js ou de php qui teste tout pour ajouter des classes à la pelle de chantier ^^)
C'est léger, ça allège le code html, ça simplifie la vie du codeur, c'est très bien pris en charge et ça maintient la séparation dev / design+maquette...
http://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html
J'ignorais que les css pour les colonnes étaient aussi bien supportés (cad tous sauf ie, comme de bien entendu)...
C'est bon à prendre ça !
Surtout que la largeur d'un paragraphe ne doit pas être trop importante pour faciliter la lecture: pouvoir utiliser des colonnes dont le contenu se répartit seul, même lors qu'on redimensionne avec un design fluide, ça facilite vraiment la vie !
http://www.lafermeduweb.net/billet/helium-css-dectecter-le-css-non-utilise-sur-votre-site-1596.html
Tiens ça peut être utile ça... c'est vrai qu'à la fin d'une session hardcore de prog/intégration, on finit par voir flou en se disant qu'on optimisera les css plus tard...
C'est une bon début ^^
http://screensiz.es/
Des infos sur tous les supports smartphones et tablettes par marque: taille d'écran, système, popularité etc...
Peut être utile.
https://github.com/LeaVerou/CSSS
Oh ! Léa Verou, l'auteure du génial Dabblet ( https://github.com/LeaVerou/dabblet ) propose un système de slidesho via css ! Faut que je regarde ça !
via Seb http://sebsauvage.net/links/?7ysPMQ
http://codepen.io/patrickkunka/pen/GECBF
Un bon truc pour les designs en colonnes: text-align:justify maintient des espacements de gouttières réguliers, les tailles sont spécifiées et % et restent fluides et le nombre de colonnes est géré par les media queries...
Finalement ça reste très léger, simple en structure et peu intrusif dans les css...
Une très bonne solution, à mon sens !
http://www.damnyouartschool.com/
Outils et ressources pour les créatifs... ça a l'air bien...
via www.webdesignertrends.com
http://lehollandaisvolant.net/?mode=links&id=20130530205926
ha oui, pas con ça ^^ Hop, SnippetVampirisé ;)
Meeeercitiiimo (merci Timooo!) (sur l'air de merci patron http://www.dailymotion.com/video/x1hlgpclip-video-les-charlots-merci-patromusic )
http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
très joli effet de perspective 3d avec effet sur le scroll de page...
http://colourco.de/
Houlà, alors là, je dis MONSIEUR (ou MADAME ?)
J'ai testé pas mal de générateurs de palettes mais aucun de ceux que j'ai vu n'était aussi souple, simple, ergonomique, bien pensé et visuellement parlant...
On clique sur le modèle de couleurs (monochrome, analogique etc ) et ensuite on bouge la souris: verticalement pour la luminosité, horizontalement pour la couleur... le résultat apparaît en temps réel sur les barres en plein écran...
via http://bajazet.fr/shaarli/?lHeguw
http://www.webresourcesdepot.com/cosmo-mini-1200-free-icons-in-png/
Ben en voilà un de pack d'icônes complet, simple, joli, gratuit, libre et tout... hop, je typiak.
Merci icojam
http://fr.slideshare.net/goetter/un-site-web-responsive-en-une-heure
Un bon récpitulatif et des trucs à connaître
http://jakiestfu.github.io/Snap.js/demo/apps/default.html
Lavache, c'est beau: ça me rappelle la grande époque de l'amiga ^^
On peut en faire des trucs avec cette possibilité...
via bajazet.fr
https://github.com/jakiestfu/Snap.js
http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html
Le contexte de block en CSS: excellent article qui permet de comprendre la réaction ubuesque de certains enfants en float...
http://bradjasper.com/subtle-patterns-bookmarklet/
Cool ! Subtle patterns a sorti un bookmarklet pour tester ses fonds sur n'importe quel site ^^
http://learn.shayhowe.com/advanced-html-css/complex-selectors
les sélecteurs CSS complexes
quelques trucs à garder sous la main
http://uxdesign.smashingmagazine.com/2012/11/20/freehand-style-in-web-design/
Ajouter sa touche perso au design
http://www.positioniseverything.net/easyclearing.html
un clear fix crossbrowser
http://www.hteumeuleu.fr/arreter-media-queries/
Je +1 à fond !
http://www.creativejuiz.fr/blog/css-css3/difference-entre-pseudo-element-et-pseudo-classe/comment-page-1#comment-11794
http://www.creativejuiz.fr/blog/tutoriels/nth-child-css2-compatible-ie7/comment-page-1#comment-11793
Excellent truc pour remplacer nth-child en css2.1
http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/
Styler les ol li : un point sur couter en css : très intéressant.
http://jsfiddle.net/greypants/zgCb7/
Un chouette tool tip en pur css : joue sur l'opacité...
http://perishablepress.com/wrapping-content/
couper du texte à la ligne dans les <pre>
http://www.bestwebfonts.com/
On peut tester les google fonts en direct avec effets !
http://css-tricks.com/snippets/html/glyphs/
http://css-tricks.com/dont-overthink-it-grids/
Mettre les grilles en place lors d'une intégration
http://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html
Les transforms
http://naldzgraphics.net/tips/mobile-website-mistakes/
erreurs à éviter pour le design de la version mobile
http://www.webdesignertrends.com/2012/07/ui-ux-mobile-ou-trouver-linspiration/
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
des ombres en perspective en css
http://iconizer.net/
permet de voir les icones en situation, faire des changements etc avant de telecharger !
http://bgrepeat.com/most-dl
http://www.jqmobi.com/
http://ripple.tinyhippos.com/download
Making Mobile Development And Testing Easy
http://fontello.com/
creer une police contenant toutes les icones que l'on veut
http://nomorebanding.com/
supprime l'effet de bande dans les degrades de photoshop
http://www.noupe.com/css/15-css-habits-to-develop-for-frustration-free-coding.html
http://www.cleancss.com/
http://romy.tetue.net/stop-arial-11px
Verdana ou Georgia en 14px c'est mieux !
http://cssarrowplease.com/
http://bearcss.com/
http://bearcss.com/ vous demande simplement de lui envoyer votre fichier html, il se charge du reste et vous renvoie un css contenant :
Les noms de vos balises importantes
Les nom de vos classes
Les nom de vos id
Le tout séparé en types par des commentaires
http://brand-identity-essentials.com/100-principles
http://goldenratiocalculator.com/
http://webdesignledger.com/tips/9-jquery-mistakes-you-shouldnt-commit
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
nouveaux éléments et js pour implémenter aux vieux navigateurs
http://designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/
http://www.lafermeduweb.net/billet/websitedimensions-une-mine-d-info-sur-les-resolutions-navigateurs-1290.html
http://webdesignledger.com/tips/creating-minimalist-designs-makes-you-a-better-designer
http://www.turnjs.com/#credits
http://addyosmani.github.com/jquery-ui-bootstrap/
http://www.fontsquirrel.com/fonts/DejaVu-Serif
http://www.99lime.com/elements/
http://www.defaulticon.com/
http://foter.com/
http://www.webdesignertrends.com/2012/01/les-meilleurs-sites-de-psd-webdesign-gratuit/
http://dochub.io/#css/
http://textuts.com/glossy-snow-globe-text-effect/
http://www.psdvault.com/text-effects/create-a-rocky-text-effect-with-space-background-in-photoshop/
http://www.lafermeduweb.net/billet/editease-un-cms-en-jquery-pour-creer-un-site-en-2-minutes-595.html
editEase est un CMS jQuery permettant de créer un site simple sans bases de données en quelques minutes.
Ce script est parfait si vous souhaitez monter un site vitrine qui soit facilement administrable en quelques minutes.
Toutes les pages, zones de textes sont administrables une fois logué en admin.
Il n'y'a pas d'interface d'administration, tout se fait en direct !
Cliquez sur une zone à modifier, puis un editeur de texte simple ou WYSIWYG s'ouvre pour que vous puissiez modifier le contenu
http://www.lafermeduweb.net/billet/une-selection-d-editeurs-de-texte-riches-pour-vos-sites-92.html
Voici une sélection d'éditeurs de texte online dits "riches" ou éditeurs WYSIWYG, c'est à dire qu'ils possèdent des fonctionnalités avancées comme votre logiciel de traitement de texte favoris: Mettre en gras, changer la position du texte, la police, le style, des éléments HTML, des images, vidéos etc ... Tout ça grâce à un seul éditeur que vous pouvez intégrer facilement à vos pages web.
http://www.lafermeduweb.net/billet/cleditor-un-editeur-wysiwyg-pour-jquery-1208.html
http://wp-snippets.com
http://html5snippets.com
http://isopixel.net/archivo/2006/04/20-reglas-para-el-diseno-de-logos
http://prefixmycss.com
http://perishablepress.com/press/2009/06/28/css-hacks-for-different-versions-of-firefox
http://subtlepatterns.com
de subtiles images de fond répétables... bôôôô
http://www.psdvault.com/text-effects/create-an-ancient-stone-text-effect-inspired-by-the-elder-scrolls-v-skyrim-game-in-photoshop/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+PsdVault+%28Minty-Fresh+Posts+from+PSD+Vault%29
http://www.trazos-web.com/2011/08/16/28-trucos-tips-y-funciones-para-wordpress
http://www.smashingmagazine.com/2011/08/07/a-dozen-cross-browser-testing-tools
http://www.addictivetips.com/windows-tips/create-web-animation-and-interaction-designs-in-html-5-with-adobe-edge/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Addictivetips+%28AddictiveTips%29&utm_content=Netvibes
http://webdesignerwall.com/tutorials/html5-grayscale-image-hover
http://www.123rf.com/blog/blog.php?idblog=b1000187&referredBy=Angel&referredBy=GT&src=trackadtut
http://www.spritecow.com
Sprite cow est un site plutôt utile pour tous les amateurs de sprite CSS. Le principe est de vous permettre de sélectionner un élément de votre sprite CSS par simple clic afin d’obtenir immédiatement sa position et sa taille (finis les retour sur photoshop ou autre pour trouver la position de tel ou tel élément ! ). Le service est très simple et assez efficace (à condition d’avoir une sprite CSS avec des éléments séparés par des espaces vide) et permet de gagner pas mal de
http://www.google.com/webfonts#ChoosePlace:select
http://www.designzzz.com/wordpress-admin-plugins-increase-productivity
http://naldzgraphics.net/tips/things-designers-need-to-know-about-colors
A savoir sur les couleurs
http://www.smashingmagazine.com/2011/05/04/useful-photoshop-tools-and-techniques-for-your-workflow
trucs et plugins photoshop