10+ Free HTML5-CSS3 Website Templates

admin    CSS     css3, free, html5, templates

We are pretty bored with the current limits of the HTML-CSS and it is clear that the HTML5-CSS3 is the cure to let the creativity flow.

And, browser compatibility is no more a big issue as there are various resources like Modernizr, ExplorerCanvas or IE7.js that empower incompatible browsers.

If you didn’t already, it is a good idea to warm your hands on HTML5 and CSS3 as they offer so much.

Here are 10+ free HTML5-CSS3 website templates to help you get inspired and started:

HTML5 Starter Pack

read more

Create CSS Rounded Corners

admin    CSS     CSS, generator, online service, tool

The use of rounded corners on website has becoming very popular. Many websites are starting to kill the sharp edge and go with rounded corners in their buttons, navigation bar, header, banner, etc. Just how easy these rounded corners images can be created? I’m here to show you few which I think are few of the good ones.

1. Google Rounded Corners Generator

This google script generates a PNG format rounded corners for you on the fly. Simply copy the scripts below into a browser and hit enter.

http://groups-beta.google.com/groups/roundedcorners? c=999999&bc=white&w=4&h=4&a=tr

Tweak the following parameters to get the rounded corners of your choice. read more

Sponsor Flip Wall With jQuery & CSS

admin    CSS     CSS, howto, javascript, jQuery, tutorial

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well.

Step 1 – XHTML read more

Cross Browser CSS Transforms – cssSandpaper

admin    CSS, Plugin     css3, javascript, Plugin

The transform property of CSS allows rotating, scaling, and skewing objects in HTML.

However, as expected, it doesn’t work consistently on every browser (specially IE) and requires a different rule for almost each of them like:

• -moz-transform for Mozilla
• -o-transform for Opera
• -webkit-transform for Webkit engines (like Safari)

cssSandpaper is a JavaScript library which enables IE to support CSS transforms and every other browser to work with the same rule definitions.

The library requires its own CSS rules like -sand-transform, -sand-box-shadow or -sand-gradient.

Once they are defined, it searches for these rules in the CSS file and applies the browser-specific transformations via JavaScript.

There is an impressive demo provided which can be tested with every browser.

CSS3 Generator in a very easy way

admin    CSS, Tools     css3, generator, online service

With the rise of the CSS3, we’re seeing more & more tutorials + websites everyday that help us to use it.

Here comes a very easy to use website for creating CSS3 rulesnamed CSS3 Generator.

read more

How to create a grid-based layout with jQuery

admin    CSS     CSS, howto, jQuery

Grid-based layout is probably the more preferred way to style up a webpage to give it more magazine-like look and feel. This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout (See demo here). The algorithm/procedure used in this tutorial is very simple and straightforward. There are more advanced algorithms out there which can handle multiple scenarios. But the purpose is to understand the basic logic on how to create such layout. You go to this site for details.

50 Brilliant CSS3/JavaScript Coding Techniques

admin    CSS     css3, howto, javascript, jQuery

This great collection of CSS3 is from SmashingMagazine. Actually some articles already showed many times before, but here is just a roundup. I myself kept them here for later read or use.

CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features. read more

CSS3实现圆角效果

admin    CSS     border-radius, css3, howto, tutorial

创建那些完美的小圆角图片，用做适当的CSS背景，是非常费时的工作。现在，使用CSS3，我们可以用它的border-radius属性，通过几行代码来方便地创建圆角。不过这些CSS代码是基于CSS3的，这就意味着只在Firefox，Chrome，Opera等浏览器有效，IE内核的浏览器，包括IE8都不支持。

前缀：

-moz (例如 -moz-border-radius) 用于Firefox
-webkit (例如：-webkit-border-radius) 用于Safari和Chrome

CSS3圆角（所有的）

这是一个5px普通边框和15px边框半径的设置：

#roundCorderC{
font-family: Arial;
border: 5px solid #dedede;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding: 15px 25px;
height: inherit;
width: 590px;
}

read more

致网站设计初学者：你该了解的CSS技巧

admin    CSS     beginner, CSS, tutorial

在我们初学网站设计的时候，会遇到很多关于显示的问题，然后，最终我们会发现很多都是由一些CSS暗含的小技巧来解决的。每个网站设计人员都会碰到这样的问题，花费了很多时间，我们查找原因、查找解决办法，找到答案的时候，我们就会希望：如果早知道~~

这篇文章就是关于这些你该掌握的CSS技巧：

Resets & Browser Inconsistencies
Box Model — Margin, Padding & Borders
Dimensions — Width, Height, Min & Max
Floats & Clearing
Conditional Comments
Overflow & Zoom

原文链接: http://www.noupe.com/css/css-techniques-i-wish-i-knew-when-i-started-designing-websites.html

Going nuts with CSS transitions

admin    CSS, Photos     css3, howto, image, tutorial, webkit

This article is going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site. You’ll see it’s so easy to handle the image effects with only writing lines of CSS words, no javascripts, no coding. just it is!

Related properties include:

• -webkit-box-shadow
• -moz-box-shadow
• box-shadow

• -webkit-transform
• -moz-transform
• transform

• -webkit-transition

Read the original article here.

Note with the hovering examples that the animation will reverse itself when the mouse moves out of the div. Any time the property changes value, the animation will simply start again with the current position as the from value and the new value as the destination. The transition properties of the source state are used to figure out how to animate to the new target state. read more