Webmaster Sun

How to use the accordion effect in CSS3

Usually to make the accordion effect, it is common to use the jQuery library. However, jQuery also has the disadvantage when users disable JavaScript to function safely (According to her, this is rare), then the accordion effect no longer works. To replace the inconvenience, please consult the following tutorial on how to build Accordion with CSS3.To begin this tutorial, you prepare five image 580px x 220px size.

HTML

<div class="accordion horizontal"><p> How to Create Accordion with CSS3 </ p><section id="1"><h2> <a href="#1"> <img src="/link the anh" width="580" height="220"> </ a> </ h2>
        Note <span> images </ span></ Section><section id="2"><h2> <a href="#2"> <img src="/link the anh" width="580" height="220"> </ a> </ h2>
        Note <span> images </ span></ Section>
  </ Div>

In this tutorial, Webmaster Sun will create five sections, corresponding to 5 photos. Each <section> we declare an id to coincide with <a href="/"> effects can operateCSSFirst, we attribute format Accordion

. Accordion {width: 775px;overflow: hidden;margin: 50px auto;padding: 10px;color: # 474747;background: # 3a3a3a;}
. Accordion p {text-align: center;margin: 10px auto;font-size: 25px;font-weight: 700;color: # e7e7e7;text-shadow: 0px 1px 1px # 333;}

Accordion default when the page loads in a collapsed state.

. Accordion section {float: right;overflow: hidden;color: # 333;cursor: pointer;background: # 333;margin: 0px 5px;padding: 0px;}When Accordion open

. Accordion section: target {background: # FFF;height: 100%;width: 580px;padding: 0px;margin: 0px;-Webkit-border-bottom-right-radius: 5px;-Webkit-border-bottom-left-radius: 5px;-Moz-border-radius-bottomright: 5px;-Moz-border-radius-BottomLeft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;}
. Accordion section: target h2 {width: 580px;margin: 0px;}
. Accordion section: target h2 a {color: # 333;padding: 0px;}
. Accordion section: target span {display: block;font-size: 17px;text-align: center;padding: 5px;}

We have completed the Accordion format. Now to the horizontal format for Accordion.

. Horizontal section {width: 5%;height: 255px;-Moz-transition: width 0.2s ease-out;-Webkit-transition: width 0.2s ease-out;
-O-transition: width 0.2s ease-out;-Ms-transition: width 0.2s ease-out;transition: width 0.2s ease-out;}

  . Horizontal section h2 {/ * closing the accordion effect * /-Webkit-transform: rotate (90deg);-Moz-transform: rotate (90deg);-O-transform: rotate (90deg);-Ms-transform: rotate (90deg);transform: rotate (90deg);width: 255px; position: relative; left:-80px; top:-20px;}

   . Horizontal: target {/ * Accordion effect when open * /
   width: 73%; height: 100%;}

   . Horizontal: target h2 {top: 0px; left: 0;-Webkit-transform: rotate (0deg);-Moz-transform: rotate (0deg);-O-transform: rotate (0deg);-Ms-transform: rotate (0deg);transform: rotate (0deg);}

Finally, in order for the backwards IE9 can work, then we add the js, located in <head>.

<! - [If lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"> </ script><! [Endif] ->

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; }

Hello World

This is first blog on Google Blogger. I am interested in Google blog. It's more useful to share experiences to everyone over the world.