Safari Graphics, Media, and Visual Effects Coding How-To's |
![]() |
GraphicsHow do I use the canvas tag to draw vector graphics and animation?You can use the HTML5 Listing 1: Draw a circle using the canvas tag. <html> <head> <script> function drawCircle() { /* get the main canvas and its context */ var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); /* draw a circle */ radius = 90; x = 150; y = 150; context.beginPath(); context.arc(x, y, radius, 0, 2 * Math.PI, false); context.closePath(); context.setFillColor("3300FF"); context.fill(); } </script> </head> <body onload="drawCircle()"> <canvas id="myCanvas" height="300" width="300" style="border: 2px solid; margin: 30px;" /> </body> </html> For more information about how to use the | ||
![]() ![]() ![]() | ||
MediaHow do I play audio or video in a webpage ?Safari 3.1 and later supports HTML5 Listing 2: Using the video tag to embed video. <video src=sample.mov autoplay></video> For more information on the How do I add playback controls to audio and video content?If you are using HTML5 Listing 3: Using the controls attribute. <video src=sample.mov controls ></video> The second way to add playback controls is to use HTML and CSS to define custom controls in your interface, then use the scripting API that accompanies HTML5 See the "HTMLMediaElement" class entry in the WebKit DOM Reference for a list of functions and attributes that you can use to control media playback. How do I control volume and media playback?The HTML5 Listing 4 shows how to create a button that gives the user basic playback control to play or pause the first video on a webpage. Listing 4: Basic play/pause button. <script> function playPause() { var myVideo = document.getElementsByTagName('video')[0]; if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> <input type=button onclick="playPause()" value="Play/Pause"> For more information on the functions and attributes for controlling and querying media playback, see the Safari HTML Reference, the "HTMLVideoElement", "HTMLAudioElement", and "HTMLMediaElement" class entries in the WebKit DOM Reference, and the HTML Video With CSS Effects sample code. | ||
![]() ![]() ![]() | ||
Visual EffectsHow do I use CSS to position or transform webpage elements in 2D space?CSS transform properties provide powerful formatting possibilities, without having to resort to plug-ins or static images to display the desired layout. HTML elements including text, images, media elements for audio and video, and more can be transformed via translation, scaling, rotation, skewing, or an affine transform matrix. Transforms are specified with the For example, to scale an image to half its size, flip it on the x-axis, and rotate it by 12 and a half degrees, you could use the CSS transform property in Listing 5. Listing 5: CSS transform example. <img src="safari.png" style="-webkit-transform: scale(0.5) scaleX(-1) rotate(12.5deg);"/> This is just a glimpse of what is possible when using CSS transforms. More information about how to transform page elements using CSS can be found in the “Transforms” section of the Safari Visual Effects Guide. How do I change the origin of a CSS transform?When an element is translated, rotated, scaled, skewed or transformed in some other way using CSS, the origin of the transform defaults to the center of the element. You may find the need to transform an object with the origin positioned elsewhere on the element. You can specify the origin for a CSS transform using the Listing 6: Changing the origin of a CSS transform. <div style="-webkit-transform:rotate(20deg); -webkit-transform-origin: top left;"> Hello Safari Developers! </div> For more information on changing the origin of a transform, see the "Changing the Origin" section of the Safari Visual Effects Guide, and the Safari CSS Reference. How do I use CSS transitions to add animation to my web content?A transition can be thought of a type of simple animation. You specify which CSS properties will be transitioned, and the duration of the transition. When you use JavaScript or CSS to change the value of a CSS property, WebKit—the layout engine that powers Safari—takes care of smoothly animating from the old value to the new value. For example, Listing 7 shows how to make a green box shrink to half its size and turn yellow when clicked, over a period of 1.5 seconds. Listing 7: Using CSS transitions to add animation. <html> <head> <style> #box { -webkit-transform: scale(1.0); -webkit-transition-property: -webkit-transform, background-color; -webkit-transition-duration: 1.5s; background-color: green; border: 2px solid; height: 200px; width: 200px; } </style> <script> function transitionBox(box) { box.style.webkitTransform = 'scale(0.5)'; box.style.backgroundColor = 'yellow'; } </script> </head> <body> <div id="box" onclick="transitionBox(this);"></div> </body> </html> Be sure to specify a duration for your transition using the How do I use CSS animations to add animation to my web content?CSS animations are a lot like CSS transitions, except that you have fine-grained control over the keyframes of the animation, and you can listen for DOM events to be notified of an animation's start, end, or iteration. CSS animations introduce the Listing 8 shows a simple example of CSS animation. For the first 50% of the animation, the box scales down to 30% of its original size. For the second half of the animation, the box scales back up to its full size. Note that this animation occurs over a duration of 4 seconds. Listing 8: Using CSS animations to add animation. <html> <head> <style> @-webkit-keyframes changeScale { 0% { -webkit-transform: scale(1.0); } 50% { -webkit-transform: scale(0.3); } 100% { -webkit-transform: scale(1.0); } } #box { height: 300px; width: 300px; background-color: purple; -webkit-animation-name: changeScale; -webkit-animation-duration: 4s; } </style> </head> <body> <div id="box"></div> </body> </html> For more information about CSS animations, see the "How Animations Work" section of the Safari Visual Effects Guide. How do I control the acceleration curve for a CSS transition or animation?You can control the acceleration curve of a CSS transition or animation by specifying a timing function. By default, CSS transitions and animations use a timing function named To specify an acceleration curve for a CSS animation, use the Listing 9: Using timing functions with CSS transitions. <html> <head> <style> #box { -webkit-transform: scale(1.0); -webkit-transition-property: -webkit-transform, background-color; -webkit-transition-duration: 5s; -webkit-transition-timing-function: ease-in; background-color: green; border: 2px solid; height: 200px; width: 200px; } </style> <script> function transitionBox(box) { box.style.webkitTransform = 'scale(0.5)'; box.style.backgroundColor = 'yellow'; } </script> </head> <body> <div id="box" onclick="transitionBox(this);"></div> </body> </html> For more information on using timing functions for CSS transitions or animations, see the the “Using Timing Functions” sections of the Safari Visual Effects Guide and the Safari CSS Reference. How do I detect when animations have started, iterated, or ended?When animating elements on a webpage using CSS animations, you can detect through JavaScript when an animation has started, iterated, or ended using DOM events. The event names are Listing 10: CSS animation event handlers. <html> <head> <script> function addAnimationHandlers() { var box = document.getElementById('box'); box.addEventListener('webkitAnimationStart', function (){ alert('Animation started.'); }, false); box.addEventListener('webkitAnimationIteration', function (){ alert('Animation iterated.'); }, false); box.addEventListener('webkitAnimationEnd', function (){ alert('Animation ended.'); }, false); } </script> <style> @-webkit-keyframes changeScale { 0% { -webkit-transform: scale(1.0); } 50% { -webkit-transform: scale(0.3); } 100% { -webkit-transform: scale(1.0); } } #box { height: 300px; width: 300px; background-color: purple; -webkit-animation-name: changeScale; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 3; } </style> </head> <body onload="addAnimationHandlers();"> <div id="box"></div> </body> </html> For more information on detecting when an animation has started, iterated, or ended, see the "Handling Animation Events" section of the Safari Visual Effects Guide. How do I delay the start of a CSS transition or CSS animation?Sometimes you may find it necessary to delay the start of a CSS transition or CSS animation—perhaps you have several elements with the same animation, but you
 want to stagger their start times. To add a delay to the beginning of your CSS animation, use the Listing 11: Delaying the start of a CSS transition. #box { -webkit-transform: scale(1.0); -webkit-transition-duration: 1.5s; -webkit-transition-property: -webkit-transform, background-color; -webkit-transition-delay: 2s; background-color: green; border: 2px solid; height: 200px; width: 200px; } For more information on delaying the start of a CSS transitions or animations, see the the “Setting Transition Properties” section of the Safari Visual Effects Guide and the Safari CSS Reference. How do I repeat a CSS animation?CSS transitions always execute only once, when the values of the properties being animated are changed via JavaScript or CSS. If you use CSS animations, you can specify that an animation iterate multiple times or even infinitely by using the Listing 12: Repeating CSS animation. <html> <head> <style> @-webkit-keyframes changeScale { 0% { -webkit-transform: scale(1.0); } 50% { -webkit-transform: scale(0.3); } 100% { -webkit-transform: scale(1.0); } } #box { height: 300px; width: 300px; background-color: purple; -webkit-animation-name: changeScale; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; } </style> </head> <body> <div id="box"></div> </body> </html> For more information on repeating CSS animations, see the "Repeating Animations" section of the Safari Visual Effects Guide and the Leaves sample code. How do I embed a custom font in a webpage?CSS web fonts provide a mechanism for you to use the font of your choice in your web content, without requiring that the font be installed on the computer on which the webpage is being viewed. To use a custom font in a webpage, first use the Listing 13: Defining a font with @font-face. @font-face { font-family: "Tuffy"; src: url("Tuffy_Bold.otf"); } You can now use the font that you have defined as the value for the Listing 14: CSS definition that includes a custom web font. h2 { /* use the Tuffy font that we previously defined; serif will be the fallback */ font-family: "Tuffy", serif; color: #006699; } For more information about web fonts, see the "Supported CSS Rules" section of the Safari CSS Reference. The sample code PhotoToss: CSS Transforms, Transitions, and Web Fonts uses web fonts to display text. How do I add a drop shadow to a webpage element?You can use the CSS Listing 15 shows a CSS definition that defines a shadow on every cell of a table. The shadow stretches 3 pixels in the x-direction, 5 pixels in the y-direction, uses a blur radius of 5 pixels, and uses indigo for the color of the shadow with an opacity of 70 percent. Listing 15: Adding a drop shadow to table cells. td { border:1px solid black; padding: 10px; -webkit-box-shadow: 3px 5px 5px rgba(75, 0, 130, 0.7); } To add a drop shadow to text, you should use the How do I add a gradient to a webpage element?You can specify a linear or radial gradient for an element using the CSS Listing 16: A simple linear gradient. <html> <head> <style> .purpleToRed { width:200px; height:200px; background: -webkit-gradient(linear, left top, left bottom, from(purple), to(red)); } </style> </head> <body> <div class="purpleToRed"></div> </body> </html> You can use CSS gradients anywhere that you would use an image. For instance, CSS gradients can be used for How do I add a reflection to a webpage element?You can add a reflection to an element by using the CSS Listing 17 adds a reflection to a video. Since reflections update as the source changes, you will see the video playing in the reflection. This reflection will appear below the element, 4 pixels away from the original element. A CSS gradient is specified for the mask-box-image. Listing 17: Adding a reflection to video. <html> <head> <style> .reflect { -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white))"; } </style> </head> <body> <video src="iPod.mp4" class="reflect" /> </body> </html> For more information about CSS reflections, see the Safari CSS Reference. How do I add an mask to a webpage element?Safari and WebKit support a variety of CSS properties that give you fine-grained control over alpha masks. These properties are analogous to the Listing 18: Adding an oval mask to video. <html> <head> <style> .oval-mask { -webkit-mask-repeat: no-repeat; -webkit-mask-image: url(oval.png); -webkit-mask-position: center; } </style> </head> <body> <video src="iPod.mp4" class="oval-mask" /> </body> </html> For more information about CSS masks, see the Safari CSS Reference. | ||
![]() ![]() ![]() |
Document Revision History
| ||||
Back to Top ![]() |