Tips for using 3D Transform in CSS3

CSS3 Transform 3D effects very well. Thanks to this effect, you can save a lot of time in designing and creating beautiful movement. In this tutorial, Webmaster Sun will use the 3D effect in CSS3 Transform to create a simple portfolio.
Because it is a form Porfolio mostly pictures. You should prepare a file with a size of 266x186px. You can change size depending on your requirements.

HTML

<div class="thumb scroll">
    <div class="thumb-wrapper">
        <img alt="" /> hinh" src="/Duong's Guide
        <div class="thumb-detail">
            <a href="#" target="_blank">
                Content
            </ A>
        </ Div>
    </ Div>
</ Div>

CSS

. Thumb {
display: block;
width: 266px;
height: 186px;
position: relative;
margin-bottom: 20px;
margin-right: 20px;
float: left;}

. Thumb-wrapper {
display: block;
width: 100%;
height: 100%;}

. Thumb img {
width: 100%;
height: 100%;
position: absolute;
display: block;
-Webkit-border-radius: 5px;
-Moz-border-radius: 5px;
border-radius: 5px;}

. Thumb. Thumb-detail {
display: block;
width: 100%;
height: 100%;
position: absolute;
background: # 000;
font-family: arial;
font-size: 16px;}

. Thumb. Thumb-detail a {
display: block;
width: 90%;
height: 100%;
text-transform: uppercase;
color: # fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
letter-spacing:-1px;
padding: 10px;
font-size: 18px;
text-align: center;}

Because 3D Transform does not yet support all browsers like Opera and IE9 so we need to add a CSS.

 . Thumb.scroll {
    overflow: hidden;}

. Thumb.scroll. Thumb-detail {
    bottom:-280px;}

Now, we add 3D Transform for browsers that support.

 

. Thumb.flip {
-Webkit-perspective: 800px;
-Moz-perspective: 800px;
-Ms-perspective: 800px;
-O-perspective: 800px;
  perspective: 800px;}

. Thumb.flip. Thumb-wrapper {
-Webkit-transition:-webkit-transform 1s;
-Moz-transition:-moz-transform 1s;
-Ms-transition:-moz-transform 1s;
-O-transition:-moz-transform 1s;
transition:-moz-transform 1s;
-Webkit-transform-style: preserve-3d;
-Moz-transform-style: preserve-3d;
-Ms-transform-style: preserve-3d;
-O-transform-style: preserve-3d;
transform-style: preserve-3d;}

. Thumb.flip. Thumb-detail {
-Webkit-transform: rotateY (-180Deg);
   -Moz-transform: rotateY (-180Deg);
   -Ms-transform: rotateY (-180Deg);
-O-transform: rotateY (-180Deg);
transform: rotateY (-180Deg);}

. Thumb.flip img,
. Thumb.flip. Thumb-detail {
-Webkit-Backface-visibility: hidden;
    -Moz-Backface-visibility: hidden;
-Ms-Backface-visibility: hidden;
-O-Backface-visibility: hidden;
Backface-visibility: hidden;
-Webkit-border-radius: 5px;
-Moz-border-radius: 5px;
border-radius: 5px;
background-color: # 333;}

. Thumb.flip. FlipIt {
-Webkit-transform: rotateY (-180Deg);
-Moz-transform: rotateY (-180Deg);
-Ms-transform: rotateY (-180Deg);
-O-transform: rotateY (-180Deg);
transform: rotateY (-180Deg);}

Javascript
Finally, we add the Javascript in the <body>

$ (Function () {

    / / Utilize the support modernzr feature class to detect 3D CSS transform support
    if ($ ('html'). hasClass ('csstransforms3d')) {
     
        / / If it's supported, remove the scroll effect flipping instead add the cool card
        $ ('. Thumb'). RemoveClass ('scroll'). AddClass ('flip');
         
        / / Add / remove class flip that make the transition effect
        $ ('. Thumb.flip'). Hover (
            function () {
                $ (This). Find ('. Thumb-wrapper'). AddClass ('flipIt');
            },
            function () {
                $ (This). Find ('. Thumb-wrapper'). RemoveClass ('flipIt');
            }
        );
         
    Else {}
         
        / / CSS 3D is not supported, use the scroll up effect instead
        $ ('. Thumb'). Hover (
            function () {
                $ (This). Find ('. Thumb-detail'). Stop (). Animate ({bottom: 0}, 500, 'easeOutCubic');
            },
            function () {
                $ (This). Find ('. Thumb-detail'). Stop (). Animate ({bottom: ($ (this). Height () * -1)}, 500, 'easeOutCubic');
            }
        );

    }

});

Discussion Forum : webmaster forum

10 best HTML and CSS frameworks for designers

Frameworks for HTML and CSS more and more popular. Frameworks code easier to read, easy to understand, helping designers save a lot of time to develop into a complete website. If you need such frameworks, visit view this article by Webmaster Sun.

Blueprint CSS framework

960 Grid system

Golden grid system

52 Framework

Baseline Framework

YAML

Elasticss

1kbgrid

Easy framework

Discussion Forum : webmaster forum

CSS Sprite - Use an image to different components

This article guides you CSS Sprite technique - Use an image to contain all the icon to add a small icon for each separate component.
Preparation: A png image (this standard when used for most web icon). Sample images can be downloaded below

You draft a code as follows:

<ul>
     <span <li> id="home"> </ span> Home </ li>
     <span <li> id="next"> </ span> Next </ li>
     <span <li> id="previous"> </ span> Previous </ li>
     <span <li> id="fullscreen"> </ span> Fullscreen </ li>
</ ul>

In that span tag will contain the image.
CSS

I set the width and height of span in icon size. The part outside this box will be hidden.

The list item with the id will be equivalent wallpaper position is shifted so that the icon to use it right now span the corresponding frame.

li {
     list-style-type: none;
}
li span {
     background: url ('icon.png') no-repeat;
     display: inline-block;
     height: 16px;
     width: 16px;
}

# home {
     background-position: 0-112px;
}

# next {
     background-position:-112px-192px;
}

# previous {
     background-position:-144px-192px;
}

# fullscreen {
     background-position:-32px-80px;
}

Discussion Forum : webmaster forum

Quick guides for using Css Sprites

It is said that 70 to 80 percentage of the end-user response time is spent on the front-end. A major portion of this time is exhausted on downloading all the external components in a web page including, stylesheet, images, scripts, flash etc. An extra HTTP request adds 200+ milliseconds to a page (worldwide average).

Since most of today’s browsers limit about 3 or 4 parallel requests at a time, a page with so many external references can cause the requests to get queued up. This may eventually cause the page loading time to increase. In short, the fewer files the web browser has to fetch that much faster the site loads. It’s as simple as that.

What is CSS sprite?

CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properites. Now that almost all major browsers started supporting CSS background-image and background-position properties, CSS sprites are getting more significance.
Cool Sprites – Free Pure CSS menu for download



Here I am presenting a cool overlapped pure CSS menu created using CSS sprites. This is an initial draft version, so far I have checked it only in Firefox 3.5, IE 7, Chrome 3.0 & Opera 9.02 and it looks fine. If anyone of you finds any issues in any other browsers, please lemme know. Cool sprites is a pack of four different versions of the same menu. The photoshop source is also available for download, so that you can customize it as per your need. Since this menu is largely dependent on the background image, you need to customize the image to alter the link label, color, size etc.

Sample HTML Code

<div class="navi1">
  <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="#"></a></li>
  </ul>
</div>

Sample CSS Code

.navi1 {
    display:block;
    height:72px;
    margin:0 auto;
    position:relative;
    width:525px; }
.navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.navi1 ul li {
    background-image:url(tab-1.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.navi1 ul li:hover {
    z-index:1000; }
.navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.navi1 ul li.sm5:hover {
    background-position:-498px -75px; }