Month: April 2012

Categories
CSS CSS3

CSS3: Background gradients

The best way to produce your background gradients is using generators:
http://www.colorzilla.com/gradient-editor/
background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);
The first argument (90 deg) indicates the direction of the gradient. By default is from top to bottom.
The second is the starting color, and the third (0%) is where the starting color start changing and diluting itself.
The second argument after the comma is the end color. The 50% indicates where in the container the color will end up being this #e4e4e4 color. In this case 50% because we have a third argument.
A third argument means we will have three colors in the background.
You can also get radial gradients:
background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);
center indicates where the radial effect epicenter will be, you can also specify something like 25px 25px for example, to start 25px from the top, and 25px from the left
You can also specify repeating lines in the background, like:
background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px);
This will produce radial lines every 5 px.
Here's an amazing gallery with some of the amazing background effects that can be accomplished with CSS:
http://lea.verou.me/css3patterns/
Categories
CSS CSS3

CSS3: box-shadow property

-ms-box-shadow: 0px 3px 5px #444444;
-moz-box-shadow: 0px 3px 5px #444444;
-webkit-box-shadow: 0px 3px 5px #444444;
box-shadow: 0px 3px 5px #444444;

First setting is horizontal offset, second is vertical offset, third is blur, and fourth is color.

And actually, there is an optional argument, spread, between blur and color. It is used to control how long the shadow will spread.

If you want to create an extra border, you can use this one as follows: set blur to 0px, and spread to 1px (or the number of pixels you want your border to be.

If what you want to accomplish is inset shadows (shadows inside the box), use the following:

box-shadow:inset 0 0 40px #000000;

Notice the “inset” keyword, and 0 0 for horizontal and vertical offset.

You can use multiple shadows too:

box-shadow: inset 0 0 30px hsl(0, 0%, 0%), inset 0 0 70px hsla(0, 97%, 53%, 1);

Notice how we are using Hue Saturation Lightness colors, as well as alpha for the last example.

Categories
CSS3

CSS3: Multi-columns based on CSS

Given the following HTML:

<div id=”main” role=”main”>
<p>lloremipsimLoremipsum dolor sit amet, consectetur
// LOTS MORE TEXT //
</p>
<p>lloremipsimLoremipsum dolor sit amet, consectetur
// LOTS MORE TEXT //
</p>
</div>

#main {
column-width: 12em; /* Will produce several columns the size of 12em, automatically adjusting the number of columns as the viewport adjust */

column-gap: 2em;

column-rule: thin dotted #999;
}

or

#main {
column-count:  3; /* You will get 3 columns */
}

When you have long strings, sometimes your columns will break, in order to wrap the string content into two or more lines, you want to use:

word-wrap: break-word;

Categories
CSS3

CSS3: Rounded corners

.round{
-moz-border-radius: 10px; /* Mozilla (e.g Firefox) */
-webkit-border-radius: 10px; /* Webkit (e.g. Safari and Chrome) */
border-radius: 10px; /* W3C */
}

This is the whole enchilada with yet more browsers support:

.round{
-khtml-border-radius: 10px; /* Konqueror */
-rim-border-radius: 10px; /* RIM */
-ms-border-radius: 10px; /* Microsoft */
-o-border-radius: 10px; /* Opera */
-moz-border-radius: 10px; /* Mozilla (e.g Firefox) */
-webkit-border-radius: 10px; /* Webkit (e.g. Safari and Chrome) */
border-radius: 10px; /* W3C */
}

note that border radius don’t have to be circular, and you can modify the circumference of it: https://jsfiddle.net/ramiror/Lkvsar8o/1/

so this kind of definition is actually right and supported:

border-radius: 15px 45px 20px 20px / 15px 45px 20px 20px;

Categories
HTML5 Videos

HTML5 audio and video

<video width=”640″ height=”480″ controls autoplay preload=”auto” loop poster=”myVideoPoster.jpg”>

<source src=”video/myVideo.mp4″ type=”video/mp4″>

<source src=”video/myVideo.ogv” type=”video/ogg”>
<object width=”640″ height=”480″ type=”application/x-shockwave-flash” data=”myFlashVideo.SWF”>
<param name=”movie” value=”myFlashVideo.swf” />
<param name=”flashvars” value=”controlbar=over&amp;image=myVideoPoster.jpg&amp;file=video/myVideo.mp4″ />
<img src=”myVideoPoster.jpg” width=”640″ height=”480″ alt=”__TITLE__”
title=”No video playback capabilities, please download the video below” />
</object>
<p> <b>Download Video:</b>
MP4 Format: <a href=”http://myVideo.mp4″>”MP4″</a>
Ogg Format: <a href=”http://myVideo.ogv”>”Ogg”</a>
</p>
</video>

controls: will show the controls for the video

preload: pretty much the same as buffer

loop: automatically loops when the video ends

poster: the initial video image placeholder

<source> tags: if a format is not available in the current browser, it will play the next one up

All other HTML content, including the <object> flash tag are there just in case the current browser don’t support HTML5.

Audio pretty much the same, except it doesn’t have height, width and poster attributes:

<audio controls =  "controls">
    <source src =  "music.ogg" type =  "audio/ogg" />
    <source src =  "music.mp3" type =  "audio/mpeg" />
      Your browser does not support HTML5 Audio. Please shift to a newer browser.
</audio>

You can also add audio tags dynamically, via JavaScript:
<script>
    //Create a new Audio object
    var sound = new Audio();
    // Select the source of the sound
    sound.src = "music.ogg";
    // Play the sound
    sound.play();
</script>

To test if certain audio format can be played in the current browser:
if (audio.canPlayType) {
           // Currently canPlayType() returns: "", "maybe", or "probably"


To check if an audio file has finished loading:
<script>
    if(soundFileExtn) {
        var sound = new Audio();
        sound .addEventListener('canplaythrough', function(){
            alert('loaded');
            sound.play();
        });
        // Load sound file with the detected extension
        sound.src = "bounce" + soundFileExtn;
    }
</script>
Categories
CSS CSS3

CSS: About Responsive Design and creating fluid layouts

What is it?

1) Fluid images

img
{
   max-width: 100%;
   height: auto;
}

2) Fluid grids

3) Media queries

Steps:

1) Code the site with pixels, as usual, to match the current comp or design provided.
2) Use a #wrapper envelop for the entire content, so you can set that as your anchor.
3) Once your page looks pixel perfect according to the design, change the width of #wrapper to any number between 90% and 100%, whatever looks good. You can also use the max-width at this point to avoid the content growing after a certain point where things gets distorted.
4) Now, start calculating the percentages of the elements inside #wrapper, using the formula: target ÷ context = result.
For example: if #wrapper width was 960px before converted to percentages, and .header element inside #wrapper was 940px:
width: 97.9166667%; /* 940 ÷ 960 it was width: 940px on a 960px container before */
5) You basically work your way in to all the elements. You don’t need to round the numbers! The more precision you give to the browser, the better.
6) For fonts: set thefont-size to 16px (it is the default anyways in most browsers), and then use the same formula to calculate the percentages everywhere else: target ÷ context = result
7) For images, all you need is to envelop them in containers that have percentages specified:
img,object,video,embed {
max-width: 100%;
}
So as the containers scale, so does the image. Notice that this can also be applied to video and embed tags. If a given image doesn’t look good after certain width, you can restrict the grow by setting max-width: [size where the image start getting distorted]

8) If any part or element in the page still looking distorted or bad, you can use media queries at this point to adjust either font sizes or spaces, to be able to get things back into place. An example below of how font sizes are adjusted in a nav menu to make them look fine in different viewports:

@media screen and (min-width: 1001px) and (max-width: 1080px) { #navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
#navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
#navigation ul li a { font-size: 1.1em; }
}

9) A nice addition to a responsive page, to avoid the elements to “snap” to their new settings, as the page change viewports, is:

* {
transition: all 1s;
}

This will ease elements to their new settings as they readjust themselved.

Categories
CSS IOS iphone

Iphone specs

Size (in pixels): 320 x 480

Categories
CSS3

CSS3: background gradients

You don’t need no stinky images:

background-color: #42c264;
background-image: -webkit-linear-gradient(#4fec50, #42c264);
background-image: -moz-linear-gradient(#4fec50, #42c264);
background-image: -o-linear-gradient(#4fec50, #42c264);
background-image: -ms-linear-gradient(#4fec50, #42c264);
background-image: -chrome-linear-gradient(#4fec50, #42c264);
background-image: linear-gradient(#4fec50, #42c264);

Where: The first entry is for old browsers (solid color).
In between parentesis are the starting and ending colors.

Categories
CSS CSS3

CSS: Transitions, Animations and Transformations.

Some examples here

Transitions: when a certain CSS property change, the change won’t happen abruptly, but overtime:

#box {
transition-property: opacity, left;
transition-duration: 3s, 5s;
}

So when element #box experience a change in opacity or left, the change will take 3 and 5 seconds respectively.

Here’s an example of all the transition properties:

#content a {
…(more styles)…
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}

Or combined in just one line:

#content a {
/*…existing styles…*/
transition: all 1s ease 0s;
}

Example with the current vendor prefixes:

-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;

You can define different transition times for different properties:

#content a {
…(more styles)…
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}

According to the spec, these are the CSS properties you can apply transitions to:

http://www.w3.org/TR/css3-transitions/#properties-from-css-

Animations don’t passively wait for properties to change (as transitions do), they are explicitly triggered by, say, adding the right class to a DOM object, for example:

.warning {
animation-name: ‘horizontal-slide’;
animation-duration: 5s;
animation-iteration-count: 10;
}

@keyframes ‘horizontal-slide’ {

from {
left: 0;
}

to {
left: 100px;
}

}

Example of @-webkit-keyframes

When .warning is applied to an element in the DOM, we get the animation working, specified by the keyframes, and with a certain duration and number of iterations.

With 2D transformations, you can scale, rotate and move point of origin on elements, based on CSS settings:

#box.move-me {
height: 100px; width: 100px;
transform: translate(50px, 50px) scale(1.5, 1.5) rotate(90deg);
}
The foregoing example moves #box by 50 pixels in both the X and Y directions, scales the element by
150%, and then rotates it 90 degrees clockwise about the z axis.

Here’s the breakdown of the particular properties:

transform: scale(1.7); /* size the object 170% of its current size */

transform: translate(40px, 0px); /* Move the object 40px horizontally, and 0 vertically, settings can be negative values, or percentages */

transform: rotate(3600deg); /* Make elements rotate, big values will make elements spin as they land in their current setting */

transform: skew(10deg, 2deg); /* Same skew as photoshop, if only one value provided, it will apply for both: x and y axes */

transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); /* Combine all the above, in one line */

transform-origin: 20% 20%; /* move the current center of the object 20% horizontally, and 20% vertically */

Categories
JavaScript

Javascript patterns: namespacing your objects.

Avoid clustering the global scope.

Start with uppercase (recommended):

var MYAPP = MYAPP || {};

To be able to construct objects with several levels of deepness, use the following utility function:

var UTILITIES = UTILITIES || {};
UTILITIES.namespace = function (ns_string) {
var parts = ns_string.split(‘.’),
parent = MYAPP,
i;

// strip redundant leading global
if (parts[0] === “MYAPP”) {
parts = parts.slice(1);
}

for (i = 0; i < parts.length; i += 1) { // create a property if it doesn't exist if (typeof parent[parts[i]] === "undefined") { parent[parts[i]] = {}; } parent = parent[parts[i]]; } return parent; };