You may have seen various types of speech bubbles across the web, some use images and others use pure CSS to create this effect. In this article we will be looking at how you can create a triangle with CSS and how you can use this triangle to then create simple speech bubbles.

Photo by StreetFly JZ.

Triangles

The basics of CSS triangles is illustrated brilliantly by both CSS-Tricks and Dave Walsh. Triangles basically consist of an element with zero width and height, a single large border and two transparent borders – so shown in the example below.

HTML

<div class="triangle"></div>

CSS

.triangle
{
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;

	border-left: 25px solid MediumVioletRed;
}

Demo

There are many different shapes and sizes you can achieve using this method of rendering, as well as many uses – arrows being the obvious choice. But my favourite, and the one we’ll be covering in this article, is using CSS triangles to create speech bubbles.

Speech Bubbles

A huge number of variations can be achieved simply by tweaking certain areas of the code, so here’s just one example:

HTML

<div class="bubble">Hello World!</div>

CSS

.bubble
{
	position: relative;
	width: 160px;
	padding: 20px;
	background-color: SteelBlue;
	border-radius: 2px;
	color: #FFF;
	text-align: center;
}
.bubble:after
{
	content: "";
	position: absolute;
	top: 100%;
	left: 75px;
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;

	border-top: 30px solid SteelBlue;
}

Demo

So that’s all for now folks! If you’re interested in this subject there are some more interesting articles available, like Speech Bubble Arrows that Inherit Parent Color by CSS-Tricks and Pure CSS speech bubbles by Nicolas Gallagher. Also, if you like this article remember to share it.

Yesterday, the 20th of October 2011, WordPress 3.3 Beta 2 was released. With an array of minor and major changes, this is still just a Beta copy but gives great incite into what’s to come. An in-depth list of changes are available for Beta 1 and Beta 2 on their blog. The WordPress development team are aiming to release the full version of version 3.3 by the end of November.

The Admin Bar

One of the major improvements to WordPress 3.3 so far is the Admin bar with general aesthetic enhancements, simpler interface and a few interesting features.

Theme Design

This Beta also includes improvements such as Theme Options. So, for example, the Twenty Eleven Theme has the option of a Light or Dark colour scheme.

Media Uploader

Beta 2 is also bundled with a new media uploader, allowing you to drag and drop image files straight into the uploader. A simple and effect difference which adds nicely to the feel of WordPress.

Download

Download WordPress 3.3 Beta 2

Note: This should only be used to test-drive and learn what’s to come with WordPress and shouldn’t be used to run a production copy of a website (yet!).

Google accidentally released a video earlier this month showing the new Gmail interface which is on its way soon. In my personal option it is about time and it looks amazing (from watching the video).

Within Gmail, it is possible to use the Preview Theme to get similar qualities and appearance to the proposed interface. To activate the preview theme, as you would with any other theme. Go into ‘Settings’ by clicking the cog icon in the top right corner, then down to Mail Settings. Once in Settings, click the ‘Themes’ tabs and click on Preview to try an intermediate version of the interface. Note: this is not in any way the final version, just a refined theme for the current interface. Have fun!

Columns are lovely things. They allow you to read text easier, make chunks of text look nicer and now with the power and beauty of CSS3 you can make columns dynamically – yey! No more table columns and splitting of paragraphs to achieve the same effect.

This is supported by Chrome (with prefix), Firefox 3.5+ (with prefix) and Opera.

Style.css

p
{
	column-count: 2;
	column-gap: 30px;
}

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lorem erat. Suspendisse blandit pellentesque mattis. Donec condimentum venenatis quam at vulputate. Suspendisse potenti. Quisque pretium enim nec lectus sodales molestie. Suspendisse sollicitudin justo diam, in bibendum arcu. Vestibulum a nunc elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et nulla augue.

#columndemo
{
	-moz-column-count: 2;
	-moz-column-gap: 30px;
	-moz-column-rule: 2px solid #36F;
	-webkit-column-count: 2;
	-webkit-column-gap: 30px;
	-webkit-column-rule: 2px solid #36F;
	column-count: 2;
	column-gap: 30px;
	column-rule: 2px solid #36F;

	text-align: justify;
}

This is all well and good if you’re using an adequate web browser, but what if you’re not? Shouldn’t you get a similar user experience which ever browser you’re using? Well, like with most CSS3 functionality, it is possible to run a JavaScript fall-back. More information on this can be found here.

Photo by 96dpi

If you’re in the process of developing a WordPress theme, browser caching isn’t necessary and it can be a pain because your theme won’t always update after you have made a change. On the other hand caching plays a crucial role in the speed and download times of websites. So what are we to do? In WordPress it’s actually very simple, if you know what you’re doing, to set up a function to force the browser cache into re-downloading the CSS file again. Depending on your level of PHP knowledge, there is a plugin already built for this task called CSS Cache Buster, or you can write your own function.

All the code for doing this yourself can be found on Alister Cameron’s website which is what my code is based on.

Functions.php

// Stop CSS Caching
function stop_css_caching()
{
	$split = explode("wp-content", get_bloginfo('stylesheet_url'));
	return get_bloginfo('stylesheet_url') . "?" . filemtime(ABSPATH . "/wp-content" . $split[1]);
}

This function basically takes the URL of the default stylesheet and adds the time modified variable to the end of it.

Header.php

<link rel="stylesheet" type="text/css" href="<? echo stop_css_caching() ?>">

The browser will see this as a different stylesheet and download it again and show your recent change.

Photo by mauricesvay

JavaScript libraries, such as jQuery, make easy work of animations and effects when working with websites. They allow you to move, change and fade different DOM elements in your web page, which can improve your website visually and sometimes make it more usable. There are, however, disadvantages to using jQuery, for example, most modern web browsers have the ability to turn JavaScript off and Firefox has a popular addons called ‘NoScript‘ which will also disable JavaScript – and your effects too. CSS, with version three of its specification, has CSS transitions which allow you to do very similar animations and effects as jQuery.

At the moment CSS transitions are supported by FF4+ (with Prefix), Chrome (with Prefix), IE10 (with Prefix) & Opera 10.5+ (with Prefix).

style.css

a
{
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;  
}

Demo

#example
{
	display: inline-block;
 	margin-top: 16px;
	padding: 6px 10px 6px 0;
 	font: 18px Georgia, serif;
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}

#example:hover
{
	padding-left: 200px;
	background-color: #333;
	text-shadow: 0 0 4px #000;
	border-radius: 16px;
	color: #FFF;
	font-style: italic;
}

For more information on CSS transitions I would recommend reading ‘CSS3 Transitions‘ on Net|tuts+ and ‘Connecting The Dots‘ by Smashing Magazine.

[Photo Source]

WordPress, by default, includes a local copy of jQuery which gets loaded up on your website and also used by the WordPress Admin Dashboard. This is great because it makes life easier but wouldn’t it be even greater if WordPress used a copy of jQuery which was stored on Google’s CDN (or jQuery’s CDN for that matter). Well, with a tiny bit of theme editing this is possible.

Functions.php

// JQUERY FROM GOOGLE CDN
// IS_ADMIN() == DASHBOARD

if ( !is_admin() )
{
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"), false, '1.6.4', true);
	wp_enqueue_script('jquery');
}

There are many advantages to using jQuery from a content delivery network, it’s faster for a start because it’s likely that the script has been cached already and it puts less strain on your server. But what if, however unlikely, that Google’s CDN goes offline? Well, jQuery wouldn’t get loaded. So the bullet-proof approach would be to also add the fall-back into your theme.

Footer.php

<script>
	window.jQuery || document.write('<script src="/js/jquery-1.6.4.min.js"><\/script>')
</script>

jQuery

// SMOOTH-SCROLLING

function filterPath(string) {
	return string
	.replace(/^\//,'')
	.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
	.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');

$('a[href*=#]').each(function() {
	var thisPath = filterPath(this.pathname) || locationPath;
	if ( locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') )
	{
		var $target = $(this.hash), target = this.hash;
		if (target)
		{
			var targetOffset = $target.offset().top;
			$(this).click(function(event)
			{
				event.preventDefault();
				$(scrollElem).animate({scrollTop: targetOffset}, 400, function()
				{
					location.hash = target;
				});
			});
		}
	}
});

// use the first element that is "scrollable"
function scrollableElement(els)
{
	for (var i = 0, argLength = arguments.length; i  0)
		{
			return el;
		}
		else
		{
			$scrollElement.scrollTop(1);
			var isScrollable = $scrollElement.scrollTop()> 0;
			$scrollElement.scrollTop(0);
			if (isScrollable)
			{
				return el;
			}
		}
	}
	return [];
}

Code Source

1. $ whoami

Okay, I hear you, this might not be that useful, but shh! I enjoy it nonetheless. This command basically just prints out the name of the current user. After a long programming session I occasionally like being told my own name.

2. $ arch

This is a surprisingly useful terminal command if you spend your time installing many different Linux distributions and changing between 32-bit and 64-bit. This command will simply and quickly tell you if whether you are using x86_64 or x86_32.

3. $ xset -dpms

If you have recently upgraded to using gnome3 you may have found it has very little in the way of customizing it’s power settings. This means your monitor might turn off half way through watching a video. The xset -dpms command basically just turns off power management in X.

4. $ hostname

The command hostname on its own will print the current hostname of your computer, which is great if you don’t already know it, but if you were to type: ‘hostname newHostname’ it would set newHostname as your newHostname. Note: This will be lost on restart and needs to be set in /etc/hosts as well.

5. $ netstat -tulpn | less

This is a quick way to list which ports are open in your systems firewall. Great for checking if a recent change is active. If you want to open a port in your firewall use the ‘sudo gedit /etc/sysconfig/iptables’ command to edit the iptables file.

6. $ sensors

The package ‘lm_sensors’ is required for this to work. Once setup correctly this command will print out the temperatures and voltages of your CPU and mainboard. This is a great way to check your computer/sever is running correctly over an ssh connection. If you use Ubuntu this page might help.

7. $ ping -i 5 -a <IP>

The ping command, as I’m sure you’re aware, basically checks to see if there is a response from an IP address but this command specifically checks for the IP every 5 seconds and then beeps once it gets a response. Great for checking when your internet connection comes back online.

8. $ sudo shutdown -h 60

I love watching films in bed but commonly fall asleep to them, with this command I can tell the computer to shutdown by itself in an hours time. The time is calculated in minutes by default but you can specify an exact time, such as 8:00.

9. $ ps aux | sort -nrk 4 | head

List the top 10 resource intensive applications currently running on your computer, which can be an efficient way to find out which applications are causing your system to grind to a halt. Once you have found the application in question you can shut it down with the kill command.

10. $ ssh username@hostname

I have, admittedly, only just got into ssh but I find it amazingly useful being able to run commands on different computers. For the future I would like to look into more X Forwarding over ssh.