En animerad bubbelmeny

I ett exempel så visas det hur man med hjälp av CSS kan skapa olika sorters ”pratbubblor” eller tips som kommer fram när man hovrar över ett element. Detta exempel har jag utökat och kombinerat med en annan tutorial om hur man kan använda pseudoelementen :before och :after för att presentera innehåll.

Animationerna skapas enkelt genom att använda en övergång när man hovrar över ett element.

    #bubblemenu li > blockquote {
                word-wrap: normal;
		width: 150px;
                min-height: 120px;
	       position: absolute;
                display: inline;
                margin-left: -120px;
                padding: 15px;
		visibility:hidden;
                opacity: 0;
                margin-top: -125px;
                background: #ffffff;
		font-size:1em;
                box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */	
		-moz-transition: all 0.5s ease-in-out; /* Firefox */
                -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
                -o-transition: all 0.5s ease-in-out; /* Opera */
                transition: all 0.5s ease-in-out; /* Browsers that Support it */
            }
 
            #bubblemenu li:hover &gt; blockquote {
              visibility:visible;
                opacity: 1;
                margin-top: -250px;
 
               /* Setting the transition property for all Browsers */
		-moz-transition: all 0.5s ease-in-out; /* Firefox */
                -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
                -o-transition: all 0.5s ease-in-out;  /* Opera */
                transition: all 0.5s ease-in-out; /* Browsers that Support it */
	    }

Efter detta skapar vi själva bubblorna, helt enkelt genom att använda border-radius.

 
.oval-thought-border {
	position:absolute;
	padding:70px 10px;
	margin:1em auto 80px;
	border:10px solid #c81e2b;
	text-align:center;
	color:#333;
	background:#fff;
 
	/* css3 */
	/*
	NOTES:
	-webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
	-webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
	Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
	*/
	-webkit-border-top-left-radius:240px 140px;
	-webkit-border-top-right-radius:240px 140px;
	-webkit-border-bottom-right-radius:240px 140px;
	-webkit-border-bottom-left-radius:240px 140px;
	-moz-border-radius:240px / 140px;
	border-radius:240px / 140px;
}
 
/* creates the larger circle */
.oval-thought-border:before {
	content:"\00a0";
	-webkit-transition: 2s;
	position:absolute;
	z-index:10;
	bottom:-40px;
	right:100px;
	width:50px;
	height:50px;
	border:10px solid #c81e2b;
	background:#fff;
 
	/* css3 */
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
}
 
/* creates the smaller circle */
.oval-thought-border:after {
	content:"\00a0";
	position:absolute;
	z-index:10;
	bottom:-60px;
	right:50px;
	width:25px;
	height:25px;
	border:5px solid #c81e2b;
	background:#fff;
 
	/* css3 */
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;
}
.oval-thought-border:after {
	content:"\00a0";
	position:absolute;
	bottom:-70px;
	right:100px;
	width:25px;
	height:25px;
	border:5px solid #c81e2b;
	background:#fff;
 
	/* css3 */
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;
}

Slutligen så positionerar vi delarna av de olika bubblorna genom att skapaett antal klasser med olika positionering på :after och before:. Detta gör att man kan välja positionen på de olika delarna i bubblorna så att det hela får ett mer dynamiskt utseende.

.ob2 { left:400px}
.ob2:after { right:50px}
.ob3:after { right:50px}
.ob3:before { left:110px}
.ob4:before { left:120px; top:120px}
.ob4:after { left:90px}

Till sist kommer det se ut som i demot.

This entry was posted on måndag, oktober 24th, 2011 at 02:12 and is filed under Guider. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

CSS3.SE