Dialogues Chaleur et Amitié

Annonce Effets CSS pour belle présentation de vos images 578625ylmj1izr INSCRIVEZ VOUS, ET VENEZ PARTAGER AVEC NOUS !...... Effets CSS pour belle présentation de vos images 96740409xg6q7a ECHANGES DE POINTS DE VUE EN TOUTE AMITIE ...... Effets CSS pour belle présentation de vos images 702465mini_chat_a_002 TOLERANCE ET BONNE HUMEUR......

Effets CSS pour belle présentation de vos images

Jakady
Jakady
Administrateur
Administrateur

Inscription : 14/05/2009
Messages : 101214

Date de naissance : 31/07/1953
Masculin Localisation : Doubs

Effets CSS pour belle présentation de vos images Empty Effets CSS pour belle présentation de vos images

Message par Jakady le Mer 14 Mar - 0:55

Effets CSS pour une belle présentation de vos images





[Seuls les administrateurs ont le droit de voir cette image]
Aujourd’hui encore beaucoup de sites web ne se prennent pas la peine d’agrémenter visuellement leurs présentations d’images, illustrations, et autres galeries.
Je comprends que éditer chaque image une par une via Photoshop peut fatiguer à la longue, alors pour gagner du temps nous allons automatiser cela à l’aide du CSS. [Seuls les administrateurs ont le droit de voir cette image]

Voici donc pour commencer 5 différentes façons simples d’ajouter un peu de saveur à vos images en les rendant plus attrayantes :

Un effet d’ombre portée


[Seuls les administrateurs ont le droit de voir ce lien]
HTML


<img class="shadow" src="sample.jpg" alt="" />
CSS


img.shadow {
background: url(shadow-1000x1000.gif) no-repeat right bottom;
padding: [color:9138=#933]5px [color:9138=#933]10px [color:9138=#933]10px [color:9138=#933]5px;
}
Un effet de double bordure


[Seuls les administrateurs ont le droit de voir ce lien]
HTML


<img class="double-border" src="sample.jpg" alt="" />
CSS


img.double-border {
border: [color:9138=#933]5px solid #ddd;
padding: [color:9138=#933]5px; /*Inner border size*/
background: #fff; /*Inner border color*/
}
Un effet de cadre


[Seuls les administrateurs ont le droit de voir ce lien]
HTML


<div class="frame-block">
<span> </span>
<img src="sample.jpg" alt="" />
</div>
CSS


.frame-block {
position: relative;
display: block;
height:[color:9138=#933]335px;
width: [color:9138=#933]575px;
}
.frame-block span {
background: url(frame.png) no-repeat center top;
height:[color:9138=#933]335px;
width: [color:9138=#933]575px;
display: block;
position: absolute;
}
Un effet Watermark sur l’image


[Seuls les administrateurs ont le droit de voir ce lien]
HTML


<div class="transp-block">
<img class="transparent" src="sample.jpg" alt="" />
</div>
CSS


.transp-block {
background: #000 url(watermark.jpg) no-repeat;
width: [color:9138=#933]575px;
height: [color:9138=#933]335px;
}
img.transparent {
filter:alpha(opacity=75);
opacity:.75;
}
Une description sur l’image (caption)


[Seuls les administrateurs ont le droit de voir ce lien]
HTML


<div class="img-desc">
<img src="sample.jpg" alt="" />
<cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>
CSS


.img-desc {
position: relative;
display: block;
height:[color:9138=#933]335px;
width: [color:9138=#933]575px;
}
.img-desc cite {
background: #111;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: [color:9138=#933]555px;
padding: [color:9138=#933]10px;
border-top: [color:9138=#933]1px solid #999;
}





[Seuls les administrateurs ont le droit de voir ce lien]

Quand tu donnes tu perçois plus que tu donnes, car tu n'étais rien et tu deviens?
Antoine de St Exupéry
Boule
Boule
Administratrice
Administratrice

Inscription : 12/08/2009
Messages : 20534

Date de naissance : 17/01/1979
Féminin

Effets CSS pour belle présentation de vos images Empty Re: Effets CSS pour belle présentation de vos images

Message par Boule le Mer 14 Mar - 3:35

Effets CSS pour belle présentation de vos images 35525 même si je n'aime pas tellement toucher aux css de base



Les calories sont des groupes de petits salopards qui, durant la nuit, entrent dans votre garde-robes et recousent vos vêtements plus serrés.
Anonymous
Invité
Invité

Effets CSS pour belle présentation de vos images Empty Re: Effets CSS pour belle présentation de vos images

Message par Invité le Mer 14 Mar - 7:22

Effets CSS pour belle présentation de vos images 511716

C'est quoi un CSS ???
Jakady
Jakady
Administrateur
Administrateur

Inscription : 14/05/2009
Messages : 101214

Date de naissance : 31/07/1953
Masculin Localisation : Doubs

Effets CSS pour belle présentation de vos images Empty Re: Effets CSS pour belle présentation de vos images

Message par Jakady le Mer 14 Mar - 7:51

CSS = Compagnie Sucrière Sénégalaise !!

Effets CSS pour belle présentation de vos images 630373 Effets CSS pour belle présentation de vos images 495842 Effets CSS pour belle présentation de vos images 495842



Non, dans notre cas il s'agit :


CSS = Cascading Style Sheets, (en français : feuilles de style en cascade), langage utilisé dans la présentation de pages web.


Petit cours :

[Seuls les administrateurs ont le droit de voir ce lien]





[Seuls les administrateurs ont le droit de voir ce lien]

Quand tu donnes tu perçois plus que tu donnes, car tu n'étais rien et tu deviens?
Antoine de St Exupéry
Anonymous
Invité
Invité

Effets CSS pour belle présentation de vos images Empty Re: Effets CSS pour belle présentation de vos images

Message par Invité le Mer 14 Mar - 8:09


CSS = Compagnie Sucrière Sénégalaise !!

Effets CSS pour belle présentation de vos images 500442 Effets CSS pour belle présentation de vos images 500442 Effets CSS pour belle présentation de vos images 500442 Effets CSS pour belle présentation de vos images 500442





Merci....Je vais explorer ça.
Anonymous
Invité
Invité

Effets CSS pour belle présentation de vos images Empty Re: Effets CSS pour belle présentation de vos images

Message par Invité le Mer 14 Mar - 11:37

J'ai été voir mais j'ai pas bien compris.

On utilise les CRS comment et dans quoi?

Merci
Effets CSS pour belle présentation de vos images 395608


Jakady
Jakady
Administrateur
Administrateur

Inscription : 14/05/2009
Messages : 101214

Date de naissance : 31/07/1953
Masculin Localisation : Doubs

Effets CSS pour belle présentation de vos images Empty Re: Effets CSS pour belle présentation de vos images

Message par Jakady le Mer 14 Mar - 11:51

Le CRS ?

Uniquement pour les manifs !!!


Effets CSS pour belle présentation de vos images 495842 Effets CSS pour belle présentation de vos images 495842



Pour ce genre de question, je laisse la parole à Boule qui connait surement mieux que moi !!!


Si elle ne passe pas par là, envoye-lui le lien de cette page en MP !!!





[Seuls les administrateurs ont le droit de voir ce lien]

Quand tu donnes tu perçois plus que tu donnes, car tu n'étais rien et tu deviens?
Antoine de St Exupéry
Anonymous
Invité
Invité

Effets CSS pour belle présentation de vos images Empty Re: Effets CSS pour belle présentation de vos images

Message par Invité le Mer 14 Mar - 12:26

Jakady a écrit:Le CRS ?

Uniquement pour les manifs !!!


Effets CSS pour belle présentation de vos images 495842 Effets CSS pour belle présentation de vos images 495842

Effets CSS pour belle présentation de vos images 511716 Effets CSS pour belle présentation de vos images 511716 Effets CSS pour belle présentation de vos images 511716

Je dis que des couneries aujourd'hui....


OK Je vais attendre Boule. Parce que la, c'est du chinois....

Effets CSS pour belle présentation de vos images 395608
Anonymous
Invité
Invité

Effets CSS pour belle présentation de vos images Empty Re: Effets CSS pour belle présentation de vos images

Message par Invité le Mer 14 Mar - 12:42

Effets CSS pour belle présentation de vos images 540651 T'es trop mimi, Hanna, dans tes interventions !

Ne change pas, tu es excellente ! Effets CSS pour belle présentation de vos images 395608
Anonymous
Invité
Invité

Effets CSS pour belle présentation de vos images Empty Re: Effets CSS pour belle présentation de vos images

Message par Invité le Mer 14 Mar - 12:59

Merci Cybeline....tu me remonte le moral, toi...... Effets CSS pour belle présentation de vos images 11753 Effets CSS pour belle présentation de vos images 11753

Contenu sponsorisé

Effets CSS pour belle présentation de vos images Empty Re: Effets CSS pour belle présentation de vos images

Message par Contenu sponsorisé


    La date/heure actuelle est Mar 21 Mai - 1:17