hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Comment appliquer des filtres Instagram sur des images Web

Beaucoup aiment utiliser Instagram et les filtres qui viennent avec l'application, pour rendre leurs photos plus intéressantes et belles. Cependant, jusqu'à présent, l'utilisation de ces filtres est limitée à utiliser dans l'application. Que faire si vous souhaitez utiliser des filtres Instagram sur des images Web, en dehors de l'application, comme des photos que vous souhaitez afficher dans votre blog ou site Web personnel?

Eh bien, vous pouvez utiliser CSSGram, une petite bibliothèque qui vous permet de modifier vos photos avec des filtres similaires à ceux que vous pouvez trouver sur l'application Instagram . Contrairement à Photoshop où les modifications sont manuelles ou effectuées via des actions Photoshop, avec CSSGram, tout le processus se fait via CSS.

Comment ça marche

Pour générer l'effet, CSSGram utilise les filtres CSS et le mode de fusion CSS, mélangeant fondamentalement les effets au point où il imite votre filtre Instagram désiré. Les effets sont appliqués au conteneur d'image, via des pseudo-éléments. Voyons comment cela se fait avec cet exemple "1977":

Voici le pseudo-élément ajouté.

 ._1977 {position: relative; } ._1977: après {content: ''; bloc de visualisation; hauteur: 100%; largeur: 100%; en haut: 0; gauche: 0; position: absolue; } 

Et voici le filtre CSS et Blend ajouté:

 ._1977 {-webkit-filter: contraste (1.1) luminosité (1.1) saturer (1.3); filtre: contraste (1.1) luminosité (1.1) saturer (1.3); } ._1977: après {arrière-plan: rgba (243, 106, 188, 0.3); mélange-mélange-mode: écran; } 

Comment utiliser

Nous ne pouvons pas ajouter la classe de filtre directement à l'élément image, il doit être ajouté au conteneur ou à la classe parent, par exemple avec

comme un conteneur.

Le code ressemblera à ceci:

N'oubliez pas d'inclure la bibliothèque CSSgram (l'obtenir ici) dans votre document HTML.

J'ai créé la démo des images avant et après l'ajout du filtre et le résultat est très sympa. Il y a 13 filtres inclus dans la bibliothèque pour le moment. Ci-dessous vous pouvez voir les différences entre l'image originale et l'image sous les filtres " 1977 ", " Aden " et " Vichy ".

Voir le stylo rOKPmW

Si vous souhaitez simplement utiliser l'un des styles, vous pouvez charger les fichiers CSS individuels en conséquence.

Utiliser SCSS

Si vous souhaitez ajouter les filtres à votre classe de conteneur d'images en cours sans changement de nom, vous pouvez le faire en étendant l'effet de filtre à l'intérieur de vos fichiers SCSS. Voici comment le faire.

Téléchargez d'abord le fichier source SCSS et importez votre fichier SCSS.

 @import 'vendeur / cssgram'; 

Supposons que vous avez la structure HTML comme ci-dessous:

Puis dans votre style.scss, étendez le filtre comme ceci:

 .my-class {... @extend% _1977; } 

Plus de messages Instagram

  • 40 outils et applications pour optimiser votre compte Instagram
  • 20 applications utiles pour tirer le meilleur parti d'Instagram
  • 10 trucs et astuces Instagram utiles que vous devez savoir

Ultimate Guide to Crowdfunding succès

Ultimate Guide to Crowdfunding succès

Les plateformes de financement participatif ont permis de recueillir 2, 7 milliards de dollars et ont financé plus d'un million de campagnes en 2012 seulement. pour 2013, cela pourrait représenter une perte de 5, 1 milliards de dollars. Crowdfunding devient le premier choix pour les fondateurs de la base comme vous pour trouver un financement pour vos projets de rêve .Av

(Conseils techniques et de conception)

Obtenez tous vos flux de réseau social en un seul endroit avec Feedient

Obtenez tous vos flux de réseau social en un seul endroit avec Feedient

Les médias sociaux sont sans aucun doute devenus une partie intégrante de nos vies. Chaque jour, nous ouvrons une session sur nos comptes Facebook, Twitter et Instagram, en vérifiant ce qui se passe à travers le monde et parmi notre cercle d'amis.Cependant, avec autant de réseaux sociaux, et tant d'informations affichées et téléchargées sur ces réseaux, il peut parfois être très difficile de rester au courant de ce qui se passe sur vos réseaux préférés . Fret pas cepen

(Conseils techniques et de conception)