Dimox.net

Beautiful Tags For a Website Using Only CSS

Dimox — Wed, 16 Jan 2013 11:58:05 +0000

Great web designer Orman Clark once shared with his readers very beautiful tag cloud design, which may help to make you website more attractive.

Such a tag can be marked up with just one image, however, modern technologies allow to mark it up entirely with CSS, without using this image. And now I will show you how to do it.

It should be noted that the result will look excellent in the following browsers: Google Chrome, Firefox, Safari and Opera. Tag will be without a gradient in Internet Explorer 9, but here it also looks not bad. But in IE8 and below it looks unseemly.

HTML code for a tag is a simple link:


	tag1
	tag2
	tag3

Firstly we declare the link as inline block, remove underline and prevent text from wrapping in a new line.

Now we will begin to “draw” the right side of the rectangle. We specify a gradient background, a border colors, add the effects of external and internal shadow for the block and shadow to text, as well as padding and margin (margin of 10px to the right specified in order to leave space for the adjacent tag triangle):

.tags a {
	display: inline-block;
	height: 21px;
	margin: 0 10px 0 0;
	padding: 0 7px 0 14px;
	white-space: nowrap;
	position: relative;

	background: -moz-linear-gradient(top, #fed970 0%, #febc4a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(top, #fed970 0%,#febc4a 100%);
	background: -o-linear-gradient(top, #fed970 0%,#febc4a 100%);
	background: linear-gradient(to bottom, #fed970 0%,#febc4a 100%);
	background-color: #FEC95B;

	color: #963;
	font: bold 11px/21px Arial, Tahoma, sans-serif;
	text-decoration: none;
	text-shadow: 0 1px rgba(255,255,255,0.4);

	border-top: 1px solid #EDB14A;
	border-bottom: 1px solid #CE922E;
	border-right: 1px solid #DCA03B;
	border-radius: 1px 3px 3px 1px;
	box-shadow: inset 0 1px #FEE395, 0 1px 2px rgba(0,0,0,0.21);
}

We get the following:

Now we will create the left triangle using the :before pseudo selector. Originally it’s a square (with the same borders, shadows and gradient, but rotated by 45 degrees), which will be transformed into a triangle:

a:before {
	content: '';
	position: absolute;
	top: 5px;
	left: -6px;
	width: 10px;
	height: 10px;

	background: -moz-linear-gradient(45deg, #fed970 0%, #febc4a 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(-45deg, #fed970 0%,#febc4a 100%);
	background: -o-linear-gradient(45deg, #fed970 0%,#febc4a 100%);
	background: linear-gradient(135deg, #fed970 0%,#febc4a 100%);
	background-color: #FEC95B;

	border-left: 1px solid #EDB14A;
	border-bottom: 1px solid #CE922E;
	border-radius: 0 0 0 2px;
	box-shadow: inset 1px 0 #FEDB7C, 0 2px 2px -2px rgba(0,0,0,0.33);
}

And it looks like this:

It is worth noting that the webkit draws gradients in the opposite direction, so a negative value is specified for it: -45deg. Also, you may notice that there is not 45 but 135 degrees is specified in the prefix-free gradient property. I do not know why, but it should be such to display properly.

To make a triangle from a square, we use the transform property with the value rotate(45deg). But this is not enough – we also need to make it with an obtuse angle. This is achieved by scaling the Y-axis using the scale value for the transform property:

a:before {
	-webkit-transform: scale(1, 1.5) rotate(45deg);
	-moz-transform: scale(1, 1.5) rotate(45deg);
	-ms-transform: scale(1, 1.5) rotate(45deg);
	transform: scale(1, 1.5) rotate(45deg);
}

We get almost complete design of a tag:

The last remaining thing – make a hole in our tag. The :after pseudo selector will help with this. Simply we create a small square and round off his corners so that it turns into a circle. And add a shadow to make it look three-dimensional:

a:after {
	content: '';
	position: absolute;
	top: 7px;
	left: 1px;
	width: 5px;
	height: 5px;
	background: #FFF;
	border-radius: 4px;
	border: 1px solid #DCA03B;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.21);
}

Hooray! In the end, we got identical tag design, as is shown in the first picture to this post:

Finally, you can add an effect to change the text on mouseover:

.tags a:hover {
	color: #FFF;
	text-shadow: -1px -1px 0 rgba(153,102,51,0.3);
}

Live demo is here.

Share42.com – Free Social Sharing Buttons Script

Dimox — Thu, 13 Sep 2012 16:49:21 +0000

Nowadays we are involved in different processes connected with the Internet. There are many numerous interesting websites and all of them have a specific purpose.

I present to you my website Share42.com called Social Sharing Button Script. It provides free service for generating a script. So, eventually, visitors of your websites or various social networks will be able to post links and additional information to your articles in various types of social media.

There are many available options on Share42.com.

Firstly, you are able to choose a size (32×32, 24×24 or 16×16) and icons from listed on the website. You can notice more then 40 buttons there.
You can also choose the desired features of icon panels, website charset.
You are able to check how it will look like on this service.
If you are satisfied with all the set characteristics, you should install a definite script on your website. This process is very easy, just pay attention to the following steps:
- After downloading it, you should unpack its archive. Then just upload folder of Share42 to your website via FTP or web hosting control panel.
- Afterwards, you specify the path to it, select the most appropriate type of website, insert template of a specific code just before the main text goes.
- If you want to give a style to it, then just add a special code from Share42.com and put it in CSS file.
That’s the way it is going to be properly done.

Why choosing Share42.com:

Beautiful design of icons, which are made to fit each other.
Optimized code of script with a small size.
Easy way in installing, so after downloading the script you are able to connect it to your website.
No additional extra links are noticed because all links are made via JavaScript and outbound links do not increase in number.
You won’t find an extra HTML code, so it is generated with JavaScript.
You avoid the situation when another third-party site takes part in installation of the script.
The universal character of this service provides its working on any type of those websites that have FTP access.
Only one image or sprite can reduce the number of requests to that server that hosts your website.

You can see the live demo of the Share42.com script on the current website (sticky panel at the left side of this post).

If you find Share42 useful and required for your website, you have a chance to thank me and donate via PayPal.

You have a great possibility to give your website a unique look and an appropriate style. You choose those icons of social media that will be noticed on your website. All in all, this is an easy way to promote your site and make it more popular with the help of Social Sharing Button Script on Share42.com.

Don’t hesitate and give it a try!

WordPress Top Authors List Without a Plugin

Dimox — Mon, 23 Jan 2012 14:50:11 +0000

WordPress engine allows to create sites with big number of users of different levels. And authors, which have corresponding right, can fill the site content. On such a multi-user sites will be useful to have a list with top authors.

In this post I will show you one of the ways how to display list of the top authors without using a plugin.

You can use the following small function:

function top_authors($number = 10) {
	$uc = array();
	$blogusers = get_users();
	if ($blogusers) {
		echo '';
		foreach ($blogusers as $bloguser) {
			$post_count = count_user_posts($bloguser->ID);
			$uc[$bloguser->ID] = $post_count;
		}
		arsort($uc);
		$i = 0;
		foreach ($uc as $key => $value) {
			$i++;
			if ($i <= $number) {
				$user = get_userdata($key);
				$author_posts_url = get_author_posts_url($key);
				$post_count = $value;
				if ($post_count > 0) {
					echo '' . $user->display_name . ' (' . $post_count . ')';
				}
			}
		}
		echo '';
	}
}

Paste this function in the functions.php file of your theme and then put the following code in a place of your theme, where you want to see the top authors list:

10 here is the number of authors you want to show in the list.

That’s all.

As a result you will see the list of top authors with their names and number of published posts. Author’s name is linked to his archive page where is a list of all his posts.

List of top authors is sorted by number of posts.

WordPress Comments Pagination Without a Plugin

Dimox — Thu, 01 Dec 2011 14:21:50 +0000

There is a possibility to create a pagination in WordPress comments without using any plugins. WordPress has a built-in function paginate_comments_links() for this, which is appeared in WordPress 2.7.

It works on the basis of the function for a pagination on archive pages (as you know, it also may work without a plugin), therefore very similar to it.

Code of the function:

function wp_comments_corenavi() {
   $pages = '';
   $max = get_comment_pages_count();
   $page = get_query_var('cpage');
   if (!$page) $page = 1;
   $a['current'] = $page;
   $a['echo'] = false;

   $total = 0; //1 - display the text "Page N of N", 0 - not display
   $a['mid_size'] = 3; //how many links to show on the left and right of the current
   $a['end_size'] = 1; //how many links to show in the beginning and end
   $a['prev_text'] = '« Previous'; //text of the "Previous page" link
   $a['next_text'] = 'Next »'; //text of the "Next page" link

   if ($max > 1) echo '';
   if ($total == 1 && $max > 1) $pages = 'Page ' . $page . ' of ' . $max . ''."\r\n";
   echo $pages . paginate_comments_links($a);
   if ($max > 1) echo '';
}

You need to paste this code the functions.php file of your theme. As you see the function also contains just five options.

To show the comments pagination on your site, paste the following code in comments.php of your theme near the wp_list_comments() function:

HTML code of the function will looks like this:


	Page 7 of 14
	« Previous
	1
	...
	4
	5
	6
	7
	8
	9
	10
	...
	14
	Next »

And you can use a CSS classes for styling this navigation. That’s it.

One more thing. Don’t forget to activate the option “Break comments into pages” in WordPress admin area.

WordPress Pagination Without a Plugin (WP-PageNavi alternative)

Dimox — Sun, 05 Jun 2011 11:00:54 +0000

Almost every blogger, who maintains a blog on WordPress, familiar with the WP-PageNavi plugin, which displays the pagination like on the image above.

But not everyone knows (including me until recently), what WordPress has a built-in function (starting from version 2.1) which implements virtually the same functional. And compared with the WP-PageNavi plugin this function very small in size.

Here’s what this function looks like:

function wp_corenavi() {
	global $wp_query, $wp_rewrite;
	$pages = '';
	$max = $wp_query->max_num_pages;
	if (!$current = get_query_var('paged')) $current = 1;
	$a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
	$a['total'] = $max;
	$a['current'] = $current;

	$total = 1; //1 - display the text "Page N of N", 0 - not display
	$a['mid_size'] = 5; //how many links to show on the left and right of the current
	$a['end_size'] = 1; //how many links to show in the beginning and end
	$a['prev_text'] = '« Previous'; //text of the "Previous page" link
	$a['next_text'] = 'Next »'; //text of the "Next page" link

	if ($max > 1) echo '';
	if ($total == 1 && $max > 1) $pages = 'Page ' . $current . ' of ' . $max . ''."\r\n";
	echo $pages . paginate_links($a);
	if ($max > 1) echo '';
}

This code must be placed in the functions.php file of your template. The function have just five options, they are separated by line breaks.

To show the navigation, paste the following code in your template:

As a result the HTML code will looks like this:


	Page 7 of 27
	« Previous
	1
	...
	4
	5
	6
	7
	8
	9
	10
	...
	27
	Next »

As you can see it contains all the necessary classes to stylize navigation with CSS (the current page, dots, links to previous and next page).

I’ve tested this function on WordPress 2.3.3 and 3.1 and also tested variants with active and inactive permalinks. Everything works as expected. I think it will work also in a new versions of WordPress.