Showing posts with label css border default value. Show all posts
Showing posts with label css border default value. Show all posts

Friday, 6 December 2013

CSS : Forcing Grayscale Printing

Forcing Grayscale Printing

 

At the time of this writing, this will only work in Chrome 18+, but it's  standardized so support will eventually come to everywhere.

@media print {
  body {
    /* IE4-8 and 9 (deprecated). */
    filter: Gray();
    /* SVG version for IE10, Chrome 17, FF3.5, 
       Safari 5.2 and Opera 11.6 */
    filter: url('#grayscale'); 
    /* CSS3 filter, at the moment Webkit only. Prefix it for
       future implementations */
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); /* future-proof */
  }
}



CSS : Background image Trick

CSS background image Trick


Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.
Demos: Example CSS background image hacks
Pseudo-element hacks can fill some gaps in existing browser support for CSS features, without resorting to presentational HTML. In some cases, they even make it possible to emulate things that are not currently part of any W3C working draft, like background transforms and background image opacity.
Most of the hacks in this article tie in with the pseudo-element hack described in an earlier article – Multiple Backgrounds and Borders with CSS 2.1. That article already describes how to emulate multiple background support and its demo page shows several other uses of the basic principle. This article presents a few of those effects and applications in greater detail.

Emulating background-crop

Known support: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+
Demo: Pseudo background-crop
Background image cropping can be emulated in modern browsers using only CSS 2.1. The principle behind a pseudo background-crop is to apply a background-image to a pseudo-element rather than the element itself. One example would be to crop an image to display in the background. Another would be to crop an image sprite to display icons alongside text in links.
In several cases, using pseudo-elements may have advantages over existing, alternative techniques because it combines their strengths and avoids some of their weaknesses.
Google, Facebook, and Twitter all make use of empty DOM elements to crop dense sprites and display icons next to certain links in their interfaces. The alternative is not to use empty elements but be forced into using multiple images and/or to design sub-optimal image sprites that have their component images spaced out.
Pseudo-elements can be used in much the same way as empty DOM elements. This simultaneously eliminates the need for presentational HTML and doesn’t depend so heavily on an image sprite’s design. Using pseudo-elements for this purpose does have its own drawback – a lack of support in legacy browsers like IE6 and IE7. However, the technique will progressively enhance capable browsers while leaving a perfectly usable experience for incapable browsers.

Example code: cropping a sprite

This example shows how to crop icons that are part of a dense image sprite that uses a 16px × 16px grid. It uses a simple list and specifies a class for each type of action.
<ul class="actions">
   <li class="save"><a href="#">Save</a></li>
   <li class="delete"><a href="#">Delete</a></li>
   <li class="share"><a href="#">Share</a></li>
   <li class="comment"><a href="#">Comment</a></li>
</ul>
Styling can be applied to present this list in whatever way is needed. From that base, a pseudo-element can be created and then treated as you would an empty, inline DOM element (e.g. <span>).
In this case, the :before pseudo-element is used and sized to match the sprite’s grid unit. It could be sized to whatever dimensions are required to match a section of the sprite that needs to be cropped.
.actions a:before {
   content:"";
   float:left;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url(sprite.png);
}

.save a:before {background-position:0 -16px;}
.delete a:before {background-position:0 -32px;}
.share a:before {background-position:0 -48px;}
.comment a:before {background-position:0 -64px;}
Providing hover, focus, active, and “saved” states is just a case of declaring the correct background position in each case.
.save a:hover:before,
.save a:focus:before,
.save a:active:before {background-position:-16px -16px;}

.saved a:before {background-position:-32px -16px;}

Future alternatives

In the future, there will be other alternatives.  Firefox 3.6 added -moz-image-rect  to allow background images to be cropped. But this is not supported by other browsers and looks likely to be replaced by an alternative proposal (to use fragment identifiers) that is part of the CSS Image Values Module Level 3 specification. As far as I know, no stable release of any modern browser supports the use of fragment identifiers with bitmap images.

Emulating background-transform

Known support: Firefox 3.6+, Opera 10.5+, Safari 4+, Chrome 4+, IE 9+
Demo: Pseudo background-transform
Combining pseudo-elements and transforms makes it possible to emulate background transforms. A pseudo background-transform can be used to rotate, scale, and skew background images and sprites. There is no proposal for background-image transforms, so a pseudo-element hack is one way to emulate it.

Example: rotating a background image

The example of cropping sprites can be further developed by reducing the number of different images used in the sprite. Rather than applying transforms to images in a graphics package, they can be applied in the CSS.
The code to do this is relatively simple and might look something like:
.accordion a:before {
   content:"";
   float:left;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url(sprite.png) no-repeat 0 0;
}

.accordion.open a:before {
   -webkit-transform:rotate(90deg);
   -moz-transform:rotate(90deg);
   -ms-transform:rotate(90deg);
   -o-transform:rotate(90deg);
   transform:rotate(90deg);
}


To apply a transform to a more conventional background image (e.g., a large graphic sitting behind some content that doesn’t affect the positioning of other components) requires use of the positioning technique detailed in the article Multiple Backgrounds and Borders with CSS 2.1.
It involves setting the background image on a pseudo-element which is then positioned behind the content layer of an element using absolute positioning and z-index.

Example: mirroring a background image

There are instances when mirroring a background image might be desired. The approach is similar to that for rotating an image, but this time usestransform:scale().
Producing an exact mirror of an element or pseudo-element can be done using transform:scaleX(-1)transform:scaleY(-1), andtransform:scale(-1,-1) to mirror along the x-axis, y-axis, and both axes, respectively.
The following code is an example of how a pseudo background-transform might be used for pagination links. A pseudo-element displays a single image (or region of a sprite) and is then mirrored. The image’s appearance is such that a rotation cannot produce the desired counterpart. Only a scale operation can do it.
.prev a:before,
.next a:before {
   content:"";
   float:left;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url(sprite.png) no-repeat 0 0;
}

.next a:before {
   float:right;
   margin:0 0 0 5px;
   -webkit-transform:scaleX(-1);
   -moz-transform:scaleX(-1);
   -ms-transform:scaleX(-1);
   -o-transform:scaleX(-1);
   transform:scaleX(-1);
}
There is no support for this in IE 8. Even if you’re a fan of using IE filters to work around some missing CSS support, they won’t work on pseudo-elements.

Future alternatives

There don’t seem to be any future alternatives in any CSS working draft. For the moment, it looks like pseudo-element hacks will be needed to emulate effects like background transforms and background perspective without resorting to presentational HTML.

Emulating background-position

Known support: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+
Demo: Pseudo background-position
The CSS 2.1 specification limits the values of background-position to offsets from the left and top sides. It’s possible to emulate positioning a background image from the right and bottom sides by applying the background image to a pseudo-element and using it as an additional background layer.
This hack is easily combined with the other hacks in this article. More details on the pseudo background-position hack can be found in the article on Multiple Backgrounds and Borders with CSS 2.1.

Example code

In this example, a pseudo-element is created and placed behind the element’s content layer. The background image is 500px × 300px and declared for the pseudo-element, which is also given dimensions that match those of the image. Since the pseudo-element is absolutely positioned, it can be positioned from the bottom and right of the element using offsets.


#content {
   position:relative;
   z-index:1;
}

#content:before {
   content:"";
   position:absolute;
   z-index:-1;
  bottom:10px;
right:10px;

   width:500px;
   height:300px;
   background:url(image.jpg);
}


Future alternatives

There is a part of the CSS Backgrounds and Borders module working draft that describes an improvement to the background-position property to allow positions to be set from any side. At the moment, Opera 11 is the only stable release of a browser that has implemented it.

Emulating background-opacity

Known support: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 9+
Demo: Pseudo background-opacity
Changing the opacity of a pseudo-background is as simple as modifying the value of the opacity property. There is no IE 8 support for opacity and IE filters will not work on pseudo-elements.

Example code

This example code shows a pseudo-element being created and positioned behind the rest of the element’s content so as not to interfere with it. The pseudo-element is then sized to fit the element using offsets (but could be offset by other values or given an explicit size), given a background image, and has its opacity changed.
#content {
   position:relative;
   z-index:1;
}

#content:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   bottom:0;
   left:0;
   right:0;
   background:url(image.jpg);
   opacity:0.7;
}

Notes

For now, and as far as I am aware, using CSS 2.1 pseudo-elements is the only widely supported (and backwards compatible) way to emulate background image crop, background transform, background opacity, and improved background positioning with semantic HTML.
Even when alternatives in CSS working drafts (e.g., the improved background-position and use of fragment identifiers) are widely implemented, pseudo-element background-image hacks will still have the advantage of letting you use other CSS properties like opacityborder-radiusborder-imagebox-shadowtransforms, etc., which may prove useful in certain situations. It can’t hurt to be aware of these options.
It’s worth mentioning that although you can only generate 2 pseudo-elements from a DOM element, in many cases you can easily use descendant elements to provide more pseudo-elements to play with. This idea was used to help create the rotated example on the CSS drop-shadows demo page and several of the CSS3 examples at the bottom of the pure CSS speech bubbles demo page.


CSS : Centre aligning a block element


Centre aligning a block element

Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen.

You can use the following CSS command:

#content
{
width: 700px;
margin: 0 auto
}


You would then enclose <div id="content"> around every item in the body of the HTML document and it'll be given an automatic margin on both its left and right, ensuring that it's always placed in the centre of the screen. Simple... well not quite - we've still got the pre-IE 6 versions on PC to worry about, as these browsers won't centre align the element with this CSS command. You'll have to change the CSS rules:

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}


This will then centre align the main content, but it'll also centre align the text! To offset the second, probably undesired, effect we inserted text-align: left into the content div.



Other Topics



CSS : Box model hack alternative


CSS box model hack alternative

The box model hack is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on.

 For example, when specifying the dimensions of a container you might use the following CSS rule:

#box
{
width: 100px;
border: 5px;
padding: 20px
}


This CSS rule would be applied to:

<div id="box">...</div>

This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions on PC. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.

A simple alternative is to use this CSS:

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}


And the new HTML would be:

<div id="box"><div>...</div></div>

Perfect! Now the box width will always be 150px, regardless of the browser!



CSS : Image replacement technique


Image replacement technique


It's always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you've got no choice but to use an image.

Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you're a widget seller and you'd like to be found for this phrase in the search engines. You're pretty set on it being an obscure font so you need to use an image:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

This is OK but there's strong evidence to suggest that search engines don't assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

<h1>Buy widgets</h1>

Now, this obviously won't use your obscure font. To fix this problem place these commands in your CSS document:

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}


Be sure to change "image height" to whatever the height of the image is (e.g. 85px)! The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule. Please note, this can cause accessibility issues as any user with images turned off won't be able to see the text.



CSS : Document for printing


CSS document for printing


Lots of web pages have a link to a print-friendly version. What many of them don't realise is that there's no need because you can set up a second CSS document to be called up when a user prints the page.

So, your page header should contains links to two CSS documents, one for the screen, and one for printing:

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />


The first line of code calls up the CSS for the screen (notice the inclusion of media="screen") and the second line calls up the CSS for the printable version (using media="print").

So, what commands should you put in this second CSS document? To work it out, open a blank document and save it as printstyle.css. Next, point the screen CSS command to this document so that the command reads: 

<link type="text/css" rel="stylesheet" href="printstyle.css" media="screen" />.

Now just keep entering CSS commands until the display on the screen matches how you want the printed version to look. 

You'll certainly want to make use of the display: none command for navigation, decorative images and non-essential items. For more advice on this, read Print Different, which also mentions the other media for which you can specify CSS files.



CSS : Border default value

CSS border default value

When writing a border rule you'll usually specify the colour, width and style (in any order).

For example, border: 3px solid #000

will give you a black solid border, 3px thick. However the only required value here is the border style.

If you were to write just border: solid then the defaults for that border will be used. But what defaults?

Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule.



CSS : Two classes together

Two classes together

Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like!

For example:

<p class="text side">...</p>

Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side.
If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.



CSS : WHY, WHATand NEED OF CSS

What is CSS?
  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files

Styles Solved a Big Problem
HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.
All browsers support CSS today.

CSS Saves a Lot of Work!
CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!


CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.


CSS Example
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each line, like this:
Example
p
{
color:red;
text-align:center;
}

CSS : COMMENTS

CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

Physics basic inventions and inventors

1.Which instrument is used to measure altitudes in aircraft's ? Audiometer Ammeter Altimeter Anemometer Explanation : ...