A lot of times when we are developing we like to keep the pixel size of the web page to a bare minimum. Not only does it decrease load time which creates happier customers, but it also gives a secret bonus to SEO.
If you are not familiar with using pseudo elements, then the table below should help clarify some of the ambiguity behind them. You attach these selectors to css classes, ids, or elements.
Example: a:visited { color:red; }
This would turn every link you visit, red.
All CSS Pseudo Classes/Elements
|
Selector |
Example |
Example description |
|
a:link |
Selects all unvisited links |
|
|
a:visited |
Selects all visited links |
|
|
a:active |
Selects the active link |
|
|
a:hover |
Selects links on mouse over |
|
|
input:focus |
Selects the input element which has focus |
|
|
p:first-letter |
Selects the first letter of every <p> element |
|
|
p:first-line |
Selects the first line of every <p> element |
|
|
p:first-child |
Selects every <p> elements that is the first child of its parent |
|
|
p:before |
Insert content before every <p> element |
|
|
p:after |
Insert content after every <p> element |
|
|
p:lang(it) |
Selects every <p> element with a lang attribute value starting with “it” |
Let’s do something more fun.
The tutorial over at Inspect Element is a great resource on pseudo elements.
How to create the first image in the series:
.stack { position: relative; z-index: 10; }
/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */
How to create the second image in the series:
/* Second stack example (rotated to the right from the bottom left) */
.stack.rotated:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
.stack.rotated:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
How to create the third image in the series:
/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.stack.twisted:after {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
How to create the fourth image in the series:
/* Fourth stack example (Similar to the second but rotated left) */
.stack.rotated-left:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.stack.rotated-left:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
transform: rotate(-6deg);
}
The pseudo elements are respected on every browser (since IE6), but transitions are only supported on the latest browsers. This would make it wise for a developer to stay away from transitions for now.
Leave Your Response