2 Favoris
VIP depuis le 06/03/2020
Galad-El le 16 Jul 2020 à 23h01
Dans la lignée des "je fais n'importe quoi avec le SVG", voici l'adaptation en fiche des bulles de tout à l'heure (sans les bulles, du coup c'est un peu plus adapté aux fiches et peut-être plus léger, même si c'était rigolo). A tout hasard je la mets en LS, cela dit je suis loin d'être une pro du SVG donc le code n'est peut-être pas très optimisé/pas très propre (si vous souhaitez un effet similaire n'hésitez pas à consulter la documentation de votre côté et à ma signaler tout ce que j'ai mal fait afin que je puisse améliorer ce code !).
Code en Libre-Service : l'emprunter

HTML

                        <svg height="0" width="0">
  <defs>
    <clipPath id="clip-haut">
      <path d="M0,96L30,128C60,160,120,224,180,208C240,192,300,96,360,96C420,96,480,192,540,208C600,224,660,160,720,165.3C780,171,840,245,900,240C960,235,1020,149,1080,122.7C1140,96,1200,128,1260,144C1320,160,1380,160,1410,160L1440,160L1440,0L1410,0C1380,0,1320,0,1260,0C1200,0,1140,0,1080,0C1020,0,960,0,900,0C840,0,780,0,720,0C660,0,600,0,540,0C480,0,420,0,360,0C300,0,240,0,180,0C120,0,60,0,30,0L0,0Z"></path>
    </clipPath>
    
    <clipPath id="clip-bas">
      <path fill="#5000ca" fill-opacity="1" d="M0,160L30,165.3C60,171,120,181,180,192C240,203,300,213,360,213.3C420,213,480,203,540,192C600,181,660,171,720,176C780,181,840,203,900,218.7C960,235,1020,245,1080,224C1140,203,1200,149,1260,154.7C1320,160,1380,224,1410,256L1440,288L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path>
    </clipPath>
    
    <clipPath id="cercles">
      <circle cx="100" cy="10" r="10" fill="black"><animate attributeType="XML" attributeName="cx" from="100" to="500" dur="5s" repeatCount="indefinite"/></circle>
      
      <circle cx="150" cy="10" r="7" fill="black"><animate attributeType="XML" attributeName="cx" from="150" to="550" dur="5s" repeatCount="indefinite"/></circle>
      
      <circle cx="200" cy="10" r="5" stroke="red" stroke-width="2" fill="none"><animate attributeType="XML" attributeName="cx" from="195" to="595" dur="5s" repeatCount="indefinite"/></circle>
    </clipPath>
  </defs>
</svg>

<div class="fiche">
<img src="https://images.unsplash.com/photo-1552840437-825793e37561?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80" style="clip-path: url('#clip-haut'); top: -50px;" class="bordure" />
  
  <h1>Bienvenue</h1>
  
  <div class="text">
    <h2>Titre</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu sapien magna. In iaculis sem eros, nec fringilla mauris aliquam vitae. Pellentesque rhoncus, nulla id convallis rhoncus, nisi arcu fringilla nibh, eget eleifend tortor mi eu magna. Nam eget sagittis ligula, id volutpat ligula. Pellentesque quis tellus condimentum, finibus erat vitae, blandit nisi. Cras vel ante tempor, varius arcu facilisis, pellentesque ex. Sed sit amet feugiat elit. Integer non magna at est porttitor pharetra. Nullam lobortis eu lorem vitae ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras nec interdum nunc. Integer ac est quis purus auctor auctor. Pellentesque sed nibh faucibus, ullamcorper lectus vel, pulvinar sapien. Nunc id mauris tincidunt, rutrum dui quis, imperdiet arcu. Praesent sed augue et ex faucibus efficitur eget a diam. Aenean in molestie sapien. </p>
    
    <img src="https://images.unsplash.com/photo-1552840437-825793e37561?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80" class="cercles" />
    
    <h2>Titre</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu sapien magna. In iaculis sem eros, nec fringilla mauris aliquam vitae. Pellentesque rhoncus, nulla id convallis rhoncus, nisi arcu fringilla nibh, eget eleifend tortor mi eu magna. Nam eget sagittis ligula, id volutpat ligula. Pellentesque quis tellus condimentum, finibus erat vitae, blandit nisi. Cras vel ante tempor, varius arcu facilisis, pellentesque ex. Sed sit amet feugiat elit. Integer non magna at est porttitor pharetra. Nullam lobortis eu lorem vitae ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras nec interdum nunc. Integer ac est quis purus auctor auctor. Pellentesque sed nibh faucibus, ullamcorper lectus vel, pulvinar sapien. Nunc id mauris tincidunt, rutrum dui quis, imperdiet arcu. Praesent sed augue et ex faucibus efficitur eget a diam. Aenean in molestie sapien. </p>
    
    <img src="https://images.unsplash.com/photo-1552840437-825793e37561?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80" class="cercles" />
    
    <h2>Titre</h2> <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu sapien magna. In iaculis sem eros, nec fringilla mauris aliquam vitae. Pellentesque rhoncus, nulla id convallis rhoncus, nisi arcu fringilla nibh, eget eleifend tortor mi eu magna. Nam eget sagittis ligula, id volutpat ligula. Pellentesque quis tellus condimentum, finibus erat vitae, blandit nisi. Cras vel ante tempor, varius arcu facilisis, pellentesque ex. Sed sit amet feugiat elit. Integer non magna at est porttitor pharetra. Nullam lobortis eu lorem vitae ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras nec interdum nunc. Integer ac est quis purus auctor auctor. Pellentesque sed nibh faucibus, ullamcorper lectus vel, pulvinar sapien. Nunc id mauris tincidunt, rutrum dui quis, imperdiet arcu. Praesent sed augue et ex faucibus efficitur eget a diam. Aenean in molestie sapien. </p>
    
    <img src="https://images.unsplash.com/photo-1552840437-825793e37561?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80" class="cercles" />
  </div>
  


<img src="https://images.unsplash.com/photo-1552840437-825793e37561?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80" style="clip-path: url('#clip-bas'); bottom: 0;" class="bordure" />
  
</div>

CSS

                            body {
  margin: 0;
  background-color: white;
}

.fiche {
  width: 100%;
}

.fiche img.bordure {
  width: 100%;
  height: 300px;
  object-fit: cover;
  
  position: fixed;
  z-index: 10;
  
}

h1
{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  
  width: 100%;
  margin: 0;
  text-align: center;
  
  font-family: 'Arial', sans-serif;
  text-transform: uppercase;
  font-size: 3rem;
  letter-spacing: 5px;
  text-shadow: 1px 1px 0 #0a6247,  -1px 1px 0 #0a6247,  1px -1px 0 #0a6247,  -1px -1px 0 #0a6247;
  
  padding-top: 10px;
  
  color: #9FD98F;
}

.text {
  max-width: 600px;
  margin: 0 auto;
  padding: 170px 30px;
  
  background-color: #9FD98F;
  color: #292540;
  
  font-family: 'Arial', sans-serif;
  font-size: 0.8rem;
  text-align: justify;
}

.text p::first-letter {
  font-weight: 800;
  padding-left: 25px;
  font-size: 1rem;
}

h2 {
  background-image: url('https://images.unsplash.com/photo-1552840437-825793e37561?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80');
  color: #9FD98F;
  text-transform: uppercase;
  font-weight: 100;
  max-width: 50%;
  
  padding: 4px 10px;
  
  position: relative;
  left: -40px;
}

h2::after {
  content: '';
  display: block;
  
  width: 100%;
  position: absolute;
  top: 50%;
  right: -100%;
  height: 1px;
  background-color: #1c312a;
}

.cercles {
  clip-path: url('#cercles'); 
  height: 20px; 
  width: 100%; 
  object-fit: cover;   margin: 0 auto;
  
  position: relative;
  top: -23px;
}

.text p::after {
  content: '';
  width: 100%;
  display: block;
  margin-top: 25px;
  opacity: 0.2;
  
  height: 1px;
  background-color: #1c312a;
}

Commentaires

Avatar de Zukki
VIP depuis le 14/03/2020
Zukki le 17 Jul 2020 à 07h34
J'adore les petits ronds qui se déplacent :000
Je l'emprunterai peut-être pour tester un peu de CSS :D
Avatar d'un compte supprimé
Compte supprimé le 17 Jul 2020 à 09h22
C'est vraiment hyper cool, je sens que je vais saigner le CSS pour apprendre des choses ! j'adore, vraiment inspirant et hyper original, bravo
Avatar de Galad-El
VIP depuis le 06/03/2020
Galad-El le 17 Jul 2020 à 15h16
Merci beaucoup

Oui le SVG c'est super cool ! Je trouve qu'on peut avoir des rendus assez classes et en même temps c'est assez "technique" donc quand on n'a pas trop d'inspiration, on peut toujours se concentrer sur la partie technique et essayer de trouver de nouveaux effets jusqu'à ce que l'inspiration revienne o/

Vous devez être inscrit et connecté pour pouvoir poster un commentaire.

↑
↓