Angular 5 : Services and Dependency Injection



Let's look some definitions to understand the subject.

A Service is a functionality that can be shared with different Components. Whenever we find some common aspects in our components, we usually separate it out as a Service.

Dependency Injection is a coding pattern in which a class takes the instances of objects it needs which is called dependencies from an external source rather than creating them itself.

In Angular, services are Singleton. It internally implements the Service Locator Pattern. This means each service register itself under one container as a single instance. Angular provides a built in Injector which acts as a container to hold the single instances of all registered services. Angular takes care of creation of Service instance and registering it to the Service container.

The @Injectable() decorator

To inject the service into component, Angular provides an Injector decorator : @Injectable().

We broadly have the following steps to create a Service:

1) Create the service class
2) Define the metadata with a decorator
3) Import what we need.


To understand the Service more, let's built a service in Angular for getting the user profile details in the User component. Let's create some classes:

1. IProfile interface

export interface IProfile{
  Name: string;
  Age: number;
}

2. Profile Class

import {Component, Injectable} from '@angular/core'
import {IProfile} from './iprofile'

@Component({
  selector: 'profile',
  template: `
    <div>
      <h2>Name : {{MyProfile.Name}}</h2>
      <h2>Age : {{MyProfile.Age}}</h2>
    </div>
  `
})
export class Profile{
  MyProfile : IProfile;
  constructor(){
  }
}

3. ProfileService class

import {Injectable} from '@angular/core'
import {IProfile} from './iprofile'

@Injectable()
export class ProfileService{
  getProfiles(): IProfile[]{
    return [{
      Name:'Bob',
      Age: 25
    },
    {
      Name:'Alice',
      Age: 23
    }];
  }
}




Registering a Service:

A Service can be registered in any component. However, it should be registered at root level component only. This is because it we register at two different nested level component, then the service will have two entire different instances in both components. However, we can register at any nested level component just in case if we require to use the service in that component or it's child components only.


In above figure,
1. The "Service 1" is registered at app level, so it is available to all the nested components.
2. The "Service 2" is registered at "Parent 1" component, so it is available to Parent 1, Child1, Child2 and Child 3 components.
3. The "Service 3" is registered at "Child 1" component, so it is available to "Child 1" only, as no other component comes under its hierarchy.
4. The "Service 4" is registered at "Parent 2" component, so it is available to Parent 2 and Child 4 only.

Now, if we try to register "Service 1" both in root component and "Parent 1" component, then it's two instances will be created. That is why, we should register the service at an appropriate component level as per it's usage.

Continuing with our example, Import ProfileService and change the @NgModule() decorator of root level component as:

import {ProfileService} from './profile.service';

.
.
.

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  providers:[ProfileService],
  bootstrap: [ App ]
})





Injecting a Service in component:

We can inject our service as a parameter to our constructor class.

constructor(private _profileService: ProfileService){
   
}

Now, we can execute the methods of our service to get the data. We can call the service method inside our constructor, but what if the service wants to pull to data from backend. We don't want the construction of our class halted till the time we pull the data.
A better solution would be to implement the OnInit interface hook provided by Angular and call the service method inside ngOnInit() function. (Know more about Angular hooks here.)

Modify the Profile class as below:

import {Component, Injectable} from '@angular/core'

import {ProfileService} from './profile.service';
import {IProfile} from './iprofile'


@Component({
  selector: 'profile',
  template: `
    <div>
      <h2>Name : {{MyProfile.Name}}</h2>
      <h4>Age : {{MyProfile.Age}}</h4>
    </div>
  `,
})
export class Profile implements OnInit{
  ProfileList : IProfile[];
  MyProfile : IProfile;
  constructor(private _profileService: ProfileService){
   
  }
  
  ngOnInit(){
    this.ProfileList = this._profileService.getProfiles();
    this.MyProfile = this.ProfileList[0];
  }
}





To summarize:

* Create a Service class
* Use @Injectable() decorator to the service.
* Register the service at the root component.
* Inject the service as a constructor parameter of the dependent class.

Live Code:

Plunker here: https://embed.plnkr.co/SbgOOoUtJIeaQBY2FizW?show=app,preview

Angular 5 : Working with Nested Components

What are Nested/Child components?

A Component in Angular can have child components. Also, those child components can have their own further child components. Angular seamlessly supports nested components.

As an example, consider a calculator as a top level component. It is built with several other child components like screen component, button component, body component, battery component etc. These screen, button, body and battery components are nested components of Calculator component.

The nested component have all the functionalities just as any other Angular component.

Now several question arises in our mind:

  1. How we are going to use our nested components in its parent component?
  2. How we can pass data from parent component into its child component?
  3. How can we get the data back from child component to parent component?
  4. How does the child component can respond to the parent events?
  5. How does the parent component can respond to the child events?

To answer all these questions, lets us built a step-by-step example where we have a profile page of a person. It will also have a friend's list.

1) Building Parent and Child components.

Let's first built our Child component in our example app which is Friend list component.

import { Component } from '@angular/core';
 
@Component({
    selector: 'my-friends',
    template: `<div>
                <table>
                  <tr *ngFor='let friend of friends'>
                    <td>{{friend}}</td>
                    <td>
                       <img 
                          src="http://witspry.in/ContentServer/Images/User/user.png" 
                          width="20" />
                    </td>
                  </tr>
                </table>
              </div>`
})
export class MyFriendsComponent{
    friends: Array<string> = [
      'Friend 1',
      'Friend 2',
      'Friend 3',
      'Friend 4',
      'Friend 5',
    ];
}

Now, let's built our Parent component which is User's profile page.

import { Component } from '@angular/core';

import {MyFriendsComponent} from './myFriends';

@Component({
    selector: 'my-profile',
    template:`<img [src]="imgURL" width="50"/>
              <h3>My Friends</h3>
              <my-friends></my-friends>`
})
export class MyProfileComponent{
  constructor(){
    this.imgURL = 'http://witspry.in/ContentServer/Images/User/user_circle.png';  
  }
}

* See the above example as how the <my-friends> is used as a directive to the Profile component.

Now, in main app import both component and add them in the "declarations" array.

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, MyProfileComponent, MyFriendsComponent ],
  bootstrap: [ App ]
})
export class AppModule {}


Next, we are going to see how parent component provides input to child component and how child component emit events to send the payloads to parent component. Here is a diagram to get a gist of it.




2) Passing data using @Input() decorator.

@Input() decorator to the rescue

Add a variable name as a following line with @Input() decorator.

export class MyFriendComponent{
  @Input() name : string;   
}

Change our User's profile page as:

@Component({
    selector: 'my-profile',
    template:`
              <img [src]="imgURL" width="50"/>
              <h3>My Friends</h3>
              <div *ngFor="let friend of friends">
                <my-friend [name]='friend'></my-friend>
              </div>
    `
})
export class MyProfileComponent{
  constructor(){
    this.imgURL = 'http://witspry.in/ContentServer/Images/User/user_circle.png';  
    this.friends = [
      'Friend 1',
      'Friend 2',
      'Friend 3',
      'Friend 4',
      'Friend 5'
    ];
  }
}

See the line - <my-friend [name]='friend'></my-friend>
Here we are passing a friend name to the "name" property of the child component.



3) Raising an event using @Output() decorator

The @Output directive enables a child component to use its properties in the parent component.

Lets modify our MyFriend component as:


import { Component, Input, Output, EventEmitter } from '@angular/core';
 
@Component({
    selector: 'my-friend',
    template: `<div>
                <table>
                  <tr>
                    <td>{{name}}</td>
                    <td>
                        <img src="http://putiw.xyz/clashroyaleunlimitedgems/img/user.png"
                            width="20" />
                    </td>
                    <td><button (click)='OnClick()'>Ping</button></td>
                    <td> {{timesPinged}} </td>
                  </tr>
                </table>
              </div>`
})
export class MyFriendComponent{
  @Input() name : string;
  timesPinged: number = 0;
  @Output() pingClicked: EventEmitter<string> = new EventEmitter<string>();
  
  OnClick(){
    this.timesPinged++;
    this.pingClicked.emit('You pinged ' + this.name + ' ' + 
          this.timesPinged + (this.timesPinged == 1? ' time' : ' times'));
  }
}

Here, we have imported Output and EventEmitter from Angular core library. Also, we have defined an event using @Output() decorator. The OnClick is a local function which is invoked from button's click event. Since the "pingClicked" is decorated with @Output(), it's emit function is able to notify the parent component.

Now, change the parent component to capture the raised event from it's child component as below:

import { Component } from '@angular/core';

@Component({
    selector: 'my-profile',
    template: `
              <img [src]="imgURL" width="50"/>
              <br />
              {{pingMessage}}
              <br />
              Total Pings today : {{totalPings}}
              <h3>My Friends</h3>
              <div *ngFor="let friend of friends">
                <my-friend [name]='friend'
                          (pingClicked)='onFriendPingClicked($event)'>
                </my-friend>
              </div>
    `
})
export class MyProfileComponent{
  constructor(){
    this.imgURL = 
 'http://witspry.in/ContentServer/Images/User/user_circle.png';  
    this.friends = [
      'Friend A',
      'Friend B',
      'Friend C',
      'Friend D',
      'Friend E'
    ];
    this.totalPings = 0;
    this.pingMessage = '';
  }
  
  onFriendPingClicked(pingMessage: string): void{
    this.totalPings++;
    this.pingMessage = pingMessage;
  }
}

Finally, we have added an Event binding (please check our previous article in Angular 5 : Data & Event bindings) which is "pingClicked". Have you remember, this was decorated with @Output in our child component. Yes, this is how was are able to use it here. Also, it is assigned to a function "onFriendPingClicked($event)". The $event contains the data that the child component emits on the occurrence of it's event.




To Summarize:

* Use @Input() decorator to pass data to child component.
* Use @Output() decorator to raise an event to parent component. Note : The @Output() decorator property can be only of EventEmitter type.

Live Code

Angular 5 : Builtin, Async and Custom Pipes



In simple words, In Angular, a pipe takes in data as input and transforms it to a desired output. It is corresponding to what filters are in AngularJS.

A quick example :

<p>{{date | date:'shortDate'}}</p> <p>{{date | date:'longDate'}}</p>

It transforms a date string to short date and long date format.

There are three type of Pipes Angular provides:

1) Builtin Pipes:


There are several inbuilt pipes provided by Angular framework. Following is the list of some of the Builtin Pipes:

a) DatePipe:

date_expression | date[:format]

where expression is a date object or a number and format indicates which date/time components to include. The format can be predifined as shown below or custom as shown in the table.

Format Description
medium equivalent to 'yMMMdjms' (e.g. Sep 3, 2010, 12:05:08 PM for en-US)
short equivalent to 'yMdjm' (e.g. 9/3/2010, 12:05 PM for en-US)
fullDate equivalent to 'yMMMMEEEEd' (e.g. Friday, September 3, 2010 for en-US)
longDate equivalent to 'yMMMMd' (e.g. September 3, 2010 for en-US)
mediumDate equivalent to 'yMMMd' (e.g. Sep 3, 2010 for en-US)
shortDate equivalent to 'yMd' (e.g. 9/3/2010 for en-US)
mediumTime equivalent to 'jms' (e.g. 12:05:08 PM for en-US)
shortTime equivalent to 'jm' (e.g. 12:05 PM for en-US)

Example :
{{ dateObj | date }} // output is 'Jan 10, 2016'

{{ dateObj | date:'medium' }} // output is 'Jan 10, 2016, 2:10:15 PM'

{{ dateObj | date:'shortTime' }} // output is '2:10 PM'

{{ dateObj | date:'mmss' }} // output is '10:15'


b) UpperCasePipe,

expression | uppercase

It converts value into an uppercase string using String.prototype.toUpperCase().

Example:
<p>In uppercase: <pre>'{{value | uppercase}}'</pre>

c) LowerCasePipe:

expression | lowercase

It converts value into a lowercase string using String.prototype.toLowerCase().

Example:
<p>In lowercase: <pre>'{{value | lowercase}}'</pre>

d) CurrencyPipe:

number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]

where
currencyCode - the ISO 4217 currency code, such as USD for the US dollar and EUR for the euro.

symbolDisplay - a boolean indicating whether to use the currency symbol or code.
true - use symbol (e.g. $).
false(default): use code (e.g. USD).

digitInfo -
digitInfo is a string which has a following format:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

e) PercentPipe:

number_expression | percent[:digitInfo]
where digitInfo is same as mentioned above.

Note : Pipes can be chained as:{{ birthday | date | uppercase}}




2. Async Pipes:

observable_or_promise_expression | async

An async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes.

3. Custom Pipes:

We can create very own custom pipes by using the @Pipe decorator and implementing the PipeTransform interface:

Example:

import { Pipe, PipeTransform } from 'angular/core'; 

@Pipe({ name: 'HtoS' }) 
export class HoursToSeconds implements PipeTransform { 
  transform(value: string, args: any[]){
  return parseFloat(value)*3600; 
  } 
}


Live Code:

Angular 5 : Data and Event Bindings


Angular provides many kinds of data binding

We can group all bindings into four categories by the direction in which data flows. Each category has its distinctive syntax:

Interpolation

Any property in Component class can be shown as text through Interpolation written as {{}}

Property Binding

It is similar to Interpolation but it is a preferable way of doing one way binding, especially in case of styles and attribute bindings. It has a syntax []

Event Binding

It binds and event to a Component function. The events are standard browser events such as Click, DoubleClick etc.

Two-way binding

It binds a Component property to an input element. The changes gets reflected in the property at the same time. This is actually a combination of One-way binding and Event-binding. It is written as Banana-in-a-box syntax [(..)]. The outer braces shows One-way binding and the inner brace shows Event binding.


To Visualize

DOM


Interpolation : {{someText}}
Property Binding :
<img [src]='prop.URL'>
Event Binding :
<button (click)='showImage()'>
Two way Binding :
<input [(ngModel)]='Name'>

Component





Example

<input type="text" [value]="myName">
<button (click)="colorChange(textColor)" [style.color]="textColor">Change My Color</button>
<input type="text" [(ngModel)]="textColor">

<table border=2>
    <!--  expression calculates colspan=2 -->
    <tr>
        <td [attr.colspan]="1 + 1 + 1">Left - Center - Right</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Live Code 

Plunker here: https://embed.plnkr.co/plunk/BT8gj5?show=app,preview

Its YOU who allows hacker to hack.


It's never the hacker who hacks. It's YOU who allows hacker to hack.

We are emerging into a complete digital world. Just like our House makes us secure, similarly there are some measures to get ourselves secure in this Digital world. So why not to build your digital house with some free tips.

Here are some very simple tips you should follow to avoid any kind of hacking to your account.

1. Always use well known browsers.



Chrome, Firefox, IE, Opera etc. Anyone might download a internet browser may be from some fancy ads, or fun or for experimenting. Never use or browse internet from any other browser. I mean never ever.
* Even Facebook or gmail can be hacked if not adhere to this first tip, not a big deal.

2.Always use latest browser.



How much latest? Most of the  modern browsers auto updates themselves. But check just your browser version once if it is latest or near to latest. If yes, this means your browser is getting auto updated. If no, you need to manually update it daily or figure out why it is not getting updated.



3. Make sure you trust the website you are providing personal information to.



If you think you need to access a website but it is not that famous or trustworthy, you can make a login but never provide any personal information like your phone number or your debit/credit information. You can provide your email but keep one more useless gmail id for such cases.

4. Review your Facebook and Google security settings.


Have a look at these pages:
https://www.facebook.com/help/325807937506242/
and
https://myaccount.google.com/security



5. Never provide information on HTTP



Never ever login or post any information in a website which in unsecured. Secured website starts with https:// and unsecured with http://

6. Always use an anti-virus in your system.



It's good if you have a paid version of any Antivirus, however there are other several antivirus like Panda antivirus which is free.

7. Do not login Facebook, google or wherever you have your accounts through any link.

Facebook - Faecbook 
Orkut - Okrut 
Google - Goolge 

Seems Similar names Eh! 

 If you are not sure about the spelling of the website, use google to search and open that website. For. eg. orkut.com accounts were hacked by okrut.com, the name seems similar but if you look closely r and k are exchanged.



8. Please share this article with your family and friends to contribute for making this world digitally secured.



Virtual Reality - The Future is Now!




In this era of lightening fast technologies, Virtual Reality is a very new and trendy concept. In general, “Virtual” means non-existing and “Reality” means what we experience as human beings. But in technical terms, Virtual Reality is an artificial environment that is created with the software and presented in the way that the user accepts it as a real environment. In other words, Virtual Reality is the use of computer technology which creates the effect of an interactive 3D world in which the objects have a sense of spatial presence.

Even a decade back, you might have seen many movies like "Star Wars" and I remember one of the Backstreet Boys Song - "Larger than Life..". The concept has been there for a very long time. However, the with recent technological advancements, it seems the future is really now!



Education


Virtual Reality is used for teaching and learning concepts. Through this, students can interact with large groups of students within a three-dimensional environment. It represents the complex data in an accessible way so that students can learn things with fun and also interact with objects in this virtual environment in order to discover more about them. For Example, students can learn about a solar system where they can move planets, see around stars and track the progress of a comet.

Business



Virtual Reality is very helpful in the field of Business. It includes many things such as Virtual trips of a business environment; provide complex training sessions to new employees in a virtual environment, 2D/3D view of a product, detecting design problems at an early stage etc. They can test their products in a virtual environment without any risk.


Virtual Museums

Use of virtual reality in the museum and historical settings e.g. visitor centers, interactive exhibitions. Through interactive technologies, children get an amazing experience and encourage them to visit and take part in these activities.

Video Games


Virtual Reality gaming is an entertainment environment where a person can interact with a game. They can detect person’s presence in a game through bio-sensing. These are small sensors which are attached to a data glove; suit so that they can transform your actions into appropriate responses on the screen.

Theme Parks

It makes head-mounted displays. They use high-definition movie screens, booming sounds and motorized seats to simulate adventures into space and beyond. This technology creates virtual reality roll coasters so it provides real-world coaster with a head-mounted display. Riders might be transported to the back of a dragon or other fantastical environments.

Healthcare & Clinical Therapies


Virtual Reality is being used in various medical fields like clinical therapy, anxiety disorder treatment, pain management, phobia treatment, robotic surgery, surgery simulation etc. With the help of HumanSim System, doctors, nurses, and others can learn new skills in a virtual environment and also interact with a patient to detect its problems without harming them. So they get experience with a series of sensors.

Military


Virtual Reality is used in the every field of the Military i.e. Army, Navy and Air Force. This is particularly used for training soldiers for combat and dangerous situations and they have to learn how to react in these situations. Through virtual reality simulation, Soldiers learn many things without the risk of a death or a serious injury. For Example, flight simulators are used to teach flying skills and they learn how to deal with emergency situations. So there are many Military uses of Virtual Reality such as Battlefield Simulation, Virtual boot camp, Vehicle Simulation etc.

Construction


There is an extremely scope of Virtual Reality in the construction field. In the virtual environment, an organization makes a structure in 3D and views a number of factors without the time and cost of the building structure. It is also used to train construction workers and employees so that they can fit in the working environment.


Fashion


Virtual Reality can be used in a variety of ways in Fashion field. It designs VR software for building virtual fashion stores where people can do shopping in a real 3D virtual mall which is designed to resemble a modern shopping mall. Virtual Reality creates 3D avatars to help with clothes design and 3D fashion portfolio. It also helps to arrange fashion show in a virtual environment.

Sports


Virtual Reality is used to give training in many sports such as golf, cycling, skiing, athletics etc. Through this, we can measure the performance of the sportsmen. They can learn various strategies of sports in a virtual 3D environment. It can be used to design sporting clothes and equipment, e.g. running shoe design.


Virtual Reality devices/gadgets

Google Cardboard | Price - Range $14.99 to $29.99


It is a good, justifiable provide virtual reality experience at the best cheapest price. Just pop your Smartphone into a cardboard cutout. It well-equipped with gyroscopes and the displays required for a virtual reality headset.

Oculus Rift VR | Price - Approx $599


Oculus Rift is primarily responsible for bringing on the wave of virtual reality and it comes with a hefty price tag. A resolution of 1080x1200 per eye, a 90Hz refresh rate, a wide field of view, and integrated headphones for a 3D audio effect. It has also rotational and positional tracking system. The approximate price is $599.

Samsung Gear VR | Price - Approx $99.99


Samsung has launched own virtual reality headsets, named Gear VR. It is basically a way to pop in your Samsung Smartphone into it, strap on the headset and experience Virtual Reality. It has various features like 96-degrees of Field of view, support for proximity sensors and an ever-expanding behemoth of content.

HTC Vive | Price - Approx $799


This headset is designed to utilize room-scale technology to turn the room into 3D space via sensors. It allows the users to navigate naturally with the ability of motion tracked handheld controllers to graphically manipulate objects, interact with precision, communicate and getting experience environments. It has various features such as 32-sensors-powered 360-degree motion tracking, 110-degrees field of view, 2160 x 1200 combined resolution and 90Hz refresh rate

Microsoft HoloLens | Price Approx $3000


The Microsoft Hololens is an untethered holographic projection device. It doesn’t require any other third-party software, hardware or platform to operate it. It is a standalone device that could project holographic projections into thin air. It has a 120-degree field of vision and high-definition visuals which provide best holographic computing experience. it is used in various industries like Media & Animation, Mechanical, Healthcare, Architecture, Research, and Automation.

Razer OSVR | Price - Range $199.99 to $299.99


It is an open source platform. It is an ecosystem of hardware and software that aims to create standards for hardware and gaming. This company provides its own SDK for development. It has various features such as 5.5 inches Full HD OLED display, display resolution 1920 x 1080, a gyroscope, a compass and an integrated accelerometer.

Gaming Consoles with Virtual Reality

Sony Playstation VR


It is developed by Sony Interactive Entertainment. It is a home video game console. In this, the player wearing the headset acts separately from other players without the headset. Playstation VR works with either the standard DualShock 4 controller or the PlayStation Move motion controllers. It has 5.7-inch OLED panel, 360-degree vision, display resolution 1080p, 3.5mm headphone jack, 120 frames per second, PlayStation camera, and processor box which is used to enable the Social Screen video output to the television as well as process the 3D audio effect.

3D Virtual Reality VR Box with Bluetooth Joystick Gamepad


This product includes 3D VR GLASSES which is specially designed for Smartphone. It adds great effect so that you feel like your private 3D Cinema and bring great game experience. It is very easy to use by the children, students, travelers and the old age people etc. You just need to put your Smartphone into the relative slot of the 3D VR glasses and you can enjoy 3D movies or 3D games.

Ultragear IPEGA PG-9037 Bluetooth Gamepad with VR


This game controller compatible with Android Smartphone’s, iPhone, iPod and most Android games. It has a telescopic stand where you can be placed your Smartphone in the bracket up to the 6inch screen. With new mouse function, you can watch your smart TV or play the game on the large screen. Bluetooth Ver3.0 wireless transmission covers 6-8 meters wide range of control. It is compact, flexible, easy to control, and portable. It supports various games such as Wild Blood, Dungeon Hunter, Zombie, Shadowgun, Sonic CD etc.

Virtual Reality Table Tennis Video Game


This Virtual Reality Table Tennis Video Game can play on your TV just like you are playing on a table. Two players can play together. There are two Table Tennis bats and a game console with inbuilt games to play. It can be played by kids, youngsters etc. It is motion game and its capacity up to 4GB. It has 1USB port and it supports online connectivity.

Zebronics Gaming Virtual Reality Headset


  1. It supports all Android and iOS Smartphones with screen size up to 14cm (5.5inch). Feature includes:
  2. Ultra-immersive motion sensing game experience
  3. Focal length adjustable
  4. Powerful magnet trigger
  5. Compatible with Google Cardboard
  6. Enough size for wearing glasses, More Comfortable and Durable
  7. 360-degree views, games, video etc.

Future of Virtual Reality

  1. The future of Virtual Reality could be our next computing platform.
  2. It will take a while for Virtual Reality to gain traction like hyped technologies.
  3. It offers a new way of seeing our world.
  4. Virtual Reality could eventually impact all of the senses.
  5. The market potential of Virtual Reality could be huge.

Angular 5 : An Introduction


Angular 5 Release Countdown



Official Angular 5 release Date : 18th September, 2017


Stay Updated!

"Add to Circles (Google+)" OR

Subscribe




and we will provide Angular 5 latest update with documentation as soon as it will have its first pre-release.


Thanks for visiting!

A Quick Guide To CSS3 - Cheat Sheet and Browser Support




CSS3 Cheat Sheet

With this sheet you can quickly refer the properties of different elements or components of a web page. Still it first requires the understanding of what each property do. You can click on the image and save it to your desktop for future references.

(Click to zoom)


CSS3 Browser Support

Almost all modern browsers support CSS3. Still it is important to consider older browsers as well in case we need to fallback to some other alternative to render the css properly. There are various css frameworks like bootstrap and foundation which takes care of this purpose of falling back to other alternative.



To test which all CSS3 properties your browser support, you can visit the below link:
http://css3test.com/

A Quick Guide To CSS3 - 2D and 3D Transformation




CSS3 2D and 3D Transformation

This is one of the most awaiting implementation in terms of creating interactive and real world web pages. CSS has introduced some properties through which we can changes the shape, size and position of the CSS3 elements.
Property Value options
perspective none | number
backface-visibility visible | hidden
transform none | matrix | matrix3d | translate3d | translateX | scale3d |
scaleY | rotate | rotateZ | skew | perspective and so on
perspective-origin x-axis y-axis|initial|inherit;
x-axis - % | left | center | right
y-axis - % | left | center | right
transform-style flat | preserve-3d
transform-origin x-axis y-axis z-axis|initial|inherit;
x-axis - left | center | right | length | %
y-axis - left | center | right | length | %
z-axis - left | center | right | length | %

Example : 2D Transformation
div {
 transform: translate(70px, 110px);
}



Example : 3D Transformation
div {
    transform: rotateX(150deg);
}





Browser Support for 2D Transformation



Browser Support for 3D Transformation




A Quick Guide To CSS3 - Box-model, Selector and Box Layout




CSS3 Box Model

It is one of the most important concept of CSS3. Every HTML element is surrounded by a box weather its a div, span, paragraph, anchor etc. CSS3 Box Model concept revolves around Margin, Border, Padding, and Content of the box. This makes browser takes complete control on how the box and its contents will be rendered on the webpage.


  • The margin is transparent. It clears the area of outside the border. If margin width is 0, then the edge of margin is same as border edge.
  • Border defines the border of the box. If the border width is 0, then the edge of the border is same as padding edge.
  • Padding edge surrounds the box padding. It can be controlled by padding-top, padding-bottom, padding-left and padding-right.
  • Content is the actual area which contains real content of an element. It has color, image or background. We can also set the width, the height of the content box.

Property Value options
height auto | % | length
width auto | % | length
margin margin-bottom | margin-top | margin-right | margin-left
float left | right | none
padding padding-bottom | padding -top | padding -right | padding -left
visibility visible | hidden | collapse
display inline | block | flex | inline-block | inline-table | list-item | table | none | initial | inherit



CSS Selectors

CSS3 Selectors used to select different elements on the webpage and manipulate their properties. There are different selectors with which we can select one or more elements in the webpage.

Selector Description
.<className> It is used to select all elements with .<className> class
#<identifierName> It is used to select all elements with id attribute set to <identifierName>
* It is used to select all elements.
div It is used to select div elements
[attribute] It is used to select all elements with the specified attribute
[attribute=value] It is used to select all elements where the specified attribute is equal to value
a: link It is used to select all unvisited links.
a: active It is used to select the active link and so on.

Box Layout


This property is used to set the layout of the box in the Webpage. It is very new in CSS3. The template is tested to check its compatibility with all requirements on multiple platforms.
Property Value options
box-direction normal | reserve
box-align start | end | center
box-lines single | multiple
box-orient vertical | horizontal | block-axis | inline-axis
box-sizing padding-box | content-box | margin-box | border-box
box-pack start | end | center | justify


A Quick Guide To CSS3 - Border, Font and Text



CSS3 Border

CSS3 borders are used to set the borders of a container which can be div, span, paragraph etc. It includes for different properties left, right, top, bottom in the webpage.

Property Value options
border-style none | hidden | dotted | dashed | double | inset | outset | solid
border-width thin | medium | thick | length
border-color Any color value RGB, Hash etc.
border-radius border-bottom-right-radius | border-top-right-radius |
border-bottom-left-radius | border-top-left-radius

Example
.one {
 border-width: 3px 8px 4px 20px;
 border-style: dashed;
 border-color: yellow green red blue;
}

CSS3 Font

CSS3 Font properties are used to set the font used in different textual components of a webpage.

Property Value options
font-size xx-small | x-small | small | medium | large | x-large | xx-large and so on
font-family family-name | generic family
font-style normal | italic | oblique | inherit
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 and so on
font-variant normal | small-caps | inherit

Example
p {
 font-style: italic;
 font-family: 'Arial';
 font-size: xx-large;
 font-weight: bolder;
 font-variant: small-caps;
}



CSS3 Text

CSS Text properties are used to set the general text properties like we used to do in any text editor like Word. Same textual decorations can be achieved in the webpage with the help of these properties.

Property Value options
text-align start | end | left | right | center | justify
direction rtl | ltr | inherit
letter-spacing normal | length | %
text-decoration none | overline | underline | blink
text-justify auto | inter-cluster | distribute etc
text-outline none | color | length
text-indent length | %
text-shadow none | color | length
text-transform none | uppercase | lowercase | capitalize

Example
p.example {
 text-align: center; 
 text-decoration: blink;
 text-transform: lowercase;
 text-outline: none;
 text-shadow: 2px 3px blue;
}

A Quick Guide To CSS3 - Introduction, Wordwrap and Backgrounds



CSS is an acronym for Cascading Style Sheet.

Cascading  - Declare once use anywhere. Cascade the styling rules to any level, from parent to child level elements.
Style Sheet - Defines style rules.

CSS3 is the extended version of CSS2. CSS3 has arrived with so many new features and enhancements can make any webpage a gem with fewer efforts.

We will cover here CSS selector syntax, properties, browser support, and useful information about its all controls. Its a quick guide so we will cover a more crisp cheat sheet kind of guide rather than the detailed one. To know more about CSS from basic please follow the link -
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

CSS3 Word Wrap 

Word Wrap is a property of CSS3 that is used to break the words and wrap into next line.

Syntax
Word-wrap : normal | break-word | initial | inherit

Normal - break the line at normal word break points.
Break-word - unbreakable word breaks into a new line.
Initial - used to set a default value.
Inherit - used to take computed value.

Example
p {
    width: 100px;
    background: #70ea70;
    word-wrap: break-word;
}



CSS3 Backgrounds 

These are used to set the various properties of the background of the webpage.

Property Value options
background-image URL | none
background-attachment scroll | fixed
background-image URL | none
background-color color | transparent
background-size length | % | auto | cover | contain
background-position top right | top left | top center | bottom left | center | center right and so on
background-repeat repeat | repeat-x | repeat-y | no-repeat

Example
#back {
 width: 300px; 
 height: 200px;
 background-position: center bottom, left top;
 background-repeat: no-repeat;
 background-color: #90ee90;
}

Next : CSS 3 Borders, Fonts and Text