When closing the current view, it will move back to the initial position while the other boxes come back up again. Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back.
All effects are done with CSS 3 transitions and controlled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.

If you feel like you are trapped, use the ‘escape’ key to get back to the homepage.

This is my variation of the CSS 3 Full screen Page Transitions.

For example – this is how I would display the work panel on click:


z-index: 1000;
opacity: 1;
-webkit-transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transform: translateY(-100%);
-moz-transition: -moz-transform 0.5s ease-in-out;
transform: translateY(-100%);
transition: transform 0.5s ease-in-out;
-ms-transform: translateY(-100%);


This is how I would hide that work panel upon close:


opacity: 0;
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-webkit-transform: translateY(-100%) scale(0.5);
-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-moz-transform: translateY(-100%) scale(0.5);
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
transform: translateY(-100%) scale(0.5);
-ms-transform: translateY(-100%) scale(0.5);
z-index: 0;


All of the transformations occur with valid css, but the actions are triggered by basic javascript functions. The functions are kept in a separate JS file just for the ease of visualizing how the triggers work. You might have an easier time viewing the actual source once you check out the live demo.

The key component to the functionality of the CSS is the timing mechanism.

The animation for the box itself is the following:

@keyframes fadeOut {
    0%  { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; transform: translateY(0px);}
    99% { opacity: 0; transform: translateY(-30px);}
    100% { opacity: 0; }
}

I called it “fadeOut” but it actually fades the box in first and then it makes it fade out and move up a bit.

The animation for the progress bar looks like this:

@keyframes runProgress {
    0%  { width: 0%; background: rgba(255,255,255,0.3); }
    100% { width: 96%; background: rgba(255,255,255,1); }
}

We animate the width to 96% (left was 2% so we want it to stop 2% from the right as well) and the opacity of the RGBA value.

The duration of the progress bar animation will be a bit less than the duration of the box animation, since we will start it later (the box needs to fade in first).

Here is how you could do it:

.tn-box.tn-box-hoverpause:hover, 
.tn-box.tn-box-hoverpause:hover .tn-progress{
    animation-play-state: paused;
}

These simple CSS properties only give the functionality behind the piece. The amazing styling can be seen at the tutorials home where the author did a great job making these look like beautiful banner ads with pure CSS. It is definitely worthy of a bookmark. I really wish I could put a demo up on this blog instead of a link, but WordPress makes my CSS conflict ironically enough.

See a Demo Here

Read More at the Tutorial Site – http://tympanus.net/codrops/2012/06/25/timed-notifications-with-css-animations/

Step 1 – Hide the boxes


input[type=radio],
input[type=checkbox] {
display: none;
}


Step 2 – Stylize the before


.radio label:before {
border-radius: 8px;
}
.checkbox label:before {
border-radius: 3px;
}


Step 3 – Stylize the after


input[type=radio]:checked {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}

input[type=checkbox]:checked {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}


What you get is something like this:

Working Demo Here

So what does this mean for your role?

You need to develop the site so that the text, media, and navigational elements scale with browser size.

How do you do that properly? I prefer to build it in a fluid environment where I utilize min and max widths to help restrict confusion and keep a consistent brand that scales as you make the browser window smaller.

The three images are just with my browser on the desktop scaling, it looks great on a tablet and phone. Everything is touch-enabled thanks to Twitter bootstrap.

My Framework at www.Lechlak.com


.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
float: right;
}


The new border properties in CSS3 are:
-border-radius 
-border-shadow
-border-image

border-radius allows one to edit all four corners of the border.
border-shadow allows one to add a shadow to the border.
border-image allows one to use an image as a border.

Code

Output

Flex Container
-Parent element in which flex item are located in

Flex item
-The child of a flex container (the parent).

Direction
-Leftwards
-Rightwards
-Downwards
-Upwards

What Are Flexible Box/Flex Box

Flexible Box/Flex Box is a box model optimized for interface design in CSS3. One of the major pros of flexible box/flex box is that floats are not used. Flexible Box/Flex Box is easy to use and powerful tool for distributing space and aligning contents. Using flexible bix/flex box box model flex containers are used this can be considered as the parent. The parent naturally has children; the children are termed as flex item. The flex items have numerous advantages some of these are:
-They can be laid out in any direction
-They can “flex” their size to fill unused or available space
-They can shrink to avoid overflowing the parent (flex container)
-Their style order can be rearranged at the style layer

Implementing the Flex Layout

Implementing the Flexible Box/Flex Box
Set the “display” property to -ms-flexbox (block-level ) or -ms-inline-flexbox (inline)
To set the orientation of the flex-items (children) set property “-ms-flex-direction” to either row or row-reverse or column or column-reverse or inherit.

Creating the Flex Container
Sample Code 

Entire Code 

Output
 

The first and foremost consideration for responsive design is width. The two main options for website widths apply to responsive design – you can either use a fixed width (usually the 960px standard) or a full-width design intended to accomodate orientation and device differences. Note – if you choose to go with the fixed width route, you may have to work with the “viewport” meta tag to get it to behave appropriately across some mobile devices.

In terms of your overall layout on a mobile device, there may not be a whole lot of changes unless you want different UI techniques to be targeted towards mobile users. However, you may want to consider each area of your layout in terms of mobile use. For instance – that awesome banner header may read more like ‘fine print’ when it’s scaled down to fit the horizontal width of an iPhone. Consider using your “@media” style rules to substitute a taller, skinnier top header.
For sidebars, try making their containers full width, then work in a “clear:both;” to make the sidebar wrap above or below the adjoining content area.

In the glitz and glamor of a great design, one thing that occasionally gets left out of the thought processes is file size. This is especially true with responsive or mobile designs, where your mobile users are going to be much more sensitive about the full size of each rendered web page. To address this, one idea might be to remove unnecessary background images using “background-image:none” (or “background:none” to remove the background color as well) or switch to smaller-filesize background images.

Probably the trickiest part of responsive design is dealing with the menu. Most drop-down menus won’t be friendly to touch-screen users, even if they do work as expected. Taking a look at existing responsive and mobile-friendly designs, you’ll see a common trend – throwing out the existing menu type, and replacing it with either a “picker” or a simplified “tabbed” menu.  While this can be somewhat of a patent mindfield, try looking at sliders and “picker” UI examples – as a quick check shows dozens if not hundreds of differnet slider and UI control projects. On a final note, however – make sure to pick a relatively small snippet for the menu on mobile devices. Some animation and effects libraries normally used can be over 100k alone, so it can certainly add up and pile on extra seconds for 3G users.

On a non-development note: be careful which mobile technologies you use in your development – especially if it’s going to be part of a commercial development or product. Ongoing patent battles between some of the larger mobile device makers have called into question common navigation techniques such as the menu replacement as possibly falling under some of their patents. When in doubt, consult a legal professional.

In conclusion, make sure to consider even the finer points when building your website to support traditional web browsers and mobile devices.  A little forethought can go a long way towards giving your users the best possible browsing experience,  even with relatively simple changes.

By Ryan Bishop, Front-end web developer at Austin Themes

The idea for this comes from the slider of the Kendo UI homepage, a framework for modern HTML UI. After we got some requests and questions about how to do something like that, they decided to recreate the effect.

The HTML structure is going to consist of a main container with the class “pxs_container”. We will add a wrapper for the three different backgrounds which we will animate differently to create the parallax. The background images will have some transparency since we want to see them moving on top of each other.

We will also add a loading element and the two unordered lists for the full images and the thumbnails. Further, we will add the navigation elements.

< div id="pxs_container" class="pxs_container">
< div class="pxs_bg">
< div class="pxs_bg1">< /div>
< div class="pxs_bg2">< /div>
< div class="pxs_bg3">< /div>
< /div>
< div class="pxs_loading">Loading images...< /div>
< div class="pxs_slider_wrapper">
< ul class="pxs_slider">
< li>< img src="images/1.jpg" alt="First Image" / >< /li>
< li>< img src="images/2.jpg" alt="Second Image" / >< /li>
...
< /ul>
< div class="pxs_navigation">
< span class="pxs_next">< /span>
< span class="pxs_prev">< /span>
< /div>
< ul class="pxs_thumbnails">
< li>< img src="images/thumbs/1.jpg" alt="First Image" />< /li>
< li>< img src="images/thumbs/2.jpg" alt="Second Image" />< /li>
< /ul>
< /div>
< /div>

The options for the slider are the following:

• auto: How many seconds to periodically slide the content. If set to 0 then autoplay is turned off.
• speed: Speed of each slide animation
• easing: Easing effect for the slide animation
• easingBg: Easing effect for the background animation
• circular: Circular slider
• thumbRotation: The thumbs will be randomly rotated

Example: www.Lechlak.com

A linear gradient defines a color change along a specified line. Each point on the line has a particular color. The width of the line, perpendicular to the direction of the line, extends to the edges of the gradient’s container. You can use a linear gradient to fill any two-dimensional shape. By default, a linear gradient changes colors from top to bottom.

Changes to Gradients
1. Below is a summary of the major changes to CSS gradients over the past year:
Angles in linear-gradient() changed from polar angles to bearing angles (compass directions). 0° now points up (bottom-to-top), and angles increase clockwise. See Angles in Gradients for the feedback that informed this decision.

2. Keyword directions in linear-gradient() changed from bare directional keywords (top, right, bottom, left) indicating the starting point to to ‹keyword› where the keyword indicates the endpoint. (to bottom, to left, to bottom, to left). This change was made because Tab felt having 0deg mean bottom-to-top made the fact that top meant top-to-bottom confusing. The WG was split but mostly ambivalent on whether this was necessary, or whether from ‹keyword› was a better alternative; the resolution landed on to ‹keyword›.

3. Corner-to-corner linear-gradient() has been redefined so that instead of aligning the gradient line to the diagonal, the central color occupies the other diagonal. See Behnam Esfabad’s post for a demonstration showing the old and new (“magic”) versions.

4. Syntax of radial-gradient() has been changed to (roughly) radial-gradient( [ ‹size› || ‹shape› ] [ at ‹position› ]?, ‹color-stop-list› ): specifically, the shape/size and position parameters are collapsed into the first argument using CSS property value conventions, allowing either or both to be specified. Position is distinguished from size by the preceding at keyword. See Radial Gradient Readability for some of the thinking that went into this change.

Thanks to CSS.info for the great detail!

body {
background:
url(img.png) no-repeat 50% 300px,
linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
}

.verticalStripes {
background-color: gray;
background-size: 50px;
background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
background-image: -moz-linear-gradient(0px 50%, transparent 50%, rgba(255, 255, 255, 0.5) 50%);
background-image: -ms-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
background-image: -o-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
}

.verticalStripes {
background-color: #99d0d4;
background-size: 10px;
background-image: -webkit-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
background-image: -moz-linear-gradient(0px 50%, transparent 90%, rgba(255, 255, 255, 0.25) 50%);
background-image: -ms-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
background-image: -o-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
}