CSS3World Wide Web

3D Ribbon Generator

By 24 Ottobre 2011 Settembre 24th, 2015 No Comments

Anche nel mondo web esistono delle mode un anno vanno i fiori, dopo le sfumature e l’anno successivo i ribbon. Questo articolo viene scritto per i maniaci della scittura del css, perchè esiste un sito internet, 3D Ribbon Generator, che genera in automatico la creazione di un ribbon utilizzando solamente i CSS3. In realtà si potrebbe benissimo usare un’immagine ottimizzata però è curioso e simpatico (per gli addetti ai lavori) l’utilizzo di questo sito.

Basta semplicemnete inserire le misure che vi servono ed il gioco è fatto. 3D Ribbon Generator vi genere l’html per esempio questo:


	<div class="ribbon-wrapper">
		<div class="ribbon-front">
			<!-- ribbon text goes here -->
		</div>
		<div class="ribbon-edge-topleft"></div>
		<div class="ribbon-edge-topright"></div>
		<div class="ribbon-edge-bottomleft"></div>
		<div class="ribbon-edge-bottomright"></div>
		<div class="ribbon-back-left"></div>
		<div class="ribbon-back-right"></div>
	</div>

ed il css


/* ribbon style */

 .ribbon-wrapper {
	position: relative;
}
  .ribbon-front {
	background-color: #E91D1D;	height: 100px;
	width: 410px;
	position: relative;
	left:-55px;
	z-index: 2;
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright,
  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
	position: absolute;
	z-index: 1;
	border-style:solid;
	height:0px;
	width:0px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright {
}

  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
	top: 100px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-bottomleft {
	left: -55px;
	border-color: transparent #570505 transparent transparent;
}

  .ribbon-edge-topleft {
	top: 0px;
	border-width: 0px 40px 0 0;
}
  .ribbon-edge-bottomleft {
	border-width: 0 40px 60px 0;
}

  .ribbon-edge-topright,
  .ribbon-edge-bottomright {
	left: 315px;
	border-color: transparent transparent transparent #570505;
}

  .ribbon-edge-topright {
	top: 0px;
	border-width: 0px 0 0 40px;
}
  .ribbon-edge-bottomright {
	border-width: 0 0 60px 40px;
}

  .ribbon-back-left {
	position: absolute;
	top: 60px;
	left: -115px;
	width: 100px;
	height: 100px;
	background-color: #9E1212;	z-index: 0;
}

  .ribbon-back-right {
	position: absolute;
	top: 60px;
	right: -115px;
	width: 100px;
	height: 100px;
	background-color: #9E1212;	z-index: 0;
}

Basta solo copiarlo ed incollarlo. Piu semplice di così…