{"id":263,"date":"2018-05-10T18:43:52","date_gmt":"2018-05-10T18:43:52","guid":{"rendered":"https:\/\/ucsbwebdev.fzilla.com\/?p=263"},"modified":"2018-05-18T01:40:53","modified_gmt":"2018-05-18T01:40:53","slug":"html5-audio-video-and-css3-animations-shadows-and-more","status":"publish","type":"post","link":"https:\/\/ucsbwebdev.fzilla.com\/?p=263","title":{"rendered":"HTML5 (Audio\/Video) and CSS3 (animations, shadows and more)"},"content":{"rendered":"<ul class=\"ul1\">\n<li class=\"li1\"><span class=\"s1\">Music player simple<\/span>\n<ul>\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/codepen.io\/agrublev\/pen\/erWNQW?editors=0010\"><span class=\"s2\">https:\/\/codepen.io\/agrublev\/pen\/erWNQW?editors=0010<\/span><\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li class=\"li2\"><span class=\"s3\">Music player custom<\/span>\n<ul>\n<li class=\"li2\"><span class=\"s3\"><a href=\"https:\/\/codepen.io\/agrublev\/pen\/JvNYGm\"><span class=\"s4\">https:\/\/codepen.io\/agrublev\/pen\/JvNYGm<\/span><\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li class=\"li1\"><span class=\"s1\">Music player fancy <\/span>\n<ul>\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/codepen.io\/emilcarlsson\/pen\/WdRRMX\"><span class=\"s2\">https:\/\/codepen.io\/emilcarlsson\/pen\/WdRRMX<\/span><\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li class=\"li1\"><span class=\"s1\">Video <\/span>\n<ul>\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/codepen.io\/agrublev\/pen\/bMWEGY\"><span class=\"s2\">https:\/\/codepen.io\/agrublev\/pen\/bMWEGY<\/span><\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li class=\"li1\"><span class=\"s1\">Images <\/span>\n<ul>\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/codepen.io\/agrublev\/pen\/gzWPrR?editors=1100\"><span class=\"s2\">https:\/\/codepen.io\/agrublev\/pen\/gzWPrR?editors=1100<\/span><\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li class=\"li3\"><span class=\"s1\">Setting multiple backgrounds for a hero<\/span>\n<ul>\n<li class=\"li3\"><span class=\"s1\"><a href=\"https:\/\/codepen.io\/agrublev\/pen\/PemWbq?editors=1100\"><span class=\"s5\">https:\/\/codepen.io\/agrublev\/pen\/PemWbq?editors=1100<\/span><\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li class=\"li1\"><span class=\"s1\">Adding an image background as a base 64 <\/span>\n<ul>\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/yoksel.github.io\/url-encoder\/\"><span class=\"s2\">https:\/\/yoksel.github.io\/url-encoder\/<\/span><\/a><\/span><\/li>\n<\/ul>\n<ul class=\"ul2\">\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/codepen.io\/agrublev\/pen\/zjwrNg?editors=1100\"><span class=\"s2\">https:\/\/codepen.io\/agrublev\/pen\/zjwrNg?editors=1100<\/span><\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"ul2\">\n<li class=\"li4\">Icon Fonts\n<ul class=\"ul2\">\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/fontawesome.com\/get-started\"><span class=\"s2\">https:\/\/fontawesome.com\/get-started<\/span><\/a><\/span><\/li>\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/material.io\/icons\/\"><span class=\"s2\">https:\/\/material.io\/icons\/<\/span><\/a><\/span>\n<ul class=\"ul2\">\n<li class=\"li4\">&lt;link href=&#8221;https:\/\/fonts.googleapis.com\/icon?family=Material+Icons&#8221; rel=&#8221;stylesheet&#8221;&gt;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"li4\">Advanced Layout HTML 100%<\/li>\n<\/ul>\n<ul class=\"ul2\">\n<li style=\"list-style-type: none;\">\n<ul class=\"ul2\">\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/angelprivate.s3.amazonaws.com\/teaching\/logos\/ZoeZen.zip\"><span class=\"s2\">https:\/\/angelprivate.s3.amazonaws.com\/teaching\/logos\/ZoeZen.zip<\/span><\/a><span class=\"Apple-converted-space\">\u00a0<\/span><\/span><\/li>\n<\/ul>\n<\/li>\n<li class=\"li4\">CSS Animations\n<ul class=\"ul2\">\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/codepen.io\/agrublev\/pen\/vjmLrJ\"><span class=\"s2\">https:\/\/codepen.io\/agrublev\/pen\/vjmLrJ<\/span><\/a><\/span><\/li>\n<li class=\"li1\"><span class=\"s1\"><a href=\"http:\/\/cubic-bezier.com\/#.32,.61,.72,.81\"><span class=\"s2\">http:\/\/cubic-bezier.com\/#.32,.61,.72,.81<\/span><\/a><\/span><\/li>\n<li class=\"li1\"><span class=\"s1\"><span class=\"s2\"><a href=\"https:\/\/daneden.github.io\/animate.css\/\">https:\/\/daneden.github.io\/animate.css\/<\/a><\/span><\/span><\/li>\n<li class=\"li1\"><a style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 16px;\" href=\"https:\/\/codepen.io\/agrublev\/pen\/PemZxe\"><span class=\"s2\">https:\/\/codepen.io\/agrublev\/pen\/PemZxe<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"ul2\">\n<li class=\"li4\">Other fun CSS stuff\n<ul class=\"ul2\">\n<li class=\"li4\">Shadows\n<ul class=\"ul2\">\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/css3gen.com\/box-shadow\/\"><span class=\"s2\">https:\/\/css3gen.com\/box-shadow\/<\/span><\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li class=\"li4\">Gradients\n<ul class=\"ul2\">\n<li class=\"li1\"><span class=\"s1\"><a href=\"https:\/\/cssgradient.io\/\"><span class=\"s2\">https:\/\/cssgradient.io\/<\/span><\/a><\/span><\/li>\n<li class=\"li1\"><span class=\"s1\"><a href=\"http:\/\/www.colorzilla.com\/gradient-editor\/\"><span class=\"s2\">http:\/\/www.colorzilla.com\/gradient-editor\/<\/span><\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li class=\"li4\">Clean fonts\n<ul class=\"ul2\">\n<li class=\"li4\">-webkit-font-smoothing: antialiased;<\/li>\n<li class=\"li4\"><span class=\"Apple-converted-space\">\u00a0 <\/span>text-rendering: optimizeLegibility;<\/li>\n<li class=\"li4\">-moz-osx-font-smoothing: grayscale<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"li5\">Practice <a href=\"http:\/\/x.co\/moderncss\">http:\/\/x.co\/moderncss<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Music player simple https:\/\/codepen.io\/agrublev\/pen\/erWNQW?editors=0010 Music player custom https:\/\/codepen.io\/agrublev\/pen\/JvNYGm Music player fancy https:\/\/codepen.io\/emilcarlsson\/pen\/WdRRMX Video https:\/\/codepen.io\/agrublev\/pen\/bMWEGY Images https:\/\/codepen.io\/agrublev\/pen\/gzWPrR?editors=1100 Setting multiple backgrounds for a hero https:\/\/codepen.io\/agrublev\/pen\/PemWbq?editors=1100 Adding an image background as a base 64 https:\/\/yoksel.github.io\/url-encoder\/ https:\/\/codepen.io\/agrublev\/pen\/zjwrNg?editors=1100 Icon Fonts https:\/\/fontawesome.com\/get-started https:\/\/material.io\/icons\/ &lt;link href=&#8221;https:\/\/fonts.googleapis.com\/icon?family=Material+Icons&#8221; rel=&#8221;stylesheet&#8221;&gt; Advanced Layout HTML 100% https:\/\/angelprivate.s3.amazonaws.com\/teaching\/logos\/ZoeZen.zip\u00a0 CSS Animations https:\/\/codepen.io\/agrublev\/pen\/vjmLrJ http:\/\/cubic-bezier.com\/#.32,.61,.72,.81 https:\/\/daneden.github.io\/animate.css\/ https:\/\/codepen.io\/agrublev\/pen\/PemZxe Other fun CSS stuff [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,7,5,8],"tags":[],"class_list":["post-263","post","type-post","status-publish","format-standard","hentry","category-class-reference","category-css","category-exercises","category-html"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=263"}],"version-history":[{"count":1,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/263\/revisions"}],"predecessor-version":[{"id":264,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/263\/revisions\/264"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}