Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #g
  • #gr
  • #gra
RSS: #gradient

#gradient

  • #gradients
  • #gradient-descent
  • #gradientventures
  • #gradient_css_easing_clevermarks
  • @b_b
    b_b @b_b PUBLIC DOMAIN 11/06/2024
    6
    @arno
    @monolecte
    @7h36
    @cy_altern
    @rastapopoulos
    @gblin
    6

    #CSS #Pattern : Fancy #backgrounds with CSS #gradients
    ▻https://css-pattern.com

    https://css-pattern.com/css-pattern.jpg

    The biggest collection of background Patterns

    Explore 144 CSS-only patterns made with CSS gradients and optimized with CSS variables.

    You can also surprise yourself with a random CSS Pattern! ▻https://random.css-pattern.com

    Toujours par l’auteur de ►https://css-tip.com dont on causait ici ►https://seenthis.net/messages/1001462

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 12/06/2024

      Il faut pas oublier la version animée : ▻https://animated.css-pattern.com

      Ça pourrait servir à faire des fonds d’écran de connexion aussi :)

      On pourrait possiblement aussi imaginer une saisie qui reprendrait tous les types et qui permettrait de les configurer, et ça donnerait une config à utiliser pour un thème ou un écran.

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 31/08/2023
    8
    @monolecte
    @sandburg
    @ericw
    @jeanmarie
    @rastapopoulos
    @7h36
    @bouts
    @alexcorp
    8

    Designing Accessible Text Over Images: Best Practices, Techniques, And Resources — Smashing Magazine
    ▻https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part1
    ▻https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part2

    https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-overlay.jpg https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-scrim.jpg https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-strips.jpg https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-space.jpg https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-blur.jpg https://files.smashing.media/articles/designing-accessible-text-over-images-part2/smashing-text-over-images-technique-frame.jpg https://files.smashing.media/articles/designing-accessible-text-over-images-part2/smashing-text-over-images-technique-soft-colored-gradients.jpg https://files.smashing.media/articles/designing-accessible-text-over-images-part2/smashing-text-over-images-technique-placement.jpg https://files.smashing.media/articles/designing-accessible-text-over-images-part2/smashing-text-over-images-technique-shapes.jpg https://files.smashing.media/articles/designing-accessible-text-over-images-part2/smashing-text-over-images-technique-gradients.jpg

    #CSS #gradient #Images #Text

    En complément de ▻https://seenthis.net/messages/924372

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 1/09/2023

      #accessibilité #lisibilité #contraste #dégradé #intégration #web

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 29/07/2021
    5
    @cy_altern
    @kent1
    @jeanmarie
    @george
    @rastapopoulos
    5

    Handling #Text Over #Images in #CSS - Ahmad Shadeed
    ▻http://ishadeed.com/article/handling-text-over-image-css

    https://ishadeed.com/assets/text-image/text-image-solutions.jpg

    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.

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 29/07/2021

      #accessibilité #lisibilité #contraste #dégradé #intégration #web

      RastaPopoulos @rastapopoulos CC BY-NC
    • @arno
      ARNO* @arno ART LIBRE 30/07/2021

      Ç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é.)

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 30/07/2021

      C’est pour ça qu’on demande toujours un droit de regard sur les maquettes graphiques, pour faire des commentaires ergo/accessibilité :)

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 16/03/2021
    4
    @arno
    @rastapopoulos
    @tofulm
    @jeanmarie
    4

    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

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 16/03/2021

      #animation #intégration #web #inspiration

      RastaPopoulos @rastapopoulos CC BY-NC
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 10/06/2021

      Merci #bb_la_ressource :D

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @etraces
    e-traces @etraces ART LIBRE 24/07/2019
    2
    @monolecte
    @najort
    2

    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

    https://theintercept.imgix.net/wp-uploads/sites/1/2019/07/google-ai-illustration-07-1563479080.jpg

    e-traces @etraces ART LIBRE
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 12/02/2019

    Some State of the Art Optimizers in Neural Networks
    ▻https://hackernoon.com/some-state-of-the-art-optimizers-in-neural-networks-a3c2ba5a5643?source=

    https://cdn-images-1.medium.com/max/1024/1*Ngm2oZh8ABPu3alObbhDTA.png

    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

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire
  • @mist_
    Mist. GraphX @mist_ 1/03/2018
    3
    @rastapopoulos
    @mukt
    @tofulm
    3

    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

    https://uploads-ssl.webflow.com/5a9423a3f702750001758d4f/5a96d60f3358fb0001c5f6d0_Cool-Background-Gradients-compressor.png

    #css#gradients#integration#covers

    Mist. GraphX @mist_
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 2/02/2018

    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.”

    #gradient_CSS_easing_clevermarks

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 16/11/2017
    2
    @rastapopoulos
    @mukt
    2

    Fresh Background Gradients | WebGradients.com ?
    ▻https://webgradients.com

    https://webgradients.com/Open_graph_image_1200x630.jpg

    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.

    b_b @b_b PUBLIC DOMAIN
    • @nicod_
      nicod_ @nicod_ 17/11/2017

      ►http://www.colorzilla.com/gradient-editor

      nicod_ @nicod_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 17/11/2017

      #css #graphisme #web #outil #couleurs

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @fil
    Fil @fil 20/01/2014
    1
    @reka
    1

    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.

    http://soliton.vm.bytemark.co.uk/pub/cpt-city/heine/teaser/GTS2012-ages-detail.png

    pour #GIMP #QGIS etc.
    #cartographie #outils

    voir aussi l’outil #colorbrewer ►http://colorbrewer2.org

    • #author
    Fil @fil
    Écrire un commentaire
  • @booz
    BoOz @booz 5/12/2013

    Ultimate #CSS #Gradient Generator - ColorZilla.com
    ►http://www.colorzilla.com/gradient-editor

    #webdev

    BoOz @booz
    Écrire un commentaire
  • @pascalelc
    PascaleLC @pascalelc CC BY-SA 2/05/2012

    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

    PascaleLC @pascalelc CC BY-SA
    • @arno
      ARNO* @arno ART LIBRE 2/05/2012

      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

      -spip-gradient : top, #f0f0f0, #bbbbbb ;

      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…).

      ARNO* @arno ART LIBRE
    • @pascalelc
      PascaleLC @pascalelc CC BY-SA 2/05/2012

      Là c’est un tuto général, mais merci de l’info.
      Donc, à part le café (et encore) que ne fait pas SPIP ? ;)

      PascaleLC @pascalelc CC BY-SA
    • @fil
      Fil @fil 2/05/2012

      les pâtes (enfin le beurre dans les)

      Fil @fil
    • @pascalelc
      PascaleLC @pascalelc CC BY-SA 2/05/2012

      Comment ça pas de beurre ? Tu oses avouer ça à une bretonne ?!! ohhhh va falloir faire quelque chose d’urgence là messieurs les spipeurs !

      PascaleLC @pascalelc CC BY-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 27/01/2012

    ►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.

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @arno
      ARNO* @arno ART LIBRE 27/01/2012

      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 :

      -spip-gradient : top, #f0f0f0, #bbbbbb ;

      ►http://www.paris-beyrouth.org/tutoriaux-spip/article/plugin-spip-pre-processeur-de-css

      ARNO* @arno ART LIBRE
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 27/01/2012
      @arno

      @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.

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 14/06/2011

    Ultimate #CSS #Gradient #Generator - ColorZilla.com
    ►http://www.colorzilla.com/gradient-editor

    A powerful Photoshop-like CSS gradient editor from ColorZilla

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 29/11/2010

    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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @0gust1
    0gust1 @0gust1 CC BY-NC 11/10/2010

    Ultimate CSS Gradient Generator - ColorZilla.com
    ►http://www.colorzilla.com/gradient-editor

    #css #css3 #tools #web #webdesign #gradient #color

    0gust1 @0gust1 CC BY-NC
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 24/02/2010

    The Sea of Ideas » The coverflickr
    ►http://paulbakaus.com/2010/02/04/the-coverflickr

    #CSS #reflection #gradient #animation #transforms #transitions #dev #web

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 24/02/2010

    The Sea of Ideas » The coverflickr
    ►http://paulbakaus.com/2010/02/04/the-coverflickr

    #CSS #reflection #gradient #animation #transforms #transitions #dev #web

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire

Thèmes liés

  • #css
  • #web
  • #gradients
  • #css3
  • #css
  • technology: animation
  • #dev
  • #transitions
  • #transforms
  • #reflection
  • #intégration
  • #outil
  • #dégradé
  • #tutoriel
  • #background-image
  • #svg
  • #generator
  • #generateur
  • #design
  • #bbbbbb
  • #tools
  • #clevermarks
  • #contraste
  • #webdesign
  • #color
  • #html
  • #accessibilité
  • #lisibilité
  • industryterm: css3 tools
  • #f0f0f0
  • #images
  • #text