The CSS Box Model

The box model plays a very important role in modern web development. without proper understanding of the box model, one will have difficulty laying out the space on a website or mobile application. This is a really good post explaining the box model in very easy to understand and simple terms.

Freshers Technologies

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to add a border around elements, and to define space between elements.

The image below illustrates the box model:
CSS box-model

Explanation of the different parts:

  • Content – The content of the box, where text and images appear
  • Padding – Clears an area around the content. The padding is transparent
  • Border – A border that goes around the padding and content
  • Margin – Clears an area outside the border. The margin is transparent

View original post

Teach Yourself a New Programming Language in 21 Minutes (Or 2-3 Years, It Depends)

Heart, Mind and Code

You’re sitting at work, grinding out a bug in the legacy system, when your boss comes in and tells the team that you finally get the chance to rewrite the whole system–and even better, you get to do it in Clojure! (Or Scala or Erlang or Rust or Dart or some other Language You Only Know A Little About But Have Secretly Wanted To Learn For A While Now.)

Or maybe you’re happy with the language you’re using, but your VP of Software Architecture just spent $150,000 on a suite of Enterprise Tools which includes a module that will let your project scale infinitely into the cloud… all you have to do is learn Clojure. (Or Scala or Erlang or Rust or Dart or some other Language You’ve Only Heard a Few Mutterings About But Desperately Want To Avoid Learning.)

Either way, you’ve got a problem: you need to ramp…

View original post 1,690 more words

Target IE Specificly in HTML/CSS Using Conditional Comments

Out of all the most popular browsers used, Internet Explorer (IE) renders HTML and CSS with the most issues. In most cases, there are fixes for IE that can be implemented by using some different CSS properties. However, sometimes it is important to make a call specifically to Internet Explorer telling the browser what to render, and in some cases, what not to render.

To make an explicit call to the Internet Explorer browser, use:

<!--[if IE]> 

Special instructions for IE here 

<![endif]-->
<!--[if IE 7]> 

Special instructions for IE 7 here 

<![endif]-->
<!--[if gt IE 6]> 

Special instructions for versions of IE greater than 6 here 

<![endif]-->
<!--[if gte IE 6]> 

Special instructions for versions greater than or equal to IE 6 here 

<![endif]-->
<!--[if lt IE 9]> 

Special instructions for versions less than IE 9 here 

<![endif]-->
<!--[if lte IE 9]> 

Special instructions for versions less than or equal to IE 9 here 

<![endif]-->

Lastly, you can target all browsers that are not Internet explorer using conditional comments as well:

<!--[if !IE]> 

Special instructions for browsers that are not Internet Explorer 

<![endif]-->

I hope this helps some of you that are looking for some help with cross browser compatibility. IE can be difficult but by using conditional comments, it makes cross browser testing a lot easier.

Important Browser Specific CSS Properties You Should Be Aware Of

There are many different browsers being used this day in age. For the most part, browsers render CSS the same but there are a few instances where certain browsers just do not recognize some properties. This is where Cross-Browser Compatibility testing comes into play.

Sometimes, there is an easy fix to make the styles on a website to look the same across browsers. Today, the most common browser according to W3Schools, the browsers used most often currently are listed in the chart below:

browserstats

For now, I will ignore Internet Explorer as I will talk about how to use special instances for IE in a separate post.

Firefox has a special property prefix in some instances, this prefix is: -moz-

Similar to Firefox, Safari and Google Chrome are similar as in they both use webkit. The prefix for webkit properties is: -webkit-

Opera has a special property prefix in some instances, this prefix is: -o-

Below are important CSS/CSS3 properties to keep in mind while doing cross browser compatibility. These are the most common properties that can be easily rendered across browsers using these prefixes:

Border Radius (CSS3)

.RoundedCorners{

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;

}

Border Radius can take one input for the radius measurement, or four inputs:

.RoundedCorners{

border-radius: 5px 5px 10px 10px;
-moz-border-radius: 5px 5px 10px 10px;
-webkit-border-radius: 5px 5px 10px 10px;
-o-border-radius: 5px 5px 10px 10px;

}

 

Box Shadow (CSS3)

.DivWithShadow{

box-shadow: 5px 5px 5px #333333;
-moz-box-shadow: 5px 5px 5px #333333;
-webkit-box-shadow: 5px 5px 5px #333333;
-o-box-shadow: 5px 5px 5px #333333;

}

Gradient (CSS3)

Below is a linear gradient from the top to the bottom:

.GradientDiv{

background: linear-gradient(red, blue);
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);

}

Below is a linear gradient from left to right:

.GradientDiv{

background: linear-gradient(left, red , blue); 
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: -webkit-linear-gradient(to right, red , blue);

}

Below is a linear gradient that goes diagonally:

.GradientDiv{

background: linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: -webkit-linear-gradient(to bottom right, red , blue);

}

 

Animation (CSS3)

For this example we will do a simple CSS3 transition that changes the color of a link gradually from one color to another.

First we set the color of the link:

a:link{

color: #333333;

}

Then we set the hover with the transitions, time transitions should take place, and cross-browser properties:

a:hover {

 color: #FF0;
 transition: color 0.5s;
 -moz-transition-property: color;
 -webkit-transition-property: color;
 -o-transition-property: color;
 -moz-transition-duration: 0.5s;
 -webkit-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;

}

 

Transform (CSS3)

For this example, we will use the transform property of rotate:

.TiltedDiv {

 transform: rotate(2deg);
 -moz-transform: rotate(2deg);
 -webkit-transform: rotate(2deg);

}

In the next post, I will explain how to detect, add custom CSS, or remove certain properties in Internet Explorer. Keep Coding!

Customize Font on the Web using Free Google Webfonts

One of the things that you may be looking to do is add a particular style font face to your website to complete the look and feel you are designing for. If none of the fonts that are preloaded into the browser seem to complete the look, there is a very simple API that has been developed by Google that allows you to choose from hundreds of different fonts to use in your website.

There are other sources that have similar API’s but Google will most likely stay around for the duration that you are using their hosted files while I cannot say the same about any other company as easily.

In order to include a font from Google’s web font library, go to http://www.google.com/fonts. Choose a font that you want to use and click the Quick-Use button in the bottom right hand corner of the chosen fonts section on the page. Scroll to the bottom of the page and copy the

<link href='http://fonts.googleapis.com/css?family=Orbitron:400,500' rel='stylesheet' type='text/css' />

and paste it into the head of your document between your <head> </head> tags.

This tells your browser to load that font from the Google web fonts library. Now you just need to tell the browser where to use the font in your page. We do this in our CSS file. We can put it in our body tag, p tag, h1 tag, etc.

body {
    font-family:'Orbitron', sans-serif;
    font-weight: 400;
}

You can copy and paste this code directly from the font’s page on the Google API website as well.

This will allow you to complete the feel of your website with custom typography.