What You Must Know About CSS 3 And Browser Support

This article relays relevant information on CSS 3 and browser support, minding differences in rendering among widely used browsers.

It is important to know how browsers support the CSS3 coding language so as to facilitate ease in coding projects. It is a tiring scenario to create so much and end up not being able to render it. Developers dream of creating websites without taking into consideration differences browsers interplay in interpreting a set of instructions. Hence the usage of techniques such as polyfills and progressive enrichment.

CSS 3 And Browser Support: Earlier Versions Of Internet Explorer

CSS 3 may encounter problems with older versions of the browser, Internet Explorer. These are versions 6, 7, and 8. In summary, the following features and properties are supported: writing-mode, @font-face, word-wrap, linear gradients through the use of a non-standard filter, and some transforms though utilization of proprietary filter (also produce values to render functions).

Although, there are still ways that can be conjured to get IE versions 6, 7, and 8 to support other features of CSS3, they come with a price. These flexible means can lead to issues concerning optimum performance and maintenance, so it is important to exercise a degree of precaution and determine whether the whole of the site’s intention is not compromised.

CSS 3 And Browser Support: Modern Browsers

As for the usual browsers that are widely used today such as Internet Explorer 9, Firefox 3.5, Opera 10, Safari 4, Chrome and all its later versions, the following CSS3 features are supported: box-sizing, border-radius, box-shadow, RGBA Colors, HSLA Colors, multiple backgrounds, background-clip, background-origin, background-size, transforms and media queries. Internet Explorer 9 also has a compatible interface for CSS3 pseudo-elements, selectors, and pseudo-classes. The following features are supported by the above-mentioned browsers except Internet Explorer 9: text-shadow, border-image, outline-offset, transitions (supported by Firefox 4+ versions).

Features Supported by Chrome and Safari (WebKit)

Lastly, a small number of CSS 3 aspects have deficient support in Internet Explorer, Firefox, Opera, therefore only WebKit-based browsers will perceive them. WebKit is a software intended to permit browsers to render web pages. It supplies the lay-out interface for Google Chrome and Apple Safari browsers. The CSS3 features afore-mentioned that only WebKit browsers could render are: keyframe animations, text-stroke, text-outline, and box-reflect.

Example of CSS3 code made for different browsers:

div

{

transform: rotateX(120deg);

-webkit-transform: rotateX(120deg); /* Safari and Chrome */

-moz-transform: rotateX(120deg); /* Firefox */

}

 

Web design concerns the convenience at how the experience translates for the client. It is therefore imperative to know the audience. You must have an extensive knowledge on the different profiles of your clientele, their value drivers and decision process. Make sure you are meeting their expectations as to the type of experience they would want to have with their own respective operating browsers.


General Information on CSS3 Gradients

This article deals with information regarding CSS3 gradients, what it is, browser support, and some useful keywords to remember.

Gradients are transitions beginning from one hue to a different one. They can be coded using Cascading Style Sheets 3. It can be rendered, through the background property, only when these are treated as background images.

Browser Support

The following web browsers support CSS3 gradients: Firefox 3.6, Safari 4, Opera 11.10, Chrome 1, Internet Explorer 10 and all their later versions. This extensive browser support coverage is convenient for code developers and users alike. Earlier browsers and those that do not support CSS3 gradients just utilize the image as an alternative.

General Description

Various CSS3 gradients can be designated by separated comma. Automatically, these smooth color transitions fill the entire background.

The initial position of the gradient denoting a straight line on which the color proceeds to the finish position is known. The background-position property’s general values are valid. In this circumstance, right denotes a gradient proceeding from right to the left, right top signifies a slanting gradient proceeding from the top right corner to the bottom left. It can also be angled by setting the -45deg runs from the top right curve to bottom left, 90deg points up and 0deg points to the left.

The initial gradient can also be improved by a discontinued stance to shift its point on the color axis. In discontinuing a color, the gradient doesn’t merely change starting from blue to red but is improved by a gradient stop of yellow in the center. If separated by commas, multiple gradient discontinuations are also possible. When your objective is to discontinue a certain position, you must know where the gradient stop is positioned on the color axis. In this particular scenario, green is set to be at 40% instead of 80%, while the length value is relative of preference. The last gradient can also be extended by a discontinuation point.

Example of a CSS3 code for linear gradients:

#linearBg2

{ /* fallback */

background-color: #1a82f7;

background: url(images/linear_bg_2.png);

background-repeat: repeat-x;

/* Safari 4-5, Chrome 1-9 */

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

/* Safari 5.1, Chrome 10+ */

background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

/* Firefox 3.6+ */

background: -moz-linear-gradient(top, #2F2727, #1a82f7);

/* IE 10 */

background: -ms-linear-gradient(top, #2F2727, #1a82f7);

/* Opera 11.10+ */

background: -o-linear-gradient(top, #2F2727, #1a82f7);

}

 

Useful Keywords

  • closest-corner: The color is ranged so that its external figure progresses all the way through the bend of the gradient box that is nearby to its center.
  • closest-side: The color is ranged so that its external figure convenes with the side surface of the gradient box that is nearby to the middle.
  • farthest-corner: The gradient is ranged so that its external figure progresses all the way through the bend of the gradient box that is furthermost from its center
  • farthest-side: The color is ranged so that its external form convenes with the side surface of the gradient box that is furthermost from the middle.

How To Create CSS3 Dropdown Menu

This article relays relevant information on creating CSS3 dropdown menu, how it works and other general things useful in its rendering.

Today, people are able to incorporate their preferences in the layout for their webpages because of languages such as CSS3. With CSS3, creativity is possible with its multiple features, creating an avenue for people to discover innovative and helpful ways to create a convenient experience for users.

CSS3 Dropdown Menu Code

First, the general code for the menu is created:

.drop-menu {

display: block;

margin-left: auto;

margin-right: auto;

text-align: right;

padding: 20px 20px;

font-size: 18px;

height: 30px;

max-height: 40px;

width: 600px;

background: #gggg;

cursor: pointer;

border: 3px solid #f6f0e4;

}

 

Along with setting dimensions for padding, alignment, border, cursor, text alignment and so on, this design produces a set height for the menu. Since it has to have a menu vibe, you can also control the cursor by utilizing the pseudo-class: hover as shown below:

.drop-menu:hover .sub-menu {

display: inline-block;

}

 

Styling

In establishing your menu, you’ll also want to imitate some properties that were presented earlier. Different styles can be utilized to improve the visual effects of the CSS3 dropdown menu.

.sub-menu {

display: none;

width: 600px;

background: #gggg;

padding: 20px 20px;

margin-right: -10px;

margin-bottom: 11px;

border: 3px solid #fff;

-webkit-box-shadow: 0px 15px 30px rgba(0,0,0, 0.2);

-moz-box-shadow: 0px 15px 30px rgba(0,0,0, 0.2);

box-shadow: 0px 15px 30px rgba(0,0,0, 0.2);

}

 

The box-shadow style is quite superior since it utilizes a property which generates a gradient effect. A sample of the property is: set x-axis to 3px, y-axis to 24px, blur to 28px and shadow color to black with 30% alpha

Since the drop down menu is in itself a form of list, it also needs definition:

.sub-menu li {

list-style-type: none;

display: block;

border-bottom: 3px dotted #eaeaea;

font-size: 24px;

height: 30px;

padding: 10px 0;

}

 

Addition Of Small Icons

Beside the drop down labels, this code also enables the incorporation of small icons. It is a well-liked principle in designing for web pages to utilize images as an alternative to text to express implication. On how it is done, please refer to the example below:

.sub-menu li img {

margin-left: .8em;

}

 

This code is also striking in that it appends small particulars like a dotted solid double border between each item:

.sub-menu li:hover {

p. double {border-style: double;

}

 

Animated Symbols

Animated symbols can also be utilized to communicate to the user that it must be clicked. This symbol features rotation that the user can conveniently utilize when dragging and clicking items of concern.

.plus {

display: inline-block;

-o-transition: .2s ease-in-out;

-moz-transition: .2s ease-in-out;

-webkit-transition: .2s ease-in-out;

}

.drop-menu:hover .plus {

-o-transform: rotate(60deg);

-moz-transform: rotate(60deg);

-webkit-transform: rotate(60deg);

}

Crafting CSS Background-Color and its Legal Values

This article presents relevant facts in crafting your CSS background and how they are crafted specifically for a background-color. It emphasizes the relevance of possible color values in CSS background-color.

In any web page you see, backgrounds primarily establish a nice catchy feel because they dictate the overall style of your page. Creating a background with the use of Cascading Style Sheet (CSS) mainly sets the background properties of any element you use. Also, in crafting background-color, possible color values must be taken into great consideration since they provide exact effect of your page. Let us identify what are those legal color values used in CSS background-color property.

Legal Color Values

Before proceeding, you have to consider that there are certain accepted color values in CSS that dictates the background color properties. Generally, background color can be used with the following method:

Hexadecimal color – this is specified in a pound sign (#) followed by 6 hex values. It is specified with: #RRGGBB, which stands for RR (red), GG (green) and BB (blue). All integers must be between 0 (lowest) and FF (highest). For example:

p{background-color:#ff0000;}

This shall show that the background color of the paragraph shall be red since it has the highest value among the three.

RGB color – this is specified with: rgb which stand for (red, green, blue). Each parameter defines the intensity of the color which can be between 0 and 255 or a percentage value (from 0% to 100%). For example:

p{background-color:rgb(0,255,0);}

This shall show that the background color of the paragraph shall be green since it has the highest value basing above.

Color Name – this is the most easily understood type for which the exact names are used instead of codes. You have to check if color names are supported by CSS. For example:

p{background-color:white;}

Creating the Background Color Properties

In making CSS code, you have to be familiar with the basic CSS property rule. It consists of the name of property, colon, space and then the value with its specificity. What makes CSS property confusing is that you need to have a good deal of memory and attention for different codes of elements used that could make it trickier. The things you should look into are:

  • All properties can only detect specific range of values. You need to check for these specifications or else it won’t work.
  • Never get an erroneous punctuation
  • Get the right and exact word of the property. No more and no less.

The ‚Background-Color’ Property

If we are to apply all information mentioned above in CSS, you have to learn few more examples. The background-color property illustrates the back color of an element. For example:

body {background-color: #FFCC66;}

h1 {color: #990000;background-color: #FC9804;}

In this illustration, <body> element contains all the content of an HTML document. If you want to change the back color of the entire web page, then this property should be applied to <body> element. In the other hand, <h1> element pertains to the content of the heading. Here you can apply back colors and text of the headline.


The Importance of CSS Anchors, Links and Pseudo Classes In Making Websites

Beautifully created websites that serve a purpose are always a joy to look at. There is interaction between the viewer and the site itself and you can easily go through the pages of the website with full ease. Programmers know that this is why CSS anchors, links and pseudo classes are in website. These little helpers or syntax codes are added to a site so that when viewers click on links, the links will change in color so that they will know that they have already clicked on that certain part already. Getting these codes can be tricky and you have to fully understand the scope of the links you want to anchor it to so it creates a good flow in the website.

CSS Anchors, Links and Pseudo Classes Syntax

a:link{color:#002200;}

a:visited{color:#222222;}

a:hover{color:#555555;}

a:focus{color:#333333;}

a:active{color:#002200;}

In the example, you will see the codes you need to input in your HTML editor so that texts and links will work differently when pressed, visited, hovered, and on standby mode. The RED arrow points to a link that is its natural mode. When you click on that text, the link will change color (as illustrated in the color change of #222222). This is illustrated in the PURPLE arrow. Now, when you are just hovering your mouse pointer over a link, it can change color too and that is illustrated in the GREEN arrow. The YELLOW arrow is when you place your mouse directly over a certain link and ready to click it. The black arrow points to an active link, just like the first one.

Knowing When to Use the Codes and Syntax

As programmers, it is very important that you know which syntax to use in order for the website to look very professional. You do not want to confuse the viewers when they visit your site because it will mean that they will not return to your site anymore because they did not enjoy their first visit.

The Future of CSS Anchors, Links and Pseudo Classes

The world of computer programming language is always changing just like any nation’s language because of the mere reason that it is evolving. Each year, some new computer language is introduced and sometimes the programming is becoming graphical and not text based like HTML programming language. But, the good thing with these CSS codes is that they will always be useful and helpful to anyone who wishes to have full manipulation of their sites.


CSS Margins and How Programmers Make Use Of Them

Programmers know a trick or two in making websites look professional and have a stream-lined appearance. When they go out making a webpage, they will do everything possible to make your website stand out. Of course this all comes down to a fee, so the more jazzed up you want your site to look, the higher these programmers will charge you. Now, if you have some knowledge about programming, all it takes is a few lessons online and you can probably design a simple site already just by using CSS margins and other jargons that are needed to make a site.

What Are CSS Margins?

Basically, these margins define how much space you want around something such as your text, image, or even a block. The CSS margin has values that you input which will tell the HTML editor what you want the site to look like. For example, the margins can be defined by length, percentage, and even auto. The basic or default margin in programming code is set at 10px. The following are the defaults if you want to set them at specified areas of the webpage:

Margin-top:10px

Margin-right:20px

Margin-left:150px

Margin-bottom:25px

 

When you do your programming for HTML, you can do a shorthand version of this and just specify, (margin: 10px). As pictured above, the left margin is defaulted at 15px, the top at 10px, the right at 20px, and the bottom at 25px.

How Can You Personalize Your Site Using CSS Margins?

The good thing when you use margins on your site is that it will definitely look very professionally made as you will not have overflowing elements come into another element such as a body of text or images. Remember that margins are for the whole page, and not just a specific element. Most margins are set to minimum because readers might have a hard time reading the content on your webpage if the margins are set to big and all you see is just a small portion of the page. Tinker around with the values and properties until you come with one look that you are happy and satisfied with.

What Else Is Good With CSS Margins?

These margins will give your webpage a very liquid appearance. You will have to make sure that the values and percentages are set correctly because the margins are the ones that are outside of the border and usually they are set at minimum amounts of pixels.