Science Library - free educational site

CSS3

Rounded corners on boxes:

#box {

border: 2px solid;

border-radius: 25px;

}

Shadows around boxes:

#box {

box-shadow: 8px 8px 4px #666;

}

Border from image around box:

#box {

border-image: url(border.png) 30 30 round;

}

Background image:

#box{

background: url(image1.jpg), url(image2.jpg); // superimposes image2 over image1

background-size: 120px 100px; // 100% 100% stretches image to fill all element

background-repeat: no-repeat;

background-origin: content-box; // specifies content-box, padding-box or border-box as where image resides

background-clip: padding-box; // specifies content-box, padding-box or border-box as where background color fills

}

Animated background:

<style>

#box {

width: 240px;

height: 180px;

background: yellow;

-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */

animation: mymove 5s infinite;

/*infinite = loops continuously, nothing = one cycle only*/

@-webkit-keyframes mymove { /* Chrome, Safari, Opera */

50% {background-color: blue;}

/*% of time in this colour*/

}


@keyframes mymove {

50% {background-color: orange;}

}

</style>

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;

/* prefix with @-webkit- for Chrome, Safari, Opera */

Hover effects

div {

width: 100px;

height: 100px;

background: red;

transition: width 6s, height 6s;

}

/* prefix with -webkit- for Safari */

div:hover {

width: 500px; height: 300px;

}

Transitions

Transitions allow styles to be changed dynamically through CSS, rather than cumbersome Flash or JavaScript.

In this example, the width of an elemnt is changed after a delay of 1.5s

<style>

<div id="demo">

width: 100px;

-webkit-transition: width 2s, linear 1.5s; /* For Safari 3.1 to 6.0 */

transition: width 2s, linear 1.5s;

transition-property: width;

transition-duration: 2s;

transition-timing-function: linear;

transition-delay: 1.5s;

</div

div:hover {

width: 200px;

}

</div>

</style>

Content © Renewable.Media. All rights reserved. Created : November 3, 2014 Last updated :February 14, 2016

Latest Item on Science Library:

The most recent article is:

Trigonometry

View this item in the topic:

Vectors and Trigonometry

and many more articles in the subject:

Subject of the Week

Environment

Environmental Science is the most important of all sciences. As the world enters a phase of climate change, unprecedented biodiversity loss, pollution and human population growth, the management of our environment is vital for our futures. Learn about Environmental Science on ScienceLibrary.info.

Environmental Science

Great Scientists

Robert Brown

1773 - 1858

Robert Brown was a pioneer of the use of the microscope for botanical and cell research. He discovered the phenomenon of Brownian Motion, the erratic movement of pollen grains in water, which inspired Albert Einstein to predict the discovery of atoms in a 1905 paper.

Robert Brown
Transalpine traduzioni

Quote of the day...

Mathematics knows no races or geographic boundaries; for mathematics, the cultural world is one world.

ZumGuy Internet Promotions

Renewable energy media services