Handling #Text Over #Images in #CSS - Ahmad Shadeed
▻http://ishadeed.com/article/handling-text-over-image-css
You might come across a UI component that has text above an image. In some cases, the text will be hard to read depending on the image being used. There are some different solutions like adding a #gradient overlay, or a tinted background image, text-shadow, and others.
Ça c’est le truc le plus fun dans mon boulot : tu peux être certain que quand le graphiste propose les maquettes au client où il y a du texte sur des images, il va à tous les coups choisir la plus belle image possible, avec de très beaux aplats de couleur (la mer bleue jusqu’à l’horizon, un grand champ de blé bien flou au premier plan…) sur lesquels il prendra bien soin d’installer son texte. Oh c’est beau. Et la première image que le client mettra en ligne sera évidemment une photo super-moche, avec des micro-contrastes épouvantables partout, et parfois même (oh joie) déjà du texte dans l’image elle-même. Évidemment le texte devient illisible, et c’est à toi de trouver fissa une solution magique.
L’autre caractéristique du texte sur une image, c’et que c’est souvent dans des blocs de dimensions fixes. Et là encore, le graphiste va soumettre des maquettes où les titre sont « Lorem ipsum », ou « Ici le titre ». Et le premier article que le client va publier sera titré « En réponse à la question posée par un interlocuteur à propos de la posture de notre entreprise quant au truc au nom duquel qu’on se positionne ». Et forcément, ça tient pas (mais le client veut désormais que ça tienne sans avoir à raccourcir son titre, tu penses bien).
(Et je pourrais ajouter que, même dans les exemples illustrés de l’article ci-dessus, on n’échappe généralement pas à des problèmes de lisibilité et d’accessibilité avec ces différentes solutions. C’est assez chiant, mais si on fait dans le subtile et joli comme ci-dessus, on sera toujours très très limite sur le contraste et la lisibilité, et donc l’accessibilité.)
C’est pour ça qu’on demande toujours un droit de regard sur les maquettes graphiques, pour faire des commentaires ergo/accessibilité :)
CSS Generators — Smashing Magazine
▻https://www.smashingmagazine.com/2021/03/css-generators
this week around we’ll be looking at useful #generators for everything #CSS: from #gradients to #drop-shadows and bezier curves to triangles and type scales. Just a few useful tools for your toolbelt, to keep close.
Ça faisait longtemps que j’avais pas vu un article intéressant passer sur smashing, quelques liens sympas :
▻https://brumm.af/shadows
▻https://9elements.com/blog/css-border-radius
▻https://codepen.io/yaphi1/pen/oNbEqGV
▻https://bennettfeely.com/clippy
▻https://animista.net
Google Continues Investments in Military and Police AI Technology Through Venture Capital Arm
▻https://theintercept.com/2019/07/23/google-ai-gradient-ventures
Last year,Google faced internal revolt from many employees over its handling of Project Maven, a secretive contract between the company and the Department of Defense to use artificial intelligence to improve the military’s drone targeting capabilities. After a series of internal, worker-led protests and resignations following reporting by The Intercept and Gizmodo, the company said it would wind down the drone project and promised a more transparent approach to similar work in the future. (...)
#USDepartmentOfDefense #Google #algorithme #militarisation #ProjectMaven #GradientVentures
Some State of the Art Optimizers in Neural Networks
▻https://hackernoon.com/some-state-of-the-art-optimizers-in-neural-networks-a3c2ba5a5643?source=
We are going to study Momentum, Nesterov Accelerated Momentum, AdaGrad, AdaDelta, RMSProp, Adam, AdaMax, AMSGrad.Optimization is the heart of Machine learningBefore begin on our topic, let’s understand..Why do we need Optimization?According to Merriam-Webster dictionary, meaning of the word optimize is “to make as perfect, effective, or functional as possible”. This is the definition to understand why we need Optimization in neural networks.So in machine learning, we perform optimization on the training data and check its performance on a new validation data.We already have a cost function which will tell us about the behavior of our model. Initially, our model contains arbitrary defined parameters like weights and biases and now we need to find the best possible state of those parameters (...)
#optimization-algorithms #data-science #gradient-descent #neural-networks #machine-learning
Une collection de css gradients, qui pourrait être interessante quand on a pas de visuel dans une cover, un encart, histoire de juste jouer avec un font et une typo …
Cool Background Gradients | Eggradients.com
▻http://www.eggradients.club
Easing Gradients
▻https://larsenwork.com/easing-gradients
“Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions.”
Fresh Background Gradients | WebGradients.com ?
▻https://webgradients.com
WebGradients is a free #collection of 180 linear #gradients that you can use as content backdrops in any part of your website. Easy copy #CSS3 crossbrowser code and use it in a moment! We’ve also prepared a .PNG version of each gradient.
cpt-city - an archive of #colour #gradients
▻http://soliton.vm.bytemark.co.uk/pub/cpt-city
For cartography, technical illustration and design. The archive supports several formats and is organised by author.
pour #GIMP #QGIS etc.
#cartographie #outils
voir aussi l’outil #colorbrewer ►http://colorbrewer2.org
Ultimate #CSS #Gradient Generator - ColorZilla.com
►http://www.colorzilla.com/gradient-editor
CSS3 : dégradés sans image à l’aide de background et gradient - CSS Débutant
Avant les CSS3, pour réaliser de jolis boutons ou tout autre fond en dégradé de couleurs, il convenait de réaliser une image que l’on déclarait en image de fond à l’aide de background-image.
On peut maintenant s’en passer grâce à de nouvelles valeurs de
background : linear-gradient et radial-gradient.
►http://css.mammouthland.net/css3/degrades-sans-image.php
#tutoriel #css #css3 #gradient #html
Si tu utilises SPIP, le plugin « CSS imbriqués » fournit un pseudo-CSS qui fabrique automatiquement les différentes versions -moz, -webkit… (y compris – surtout – le filtre compatible avec les anciennes versions de MSIE) :
►http://www.paris-beyrouth.org/tutoriaux-spip/article/plugin-spip-pre-processeur-de-css
Du coup, pas bien compliqué de faire un dégradé compatible avec quasiment tous les navigateurs utilisés (puisque ça fonctionne même sous MSIE 6…).
Là c’est un tuto général, mais merci de l’info.
Donc, à part le café (et encore) que ne fait pas SPIP ? ;)
Comment ça pas de beurre ? Tu oses avouer ça à une bretonne ?!! ohhhh va falloir faire quelque chose d’urgence là messieurs les spipeurs !
►http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Use this demo to create SVG-based CSS #background-image #gradients. The #CSS markup works in browsers which support #SVG as a background-image including Internet Explorer 9, Chrome, Safari, and Opera.
Pfff, de la bidouille pour parvenir à afficher à partir de IE 9, c’est pas la joie…
Tu as essayé CSS imbriqués, qui te fabrique tout seul des fonds dégradés multi-navigateurs qui s’affichent même à partir de IE 6, avec une pseudo-syntaxe telle que :
►http://www.paris-beyrouth.org/tutoriaux-spip/article/plugin-spip-pre-processeur-de-css
@arno je bosse sur du SVG, là, ce n’est pas pour des CSS destinées à du HTML. ;-)
Je connais ton plugin CSS Imbriquées, oui, mais on bosse avec LESS voire SASS/Compass chez nous.
Ultimate #CSS #Gradient #Generator - ColorZilla.com
►http://www.colorzilla.com/gradient-editor
A powerful Photoshop-like CSS gradient editor from ColorZilla
Ultimate CSS Gradient Generator - ColorZilla.com
►http://www.colorzilla.com/gradient-editor
A powerful Photoshop-like CSS gradient editor from ColorZilla
#css #gradient #generateur #design #web #outil #css3 #clevermarks
The Sea of Ideas » The coverflickr
►http://paulbakaus.com/2010/02/04/the-coverflickr
#CSS #reflection #gradient #animation #transforms #transitions #dev #web
The Sea of Ideas » The coverflickr
►http://paulbakaus.com/2010/02/04/the-coverflickr
#CSS #reflection #gradient #animation #transforms #transitions #dev #web