Quel intégrateur web un peu trop cafféiné, ou stressé, ou débutant n’a jamais rêvé d’envoyer le mot doux qui suit à un infographe print venant de lui envoyer une maquette de site web avec des ombres internes sur les images ?
« Cher ami « graphiste print » reconverti en « web designer », il ne faut aucun doute que tu es un artiste accompli . Comme Picasso, Dali & tes autres prédécesseurs qui ont défié les conventions, rien n’est impossible dans l’espace temps régi par la créativité où tu vis : les textures peuvent entrelacer le texte, les ombres peuvent être portées ou imbriquées dans une image selon ton bon vouloir, les espaces réservés au texte peuvent se chevaucher selon ton humeur créative du moment … car pour toi, un site web est, je cite « une brochure interactive » .
Cher ami, je suis un intégrateur web. Il y a certes de la créativité dans mon monde, mais le langage qui me permet de transformer tes compositions en page web, le CSS, est plutôt rigide : par exemple, en CSS, une image ne peut pas avoir d’ombre interne.
Je te serais donc gré d’arrêter d’en mettre à tout va sur tes maquettes.
Autrement , je te promets que la prochaine fois que tu m’enverras une maquette web comportant ce genre d’images, j’ « intégrerais » à ton anatomie ta tablette graphique ainsi que tes autres outils de travail, en les faisant passer par un orifice qui, de toute évidence, n’est pas destiné à cet usage .
Cordialement. »
Il va sans dire cette façon de procéder n’est pas très professionnelle.
Certes, cela va sacrément vous défouler, mais ça n’est pas très professionnel. Qui plus est, le code pénal sanctionne sévèrement toute tentative d’étouffement d’autrui en tentant de lui faire avaler une tablette . Enfin – et heureusement pour nos amis les graphistes – la pseudo classe ::before est là pour nous aider avec ce petit problème .
Donc, chers intégrateurs web, la prochaine que « mooosieur infographe print » vous enverra un psd incluant ce genre d’abomination.
« Cher ami « graphiste print » reconverti en « web designer », il ne faut aucun doute que tu es un artiste accompli . Comme Picasso, Dali & tes autres prédécesseurs qui ont défié les conventions, rien n’est impossible dans l’espace temps régi par la créativité où tu vis : les textures peuvent entrelacer le texte, les ombres peuvent être portées ou imbriquées dans une image selon ton bon vouloir, les espaces réservés au texte peuvent se chevaucher selon ton humeur créative du moment … car pour toi, un site web est, je cite « une brochure interactive » .
Cher ami, je suis un intégrateur web. Il y a certes de la créativité dans mon monde, mais le langage qui me permet de transformer tes compositions en page web, le CSS, est plutôt rigide : par exemple, en CSS, une image ne peut pas avoir d’ombre interne.
Je te serais donc gré d’arrêter d’en mettre à tout va sur tes maquettes.
Autrement , je te promets que la prochaine fois que tu m’enverras une maquette web comportant ce genre d’images, j’ « intégrerais » à ton anatomie ta tablette graphique ainsi que tes autres outils de travail, en les faisant passer par un orifice qui, de toute évidence, n’est pas destiné à cet usage .
Cordialement. »
Il va sans dire cette façon de procéder n’est pas très professionnelle.
Certes, cela va sacrément vous défouler, mais ça n’est pas très professionnel. Qui plus est, le code pénal sanctionne sévèrement toute tentative d’étouffement d’autrui en tentant de lui faire avaler une tablette . Enfin – et heureusement pour nos amis les graphistes – la pseudo classe ::before est là pour nous aider avec ce petit problème .
Donc, chers intégrateurs web, la prochaine que « mooosieur infographe print » vous enverra un psd incluant ce genre d’abomination.
Ne devenez pas vert de rage.
Intégrez la maquette, et une fois à l’étape où il faut reproduire cette image avec du css, faites ceci.
1 . imbriquez l’image dans un bloc ou un hyperlien
<a id= »thebigone« class= »ym-gr« href= »#« ><img src= »img.png« ></a>
2 . Ajoutez le css suivant à la div imbriquante
#thebigone {
display: block;
height: auto;
overflow: hidden;
position: relative;
width: 360px /*ou toute autre largeur qui vous conviendra*/;
}
#thebigone::before {
bottom: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) inset;
content: « »;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 360px /*même largeur que la div precedente*/;
z-index: 12;
}
