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 © Andrew Bone. All rights reserved. Created : November 3, 2014 Last updated :February 14, 2016

Latest Item on Science Library:

The most recent article is:

Fission

View this item in the topic:

Nuclear and Particle Physics

and many more articles in the subject:

Subject of the Week

Computing

Information Technology, Computer Science, website design, database management, robotics, new technology, internet and much more. JavaScript, PHP, HTML, CSS, Python, ... Have fun while learning to make your own websites with ScienceLibrary.info.

Computer 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
Lugano English

Quote of the day...

"Now, I am afraid my usefulness has ended."
"Maestro Galileo, don't be like that. I promise you you will go down in history."
"That's what my teacher told me. If you don't study harder, he said, you will go down in history."

ZumGuy Internet Promotions

Yoga in Mendrisio