Web 2.0 | Web 2.0 Css Templates

Css3 rounded corners demonstration

admin » 30 April 2009 » In Css Articles » No Comments

Css3 is around the corner, well, at least for non IE users. The new beta of Firefox (3.5b4) has built in feature for support, which allows us to test some of the new features in css3.
Let’s start by looking at one of these features, which is rounded corners

roundedcorners

As you can see, Firefox has added those nice rounded corners, while IE has not. The html code for the above example:

^?View Code HTML4STRICT

<p class="roundedbox">The rounded box</p>

And the css code:

^?View Code CSS

.roundedbox
{
	background-color: #0066cc; 
	color: #fff; 
	line-height: 20px; 
	width: 120px; 
	padding: 10px; 
        border-radius: 10px;
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
}

It’s only the 2 last lines in the css code that applies the rounded corners effect. The decleration of this css3 code will be border-radius, as seen in line number 3 from the bottom. But until this is in place, we need to use the 2 lines to tell the browsers to use prefixes. The first: -webkit- is for Safari, and the last one: -moz- is for Firefox.

CSS3 two column layout

admin » 23 April 2009 » In Css Articles » 1 Comment

It looks promosing with the new CSS3, many new features is on it’s way. Today, we took a look on how to make a 2 column list layout, using CSS3 properties.
The result, viewed in Firefox 3:

css3-two-column-layout

As you can see, the column is split in 2. This is done by using the following css code:

^?View Code CSS

body {
font-size: 62.5%; 
padding: 30px;
}
 
ol {
font: 1.2em/1.5em Verdana, Arial, sans-serif;
margin-bottom: 1.5em;
}
 
.twoColumnList {
width: 40em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
-moz-column-count: 2;
-moz-column-gap: 1em;
}

A width is defined and the column-count and column-gap properties automatically split up the space and position the list elements. Note that the prefixes -webkit- and -moz- are used here. In the long run, these will be dropped, but for now, they are required to make these properties work in Firefox, Safari and Google Chrome.

The html code is pretty straight forward:

^?View Code HTML4STRICT

<body>
<h1>Testing two column list layout with CSS3</h1>
  <ol class="twoColumnList">
    <li>Testing CSS3</li>
    <li>Looks like Firefox has the best support</li>
    <li>Chrome is also good</li>
    <li>IE, well...it's still IE</li>
    <li>Venenatis</li>
    <li>Nam magna enim</li>
    <li>Accumsan eu</li>
    <li>Blandit sed</li>
    <li>Blandit a eros</li>
    <li>Quisque facilisis</li>
    <li>Try it out yourself</li>
  </ol>
  <p>Check out more stuff on <a href="http://www.csstemplatesweb.com" title="Csstemplatesweb">Csstemplatesweb.com</a></p>
</body>

Try it out for yourself, good luck!

Ajax Twitter feed with Scriptaculous

admin » 20 April 2009 » In Ajax Articles » No Comments

This example shows you how to integrate your Twitter on your website. It uses some custom javascript code, and it also uses the scriptaculous library to use a sliding effect. In this example it will show the 5 latest entries from your Twitter account.

You can see a video of how this works, shown in the demovideo of the template “Personal Homepage”.

We will start with the html file, in this case: index.html. You need to add the following code in the head section:

^?View Code HTML4STRICT

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css" />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script><script type="text/javascript" src="js/ajax.js"></script>

And then, somewhere in the body tag, you need to add this code (this is the code for showing the Twitter feed).

^?View Code HTML4STRICT

<body>
<div id="twitter" class="list">
<h1>Twitter</h1>
<img id="spinner-twitter" alt="spinner" src="images/spinner.gif" width="16" height="16" />
<div id="list-twitter" style="display: none;"></div>
</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/SveinErik.json?callback=twitterCallback2&count=5"></script>
</body>

As you can see in the last line, you can see the name “SveinErik”, that is my Twitter username, so you need to put your own username there. The last thing, the magic, is found in the Ajax.js file (also included in the .zip file), this is where the actual javascript code for both getting the feed from Twitter, and also a function for showing how long ago each status update was written (like 2 days ago etc).

^?View Code JAVASCRIPT

function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
 var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) {
return 'less than a minute ago';
} 
else if (delta < 120) {return 'about a minute ago';
}
else if (delta < (60 * 60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
}
else if (delta < (120 * 60)) {
return 'about an hour ago';
}
else if (delta < (24 * 60 * 60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
}
else if (delta < (48 * 60 * 60)) {
return '1 day ago';}
else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
 
function twitterCallback2(twitters) {
var statusHTML = "";
for (var i = 0; i < twitters.length; i++) {
statusHTML += '<li>' +
twitters[i].text + '&nbsp;<small>(' +
relative_time(twitters[i].created_at) +')</small></li>';
}
 $('list-twitter').innerHTML = '<ul>' + statusHTML + '</ul>';
$('spinner-twitter').hide();
$('list-twitter').slideDown({ duration: 2 });
}

You can download the .zip file, containing a fully working example. This is the same code as used in the template “Personal Homepage”, which also include similiar ajax effects to grab the feed from both Twitter, Delicious and Flickr. It is available for only $9 in the shop.
Good luck!

Download: Twitter_Example Twitter_Example (43.3 KiB, 344 hits)

Web 2.0 Css Templates

Tag Archive > web 2.0

Css3 rounded corners demonstration

CSS3 two column layout

Ajax Twitter feed with Scriptaculous