Idee per la presentazione d'immagini su un sito web tramite css3.

Le tecnologie Web non si fermano, dandoci le funzionalità sempre piu avanzate per migliorare design dei nostri elementi o rendere piu attraente interfaccia del sito. Prima del arrivo del CSS3 il massimo che potevamo fare per decorare foto sul sito  potevamo aggiungere una cornice, un'ombra o un testo con editori grafici esterni.

  Ora invece la decorazione delle immagini si trasforma in un processo affascinante, che ci permette di sentire il potere di CSS3. Specificazione del  CSS3 contiene molte funzioni utili, con le quali è possibile creare elementi di design interessanti e insoliti per  web, posiamo seguire le ultime tendenze del web design.

   Per creare effetto di movimento agli elementi si utilizza CSS3-trasformazione e la fluidità di effetti viene realizzata da CSS3 transizioni. Tutti gli effetti vengono sopportati in browser moderni, non dimenticare di aggiungere i prefissi browser per essere sicuri che l'animazione inserita nel codice  vera realizzata . I font per le nostre idee devono essere scaricati dai sito del GoogleFonts.

L'idea 1. Testo con lo sfondo trasparente sull'immagine

Rosa noturna

Rosa notturna è un fiore meraviglioso.. La notte propaga i suoi vaporosi languori, umidita calde e sensuali, attraversano sette idrofile...

Markup html

<div class="image-box">
  <div class="border"></div>
    <img src="/images/css/presentazione/flowers-by-barbara-florchik-2.jpg">
  <div class="image-content">
    <h3 class="image-header">Rosa noturna</h3>
    <p>Rosa notturna è un fiore meraviglioso.. La notte propaga i suoi vaporosi languori, umidita calde e sensuali, attraversano sette idrofile...  </p>
  </div>
</div>

Stili CSS

* {
  box-sizing: border-box;
}
.image-box {
  position: relative;
  width: 600px; 
  margin: 50px auto 0;
}
.image-box .border {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  border: 2px solid white;
  z-index: 1;
}
.image-box img {
  display: block;
  position: relative;
  width: 600px;
  height: 442px;
}
.image-box .image-content {
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 60%;
  padding: 20px;
  z-index: 2;
  background: linear-gradient(to bottom,rgba(18,26,63,0.3),rgba(18,26,63,0.9));
}
.image-box .image-header {
  font-size: 30px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255,255,255,0.4);
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: normal;
}
.image-box p {
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  margin-top: 20px;
  line-height: 24px;
}

Idea 2. Immagine in una cornice rotonda.

Flox

Flox (lat. Phlox) — Il fiore a cinque petali si trova rappresentato in diverse parti del mondo con differenti significati.


Markup HTML
<div class="box">
  <div class="image-box">
    <img src="/images/css/presentazione/flower-example-6.jpg">
  </div>
  <div class="details">
    <h3>Flox</h3>
  <p>Flox (lat. Phlox) — Il fiore a cinque petali si trova rappresentato in diverse parti del mondo con differenti significati.</p>
  </div>
</div>

Stili CSS.
.box {
  width: 400px;
  margin: 50px auto 0;
  text-align: center;
}
.image-box {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding: 10px;
  background: #EBE7DD;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.details {
  background: #EBE7DD;
  margin-top: -70px;
  padding: 70px 30px 30px;
  border-radius: 5px;
}
.details h3 {
  font-family: 'Ledger', serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 24px;
  color: #281F19;
}
.details p {
  font-family: 'Ledger', serif;
  color: #4C3D35;
  line-height: 24px;
}

Letto 759 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso