They say you learn something new every day.

CSS3 (23/04/2012)

I’ve held off implementing any CSS3 because of slow take up, but I’ve been playing with CSS3 today to make some speech bubbles.

There’s a new pseudo element, “after” and “before”. I got a bit confused with them when chaining pseudo elements, but it seems that hover comes first.

I’m not sure what I think to CSS3 – but this created the effect I needed of speech balloons that change colour when you hover over them:

 .speech {position:relative;width:120px;height:50px;line-height: 50px; -webkit-border-radius: 30px;-moz-border-radius: 20px; border-radius: 20px; background:#235D79; margin-bottom:20px;}
.speech:before {content: ’ ‘;position:absolute;width: 0;height: 0;top: 35px;left: 20px;border: 25px solid; border-color: transparent}
.speech:after {content: ’ ‘;position:absolute;width: 0;height: 0;top: 35px;left: 20px;border: 15px solid; border-color: #235D79 transparent transparent #235D79;}

.speech:hover {background:#63ADD0}
.speech:hover:after {content: ’ ‘;position:absolute;width: 0;height: 0;top: 35px;left: 20px;border: 15px solid; border-color: #63ADD0 transparent transparent #63ADD0;} 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: