HTML dhe CSS

Figura

Koha është iluzion

Çka është elementi i figurës

Elementi i figurës <figure> përfaqëson përmbajtje të pavarur, potencialisht me një titull opsional, i cili specifikohet duke përdorur elementin <figcaption>. Figura, titulli dhe përmbajtja e saj referohen si një njësi e vetme.

Në këtë shembull tregohet figura me stile të CSS-it:

HTML
<div class="sfondi">

<figure>
<img src="fotografia.jpg" alt=""/>
<figcaption>Koha është iluzion</figcaption>
</figure> 

</div>
CSS
.sfondi {
  background-image:url("sfondi.jpg");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  height: 100%;
  padding: 2rem 1rem;
}

figure {
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 260px; 
  padding: 1em;
  border-radius: 4px;
  transform: rotate(-4deg);
  background: radial-gradient(circle at 0% 0.5%, rgb(241, 241, 242) 0.1%, rgb(224, 226, 228) 100.2%);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
} 

img {
  max-width: 300px;
  max-height: 200px;
}

figcaption {
  padding-top: 10px;
  text-align: center;
  text-transform: uppercase;
  font-size: smaller;
}