Contatta Ueppy

Vuoi rifare il tuo sito web?

Massimiliano Carnevale

Massimiliano Carnevale

Co-Founder
Stile e grafica

Figure CSS speciali: fumetto, cuore, infinito e altre forme complesse

Terza parte riguardante la creazione di figure geometriche con il solo aiuto di CSS. Anche in questo caso proponiamo l'astrazione delle stesse via SCSS.

Pubblicato il 01/09/2015

Abbiamo già visto come creare figure geometriche semplici e complesse attraverso i CSS. In questa terza parte vedremo delle forme particolari e sulle quali, in seguito, contiamo di creare degli articoli dettagliati.

 

Fumetto

codice CSS
.fumetto {
	width:150px;
	height:100px;
	background:orange;
	position:relative;
	border-radius:12px;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
	.fumetto:before {
		content:"";
		width:0;
		height:0;
		position:absolute;
		right:100%;
		top:35px;
		border-top:15px solid transparent;
		border-right:30px solid orange;
		border-bottom:15px solid transparent;
	}
codice SCSS
@mixin fumetto($larghezza, $altezza, $raggioBordo, $sfondo, $rotazione) {
	width:$larghezza;
	height:$altezza;
	background:$sfondo;
	position:relative;
	border-radius:$raggioBordo;
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:before {
		content:"";
		width:0;
		height:0;
		position:absolute;
		right:100%;
		top:round($altezza*0.35);
		border-top:round($altezza*0.15) solid transparent;
		border-right:round($altezza*0.3) solid $sfondo;
		border-bottom:round($altezza*0.15) solid transparent;
	}  
}
.fumetto {
	@include fumetto(150px, 100px, 12px, orange, 0deg);
}
blocco HTML

 

Uovo

codice CSS
.uovo {
	width:120px;
	height:180px;
	background-color:orange;
	border-radius:60px 60px 60px 60px / 120px 120px 60px 60px;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
codice SCSS
@mixin uovo($larghezza, $sfondo, $rotazione) {
	width:$larghezza;
	height:round($larghezza*1.5);
	background-color:$sfondo;
	border-radius:#{round($larghezza*0.5)} #{round($larghezza*0.5)} #{round($larghezza*0.5)} #{round($larghezza*0.5)} / #{$larghezza} #{$larghezza} #{$larghezza*0.5} #{$larghezza*0.5};
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
}
.uovo {
	@include uovo(120px, orange, 0deg);
}
blocco HTML

 

Cuore

codice CSS
.cuore {
	position:relative;
	width:120px;
	height:96px;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
	.cuore:before {
		content:"";
		width:60px;
		height:96px;
		position:absolute;
		top:0;
		left:60px;
		background:orange;
		border-radius:60px 60px 0 0;
		-moz-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
		-moz-transform-origin:0 100%;
		-webkit-transform-origin:0 100%;
		-ms-transform-origin:0 100%;
		-o-transform-origin:0 100%;
		transform-origin:0 100%;
	}
	.cuore:after {
		content:"";
		width:60px;
		height:96px;
		position:absolute;
		left:0;
		top:0;
		background:orange;
		border-radius:60px 60px 0 0;
		-moz-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
		-moz-transform-origin:100% 100%;
		-webkit-transform-origin:100% 100%;
		-ms-transform-origin:100% 100%;
		-o-transform-origin:100% 100%;
		transform-origin:100% 100%;
	}
codice SCSS
@mixin cuore($larghezza, $sfondo, $rotazione) {
	position:relative;
	width:$larghezza;
	height:round($larghezza*0.8);
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:before{
		content:"";
		width:round($larghezza/2);
		height:round($larghezza*0.8);
		position:absolute;
		top:0;
		left:round($larghezza/2);
		background:$sfondo;
		border-radius:round($larghezza/2) round($larghezza/2) 0 0;
		-moz-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
		-moz-transform-origin:0 100%;		
		-webkit-transform-origin:0 100%;
		-ms-transform-origin:0 100%;
		-o-transform-origin:0 100%;
		transform-origin:0 100%;
	}
	&:after {
		content:"";
		width:round($larghezza/2);
		height:round($larghezza*0.8);
		position:absolute;
		left:0;
		top:0;
		background:$sfondo;
		border-radius:round($larghezza/2) round($larghezza/2) 0 0;
		-moz-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
		-moz-transform-origin:100% 100%;
		-webkit-transform-origin:100% 100%;
		-ms-transform-origin:100% 100%;
		-o-transform-origin:100% 100%;
		transform-origin :100% 100%;
	}
}
.cuore {
	@include cuore(120px, orange, 0deg);
}
blocco HTML

 

Infinito

codice CSS
.infinito {
	position:relative;
	width:212px;
	height:100px;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
	.infinito:before {
		content:"";
		width:60px;
		height:60px;
		position:absolute;
		top:0;
		left:0;
		border:20px solid orange;
		border-radius:50px 50px 0 50px;
		-moz-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}
	.infinito:after {
		content:"";
		width:60px;
		height:60px;
		position:absolute;
		top:0;
		right:0;
		border:20px solid orange;
		border-radius:50px 50px 50px 0;
		-moz-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
	}
codice SCSS
@mixin infinito($altezza, $sfondo, $rotazione) {
	position:relative;
	width:round($altezza*2.12);
	height:$altezza;
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:before {
		content:"";
		width:round($altezza*0.6);
		height:round($altezza*0.6);
		position:absolute;
		top:0;
		left:0;
		border:round($altezza*0.2) solid $sfondo;
		border-radius:round($altezza*0.5) round($altezza*0.5) 0 round($altezza*0.5);
		-moz-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}
	&:after {
		content:"";
		width:round($altezza*0.6);
		height:round($altezza*0.6);
		position:absolute;
		top:0;
		right:0;
		border:round($altezza*0.2) solid $sfondo;
		border-radius:round($altezza*0.5) round($altezza*0.5) round($altezza*0.5) 0;
		-moz-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
	}
}
.infinito {
	@include infinito(100px, orange, 0deg);
}
blocco HTML

 

Diamante

codice CSS
.diamante {
	width:50px;
	height:0;
	position:relative;
	margin:50px;
	border-left:25px transparent solid;
	border-right:25px transparent solid;
	border-bottom:25px orange solid;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
	.diamante:after {
		content:"";
		width:0;
		height:0;
		position:absolute;
		top:25px;
		left:-25px;
		border-top:75px orange solid;
		border-left:50px transparent solid;
		border-right:50px transparent solid;
	}
codice SCSS
@mixin diamante($larghezza, $sfondo, $rotazione) {
	width:$larghezza;
	height:0;
	position:relative;
	margin:$larghezza;
	border-left:round($larghezza/2) solid transparent;
	border-right:round($larghezza/2) solid transparent;
	border-bottom:round($larghezza/2) solid $sfondo;
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:after {
		content:"";
		width:0;
		height:0;
		position:absolute;
		top:round($larghezza/2);
		left:round($larghezza/-2);
		border-top:round($larghezza*1.5) solid $sfondo;
		border-left:$larghezza solid transparent;
		border-right:$larghezza solid transparent;
	}
}
.diamante {
	@include diamante(50px, orange, 0deg);
}
blocco HTML

 

Lente

codice CSS
.lente {
	position:relative;
	display:inline-block;
	width:80px;
	height:80px;
	border:20px solid orange;
	border-radius:70px;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);		
}
	.lente:before {
		content:"";
		width:70px;
		height:20px;
		display:inline-block;
		position:absolute;
		right:-50px;
		bottom:-20px;
		border-width:0;
		background:orange;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
	}
codice SCSS
@mixin lente($larghezza, $sfondo, $rotazione) {
	position:relative;
	display:inline-block;
	width:$larghezza;
	height:$larghezza;
	border:round($larghezza/4) solid $sfondo;
	border-radius:round($larghezza/8*7);
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:before {
		content:"";
		width:round($larghezza/8*7);
		height:round($larghezza/4);
		display:inline-block;
		position:absolute;
		right:round($larghezza/8*-5);
		bottom:round($larghezza/-4);
		border-width:0;
		background:orange;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
	}
}
.lente {
	@include lente(80px, orange, 0deg);
}
blocco HTML

 

Icona Facebook

codice CSS
.iconaFacebook {
	width:100px;
	height:110px;
	position:relative;
	border-top:15px solid orange;
	border-left:15px solid orange;
	border-right:15px solid orange;
	background:orange;
	overflow:hidden;
	border-radius:5px;
	}
	.iconaFacebook:before {
		content:"";
		width:40px;
		height:90px;
		position:absolute;
		bottom:-30px;
		right:-37px;
		background:orange;
		border:20px solid #fff;
		border-radius:25px;
	}
	.iconaFacebook:after {
		content:"";
		width:55px;
		height:20px;
		position:absolute;
		top:50px;
		right:5px;
		background:#fff;
	}
codice SCSS
@mixin iconaFacebook($larghezza, $sfondo, $sfondoCarattere) {
	width:$larghezza;
	height:round($larghezza*1.1);
	position:relative;
	border-top:round($larghezza*0.15) solid $sfondo;
	border-left:round($larghezza*0.15) solid $sfondo;
	border-right:round($larghezza*0.15) solid $sfondo;
	background:$sfondo;
	overflow:hidden;
	border-radius:round($larghezza/20);
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:before {
		content:"";
		width:round($larghezza*2/5);
		height:round($larghezza*0.9);
		position:absolute;
		bottom:round($larghezza*-0.3);
		right:round($larghezza*-0.37);
		background:$sfondo;
		border:20px solid $sfondoCarattere;
		border-radius:round($larghezza/4);
	}
	&:after {
		content:"";
		width:round($larghezza*0.55);
		height:round($larghezza/5);
		position:absolute;
		top:round($larghezza/2);
		right:round($larghezza/20);
		background:$sfondoCarattere;
	}
}
.iconaFacebook {
	@include iconaFacebook(100px, orange, white);
}
blocco HTML

 

Yin/Yang

codice CSS
.yinYang {
	width:80px;
	height:40px;
	border-width:2px 2px 40px 2px;
	border-style:solid;
	border-color:orange;
	border-radius:100%;
	background:#fff;
	position:relative;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
	.yinYang:before {
		content:"";
		width:10px;
		height:10px;
		position:absolute;
		top:50%;
		left:0;
		border:15px solid orange;
		border-radius:100%;
		background:#fff;
	}	
	.yinYang:after {
		content:"";
		width:10px;
		height:10px;
		position:absolute;
		top:50%;
		left:50%;
		background:orange;
		border:15px solid #fff;
		border-radius:100%;
	}
codice SCSS
@mixin yinYang($larghezza, $sfondo, $sfondoCarattere, $rotazione) {
	width:$larghezza;
	height:round($larghezza/2);
	border-width:round($larghezza/40) round($larghezza/40) round($larghezza/2) round($larghezza/40);
	border-style:solid;
	border-color:$sfondo;
	border-radius:100%;
	background:$sfondoCarattere;
	position:relative;
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:before {
		content:"";
		width:round($larghezza/8);
		height:round($larghezza/8);
		position:absolute;
		top:50%;
		left:0;
		border:round($larghezza/8*1.5) solid $sfondo;
		border-radius:100%;
		background:$sfondoCarattere;
	}	
	&:after {
		content:"";
		width:round($larghezza/8);
		height:round($larghezza/8);
		position:absolute;
		top:50%;
		left:50%;
		background:$sfondo;
		border:round($larghezza/8*1.5) solid $sfondoCarattere;
		border-radius:100%;
	}
}
.yinYang {
	@include yinYang(80px, orange, white, 0deg);
}
blocco HTML

Sullo stesso argomento: Figure CSS semplici Figure CSS avanzate

CONDIVIDI SUI SOCIAL
Ueppy Blog

Leggi articoli correlati

Stile e grafica

L'ottavina reale e i CSS3

Un omaggio a Francesco Nuti per mostrare la potenza dei CSS3: un colpo da biliardo, sono con i css, senza immagini, video e javascript!

Leggi l'articolo
Stile e grafica

Le rotazioni con i CSS e la compatibilità cross-browser

Come scrivere CSS per ruotare blocchi funzionante su tutti i browser più diffusi e non.

Leggi l'articolo
Stile e grafica

Figure CSS avanzate: stelle, mezzaluna, cono e pacman

Seconda parte riguardante la creazione di figure geometriche con il solo aiuto di CSS. Anche in questo caso proponiamo l'astrazione delle stesse via SCSS.

Leggi l'articolo
Stile e grafica

Sintassi e prime basi SASS: seconda parte

Primi esempi pratici di codice per SASS, il pre-processore di CSS - seconda parte

Leggi l'articolo
Scopri Ueppy

Scopri Ueppy

un network di professionisti specializzati
nel web.

Scopri Ueppy
Contatta Ueppy
Contatta Ueppy VUOI COSTRUIRE UN NUOVO PROGETTO WEB?

Contatta Ueppy

Scrivici