A K Ganguly confirmed on Tuesday that he had resigned as chairman of the WBHRC.

Prudent policy support from fiscal side and in turn monetary policy could leading to a virtuous cycle of recovery

In a situation mirroring the change in the national economy, the tertiary sector in Jammu and Kashmir is fast threatening to overtake the primary sector.

Early this week, Fieldfresh, an initiative of Bharti-Rothschild, dispatched a consignment of baby corns to London. In 2008, the firm had exported 200 million tonnes (MT) of vegetables to the European markets...

Spiralling aflatoxin levels in groundnuts are giving nightmares to exporters in Gujarat, which accounts for over 50 per cent kernel exports from India.

The Saurashtra Kutch region, popularly known as India''s groundnut bowl, is threatening to fall off the agricultural map.

Horticulture department has for the first time sown the crop on three farms, cooperative society procured 1,200 quintals of turmeric seeds from Maharashtra this season.

A major fire broke out at Adharwadi dumping ground in Kalyan (West), engulfing the entire area into thick smoke. Four fire tenders of Kalyan-Dombivli Municipal Corporation are trying to control the fire.

'Time is throwing something at you, one should grab such opportunities right away.'

I’m trying to record a cover version each week of songs that have really influenced me. They’re not especially polished, but it gives me a chance to experiment with my recording studio outside my usual working practices. This is the first Velvet Underground song I heard. I was at a student party, sitting next to […]

Barker Library - GB1003.2.G76 2019

Online Resource

Online Resource

MEDIA PhonCD M316 bre

Browsery TA712.H86 2018

Dewey Library - QA63.P67 2020

Enthusiasm for British television is a force of nature. That goes even more so for British television fandom outside Britain. All of us have known someone, or indeed been someone, who shifted their cultural allegiances wholesale after watching a single episode of, say, Monty Python's Flying Circus. But even that hugely influential comedy series commands […]

Download Free <i>Doctor Who</i> Backgrounds for Virtual Meetings (Plus Many Other BBC TV Shows) is a post from: Open Culture. Follow us on Facebook, Twitter, and Google Plus, or get our Daily Email. And don't miss our big collections of Free Online Courses, Free Online Movies, Free eBooks, Free Audio Books, Free Foreign Language Lessons, and MOOCs.

Online Resource

Gilbey, Ryan, author

Online Resource

Cervical cancer is highly preventable—but only if you live in a place where there’s access to the human papillomavirus (HPV) vaccine and routine gynecological screening. Recent advances in vaccines protecting against HPV infection, which is the primary cause of the cancer, and improved cervical screening tests promise a future with a significantly reduced prevalence of…

Online Resource

Online Resource

Ewing, Robyn (Robyn Ann), 1955- author

Cimini, Riccardo, author

Hayden Library - QP395.L36 2018

New archaeological evidence suggests the same black plague that decimated Europe also took its toll on sub-Saharan Africa. Host Sarah Crespi talks with Contributing Correspondent Lizzie Wade about diverse medieval sub-Saharan cities that shrank or even disappeared around the same time the plague was stalking Europe. In a second archaeological story, Meagan Cantwell talks with Gustavo Politis, professor of archaeology at the National University of Central Buenos Aires and the National University of La Plata, about new radiocarbon dates for giant ground sloth remains found in the Argentine archaeological site Campo Laborde. The team’s new dates suggest humans hunted and butchered ground sloths in the late Pleistocene, about 12,500 years ago. This week’s episode was edited by Podigy. Download the transcript (PDF) Listen to previous podcasts. About the Science Podcast [Image: Ife-Sungbo Archaeological Project; Music: Jeffrey Cook]

Online Resource

Online Resource

Online Resource

Online Resource

Shaw, Les

Did you know that you can use CSS to create beautiful animations and interesting effects? Combined with HTML and JavaScript, or even on its own, CSS can be extremely powerful. You’d be surprised at what developers can create. From simple …

Army operation against the holed up militants in Keran Sector entered the 13th day today.

Nearly 20 of the acquitted are from the upper-caste hamlet of Bathe.

Collison, Chas

Jarvis, W. Todd, author

Copenhaver, Adam, author

Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required.

• Demo: Multiple Backgrounds with CSS 2.1
• Demo: Multiple Borders with CSS 2.1

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

How does it work?

Essentially, you create pseudo-elements using CSS (:before and :after) and treat them similarly to how you would treat HTML elements nested within your target element. But they have distinct benefits – beyond semantics – over the use of nested HTML elements.

To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning.

The pseudo-elements contain no true content and are absolutely positioned. This means that they can be stretched to sit over any area of the “parent” element without affecting its content. This can be done using any combination of values for the top, right, bottom, left, width, and height properties and is the key to their flexibility.

What effects can be achieved?

Using just one element you can create parallax effects, multiple background colours, multiple background images, clipped background images, image replacement, expandable boxes using images for borders, fluid faux columns, images existing outside the box, the appearance of multiple borders, and other popular effects that usually require images and/or the use of presentational HTML. It is also possible to include 2 extra presentational images as generated content.

The Multiple Backgrounds with CSS 2.1 and Multiple Borders with CSS 2.1 demo pages show how several popular examples of these effects can be achieved with this technique.

Most structural elements will contain child elements. Therefore, more often than not, you will be able to gain a further 2 pseudo-elements to use in the presentation by generating them from the first child (and even last-child) element of the parent element. In addition, you can use style changes on :hover to produce complex interaction effects.

Example code: multiple background images

Using this technique it is possible to reproduce multiple-background parallax effects like those found on the Silverback site using just one HTML element.

The element gets its own background image and any desired padding. By relatively positioning the element it acts as the reference point when absolutely positioning the pseudo-elements. The positive z-index will allow for the correct z-axis positioning of the pseudo-elements.

#silverback {
  position: relative;
  z-index: 1;
  min-width: 200px;
  min-height: 200px;
  padding: 120px 200px 50px;
  background: #d3ff99 url(vines-back.png) -10% 0 repeat-x;
}

Both pseudo-elements are absolutely positioned and pinned to each side of the element. The z-index value of -1 moves the pseudo-elements behind the content layer. This way the pseudo-elements sit on top of the element’s background and border but all the content is still selectable or clickable.

#silverback:before,
#silverback:after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 100px;
}

Each pseudo-element then has a repeated background-image set. This is all that is needed to reproduce the parallax effect.

The content property lets you add an image as generated content. With two pseudo-elements you can add 2 further images to an element. They can be crudely positioned within the pseudo-element box by varying other properties such as text-align and padding.

#silverback:before {
  content: url(gorilla-1.png);
  padding-left: 3%;
  text-align: left;
  background: transparent url(vines-mid.png) 300% 0 repeat-x;
}

#silverback:after {
  content: url(gorilla-2.png);
  padding-right: 3%;
  text-align: right;
  background: transparent url(vines-front.png) 70% 0 repeat-x;
}

The finished product is part of the Multiple Backgrounds with CSS 2.1 demo.

Example code: fluid faux columns

Another application is creating equal height fluid columns without images or extra nested containers.

The HTML base is very simple. I’ve used specific classes on each child div rather than relying on CSS 2.1 selectors that IE6 does not support. If you don’t require IE6 support you don’t actually need the classes.

<div id="faux">
  <div class="main">[content]</div>
  <div class="supp1">[content]</div>
  <div class="supp2">[content]</div>
</div>

The percentage-width container is once again relatively positioned and a positive z-index is set. Applying overflow:hidden gets the element to wrap its floated children and will hide the overflowing pseudo-elements. The background colour will provide the colour for one of the columns.

#faux {
  position: relative;
  z-index: 1;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  background: #ffaf00;
}

By using relative positioning on the child div‘s you can also control the order of the columns independently of their source order.

#faux div {
  position: relative;
  float: left;
  width: 30%;
}

#faux .main { left: 35%; }
#faux .supp1 { left: -28.5%; }
#faux .supp2 { left: 8.5%; }

The other two full-height columns are produced by creating, sizing, and positioning pseudo-elements with backgrounds. These backgrounds can be (repeating) images if the design requires.

#faux:before,
#faux:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 33.333%;
   background: #f9b6ff;
}

#faux:after {
   left: 66.667%;
   background: #79daff;
}

The finished product is part of the Multiple Backgrounds with CSS 2.1 demo.

Example code: multiple borders

Multiple borders are produced in much the same way. Using them can avoid the need for images to produce simple effects.

An element must be relatively positioned and have sufficient padding to contain the width of the extra border you will be creating with pseudo-elements.

#borders {
   position: relative;
   z-index: 1;
   padding: 30px;
   border: 5px solid #f00;
   background: #ff9600;
}

The pseudo-elements are positioned at specific distances away from the edge of the element’s box, moved behind the content layer with the negative z-index, and given the border and background values you want.

#borders:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid #ffea00;
   background: #4aa929;
}

#borders:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 5px solid #00b4ff;
   background: #fff;
}

That’s all there is to it. The finished product is part of the Multiple Borders with CSS 2.1 demo.

Progressive enhancement and legacy browsers

IE6 and IE7 have no support for CSS 2.1 pseudo-elements and will ignore all :before and :after declarations. They get none of the enhancements but are left with the basic usable experience.

A warning about Firefox 3.0

Firefox 3.0 supports CSS 2.1 pseudo-elements but does not support their positioning. Due to this partial support, you should avoid declaring display:block for absolutely positioned pseudo-elements that explicitly declare a width or height values. However, when using borders there is no graceful fallback for Firefox 3.0. Although, sometimes an improved appearance in Firefox 3.0 can be achieved by adding display:block to pseudo-element hacks that use borders.

Enhancing with CSS3

All the applications included in this article could be further enhanced to take advantage of present-day CSS3 implementations.

Using border-radius, rgba, and transforms, and CSS3 multiple background images in tandem with pseudo-elements can produce even more complex presentations that I hope to include in a future article. Currently there is no browser support for the use of CSS3 transitions or animations on pseudo-elements.

In the future: CSS3 pseudo-elements

The proposed extensions to pseudo-elements in the CSS3 Generated and Replaced Content Module include the addition of nested pseudo-elements (::before::before), multiple pseudo-elements (::after(2)), wrapping pseudo-elements (::outside), and the ability to insert pseudo-elements into later parts of the document (::alternate).

These changes would provide a near limitless number, and arrangement, of pseudo-elements for all sorts of complex effects and presentations using just one element.

Let me know what you’ve done

I’ve focused on just a few applications and popular effects. If you find other applications, limitations, or want to share how you’ve applied this technique please leave a comment below or let me know on Twitter (@necolas.

Translations

• 使用css2.1实现多重背景、多重边框效果

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 at the time of writing.

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 {
  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 uses transform:scale().

Producing an exact mirror of an element or pseudo-element can be done using transform:scaleX(-1), transform:scaleY(-1), and transform: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;
  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 opacity, border-radius, border-image, box-shadow, transforms, 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.

Thanks to Mathias Bynens for reading and giving feedback on a draft of this article.

Online Resource

Online Resource

Rotch Library - HT361.G76 2019