Your SlideShare is downloading. ×
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Multimedia&css
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Multimedia&css

164

Published on

Мултимедия и CSS

Мултимедия и CSS

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
164
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. МУЛТИМЕДИЯ И CSS - ПРИМЕРИ доц. М. Иванова
  • 2. Промяна размера на изображение при посочване с мишка <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>
  • 3. Промяна размера на изображение при посочване с мишка <!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>
  • 4. Аудио плейър със сянка и закръглени краища <!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>
  • 5. Центрирано видео с рамка <!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>
  • 6. Видео и прозрачност <!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>
  • 7. Видео и сянка <!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>
  • 8. Подравняване <!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>
  • 9. Оразмеряване <!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>
  • 10. Мултимедия и CSS:3D завъртяно видео <!--<!DOCTYPE html>--> <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>
  • 11. 3D завъртяно видео <!--<!DOCTYPE html>--> <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>
  • 12. Завъртяно видео <!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>
  • 13. Промяна размера на видео при посочване с мишка <!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>
  • 14. Завъртане на видео на 360° при посочване с мишката<!--<!DOCTYPE html>--> <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>
  • 15. Прозрачност при посочване с мишката <!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>
  • 16. Промяна дебелината на сянка при посочване с мишката <!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>
  • 17. Промяна на размера на видео при посочване с мишката <!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>
  • 18. Кръг <!DOCTYPE html> <html> <head> <title>SVG: Кръг</title> </head> <body> <svg height="200"> <circle cx="100"cy="100"r="100"fill="red"/> </svg> </body> </html>
  • 19. Елипса <!DOCTYPE html> <html> <head> <title>SVG: Елипса</title> </head> <body> <svg height="200"> <ellipse cx="100" cy="100"rx="100"ry="50" fill="brown" /> </svg> </body> </html>
  • 20. Текст <!DOCTYPE html> <html> <head> <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>

×