Forum de l’article

test images pleine page

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Rappel de la discussion
Réglages des textes avec les images en pleine largeur des articles pleine-page
Jaseur Boréal - le 30 août 2018

J’ai appliqué ces réglages dans perso.css pour ajouter une marge seulement aux paragraphes des textes et aux sous-titres h1, h2, h3, ... pour les articles en "pleine-page" :

.page-article-pleinepage #texte-article {
    text-align: left;
    margin-right: 0%;
    margin-left: 0%;
}

.page-article-pleinepage #texte-article h1, h2, h3, h4{
    text-align: left;
    margin-right: 3%;
    margin-left: 3%;
}

.page-article-pleinepage #texte-article  p{
    margin-right: 3%;
    margin-left: 3%;
    font-size: 1.8rem;
    line-height: 150%; 
} 

L’exemple test est ici : https://www.lettonie-francija.fr/1174

test images pleine page
Jean Christophe Villeneuve - le 30 août 2018

Hello

A mon avis, les text-align : left sont inutiles.

Et je rajouterais un

ul.portfolio_ligne li {
    list-style: none;
}

pour virer les points disgracieux devant le descriptif des photos

Sinon, ça rend bien !

Animer certaines lignes de textes en pleine-page
Jaseur Boréal - le 30 août 2018

J’ai essayé d’animer certaines lignes de textes avec les formules ci-dessous , à régler selon tests et souhaits ....

 75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
    line-height: 300%;
}

h1, h2, h3, h4 {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;     }
}   

Tester pour affinet les réglages .... 😉)