Showing posts with label CODING. Show all posts
Showing posts with label CODING. Show all posts

Apr 7, 2012

Values and units in CSS: Color and color models

Filled under: ,

One of the most important themes in CSS is the theme of values ​​and units of measurement. After all, this knowledge are the basis of any site. With them we can color the text of the section, adjust line spacing, or set this paragraph indented 10px from the rest of the page. For all this we need a strong and workable tool, which we will discuss with you. A lot of material, so we decided to split this topic into several components. Today we offer you the color and color models, methods for their assignments and reference when selecting the preferences and describe their capabilities.

But you first need to pay attention to the basic components of the values ​​in CSS - the numbers and percentages. It is through these assistants CSS is a really powerful tool.

In CSS, there are two types of numbers: integers (integer) and  real (real). These types of numbers are the basis of all other types of values, but sometimes as values ​​and can serve many other formats, which we discuss later. Starting with version CSS2.1, any real number is an integer with a floating decimal point. Also, numbers can be either positive or negative. It all depends on the properties.

Percentage values ​​- calculated real number. Percentage values ​​are always expressed relative to another value. (For example: at the heart of "rubber" layout are percentages, calculated, and the magnitude of which depends on the size of the monitor visitor.)

Probably the most popular question that I asked the children after the first acquaintance with html - «How can I change the background color / section / title?". And here we are faced with very interesting things. In ordinary life, we need only look at an object or structure, to say what color. And if a man is far from drawing, color models or design in general, the more often he would call about 20 colors. If we begin to explore this area, it turns out that the names of colors - great variety. How is it possible to describe all the colors in CSS? To do this, we and you have several options -

  • using a color model RGB;
  • using key words;
  • color model used RGBA;
  • use of percentages;
  • to use the hexadecimal color model set.

Let's talk about each method in detail.

RGB color model
RGB color model
The basis of this model is the relationship of the three main constituent colors - Red (red), Green (Green), Blue (blue). This model is a major opportunity to pass virtually any color monitors and televisions, which we use in everyday life. If, for example, to disassemble your old monitor, you can see the three electron guns. These guns give us the opportunity to see the color, giving off at each point on the screen of electron beams with different intensity. It is at these points the intensity of the beam is combined, and we get a different color brightness. Each point is called a pixel. Though the technology far ahead, but the color output is realized by traditional principles.

RGB color model in CSS allows us to manage each of these three colors, changing only their intensity. Functional RGB recording format gives us the ability to set the color as a percentage from 0% to 100%, and in an integer value from 0 to 255.

To set the white color, we must write the following - rgb (100%, 100%, 100%), and black, respectively, rgb (0%, 0%, 0%). If it is we want to present the colors in the numerical value, then white - rgb (255, 255, 255), black - rgb (0, 0, 0).

To specify a green color, we will write rgb (0, 100%, 0), but if we want to have a light green color, it is enough to write this: rgb (0, 50%, 0). In this example, we have completely abandoned the red and blue colors. I have only the brightness of the green. If each thread, we define a color, then here is just a combination of magic happens.

As we all know, every color in real life given your keyword (which is why green - a green :)). So in CSS: in order to meet the needs of people who do not want to understand all the charm of flowers, the base was introduced, which contained the key words: green, purple, white, yellow, etc. In total there are 17 CSS2.1 specification of colors, 16 of them - have been described in HTML4.01 plus orange. Here are the colors:

Of course, you can find a color that is not described in the specification and the browser displays it to us, such as lightgreen (Thanks to Eric Meyer). Nothing unusual about that, because most browsers support more than 140 colors, but here's the problem - if the key colors are displayed in the browser the same way, the probability that such a color as lightgreen, will be equally bright green everywhere, is very small.

h1 { color: green; }
h2 { color: aqua; }
h3 { color: purple; }

In fact, such an approach to specifying the colors are not really justified, even though it is simple, but little functionality makes it a virtually untapped.

RGBA color model
RGBA color model

RGBA or Red Green Blue Alpha - is an enhanced model of the RGB, which is added to the value of the alpha channel, which allows us to specify the opacity of the color.
Alpha channel is responsible for the opacity of the color, which is given a range of numbers from 1 to 0. For a fully opaque color is enough to specify a value for total transparency - 0.
Usage is simple enough, take a green color and make it semi-transparent:

body {
background: rgba(24, 191, 36, .5);

In the semi-transparent colors in this example corresponds to the value of .5 (or 0.5, but 0 can be omitted). Of course, you can use the opacity, but he has his own distinction, which will be discussed in the article «RGBA and OPACITY - the difference being that".
RGBA on properties very similar to the image format. png, and therefore have similar problems displaying in browsers. IE6 makes them totally transparent.

RGBA color model provides tremendous opportunities for creativity. This model is recognized as the main specification CSS3. With its help, we can define a gradient, without the help of programs such as photoshop.

The percentages
The percentages

We have already seen how you can specify colors using the interest, but would like to clarify here what time. Percentages, we can write the fractional numbers, for example, rgb (24.5%, 10.75%, 91.2%). How, then, comes the browser? He either ignores the fractional part, and uses only integer values, or rounding them up to the nearest integer. Then the example would look like this: rgb (25%, 11%, 91%). It also is important to remember the limits of the values ​​(0 .. 100%, 0 .. 255). For the moment we try to specify the values ​​that go beyond these boundaries, as we have them back. This record rgb (124%, 500%, 1000%) or rgb (-23, -257, 342) will be to understand how rgb (100%, 100%, 100%) and rgb (0, 0, 255), respectively. It is important to remember about this and not to violate these rules.

Also, for rounding and transferring of interest in a number of the specification uses a simple formula: if we know the exact percentage of each of the levels of RGB, then to get the final values, we just need to make a proportion of the number 255. (That is, take a percentage, multiply by 255 and divided by 100, the resulting value rounded to the nearest whole number).

Model hex (hex notation)
Model hex (hex notation)

Probably the most popular model to date. Due to the problematic use of RGBA for old and do not understand browsers, hex color model of the job, or simply hex-model will help us even a single year. Hex model is as follows - # RRGGBB, and is defined by hexadecimal numbers in the range from 00 to FF. To be completed only by integers, the fractional part is missing. It is also allowed a shorter record - # RGB, if we choose the color, the value of which is as follows: # 666666, # AAFF88. Reduced entry will look like this: # 666 and # AF8. The browser simply duplicating each of the values. But here it must be remembered that the records of the form # 505050 can not be reduced.

All models are somehow lead to one thing - change the color on the page, background, etc. But the hex-use model is preferable. Short and accessible record, a huge range of colors, the ability to write short. That it is so popular, but do not forget the rgba. This model gives us the opportunity to create a truly progressive code, and, therefore, and projects. Why are we focused on this issue so much attention? Color plays a very important role when viewing the page, so knowing the subtleties of the job color models, we can create interesting and pleasant things, and thus know how it works from the inside.

CSS shorthand and optimization techniques

Posted By Muhammad Asif12:00 AM

Feb 28, 2012

Some of the CSS shorthand and optimization techniques

Filled under: ,

The following is a brief introduction to the new owners of CSS shorthand rules and some simple CSS optimization techniques, we Xu some help, the article a little water, we wonder, then. The bottom two CSS techniques can focus on understanding, may be able to bring you some unexpected results.

Color abbreviations
We can # ff0099 abbreviations as # f09 , # ffffff
Abbreviated as # fff . (Tips, tools such as Notepad replacement, can be directly input # ff0099 CSS file, all replaced by # F09 )

Use of line-height vertical center
For example: line-height : 22px ;
, Use the fixed width container need a line perpendicular to the center .

background ( background )
For example:
the background-image : url ( "huceo.png" );
background-position : top center ;
background - repeat : no-repeat ;
Can in fact be written as:
background : url (huceo.png) no-repeat top center ;

Background image path without the quotes
background : url ( "image / huceocom.gif" ) # 999 ;
Can be written as
background : url (images / huceo.gif) # 999 ;

Positioning property value is a value of 0 can remove the unit (such as: px / em)
For example: padding : 10px 8px 0px 0px ;
Shorthand: padding : 10px 8px 0 0;
Equal value may be combined
For example: padding : 10px 8px 10px 8px ;
Shorthand: padding : 10px 8px ;

Margin (margin / margins), Padding (padding) statement:
For example:
margin-top : 0px ;
margin-right : 10px ;
margin-bottom : 0px ;
margin-left : 10px ;
Shorthand for:
margin : 0 10px 0 10px ; (on the - right - down - left)
Again shorthand for:
margin : 0 10px ; (upper and lower value of 0, around a value of 10)

Borders (border attributes)
For example:
the border-width : 1px ;
border-style : solid ;
border-color : # 000 ;
Shorthand for:
border : 1px solid # 000 ;

Shared property
For example: requiring h1 to h6 using the same property, (English comma separated)
h1, h2, h3, h4, h5, h6 and
margin : 0;
padding : 0;
font-size : 12px ;
font-weight : normal ;
Have the same properties in CSS can be classified into the use of common property

CSS shorthand techniques, more specific to Baidu. Suggest that you try to use CSS shorthand to optimize the code, reduce file size.

Clear container floating
# Main {
overflow : hidden ;

Not to link wrap
a {
white the white-space : nowrap ;

Always let Firefox display the scroll bar
html {
overflow :-moz-scrollbars-vertical;
Cross-browser support
the body, the html {
min-the height : 101%;

The most simple CSS reset
* {
margin : 0; padding : 0
CSS image flattening (CSS sprites in)

Can effectively reduce the number of HTTP requests for image files can be multiple small images merged into one big image file will be a certain spacing, for example, the site Sidebar icon (including the search box icon), and three icons above the comment box (name , E-mail, web site) are put together.
Upon completion of the flattening, the system automatically gives the positioning properties of the background-position code to show the flattening of the specified location in the picture.

Using CSS compression
Baidu, compressed CSS file is
compressed to remove spaces, and reduce the readability of the code, but you can save the file sizes, faster download speeds in the application box . Compression do not have to worry about the problem of poor code readability, you can always restore. More convenient in order to maintain modify the CSS of the original file on a compressed file on the same directory, and modify the control line.

Posted By Muhammad Asif4:38 AM