Fullscreen Layout with Page Transitions

A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.

View demo Download

Today we’d like to share an experimental responsive layout with you. Initially, the layout shows four flexible boxes. When clicking on a box, it will expand to fullscreen and the others will scale down and fade out. When closing the current view, it will move back to the intial 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 transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.

The beautiful illustrations used in the works section of the demo are by talented Isaac Montemayor.

Let’s take a look at some screenshots:

The initial screen has the four flexible boxes. Resize the browser window to see them adapting fluidly.

When clicking on a box, it get’s expanded to fullscreen.

The view of a box that is expanded. A content are is revealed and we add a scroll to it when needed.

In the works section, we add a thumbnail grid which will reveal a details panel once we click on an item. The page transition here is the new item sliding in from the bottom and the old view scaling down and disappearing in the back.

The navigation through the items has the same page transition. When we close the item view, it will transition back down and the works view will scale back up again.
We hope you like this little experiment and find it inspiring!

FIND THIS PROJECT ON GITHUB

Article By : Mary Lou
Permalink : http://tympanus.net/codrops/2013/04/23/fullscreen-layout-with-page-transitions/

Overlay-like Effect with J-Query

Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay. This allows to focus certain elements in a web page while making others appear less prominent.

First, we need to define which elements we want to apply the effect to, meaning that we either want to animate the element’s opacity or color, or both. To the elements we want to fade, we will give the class “e-fade” and to the elements we want to change the color, we will give the class “e-color”. For any of these elements, no matter if we apply one or the other, or both classes, we will need to give the class “effect”.

An example for using these classes is the following HTML structure:

<!-- Animates the color -->
<h2 class="effect e-color">Custom effects with jQuery</h2>

<!-- Animates the opacity -->
<h2 class="effect e-fade">Custom effects with jQuery</h2>

<!-- Animates both color and opacity -->
<h2 class="effect e-color e-fade">Custom effects with jQuery</h2>
In our example we will use a menu to trigger the animation events. When we mouse over the menu items, the regarding element’s effects will get executed.

To enhance certain elements, we will have one more class, one that will let us know that these elements should be left untouched by the animations. This will give us the possibility to focus on certain elements.
The class name will be the same like the ID for one of the menu items. That way, we are creating a relation between them:

<ul id="menu" class="menu">
<li><a href="#"><img src="images/1.png" alt="1"/></a></li>
<li><a href="#"><img src="images/2.png" alt="2"/></a></li>
<li><a href="#"><img src="images/3.png" alt="3"/></a></li>
<li><a href="#"><img src="images/4.png" alt="4"/></a></li>
<li><a href="#" id="effect-n"><img src="images/5.png" alt="5"/></a></li>
</ul>
...
<h3 class="effect-n">Vapour around me</h3>

As you can see, the last menu item will receive the respective ID and the h3 will receive a class with the same name. So, when we hover over that menu item, all the other elements (that have the previous effect classes) will be animated, except this one.

Now, let’s look at the JavaScript.
Let’s start by caching some elements:

var $menu = $('#menu'),
$container = $('#container'),
$content = $container.find('.content');

We will add the classes for the effects using jQuery instead of going to each single element in the HTML and adding it “manually”:

$content
.find('p')
.addClass('effect e-fade')
.end()
.find('h1, h2, h3')
.addClass('effect e-fade e-color');

Now we will get all the elements that have the class “effect” and define the OverlayEffect function that will take care of the animations:

var $elems = $(document).find('.effect'),
OverlayEffect = (function(){
//speed for animations
var speed = 1000,
//the event that triggers the effect
eventOff = 'mouseenter',
//the event that stops the effect
eventOn = 'mouseleave',
//this is the color that the elements will have after eventOff
colorOff = '#AAAAAA',
//saves the original color of each e-color element,
//and calls the methods to initialize the events
init = function() {
$elems.each(function(){
var $el = $(this);
if($el.hasClass('e-color'))
$el.data('original-color',$el.css('color'));
});
initEventsHandler();
},
//initializes the events eventOff / eventOn
initEventsHandler = function() {
$menu
.delegate('a',eventOff,function(e){
//relation is the id of the element,
//and the class of related elements
var relation = $(this).attr('id');
animateElems('off',relation);
return false;
})
.delegate('a',eventOn,function(e){
var relation = $(this).attr('id');
animateElems('on',relation);
return false;
});
},
//animates the color and / or opacity
animateElems = function(dir,relation) {
var $e = $elems;
switch(dir){
case 'on' :
//if there are elements on the page with class = relation
//then these elements will be excluded from the animation
if(relation)
$e = $elems.not('.'+relation);
$e.each(function(){
var $el = $(this),
color = $el.data('original-color'),
param = {};
if($el.hasClass('e-color'))
param.color = color;
if($el.hasClass('e-fade'))
param.opacity = 1;
$el.stop().animate(param,speed);
});
break;
case 'off' :
if(relation)
$e = $elems.not('.'+relation);
$e.each(function(){
var $el = $(this),
param = {};
if($el.hasClass('e-color'))
param.color = colorOff;
if($el.hasClass('e-fade'))
param.opacity = 0.1;
$el.stop().animate(param,speed);
});
break;
}
};
return {
init : init
};
})();
/* call the init method of OverlayEffect */
OverlayEffect.init();
});

And that’s it!
I hope you enjoyed this tutorial and find it useful!

Download

http://tympanus.net/Tutorials/OverlayLikeEffect/

Demo

http://tympanus.net/Tutorials/OverlayLikeEffect/OverlayLikeEffect.zip

Written by Mary Lou
Detail Info : http://tympanus.net/codrops/author/crnacura/
Website : http://tympanus.net/

Collection Css Reset

CSS Reset adalah sekumpulan kode CSS yang dirancang sedemikian rupa sehingga setiap style pada setiap element memiliki nilai default yang serupa. Dengan adanya berbagai browser dengan core yang berbeda, tak heran jika ada beberapa element pada user agent tersebut memiliki nilai yang tak sama. CSS Reset memudahkan web designer untuk mendesign web secara cross-browser dengan memberikan starting value yang sama bagi setiap browser. Manfaat lainnya adalah untuk menghindari bug-bug CSS dengan memberikan default value yang “seharusnya ada” pada masing-masing element. Umumnya bug-bug tersebut berada pada Internet Explorer versi 6 ke bawah. Berikut ini adalah kumpulan CSS Reset dapat anda gunakan untuk memulai CSS anda. Selalu tempatkan CSS Reset di awal untuk mendapatkan hasil yang diinginkan.

Minimalistic Reset — Version 1
As basic as it gets, this global reset employs a wildcard selector to reset the padding and margins on all elements to zero. In my experience snooping around the source code of other designers, this is the most commonly used CSS reset. I see it everywhere..
* {
padding: 0;
margin: 0;
}

Minimalistic Reset — Version 2
This reset is identical to the previous one, but also takes into account all default border treatments, which are effectively neutralized to zero as well..
* {
padding: 0;
margin: 0;
border: 0;
}

Minimalistic Reset — Version 3
This last version of the ―minimalistic‖ reset is similar to the previous two, but also kills the default outline style..
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}

Condensed Universal Reset
This is my current favorite CSS reset. It handles all the essentials, and ensures relatively universal default browser-style uniformity.
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}

Poor Man’s Reset
I have no idea what to call some of these CSS reset rules. I named this one as I did because it seems to focus on a minimal collection of default browser styles. The CSS resets padding and margins on only the html and body elements; ensures that all font-sizes are reset; and removes the border from image links. These are all important aspects of any CSS design, and this reset takes care of all of them. If you happen to know the source of this ruleset, please drop us a comment. Otherwise, check it out..
html, body {
padding: 0;
margin: 0;
}
html {
font-size: 1em;
}
body {
font-size: 100%;
}
a img, :link img, :visited img {
border: 0;
}

Siolon’s Global Reset
Chris Poteet along with ―various influences‖ created this remarkable technique for resetting default browser styles. Chris recommends placing the reset at the top of your style sheet for optimal cascading results. This method omits reset styles involving inline and block display elements. Also, remember to explicitly set margin and padding styles after implementing the reset. Note the unique margin-left 40px; declaration for lists and blockquotes, and the margin 20px 0; for headings, forms, and other elements:
* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Shaun Inman’s Global Reset
Although I am not sure if Shaun actually wrote this particular CSS ruleset (although it is likely he did), it happens to be the CSS reset used to neutralize styles for his current, Helvetica/monochrome site. Although I have taken the liberty of restructuring the presentation of this reset for the sake of clarity (I have made no functional changes), this is some pretty tight CSS, implementing a choice set of rules to reset many critical default browser CSS styles.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}

Yahoo CSS Reset
The folks at Yahoo! have also developed their own browser reset styles. As with other reset styles, the Yahoo! Reset CSS eliminates inconsistently applied browser styling for many key (X)HTML elements.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}

Eric Meyer’s CSS Reset
As discussed in the original article, CSS guru Erik Meyer set forth to create a universal set of reset styles. This is heavy-duty stuff, effectively neutralizing virtually every significant aspect of default, browser-applied CSS rules. This reset ruleset is far-reaching, resetting many different CSS properties. Keep this in mind during subsequent CSS development. If you experience unexpected, unexplainable behavior happening with your styles, begin by investigating and eliminating suspected aspects of this code (or any newly added reset styles) as the possible culprit — you’ll thank yourself later.. ;) In the meantime, I have taken the liberty of reformatting the presentation of Eric’s code. Rest assured, the rules have merely been rearranged. Functionally, the code is identical. Update: Eric’s site now features an official Meyer CSS Reset page, serving as a permanent location for the most current version of the reset code.
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* remove possible quote marks (") from &
*/
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Condensed Meyer Reset
Although I am uncertain as to the original source of this particular CSS reset, it appears as if it is a condensed, slightly modified version of the Meyer reset. Many of the same declarations are made, and many of the same styles receive neutralizing treatments. Many attributes are not mentioned, however, resulting in more
streamlined, less invasive reset collection. Note the duplicate declarations for he heading attributes (e.g., h1 – h6), which seems to prevent font-weight and ont-size normalization from affecting paragraphs, divisions, and the other non-heading attributes addressed in the first declaration.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
fieldset, img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}