» » Use HTML5 + CSS3 to achieve vertical axis response

 

Use HTML5 + CSS3 to achieve vertical axis response

Author: bamboo06 on 16-03-2015, 00:03, views: 2534

4
Timeline pages are generally used to show the main line to the time of the event, such as the company's corporate website development process, such as the common. This article will give you about a beautiful HTML5 and CSS3 based vertical axis, it can respond to the page layout for HTML5 development of PC and mobile phone WEB applications.

HTML
We use the HTML5 tag
, Timeline all content including the title, introduction, time and image are placed .cd-timeline-block of DIV, multiple DIV form a sequence, and these DIV in
in. Note To see a demonstration of the effect in this case, you need a browser that supports HTML5 and CSS3.
<section id="cd-timeline" class="cd-container"> 
    <div class="cd-timeline-block"> 
        <div class="cd-timeline-img cd-picture"> 
            <img src="img/cd-icon-picture.svg" alt="Picture"> 
        </div> 
 
		<div class="cd-timeline-content">
			<h2>Achieving vertical axis response by HTML5 + CSS3</h2>
			<p>Timeline pages are generally used to show the main line to the time of the event, such as the company's corporate website development process, such as the common. This article will give you about a beautiful HTML5 and CSS3 based vertical axis, it can respond to the page layout for HTML5 development of PC and mobile phone WEB applications.</p>
			<a href="http://www.goocode.net/css/142-use-html5-css3-to-achieve-vertical-axis-response.html" class="cd-read-more" target="_blank">Read</a>
			<span class="cd-date">2015-03-16</span>
		</div>
    </div> 
    <div class="cd-timeline-block"> 
        ... 
    </div> 
     
</div> 

This example uses the svg image as an icon, you can also replace the png, gif format images.
CSS
We use the: before pseudo-class to create a vertical line in front of the Timeline # cd-timeline, then the contents of each node in the timeline will be based on these vertical lines.
#cd-timeline { 
  position: relative; 
  padding: 2em 0; 
  margin-top: 2em; 
  margin-bottom: 2em; 
} 
#cd-timeline::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 18px; 
  height: 100%; 
  width: 4px; 
  background: #d7e4ed; 
} 

Well, then we have to do, according to the size of the user's browser window to adjust the layout of the timeline, when the browser window is very large, each node content will be distributed on both sides of the timeline of the vertical line (vertical line center) when the browser window is small enough such as mobile phones, iPad in vertical screen browsing, each node content will be aligned to the right of the timeline vertical line (vertical line to the left), commonly known as the responsive layout.
.cd-timeline-block { 
  position: relative; 
  margin: 2em 0; 
} 
.cd-timeline-block:after { 
  content: ""; 
  display: table; 
  clear: both; 
} 
.cd-timeline-block:first-child { 
  margin-top: 0; 
} 
.cd-timeline-block:last-child { 
  margin-bottom: 0; 
} 
@media only screen and (min-width: 1170px) { 
  .cd-timeline-block:nth-child(even) .cd-timeline-content { 
    float: right; 
  } 
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before { 
    top: 24px; 
    left: auto; 
    right: 100%; 
    border-color: transparent; 
    border-right-color: white; 
  } 
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { 
    float: right; 
  } 
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { 
    left: auto; 
    right: 122%; 
    text-align: right; 
  } 
} 

CSS3 media screen size can be used to determine the device, perform different css styles depending on the size. This example also uses CSS3 shadows, rounded and other effects, the paper will not elaborate, we can refer to many online tutorials on the basis of CSS3, you can also directly download the source package, in this case the css all finishing in style.css file. Of course, you can also use JS and CSS3 on the basis of this case to increase the number of transition animation to the timeline, the effect might be better.

Category: CSS / HTML5

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
13 November 2017 17:44

Eve Dugan

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Workers on these languages can easily achieve the vertical axes know because the right guidance is very helpful. Students get highest grades because the use of best essays uk those are written by qualified writers of world.

<
  • 0 Comments
  • 0 Articles
10 December 2017 18:16

Summer Bronner

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
HTML 5 can be used by the people for achieving the vertical axis response in an appropriate manner. The tutorial of using the HTML 5 for this purpose have been shared by the essayontime.com review in the form of step by step and easy tutorials.

<
  • 0 Comments
  • 0 Articles
1 January 2018 19:14

sdfdsf

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
The Millenary, last updated in 2018, will be refreshed with three new models at rolex replica uk next month in Geneva, including two all gold versions set with diamonds and one gold case version with a strap. Chronograph comes in three dial rolex replica sale to meet whatever style preferences you might have when considering a dive focused chronograph. We are applying the final tests at the moment. here are some replica watches uk of the very first samples done. It is applied between polished sections on the stepped bezel and lugs, as well as to areas of the case side. The replica watches offset sub dials that record hours, minutes, and seconds are set with opal, a new dial material for this collection. Audemars Piguet also adds a fashion replica watches uk element to the strap version.

<
  • 0 Comments
  • 0 Articles
1 February 2018 20:40

Kimmy

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I am a student of computer science and I like to spend time in reading stuff related to it. This post is very informative for me which is about Use HTML5 + CSS3 to achieve vertical axis response. This website contains a lot of informative stuff for students like me and I will must recommend others to visit here.
Gymnastic mats UK

Information
Comment on the news site is possible only within (days) days from the date of publication.