Page 1 of 1

Creating A Twitter Speech Bubble With CSS3 Rate Topic: -----

#1 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Posted 19 December 2012 - 01:20 PM

*
POPULAR

Welcome!

In this tutorial you will learn how to use CSS3 to create twitter like speech bubbles. You will see these on all kinds of websites and they are quite useful in giving your design a smoother look. Below is a picture of the final product:

Posted Image

Note: This has been tested and works in the latest browsers to date(Firefox 17.01, IE9, etc) If for whatever reason IE gives you fits while attempting it in that browser locally, use an alternative such as Firefox until you're ready to implement the code into a live website. Once ran live, it will work fine. DONT FORGET TO USE A DOCTYPE(ESPECIALLY IN IE)!

While you don't need to be a master at CSS for this, I am assuming you have a decent understanding of how things work. The more CSS you know, the more you can mold this to fit straight into your design!

To start off, grab an image that you want to use to place below the speech bubble. I just did a quick Google search for the twitter bird. Its image dimensions are 80 x 80.

To start off with CSS, let's create an ID that we will use as a container for our bubble.
#content {
width: 700px;
height: 150px;
position:relative
}



Alright, this is important because it will keep everything positioned where it needs to be. Can you fiddle around with this to get it to fit your websites design? Yes. But if you remove position: relative, things will get a little ugly.

Next, we want to create our main CSS class that we will be using for a blockquote.
.twitter {
	background:#efefef;
	padding:15px;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	width: 700px;
	height: 150px
}



The above code is pretty self explanatory. Background sets the background of the bubble, height does height, etc.

Let's move on to how we can place the image using CSS:

.twitter:before {
	content:url(twitter.png);
	position:absolute;
	top:220px;
        left: 90px;
}


Alright, so the content:url(file.ext); will be the image that you want to use. In my example I used the twitter bird. I also used absolute positioning on this. You can play with the numbers to move your image around if you want to change the location of the image. You can also use negative numbers for positioning such as -220px.

From here, we will need to create the little arrow. You can modify the following CSS to change the position/shape of the arrow:

.twitter:after {
	content:" ";
	position:absolute;
	top:180px;
	left:135px;
	border-top-color:#efefef;
	border:20px solid transparent;

}


You'll notice at the top where it says content:""; THIS IS IMPORTANT. If you remove it completely, you will lose your downward facing arrow. Content: is used in pseudo elements to insert content using CSS. I won't dive any further into it than that. DO NOT DELETE IT OR CHANGE IT!

After that you'll notice again absolute positioning for you to play with. Now, how would we change the arrow itself if we wanted it to point upwards instead of downward? You would modify the CSS where it says border-top-color and change it to border-bottom-color, or even left/right. If you want to change the thickness of the arrow, increase or decrease the number in border: 20px

Are we done yet? With the speech bubble construction, yes, but now we need to modify the Twitter widget! It will be the last of our CSS.

.twtr-hd, .twtr-ft {display: none;}
.twtr-bd {font-family: arial;font-size:27px}
.twtr-tweet {width: 700px; padding: 10px 10px 0px}



Okay, what?
The .twtr-hd tag displays a small picture of your current profile pic. We do not want that in this tutorial!
The .twtr-ft displays a small twitter bird and other links at the bottom which we also do not want!
The .twtr-bd modifies our text and allows us to set a font, font size, etc using CSS.
The .twtr-tweet is sort of what contains all of the text. It is IMPORTANT that you do not exceed the width of the speech bubble. If your main class width is 700px, then you need to make sure .twtr-tweet is 700px or fewer otherwise you will have text cut off!

We are now finished with our CSS! Celebrate. Now we move onto the HTML portion which will be rather short.

<div id="content">
<blockquote class="twitter">
 <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 1, 
  interval: 30000, 
  width: 700,
  height: 100,
  theme: {
    shell: {
      background: 'none', 
      color: '#ffffff' 
    },
    tweets: {
      background: 'transparent',
      color: 'rgb(30,30,30)',
      links: 'rgb(140,140,140)'
    }
  },
  features: {
    scrollbar: false, 
    loop: false,
    live: false,
	avatars: false,
    behavior: 'all'
  }
}).render().setUser('User').start();
</script>
</blockquote>
</div>



So to modify this to work, here are some things you need to know:

-You'll notice height and width near the top. It would be good to set them to the size you'll be using.

-To change color of the tweets, you can modify the tweets: color: rgb(30,30,30) - you don't have to use an rgb value for this. You can use a hex value such as #00ee22 if you want. Example:

tweets: {
      background: 'transparent',
      color: '#00ee22',
      links: 'rgb(140,140,140)'
    }


-To change the color of the links, modify the tweets:link rgb(140,140,140) - once again, you can also use a hex value(see above).

-Finally, to set the twitter name you want to get tweets from, modify the line near the end where it says .render().setUser('User').start. You would simply substitute 'user' with another name.

Example to pull tweets from Google:

}).render().setUser('Google').start();


Or an example to pull tweets from the user Firefox

}).render().setUser('Firefox').start();


Final Product (Remember, this final HTML below does not include a doctype! If all you are doing is testing this out, you WILL NEED ONE. If you are simply implementing this into a website that has a doctype, you're fine!):

<html>
<head>
<style type="text/css">
#content{
width: 700px;
height: 150px;
position:relative
}

.twitter {
	background:#efefef;
	padding:15px;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	width: 700px;
	height: 150px
}


.twitter:before {
	content:url(twitter.png);
	position:absolute;
	top:220px;
	left: 90px;
}

.twitter:after {
	content:"";
	position:absolute;
	top:180px;
	left:135px;
	border:20px solid transparent;
	border-top-color:#efefef;

}

.twtr-hd, .twtr-ft{display: none;}
.twtr-bd {font-family: arial;font-size:27px}
.twtr-tweet {width: 700px; padding: 10px 10px 0px}
</style>
</head>

<body>
<div id="content">
<blockquote class="twitter">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 1,
  interval: 30000,
  width: 700,
  height: 100,
  theme: {
    shell: {
      background: 'none',
      color: 'transparent'
    },
    tweets: {
      background: 'transparent',
      color: 'rgb(30,30,30)',
      links: 'rgb(140,140,140)'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
	avatars: false,
    behavior: 'all'
  }
}).render().setUser('User').start();
</script>
</blockquote>
</div>
</body>
</html>


This post has been edited by IJET: 19 December 2012 - 02:46 PM


Is This A Good Question/Topic? 5
  • +

Replies To: Creating A Twitter Speech Bubble With CSS3

#2 gregwhitworth  Icon User is online

  • Tired.
  • member icon

Reputation: 216
  • View blog
  • Posts: 1,602
  • Joined: 20-January 09

Posted 20 December 2012 - 09:37 AM

Good write up, I especially like the real world use case for this.
Was This Post Helpful? 0
  • +
  • -

#3 fridgedesign  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 03-April 13

Posted 03 April 2013 - 04:27 PM

Hi

This is great, but I want to have multiple tweets on my website and each tweet to have its own speech balloon.

How can I do this with your code?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1