HTML5 & CSS3 Toggle slideup and slidedown | NO JAVASCRIPT

While reading more about HTML5 & CSS3 I just found an amazing css3 button styling. This time I wanted to do something which I was doing from past 2 years using JQuery. In this tutorial I am going to teach you how to make a toggle slideDown and slideUp function using CSS3 and HTML5.



To achieve this we will have to know the pseudo element :Target.

Target element takes the href value and finds the element with its ID(value).

In this tutorial I am going to take the CSS3 styling from Tympanus and add my CSS3 function of toggle.

So here is the HTML structure

[html]
<div class="container">
<section>
<div id="container_buttons">
<h1>
HTML5 & CSS3 Toggle slideup and slidedown using NO JAVASCRIPT.
</h1>

<div style="clear:both"></div>
<ul>
<li class="toggle">
<a href="#One">A clock made in CSS3 | NO Javascript</a>
<p id="One">
Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first <a href="http://webstutorial.com/css3-clock/css3">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Two">Learn CakePHP From Novice to Professional : Part 2</a>
<p id="Two">
Model-View-Controller Cake enforces an MVC structure for your web applications. Basically, it effectively separates typical operations into specific areas: MODELS : for all your database interaction VIEWS : for all your output and displays CONTROLLERS : for all your commands/scripts for input and program flow The typical PHP application mixes each of these three functions <a href="http://webstutorial.com/learn-cakephp-novice-professional-part-2/framework">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Three">Learn CakePHP From Novice to Professional : Part 1</a>
<p id="Three">
This guide is for beginners to CakePHP. Whether or not you have much experience with the PHP scripting language, working in Cake will require some new methods you may or may not have tried before. If you don't know what a "has-and-belongs-to-many" relationship is, don't know how to build your own class object, or don't <a href="http://webstutorial.com/learn-cakephp-novice-professional-part-1/framework">Read more...</a>
</p>
</li>

<li class="toggle">
<a href="#Four">Google Maps Server Side Geocoding Using PHP and Infobox Fully AJAX</a>
<p id="Four">
Recently I got a new project of real estate where I had to display about 1000 of projects on the google map. I was having the address of 1000 projects, so I started with my php and js code. When I coded and started testing, I found that on the map only 20-30 markers were <a href="http://webstutorial.com/google-server-side-geocoding-php-infobox/website-tweaks/google">Read more...</a>
</p>
</li>

<li class="toggle">
<a href="#Five">Learn Codeigniter | Codeigniter Tutorial | Codeigniter Lessons | Part 1 | Webs Tutorial</a>
<p id="Five">
What is CodeIgniter? CodeIgniter is an open source PHP framework. This framework is used to build web applications and websites. CodeIgniter is best for developers who are into front-end development. It's easy to learn and it's fully flexibe. To learn CI (CodeIgniter), you should know PHP, MYSQL, OOPs and MVC. If you are new to <a href="http://webstutorial.com/codeigniter-tutorials-codeigniter-lessons-part-1/programming/php">Read more...</a>
</p>
</li>
</ul>

<em style="float: right;margin:10px 0;">Credits: <a href="webstutorial.com">WebsTutorial</a> & <a href="http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/" rel="nofollow" target="_blank">Tympanus</a></em>

</div>
</section>
</div>
[/html]

Here we are making a simple unordered list structure, each list consits an anchor tag and a paragraph tag. Anchor will have a href pointing to ID of a paragraph tag.

And the final CSS to toggle the paragraph tag is

[css]
li p {
display: none;
padding: 10px 20px;
}

li p:target{
display:block;
}
[/css]

A clock made in CSS3 | NO Javascript

Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first CSS3 clock. This clock has 3 hands: seconds, minutes and an hour. All hands by default start moving from 12.



In this tutorial we going to use some of the CSS3 major elements.

• Animation


• Transform


• Keyframes

All three elements need to be cross browser coded.

• For firefox -moz-


• For Chrome -webkit-

So here is the css code for seconds hand.

[css]
.seconds{
width:200px;
height:200px;
border-left:2px solid #2187e7;
display:block;
-moz-animation:rotate 60s infinite linear;
-webkit-animation:rotate 60s infinite linear;
border-radius:50%;
}
[/css]

The animation takes following properties:

animation:name duration timing-function delay iteration-count direction;

Here we are going to use name, duration, direction and iteration-count elements.

Our name is rotate, 60 seconds for one animation, direction will be linear and infinite loop animation.

Following is the keyframe code,

[css]
@-moz-keyframes rotate
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}
[/css]

We set points in this keyframe, the start point and the end point. In from point we will use transform element to rotate it from 0 degree and in to we set it till 360 degree. So in every animation it will rotate from 0 degree to 360 degree.

Similarly we code for the minute and the hour hand.

Entire Code:

[html]
<style>
body{background:#000000;}
#wrapper {
left: 40%;
padding: 10px;
position: absolute;
top: 20%;
width: 300px;
}
.seconds{
width:200px;
height:200px;
border-left:2px solid #2187e7;
display:block;
-moz-animation:rotate 60s infinite linear;
-webkit-animation:rotate 60s infinite linear;
border-radius:50%;
}

.minutes{
-moz-animation:rotate 3600s infinite linear;
-webkit-animation:rotate 3600s infinite linear;
width:100px;
height:100px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
display:block;
border-radius:50%;
position: absolute;
left: 61px;
top: 60px;
box-shadow: 0 0 35px #fff;
}

.hour{
-moz-animation:rotate 43200s infinite linear;
-webkit-animation:rotate 43200s infinite linear;
width:50px;
height:50px;
border-left:2px solid #fff;
border-right:2px solid #fff;
display:block;
border-radius:50%;
position: absolute;
left: 85px;
top: 87px;
box-shadow: 0 0 35px #fff;
}

@-moz-keyframes rotate
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}

@-webkit-keyframes rotate
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

.seconds span{
border-left: 1px solid #FFFFFF;
display: block;
height: 100px;
left: 100px;
position: relative;
top: 0;
width: 100px;
}

.minutes span{
border-left: 1px solid #FFFFFF;
display: block;
height: 50px;
left: 50px;
position: relative;
top: 0;
width: 50px;
}

.hour span{
border-left: 1px solid #FFFFFF;
display: block;
height: 25px;
left: 25px;
position: relative;
top: 0;
width: 25px;
}

</style>
<div id="wrapper">
<div class="seconds">
<span></span>
</div>
<div class="minutes">
<span></span>
</div>
<div class="hour">
<span></span>
</div>
</div>
[/html]

Learn CakePHP From Novice to Professional : Part 2

Model-View-Controller

Cake enforces an MVC structure for your web applications. Basically, it effectively separates typical operations into specific areas:

MODELS :	for all your database interaction
VIEWS :	for all your output and displays
CONTROLLERS :	for all your commands/scripts for input and program flow

The typical PHP application mixes each of these three functions in the same code, making it difficult to maintain and debug.



This is the typical flow for PHP scripting (see Figure 1-1):

1. The client sends a request to a PHP script by typing a URL or clicking a link of some kind.


2. The script processes the data and then sends the database requests directly to the database.


3. The script receives any database output and processes the data.


4. The script generates output and forwards it to the client’s browser.

In short, everything is contained in one PHP script. By using the include() function, developers strip out common functions into other external files, which makes it possible to reduce redundancy. The most complex PHP applications use objects that can be called anywhere in the application and modified depending on the variables and settings passed to them. Developers, when using objects and classes, can structure the application in numerous ways.

MVC improves upon the typical PHP flow and is an effective technique for making class objects available over the whole application. The main goal behind MVC is to make sure that each function of the application is written once and only once, thus streamlining code by reducing redundancy. Cake accomplishes this goal by not only providing the resources to make MVC possible but also by using a consistent method for where to store operations in the application. Simply naming your own files a certain way allows Cake to piece together the various resources without using any code specifications.



MVC can vary depending on the framework with which you’re working, but generally it works as follows (see Figure 1-2):

1. The client sends a page request to the application, either by typing a URL or by clicking a link of some kind. By convention, a typical URL is usually structured like this:
   

   http://{Domain}.com/{Application}/{Controller}/{Action}/{Parameter 1, etc.}

   
   


2. The dispatcher script parses the URL structure and determines which controller to execute. It also passes along any actions and parameters to the controller.


3. The function in the controller may need to handle more data than just the parameters forwarded by the dispatcher. It will send database requests to the model script.


4. The model script determines how to interact with the database using the requests submitted by the controller. It may run queries with the database and do all sorts of handy data-sorting instructions.


5. Once the model has pulled any data from or sent data to the database, it returns its output to the controller.


6. The controller processes the data and outputs to the view file.


7. The view adds any design or display data to the controller output and sends its output to the client’s browser.

The benefit of using MVC to develop web sites is that repeated functions or tasks can be separated, thus allowing for quicker edits. It can even help in debugging. Say an error keeps occurring during the interaction with the database. Usually the problem will be somewhere in a model. Knowing that all database interactions occur in just one place makes it easier to solve problems.