Carte membres de l'équipe CSS

Publiez votre code

Recommandé

20 September 2025

Exemple d'animation HTML de sphère CSS

26 May 2025

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webleb</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
  integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <section>
    <div class="container flow-content">
      <h2 class="section-title">Our team</h2>
      <ul role="list" class="grid">
        <li>
          <article class="card" data-visible="false">
            <div class="card__front flow-content">
              <img class="card__img mx-auto" src="/img/radiant-gradient.png" />
              <div class="flow-content" data-spacing="sm">
                <p class="card__name">Mark Curry</p>
                <p class="card__position">Software Engineer</p>
              </div>
            </div>
            <div class="card__back flow-content">
              <p class="card__name">Mark Curry</p>
              <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et dictum sem.</q>
              <ul role="list" class="card__social flex-group">
                <li>
                  <a href="#">
                    <i class="fa-brands fa-twitter "></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa-brands fa-linkedin "></i>
                  </a>
                </li>
              </ul>
            </div>
            <footer class="card__footer">
              <button data-card-controller class="card__toggle">
                <i class="fa-solid fa-plus card__toggle-icon"></i>
              </button>
            </footer>
          </article>
        </li>
        <li>
          <article class="card" data-visible="false">
            <div class="card__front flow-content">
              <img class="card__img mx-auto" src="/img/flat-mountains.png" />
              <div class="flow-content" data-spacing="sm">
                <p class="card__name">Michael Edison</p>
                <p class="card__position">Graphic Designer</p>
              </div>
            </div>
            <div class="card__back flow-content">
              <p class="card__name">Michael Edison</p>
              <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et dictum sem.</q>
              <ul role="list" class="card__social flex-group">
                <li>
                  <a href="#">
                    <i class="fa-brands fa-twitter"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa-brands fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
            <footer class="card__footer">
              <button data-card-controller class="card__toggle">
                <i class="fa-solid fa-plus card__toggle-icon"></i>
              </button>
            </footer>
          </article>
        </li>
        <li>
          <article class="card" data-visible="false">
            <div class="card__front flow-content">
              <img class="card__img mx-auto" src="/img/slanted-gradient.png"/>
              <div class="flow-content" data-spacing="sm">
                <p class="card__name">Wilson Davis</p>
                <p class="card__position">Junior Developer</p>
              </div>
            </div>
            <div class="card__back flow-content">
              <p class="card__name">Wilson Davis</p>
              <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et dictum sem.</q>
              <ul role="list" class="card__social flex-group">
                <li>
                  <a href="#">
                    <i class="fa-brands fa-twitter"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa-brands fa-linkedin "></i>
                  </a>
                </li>
              </ul>
            </div>
            <footer class="card__footer">
              <button data-card-controller class="card__toggle">
                <i class="fa-solid fa-plus card__toggle-icon"></i>
              </button>
            </footer>
          </article>
        </li>   
      </ul>
    </div>
  </section>
  <script src="/js/main.js"></script>
</body>
</html>

styles.css

:root {
	--clr-primary: teal;
	--clr-secondary: crimson;
	--bg-primary: #0d1a2d;
	--bg-secondary: #14273e;
	--text-primary: #fff;
	--text-secondary: #ccc;
  }
  *,
  *::before,
  *::after {
	box-sizing: border-box;
  }
  * {
	margin: 0;
	font: inherit;
  }
  
  html {
	color-scheme: dark;
  }
  body {
	font-family: system-ui, sans-serif;
	min-height: 100vh;
	background-color: var(--bg-primary);
	color: var(--text-secondary);
  }
  ul:where([role="list"]) {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  section {
	padding-block: clamp(2rem, 5vw, 5rem);
  }
  a {
	color: cyan;
	text-decoration: none;
  }
  .container {
	width: min(100% - 2rem, 65rem);
	margin-inline: auto;
  }
  .grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 
	  repeat(auto-fit, minmax(min(35ch, 100%), 1fr));
  }
  .section-title {
	font-size: clamp(2rem, 5vw, 3rem);
	text-align: center;
	font-weight: bold;
	color: var(--text-primary);
	margin-bottom: 0.5em;
  }
  .flex-group {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
  }
  .flow-content {
	display: grid;
	align-content: start;
	gap: 1rem;
  }
  [data-spacing="sm"] {
	gap: 0.25rem;
  }
  
  .mx-auto {
	width: fit-content;
	margin-inline: auto;
  }
  .card {
	width: min(100% - 2rem, 35ch);
	margin-inline: auto;
	background-color: var(--bg-secondary);
	text-align: center;
	border-radius: 0.5rem;
	position: relative;
	overflow: hidden;
	display: grid;
	gap: 0.5rem;
  }
  
  .card__name {
	font-weight: 700;
	color: var(--text-primary);
  }
  
  .card__position {
	font-style: italic;
  }
  
  .card__img {
	width: 5rem;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--text-secondary);
  }
  
  .card__front {
	padding: 2em 2em 2.5em 2em;
	transition: 
	  opacity 250ms ease,
	  transform 450ms ease;
  }
  
  .card[data-visible="false"] .card__front {
	opacity: 1;
	transform: translateY(0);
  }
  
  .card__footer {
	background-color: var(--bg-primary);
	height: 1.5rem;
	position: relative;
	z-index: 5;
  }
  
  .card__back {
	position: absolute;
	padding: 2em 2em 2.5em 2em;
	inset: 0;
	transition: 
	  transform 450ms ease,
	  opacity 150ms ease;
	z-index: 1;
	overflow: auto;
  }
  
  .card[data-visible="false"] .card__back {
	opacity: 0;
	transform: translateY(100%);
	overflow: hidden;
  }
  
  .card[data-visible="true"] .card__front {
	opacity: 0;
	transform: translateY(100%);
	transition: 
	  opacity 150ms ease,
	  transform 450ms ease 50ms;
	  overflow: hidden;
  }
  
  .card[data-visible="true"] .card__back {
	opacity: 1;
	transform: translateY(0);
	transition: 
	  transform 350ms ease,
	  opacity 450ms ease 100ms;
	  overflow: hidden;
  }
  
  .card__social {
	justify-content: center;
	margin-bottom: 2em;
  }
  
  .card__toggle {
	text-align: 1;
	border-radius: 50%;
	width: 3rem;
	aspect-ratio: 1 / 1;
	padding: 0.5em;
	border: 0;
	background-color: var(--clr-primary);
	color: var(--text-primary);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
	transition: background-color 250ms ease;
  }
  
  .card__toggle-icon {
	transition: rotate 250ms ease;
  }
  
  .card[data-visible="true"] .card__toggle {
	background-color: var(--clr-secondary);
	overflow: hidden;
  }
  
  .card[data-visible="true"] .card__toggle-icon {
	rotate: 315deg;
  }

Carte membres de l'équipe CSS

Recommandé

Exemple d'animation HTML de sphère CSS

Un code par Liamgilles76

Un code par ribeirosarah905

index.html

styles.css

main.js

Recommandé

Exemple d'animation HTML de sphère CSS

Un code par Liamgilles76

Un code par ribeirosarah905

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js