2 résultats trouvés pour auteur_Kazuya

Salut salut amis de NU (En plus ca rime x) )
Bon, alors, si le mot lettrine ne vous parle pas, en voilà un exemple:



Alors, vous voulez savoir comment faire? *Oh oui, oh oui apprends nous* Bien bien, mais il faut dire le mot magique les enfants!

D'accord d'accord alors... Voici comment procéder. Tout d'abord, créer une div, qui contiendra votre texte, avec les attributs que vous voulez, sur l'exemple, il y a seulement un Text-Shadow.
Ensuite, admettons que votre div s’appelle "texte", ce qui n'est qu'un exemple, vous pouvez mettre ce que vous voulez comme nom.
Donc vous avez ceci:

Code:

<div class="texte">Ceci est mon texte. Le C de départ sera ma lettrine.</div>

Et on ajoute dans le CSS :

Code:

.texte:first-letter {
  font-size:300%;
  float:left;
}

Vous pouvez changer le pourcentage, ce qui diminuera ou augmentera la taille de la lettrine, voire le mettre en pixels si vous préférez. Le float permet de faire en sorte que la lettre fasse comme une lettrine et se mette "à côté" du texte, tout en faisant en sorte que le reste du texte "s'enroule" en dessous. Vous pouvez également y rajouter les attributs que vous voulez en voilà quelques uns :

Pour une bordure :

Code:

border: 1px solid (pour une ligne pleine) dotted (pour une bordure pointillée) dashed (pour une bordure en tiret);

Pour une couleur de fond :

Code:

background: #fff;

Pour arrondir la div (à coupler à une bordure ou une couleur de fond)

Code:

border-radius: 5px;

pour une ombre portée :

Code:

text-shadow: 1px 1px 1px #000;

Notez également que la lettrine conserve logiquement les attributs de la div d'origine.

C'était Kazuya, en espérant que mon partage vous aidera! Sur ce, à plus, et bon courage!

Voilà alors je décide de partagé une petit astuce avec vous, car je trouve qu'elle vaut le coup et qu'elle embellit vachement les forum =)

Tout d'abord, de quoi il s'agit? : C'est en fait un code, qui va permettre de changer l'image, lorsque la souris passera dessus. Ainsi, on peut donner l'illusion, sans recourir au flash, que lorsque l'on passe la souris sur une image, cette dernière se met à briller. Bien sûr, ce n'est qu'une suggestion d'utilisation, ensuite, libre à vous de vous en servir comme bon vous semble.

DANS LE CSS

Code:

/*Bouton 1 sans survol*/
#bouton1 {
  display: inline-block;
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;
}
/*Bouton 1 avec survol*/
#bouton1:hover {
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;
} 

/*Bouton 2 sans survol*/
#bouton2 {
  display: inline-block;
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;
}
/*Bouton 2 avec survol*/
#bouton2:hover {
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;
} 

SUR LA PAGE

Code:


<a id="bouton1" href="http://www.domaine.com/"></a>
<a id="bouton2" href="http://www.domaine.com/"></a>

Comment le modifier? :
1 .Placez dans l'URL de "bouton 1:" L'url de l'image non survolée. Remplacez LARGEUR et HAUTEUR par la largeur et la hauteur de l'image sélectionnée.
2. Placez, dans L'URL de "bouton 1:hover" L'url de l'image survolée. Remplacez LARGEUR et HAUTEUR par la largeur et la hauteur de l'image sélectionnée.
3. Faites pareil pour le bouton 2 et les autres éléments si vous en avez.

À noter qu'on a utilisé des liens ici pour simuler une navigation, mais cela aurait aussi pu se faire avec une div, un span ou autres.

Voilà c'est fait!

En espérant avoir été clair et vous avoir aidé!