CSS is a widely used method of presenting website pages. Though an important tool of web design it has been termed as a language for the diligent. This is because the learning procedure has to be followed and understood comprehensively. This is attributed to specific details which a learner has to pay attention to in order to excel in this wonderful web presentation method. Below are discussed some CSS tricks to unlock the potential of a simple user, while practicing CSS for website presentation.
CSS Tricks #1 :: Horizontal Centering
These are the process of bringing the elements on the middle alignment of the pages. To accomplish centering, three things are required. The first step is to set up a width on the element in concern. The user should set the right and left margins to auto. The designer should consider the appearance in Internet explorer browser. They should include a doctype to maintain older internet explorer versions from distorting the appearance. The following is a ample of centering method.
div#page {width: 960px; margin: 0 auto}
CSS Tricks #2 :: Vertical Centering Text with Line-Height
This is done by setting the line height of the text used to equal size of the block. This will enhance attractive appearance of the finalized page. But make sure to use this you should have a single line of text. It is done by the command given below.
Say your html code is:
<div id="content">your content here</div>
Then use the following CSS code:
div#content {line-height: 100px;}
CSS Tricks #3 :: Positioning elements
The specified choice of elements in positioning will determine the beauty of the output design of the page. There are generally used specifications to design which are known to bring out the best output. The top left corner should be positioned halfway from the top. This is done by setting a negative fifty percent margin which is equivalent to half of div height. Horizontal alignment should not be left out. It should be done for the standard browser requirement to avoid cases of distortion in change of browser. the margin should be positioned fifty percent to the width.
CSS Tricks #4 :: Fluid Images
They should be created with a setup of maximum page width on the images. Some browsers such as Internet Explorer may not offer a choice for 100% width. But they will always treat the margin as maximum width. The command given below serves this role appropriately.
img {max-width: 100%}
CSS Tricks #5 :: 3D Buttons with CSS
3D CSS buttons can be easily crated in a page. This is done effectively by making elements boarders with different colors. This method is similar to creation of shadows where the brighter side is offered a bright color and the side with limited light is offered a duller color. The final button will have a light source on its upper left side. In most cases two color shades are used to offer different color schemes. It is done as shown below:
div#button {background: #888; border: 1px solid; border-color: #999 #777#999 }
CSS Tricks #6 :: Right to Leave
This is meant to elaborate the riding of a browser to the CSS selectors. They will read from right to left. Therefore in the selectors such as for the title, where the title’s first world is ‘title’, the browser will identify the first word i.e. title. This is referred to as key selector. This is usually the element being selected by the browser.
CSS Tricks #7 :: Types of selectors
There are four main types of selectors. They include ID, class, tag and universal. Their importance can be determined to follow the same order as listed here. The ideas of right to left and key selector are usually combined to give the best output. When selecting fonts the this command will be appropriate.
{font-size:62.5%}
CSS Tricks #8 :: Instant Shift
Different browsers are known to use different values of CSS properties. This is a concern in any cross-browser development. The margins should always be set as zero as the default to ensure that they appear the same way in all browsers.it will also ensure compatibility with all older versions for a similar display of the page. One may decide to use the CSS reset to ensure that all browsers will give similar page characteristics.
CSS Tricks #9 :: Setting Padding on Background Images
One should be careful when setting padding. This is because the images on the background do not create a CSS box which was initially absent. Instead the user should use the background positioning properties of the background images to create similar effects.
CSS Tricks #10 :: Background position
Top values can be bottom, center, or top and Left values may be left, center, or bottom. This combination is universal in any browser. The positioning properties to be used may be 5px by 5px padding around an image. As shown by the example below:
{background-position: 5px 5px}
CSS Tricks #11 :: Stretching a Background Image
It is appealing to have a background that can stretch on its own. This can be created in CSS by creating an image that can be enough for the space, larger or smaller than the space provided. The user may use the background positioning property to appropriately center the background image. It may be set at fifty to fifty percent on the page. This gives a perfectly centered outcome. Since the image can stretch, it will either enlarge or diminish to perfectly fit any size of the page provided by the user. It will be prudent to have the most important details of the image placed at the center because this is the point where visibility is guaranteed after stretching. This is an example of stretching technique:
{background-position: 50% 50%}
CSS Tricks #12 :: Wrap Links
Since the background does not create a new CSS box, it is advised that the user wraps a link directly around it. This can either be done around the content or the specific element for instance.
<div id="bkgd-image">
