Css3 rounded corners demonstration
admin » 30 April 2009 » In Css Articles »
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
As you can see, Firefox has added those nice rounded corners, while IE has not. The html code for the above example:
<p class="roundedbox">The rounded box</p>
|
And the css code:
.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.
Continue reading...
Tags: css, css3, web 2.0, web design, webdesign
Transparent images using css
admin » 28 April 2009 » In Css Articles »
It is very easy to make an image transparent, by using opacity, using only 1 line in your css. In this example, I’ll set the opacity to 40%. This is the html code:
<img src="#" width="150" height="150" alt="image" class="transparent" />
|
You can see that we call for the class “transparent”, in the css class transparent, we have the following code:
.transparent{ opacity:0.4;filter:alpha(opacity=40) }
|
This is all that it takes to show a tranparent image in css. You can also use the same code for transparency on text. Note that Firefox uses the property opacity:value for transparency, IE uses filter:alpha(opacity=value). This works in all modern browsers.
Here you can see a screenshot, one with the opacity set, and one without the opacity:
In CSS3, the syntax for transparency/opacity will be “opacity:value”.
Continue reading...
Tags: css, css3, html, opacity, transparent, web design, webdesign
Generate backgrounds online
admin » 23 April 2009 » In Web developer tips »
A nice background is very important on every website. But sometimes it can be hard to come up with a good idea on what background image or pattern to use. Luckily, there are some good online background generators on the web. This is a list of 15 background generators, that will create patterns, stripes, gradients and tartans!
1. Patterncooler
2. BgPatterns.com
3. Patterns from Colourlovers.com
4. StripeGenerator.com
5. StripeMania.com
6. StripedBgs.com
7. StripeDesigner.com
8. TartanMaker.com
9. Dotter by PixelKnete.de
10. Gradient Image Maker by DynamicDrive
11. Ogim – Online Gradient Image Maker
12. Gradient-Maker by SecretGeek.net
13. Background Image Maker by Rails2u.com
14. TileMachine.com
15. bgMaker by Ventdaval.com
As you see, there are a lot of options for making background for your website available on the net. Have you tried/used any of these resources? Please, write your opinion in the comment field below.
Continue reading...
Tags: color, color scheme, colorschema, colorscheme, design, design generator, gradients, layout, online design tool, patterns, stripes, style, tartans, web design, webdesign
CSS3 two column layout
admin » 23 April 2009 » In Css Articles »
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:
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:
<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="https://csstemplatesweb.com" title="Csstemplatesweb">Csstemplatesweb.com</a></p>
</body>
|
Try it out for yourself, good luck!
Continue reading...
Tags: css, css3, web 2.0, web design, webdesign
admin » 20 April 2009 » In Ajax Articles »
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:
<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).
<body>
<div id="twitter" class="list">
<h1>Twitter</h1>
<img id="spinner-twitter" alt="spinner" src="#" 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).
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 += '' +
twitters[i].text + ' (' +
relative_time(twitters[i].created_at) +')';
}
$('list-twitter').innerHTML = ' + statusHTML + '';
$('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!
(43.3 KiB, 1,016 hits)
Tags: ajax, Feed, , web 2.0, web design, webdesign
