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

Contextual Slideout Tips With jQuery & CSS3

admin    Plugin     css3, javascript, jQuery, Plugin, tip, tutorial

This is an interesting solution for showcasing the new features of products – using contextual slideout tips.

Knowing the importance of HTML standards, the development team is making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines. read more

How to Customize fonts in WordPress blog with CSS3

admin    Wordpress     css3, font, free, howto, tutorial, Wordpress

Fonts type that can be used for Safari, Chrome and Firefox3.1+ are .ttf(True Type Font) and.otf(open type font). Both support the @font-face rule that allows stylesheet to point to a .ttf  or .otf on server.  IE has little problem with .otf.  After declaring the @font-face rule give reference to your required font-family property in your stylesheet as following:

  @font-face {
   font-family: MEgalopolis Extra; src: url(‘MEgalopolis-Extra.otf');
   }
  h3 { font-family: MEgalopolis Extra, sans-serif; }

Reference:
@font-face {
 font-family: MEgalopolis Extra;
 src: url('MEgalopolis-Extra.otf');
}

Example:

MEgalopolis Extra

The drawback of embedding fonts in stylesheet is again licensing and infringement issues which you can handle with the sIFR (Scalable Inman Flash Replacement) method. There is a well explained article on sIFR implementing the core method, you can find it at Mike Industries’s Blog “sIFR 2.0: Rich Accessible Typography for the Masses“.
There are lots of websites where you can find Free and useful resources. 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

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

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

How to create a pure CSS polaroid photo gallery

admin    CSS, Photos     css3, howto, photo gallery

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

Check out the demo to see what we’ll be building. Remember, because we’ll be using a couple of CSS3 properties, users with IE won’t see the complete effect, but fully supporting browsers such as Firefox and Safari will be treated to the whole experience. We’ll use basic CSS to style up the photos into a Polaroid style images, then inject some additional styling with shadows and rotation, then use the z-index property to alter the stacking order of all the objects.

Click here to read more details.