Multimedia&css

МУЛТИМЕДИЯ И CSS - ПРИМЕРИдоц. М. Иванова

Промяна размера на изображение при посочване с мишка

<html> <head> <title> Мултимедия и CSS: Промяна размера на изображение </title>

<style> body {background-color:pink;} img { width:80px; height:60px; margin:20px;} img:hover { width:280px; height:260px; }</style>

</head> <body> <img src="pica.jpg" alt="Цветя"> </body></html>

Промяна размера на изображение при посочване с мишка

<!DOCTYPE html><html> <head> <title>Мултимедия и CSS: Ефект</title>

<style> body {background-color:pink;} img {width:80px; height:60px; margin:20px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } img:hover {width:280px; height:260px; }</style>

</head> <body> <img src="pica.jpg" alt="Цветя"> </body></html>

Аудио плейър със сянка и закръглени краища

<!DOCTYPE html><html> <head>

<title> Мултимедия и CSS: Аудио със сянка и закръглени краища </title> <style> body { background-color:pink; }

audio {margin:40px;border-radius:50px;box-shadow:10px 10px 10px blue;}

</style></head><body>

<audio src="tiamo.mp3" controls> </audio>

</body></html>

Центрирано видео с рамка

<!DOCTYPE html><html>

<head><title>Мултимедия и CSS: Центрирано видео с рамка</title><style>

body {background-color:brown;margin:10 auto;text-align:center;

}video {

margin-top:50px;border:10px solid green;

}</style>

</head><body>

<video src="mobile.mp4" controls width="150“ height="100"> </video></body>

</html>

Видео и прозрачност

<!DOCTYPE html><html>

<head><title>Мултимедия и CSS: Видео и прозрачност</title><style> body { background-color:blue;padding:0;margin:0;}video { margin:50px;opacity:0.5; }</style>

</head><body>

<video src="mobile.mp4" controls width="200“ height="150"> </video>

</body></html>

Видео и сянка

<!DOCTYPE html><html> <head> <title>Мултимедия и CSS: Видео и сянка</title>

<style> body { background-color:white; } video { margin-bottom:50px;

-moz-box-shadow: 10px 10px 5px blue;-webkit-box-shadow: 10px 10px 5px blue;box-shadow: 10px 10px 5px blue; }

</style> </head> <body> <video src="mobile.mp4" controls width="200" height="150"> </video> </body> </html>

Подравняване <!DOCTYPE html><html> <head> <title>Мултимедия и CSS: Подравняване</title>

<style> body { background-color:white;}

video { border:1px solid green;display:block;margin-bottom:10px; }

video#v1 { -o-object-fit:fill; }video#v2 { -o-object-fit:contain;}video#v3 {-o-object-fit:cover;}

</style> </head> <body> <video id="v1" src="mobile.mp4“ width="200" height="150"> </video> <video id="v2" src="mobile.mp4“ width="200" height="150“> </video> <video id="v3" src="mobile.mp4“ width="200" height="150"> </video> </body> </html>

Оразмеряване

<!DOCTYPE html><html> <head> <title>Мултимедия и CSS: Оразмеряване</title> <style>

body {background-color:white;}video {border:1px solid black; margin-bottom:10px;

width:280px; height:180px; -o-object-fit:none;}video#v1 {-o-object-position:top left; }video#v2 {-o-object-position:right center;}video#v3 {-o-object-position:right bottom;}

</style>

</head> <body> <video id="v1" src="mobile.mp4“> </video> <video id="v2" src="mobile.mp4"> </video> <video id="v3" src="mobile.mp4"> </video> </body> </html>

Мултимедия и CSS:3D завъртяно видео

<html> <head> <title>Мултимедия и CSS:3D завъртяно видео</title>

<style> body {background-color:white;} div.main {position:absolute; top:50%; left:50%; margin-left:-350px; margin-top:-233px;

-webkit-perspective:1000;} div.bg {height:246px; width:380px; -webkit-transform:rotate3d(1,1,0,40deg); background-color:pink;} video {width:280px; top:50px; left:50px; position:absolute; -webkit-box-shadow:-10px 10px 5px blue;}</style>

</head> <body> <div class="main"> <div class="bg">

<video src="mobile.mp4" controls> </video> </div> </div> </body></html>

3D завъртяно видео<html> <head> <title>Мултимедия и CSS:3D завъртяно видео</title>

<style> body {background-color:white;} div.main {position:absolute;top:50%;left:50%;

margin-left:-350px; margin-top:-233px; -webkit-perspective:1000;} div.bg {height:246px; width:380px;-webkit-transform:rotate3d(0,1,0,40deg);

background-color:pink;} video {width:292px; top:50px; left:50px; position:absolute;

-webkit-box-shadow:-10px 10px 5px blue;}</style>

</head> <body> <div class="main"><div class="bg“> <video src="mobile.mp4" controls> </video> </div> </div> </body></html>

Завъртяно видео

<!DOCTYPE html><html> <head> <title>Мултимедия и CSS: Завъртяно видео</title>

<style> body {background-color:white; margin:0 auto; } video {margin:100px; -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -o-transform:rotate(-5deg); -ms-transform:rotate(-5deg); -transform:rotate(-5deg);

width:200px; height:150px;}</style>

</head><body> <video src="mobile.mp4" controls> </video>

</body> </html>

Промяна размера на видео при посочване с мишка

<!DOCTYPE html><html> <head> <title>Мултимедия и CSS: Промяна размера на видео</title> <style> body { background-color:white; margin:0 auto; } video { margin:100px; } video:hover {-webkit-transform:scale(1.5);

-moz-transform:scale(1.5); -o-transform:scale(1.5); -ms-transform:scale(1.5); -transform:scale(1.5);

width:200px; height:150px;} </style>

</head> <body> <video src="mobile.mp4" controls> </video> </body></html>

Завъртане на видео на 360° при посочване с мишката

<html> <head> <title>Мултимедия и CSS: Завъртане на видео</title>

<style> body {background-color:white;} video {width:280px; height:150px; margin:100px; -webkit-box-shadow:5px 5px 5px

blue;} @-webkit-keyframes rotate { 0% { -webkit-transform:rotate (0deg);}

25% { -webkit-transform:rotate (90deg);}50% {-webkit-transform:rotate (180deg);}75% { -webkit-transform:rotate (240deg);}100% {-webkit-transform:rotate (360deg);} }

@-webkit-keyframes spin {0% {-webkit-transform:rotate3d (0,0,0,0deg); }25% {-webkit-transform:rotate3d (0,1,0,90deg);}50% {-webkit-transform:rotate3d (0,1,0,180deg);}75% {-webkit-transform:rotate3d (0,1,0,240deg);}100% {-webkit-transform:rotate3d (0,1,0,360deg);}}

@-moz-keyframes rotate {0% {-moz-transform:rotate (0deg);}25% {-moz-transform:rotate (90deg);}50% {-moz-transform:rotate (180deg);}75% {-moz-transform:rotate (240deg);}100% {-moz-transform:rotate (360deg);}}

video {-webkit-transform:rotate3d (0,1,0,180deg);} video:hover { -moz-animation:rotate 2s 1 linear; -webkit-animation:spin 12s infinite

linear;}</style>

</head> <body> <video src="mobile.mp4" controls> </video> </body> </html>

Прозрачност при посочване с мишката<!DOCTYPE html><html>

<head><title>Мултимедия и CSS: Прозрачност</title><style> body { background-color:pink; }

video {opacity:0.5;-webkit-transition: opacity 2s linear;-moz-transition: opacity 2s linear;-o-transition: opacity 2s linear;-ms-transition: opacity 2s linear;transition: opacity 2s linear;width:200px; height:150px;

}video:hover, video:focus { opacity:1; }

</style></head>

<body><video src="mobile.mp4" controls>

</video></body>

</html>

Промяна дебелината на сянка при посочване с мишката

<!DOCTYPE html><html> <head><title>Мултимедия и CSS: Ефект на сянка</title>

<style> body {background-color:pink;} video {margin:100px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;

width:200px; height:150px; /* shadow */ -moz-box-shadow: 5px 5px 5px #999; -webkit-box-shadow: 5px 5px 5px #999; box-shadow: 5px 5px 5px #999; } video:hover {/* shadow */ -moz-box-shadow: 10px 10px 5px #999; -webkit-box-shadow: 10px 10px 5px #999; box-shadow: 10px 10px 5px #999;} </style>

</head> <body> <video src="mobile.mp4" controls></video> </body> </html>

Промяна на размера на видео при посочване с мишката<!DOCTYPE html>

<html>

<head> <title>Мултимедия и CSS: Промяна на размера на видео</title>

<style>

body {background-color:white;}

video { width:146px;

height:76px;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

display:block;

width:200px; height:150px;}

video:hover {width:292px; height:152px;}

</style>

</head>

<body>

<video src="mobile.mp4" controls> </video> </body> </html>

Кръг

<!DOCTYPE html><html><head>

<title>SVG: Кръг</title>

</head><body>

<svg height="200"><circle cx="100" cy="100" r="100"

fill="red" /></svg>

</body></html>

Елипса


<title>SVG: Елипса</title>

</head><body>

<svg height="200"><ellipse cx="100" cy="100" rx="100" ry="50"

fill="brown" /></svg>

</body></html>

Текст


<title>SVG: Текст</title>

</head><body>

<svg><text x="0" y="100" font-size="50" font-family="Georgia"

fill="brown“ stroke="green" stroke-width="1">Проба</text>

</svg></body></html>

Education

Multimedia&css