Effet 3D

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Effet 3D

Message par koum64 Sam 31 Mai 2014 - 14:30

Bonjour,
Depuis hier je cherche mais en vain alors, dslé si cela a déjà été demandé  Confused 
Peut être que je n'écris pas les bons mots pour trouver la solution...

J'aimerais arrivé à faire un effet 3d/bulles pour "les derniers messages"et "forums" comme c le cas pour forumactif :

Effet 3D Foruma10

Merci beaucoup à celui ou celle qui voudra et pourra m'aiguiller  aidez moi

EDIT
J'ai vue ds les tutos comment faire un cadre pour derniers message : https://forum.forumactif.com/t346456-phpbb2-mettre-un-cadre-dans-les-derniers-messages#2957958

Mais pour les forums / sous catégories ?


Dernière édition par koum64 le Mar 3 Juin 2014 - 22:07, édité 1 fois
avatar

koum64
Nouveau membre

Messages : 8
Inscrit(e) le : 31/05/2014

Voir le profil de l'utilisateur http://outline2.forumactif.org
koum64 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par Neptunia Sam 31 Mai 2014 - 15:41

Bonjour ^_^

koum64 a écrit:
J'ai vue ds les tutos comment faire un cadre pour derniers message : https://forum.forumactif.com/t346456-phpbb2-mettre-un-cadre-dans-les-derniers-messages#2957958

Mais pour les forums / sous catégories ?

Pour les listes de sujets, il suffit de faire la même chose au niveau du topics_list_box

La portion de code qui vous intéresse est celle ci
Code:
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

            <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
        </td>
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17832
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par Invité Sam 31 Mai 2014 - 16:09

Bonjour,

Pour ajouter une ombre (responsable, ici, de l'effet 3D), il vous suffit de remplacer, du code donné par Neptune- :

Code:
<div style="width: 200px;"></div>
par
Code:
<div style="width: 200px;box-shadow:Xpx Xpx Xpx X"></div>

Pour compléter les "X" :
http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html[/mention] a écrit: Syntaxe

   La première valeur indique le décalage horizontal vers la droite
   le deuxième correspond au décalage vertical vers le bas
   le chiffre suivant indique la force du dégradé
   et enfin, la couleur

Je vous donne également un site pour trouver les codes couleur qui vous correspondent : http://code-couleur.com/

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par koum64 Sam 31 Mai 2014 - 21:07

Merci beaucoup à vous, Neptune- et Nightmare. pour votre aide et compléments d'informations, c'est crô gentil  Very Happy 

Je vais tester...
avatar

koum64
Nouveau membre

Messages : 8
Inscrit(e) le : 31/05/2014

Voir le profil de l'utilisateur http://outline2.forumactif.org
koum64 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par koum64 Dim 1 Juin 2014 - 20:32

Confused  Après plusieurs et plusieurs essais, je n'arrive pas à faire un encadrement pour la description de la deuxième colonne (c'est à dire : catégorie).
Quelqu'un aurait il un tutoriel s'il vous plait ?  Embarassed
avatar

koum64
Nouveau membre

Messages : 8
Inscrit(e) le : 31/05/2014

Voir le profil de l'utilisateur http://outline2.forumactif.org
koum64 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) Dim 1 Juin 2014 - 22:31

je cherche la meme chose en phpbb3
avatar

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

Voir le profil de l'utilisateur http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par koum64 Lun 2 Juin 2014 - 20:18

Bsoir,

Après des heures d'essais et de recherches d'explications j'ai réussi à faire l'encadrement des descriptions catégories. Mais en modifiant l'index_box et pas topics_list_box  Confused 
J'espère que ça ne boguera pas avec le temps et d'autres modifs...

Me reste l'ombre, couleur, centrer etc etc

Je laisse le topic ouvert pour NousDeux(Admin) ?


Dernière édition par koum64 le Lun 2 Juin 2014 - 21:17, édité 1 fois
avatar

koum64
Nouveau membre

Messages : 8
Inscrit(e) le : 31/05/2014

Voir le profil de l'utilisateur http://outline2.forumactif.org
koum64 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) Lun 2 Juin 2014 - 21:01

Merci de laisser ouvert.

Pour l’ombre tu peux peut être créer une class pour ton cadre est dans ton css faire une boxshadow.

Qu’as-tu modifié pour ajouter le cadre ?

je m’approche du Graal en faisant une boxshadow sur la variable dd.lastpost dans le css

voici le résultat

Effet 3D Captur10

Se qui me dérange c’est le titre derniers messages dans le bandeau de la catégorie qui est ombrée aussi.
on peut jouer sur la dimension de l'ombrage



Dernière édition par NousDeux(Admin) le Lun 2 Juin 2014 - 21:31, édité 2 fois
avatar

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

Voir le profil de l'utilisateur http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par koum64 Lun 2 Juin 2014 - 21:20

Je suis très débutante je commence à peine à comprendre certaine choses  Very Happy 

Je sais pas si j'ai le droit de mettre un lien....

Spoiler:

Bravo pour ton encadrement ça fait super beau ! !
avatar

koum64
Nouveau membre

Messages : 8
Inscrit(e) le : 31/05/2014

Voir le profil de l'utilisateur http://outline2.forumactif.org
koum64 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) Lun 2 Juin 2014 - 21:32

voila problème résolu en travaillant la balise dd.lastpost mais que dans la section ul.topiclist.forums.

Effet 3D Captur11

maintenant je cherche à centrer la box
avatar

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

Voir le profil de l'utilisateur http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) Lun 2 Juin 2014 - 21:51

voici la version finale

Effet 3D Captur12

voici ce que j'ai ajouté au CSS pour arriver à ce resultat

       dd.lastpost {
       text-align:center;
       margin-left: 20px;
       }

       ul.topiclist.forums dd.lastpost {
       box-shadow: #000 0 0 4px;
       text-align:left;
       }

pour augmenter ou diminuer l'ombre il faut modifier le 4px dans box-shadow

je cherche maintenant à retirer le trait blanc entre le nombre de message et sujet

Effet 3D Captur13

Mon forum est en phpbb3
avatar

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

Voir le profil de l'utilisateur http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) Lun 2 Juin 2014 - 22:16

j'apporte une modification pour que cela fonctionne sur toute les categories du forum car mon script precedent ne fonctinait que sur l'index.

/* contour effet 3D ombré dernier message */
dd.lastpost {
text-align:center;
margin-left: 20px;

}

ul.topiclist.forums dd.lastpost {
box-shadow: #000 0 0 4px;
text-align:left;
}
ul.topiclist.bg_none dd.lastpost {
box-shadow: #000 0 0 4px;
text-align:left;
}
avatar

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

Voir le profil de l'utilisateur http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) Lun 2 Juin 2014 - 22:19

Effet 3D Captur14

pour arrondir les angle il faut ajouter

border-radius: 5px; dans dd.lastpost
avatar

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

Voir le profil de l'utilisateur http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum