Who am I?
- Web Opener
- Core Contributor
- nimbupani.com and @divya
setTimeout and setInterval for visual effects.<section class="slideshow">
Chee Liam has checked in Barcelona! Check it out!
Julia has partied at Sentosa! Sentosa parties
</section> 
Radha is slunking at Kuala Lumpur Catch him here!
.slideshow {
/* Set the viewbox for the slideshow */
width: 500px;
height: 300px;
/* Make all slides position absolutely w.r.t this viewbox */
position: relative;
}
.slideshow article {
/* Each slide is stacked on top of each other */
position: absolute;
top: 0; left: 0;
}
.cssanimations .slideshow article {
/* Hide all slides to prepare
for display with animations */
opacity: 0;
/* Each slide animates linearly
in 12s cycles forever using fade animation */
animation: fade 6s linear infinite;
}
.cssanimations .slideshow article:nth-of-type(2) {
/* Delay starting animation for this slide by 2s */
animation-delay: 2s;
}
.cssanimations .slideshow article:last-of-type {
/* Delay starting animation for this slide by 4s */
animation-delay: 4s;
}
article:nth-of-type(2)
2nd in the list of siblings of the type article
article:last-of-type
last in the list of siblings of the type article
animation: fade Animation Name 6sDuration of the animation linear Timing function to use infinite;
/* The fade animation */
@keyframes fade {
/* Fades in from 0% to 4% of animation */
0% { opacity: 0; }
4% { opacity: 1; }
/* From 4% to 33% keep opacity steady at 1 */
33% { opacity: 1; }
/* Fades out in 4%(37% - 31%) of animation */
37% { opacity: 0; }
100% { opacity: 0; }
}
.cssanimations .slideshow:hover article {
animation-play-state: paused;
}
<nav> <a href="#one" title="View First Friend Update">●</a> <a href="#two" title="View Second Friend Update">●</a> <a href="#three" title="View Third Friend Update">●</a> </nav>
.slideshow nav {
/* Position above the slideshow */
text-align: center;
margin-top: -2em;
font-size: 2em;
display: block;
}
.slideshow article {
/* Prepare slides for showing when clicked */
opacity: 0;
transition: opacity 1s linear;
}
.slideshow article:first-of-type,
.slideshow article:target {
/* If no article element is targetted,
have first slide show, else,
show the target element */
opacity: 1;
}
transition: opacityCSS property to apply on 1sTime transition should takelinearEasing Function
/* Styles for smaller screens */
.slideshow article {
padding: 1em;
overflow: hidden;
}
.slideshow img {
float: left;
width: 100px;
}
@media screen and (min-width: 800px) {
/* Styles we used previously */
}
@media screen Type of media: tv, print, projection and combining queries, also (not, only and ","min-width: A media feature 800px Value for that media feature)
<span class="loader">loading…</span>
.cssanimations .loader {
/* Set the size of the spinner */
width: 100px;
height: 100px;
/* We want to hide the text "loading" */
text-indent: 110px;
white-space: nowrap;
overflow: hidden;
/* There is no spinner but a circular spinner */
border-radius: 100px;
/* The Real Magic! */
background-image: radial-gradient(contain, black 0%, black 60%, transparent 62%),
linear-gradient(transparent 0%, indianred 90%, indianred 100%),
linear-gradient(0deg, indianred 0%, indianred 50%, #000 50%, indianred 100%);
}
background-image: radial-gradient(…)Appears on top of all other background images, linear-gradient(…)Penultimate background image, linear-gradient(…)Lowest background image;
linear-gradient(0degdirection for the gradient creating a gradient line, indianred 0%A color stop, aliceblue 50%Another color stop, indianred 100%Last color stop);
Color stops are points on the gradient line
.loader {
animation: spin 2s linear infinite;
}
@keyframes spin {
/* Make the element spin to 360deg */
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
html {
@include background-image(
linear-gradient(left top, white, #ddd));
}
html {
background-image: -webkit-gradient(linear, 0% 0% , 100% 100% , color-stop( 0% , #ffffff ), color-stop( 100% , #dddddd ));
background-image: -webkit-linear-gradient( left top , #ffffff , #dddddd );
background-image: -moz-linear-gradient( left top , #ffffff , #dddddd );
background-image: -ms-linear-gradient( left top , #ffffff , #dddddd );
background-image: -o-linear-gradient( left top , #ffffff , #dddddd );
background-image: linear-gradient( left top , #ffffff , #dddddd );
}
html {
@include transform2d(rotate(90deg));
}
html {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
sudo* gem install sass sudo* gem install compass
* On a mac
Chris Coyier @chriscoyier
Lea Verou @leaverou
Nicolas Gallagher @necolas
Ryan Seddon @ryanseddon
Simurai @simurai
David DeSandro @desandro
Thierry Kolblentz @thierrykoblentz
Zoe M Gillenwater @zomigi::before, ::after) only available on Aurora.