Servage Magazine

box-shadow Values: 'horizontal offset' 'vertical offset' 'blur distance' 'spread distance' color inset | none Default: none Applies to: all elements Inherits: no The value of the box-shadow property should seem familiar after working with text-shadow: specify the horizontal and vertical offset distances, the amount the shadow should blur, and a color. For box shadows, you can also specify a spread amount, which increases (or decreases with negative values) the size of the shadow. By default, the shadow color is the same as the foreground color of the element, but specifying a color overrides it. -webkit-box-shadow: 6px 6px 5px 10px #666; -moz-box-shadow: 6px 6px 5px 10px #666; box-shadow: 6px 6px 5px 10px #666;/* 5px blur, 10px spread */ You ...

So far, we’ve changed only one property at a time, but it is possible to transition several properties at once. I want the text color to change to black, but more slowly than the other animations. One way to do this is to list all of the values for each property separated by commas, as shown in this example. a.smooth { … transition-property: background-color, color, letter-spacing; transition-duration: 0.3s, 2s, 0.3s; transition-timing-function: ease-out, ease-in, ease-out; } a:hover, a:focus { background-color: red; letter-spacing: 3px; color: black; } The values are matched up according to their positions in the list. For example, the transition on the color property (second in the list) has a duration of two seconds (2s) and uses the ease-in timing function. ...

Stock photography and illustrations If you aren’t confident in your design skills, or you just want a head start with some fresh imagery, there are plenty of collections of ready-made photos, illustrations, buttons, animations, and textures available for sale or for free. Stock photos and illustrations generally fall into two broad categories: rights-managed and royalty-free. Rights-managed means that the copyright holder (or a company representing them) controls who may reproduce the image. In order to use a rights managed image, you must obtain a license to reproduce it for a particular use and for a particular period of time. One of the advantages to licensing images is that you can arrange to have ...

Data types The values we assign to variables fall under a few distinct data types. Undefined The simplest of these data types is likely “undefined.” If we declare a variable by giving it a name but no value, that variable contains a value of “undefined.” var foo; alert(foo); // This will open a dialog containing "undefined". Odds are you won’t find a lot of use for this right away, but it’s worth knowing for the sake of troubleshooting some of the errors you’re likely to encounter early on in your JavaScript career. If a variable has a value of “undefined” when it shouldn’t, you may want to double-check that it has been declared correctly or that ...

Transform Values: transform function(s) | none Default: none Applies to: transformable elements (see sidebar) Inherits: no This article focuses on the more straightforward 2-D varieties because they have more practical uses. Transforms are supported on all major browser versions with vendor prefixes. They are not supported at all on IE8 and earlier, Firefox 3 and earlier, and Opera 10.1 and earlier. You can apply a transform to the normal state of an element and it will appear in its transformed state when the page loads. Just be sure that the page is still usable on browsers that don’t support transforms. It is common to pull out the transforms only when users interact with the element via ...

HTML5 APIs An API (Application Programming Interface) is a documented set of commands, data names, and so on, that lets one software application communicate with another. For example, the developers of Twitter documented the names of each data type (users, tweets, timestamps, and so on) and the methods for accessing them in an API document (dev.twitter.com/docs) that lets other developers include Twitter feeds and elements in their programs. That is why there are so many Twitter programs and widgets available. Amazon.com also opens up its product data via an API. In fact, publishers of all ilks are recognizing the power of having their content available via an API. You could say ...

Unless you plan to publish text-only sites, chances are you’ll need to know how to create web graphics. For many of you, that might mean getting your hands on an image-editing program for the first time and acquiring some basic graphics production skills. If you are a seasoned designer accustomed to print, you may need to adapt your style and process to make graphics that are appropriate for web delivery. This section covers the fundamentals of web graphics production, beginning with some options for finding and creating images. From there, it introduces the file formats available for web graphics and helps you decide which to use. You’ll also learn the basics of ...

PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. PHP is now installed on more than 244 million websites and 2.1 million web servers. Originally created by Rasmus Lerdorf in 1995, the reference implementation of PHP is now produced by The PHP Group.[3] While PHP originally stood for Personal Home Page, it now stands for PHP: Hypertext Preprocessor, a recursive acronym.PHP code is interpreted by a web server with a PHP processor module, which generates the resulting web page: PHP commands can be embedded directly into an HTML source document rather than calling an external file to process data. It has ...

According to the box model, every element in a document generates a box to which properties such as width, height, padding, borders, and margins can be applied. You probably already have a feel for how element boxes work, from adding backgrounds to elements. This chapter covers all the box-related properties. Specifying Box Dimensions By default, the width and height of a block element is calculated automatically by the browser (thus the default auto value). It will be as wide as the browser window or other containing block element, and as tall as necessary to fit the content. However, you can use the width and height properties to make the content area of ...

We’ve seen CSS used for visual effects like rounded corners, color gradients, and drop shadows that previously had to be created with graphics. In this article, we’ll look at some CSS3 properties for producing animated interactive effects that were previously only possible with Flash or JavaScript. We’ll start with CSS Transitions, a nifty way to make style changes fade smoothly from one to another. Then we’ll discuss CSS Transforms for repositioning, scaling, rotating, and skewing elements and look at how you can animate them with transitions. I’m going to close out the article with brief introductions to 3D Transforms and CSS Animation, which are important to know about but are too ...