- And that, my friends, is why we’ve asked him to be our (and your) guide to CSS3. - Later, we’ll apply those bits in ex- amples throughout the rest of the book.. - I’ve always learned more about web design by dissecting examples in the wild rather than reading white papers, and that’s what we’ll stress in the pages that follow.. - 5 We’ve been bending the float property to handle layout for years now. - It’s atop these non-critical events where we’ll be applying CSS3 throughout the book, keeping the more important char- acteristics of the page intact for all browsers, regardless of their current CSS3 support.. - So, while we’ve pinpointed the experience layer as a place we can safely apply CSS3 today, we’ll also want to pinpoint which CSS3 properties we can use. - Let’s take a quick look at the relatively small set of core CSS3 properties that we’ll be using in the examples in the book (below, and table 1.02). - I’m merely introducing them here, as we’ll be digging much deeper into advanced syntax and real- world usage later.. - They don’t work across the board yet, and we’ll be discussing why that’s OK, and how to plan for that non-uniform support later in the book.. - we’ll use the border-radius property as an example. - here’s how we’d do it:. - That’s a big difference from other hackish CSS we’ve all periodically used to solve cross-browser issues.. - We’ve come a long way over the past decade in regard to interaction and visual experience on the web. - I’m introducing CSS transitions early here in Chapter 2, as we’ll be applying them to many of the examples later in the book. - (CSS Transforms and CSS Animations share that same lineage, and we’ll be talking about them in Chapters 4 and 6, respectively.). - Let’s start with a simple example, where we’ll add a transition to the background color swap of a link. - Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover (fig 2.01):. - For the time being, we’ll use only the vendor-prefixed proper- ties which currently work in WebKit-based browsers (Safari and Chrome) to keep things simple. - Later, we’ll add vendor prefixes for Mozilla and Opera.. - We could simplify the (non-delayed) declaration significantly by using the transition shorthand property, which is the syn- tax we’ll be using in the examples later in the book.. - With that stack, we’ll be smoothing out that background color change in current versions of Safari, Chrome, and. - We’ll be using several of these properties in conjunction with transitions throughout our case study examples in the next chapter and onward.. - To recap the important bits we’ve covered so far, let’s keep in mind that:. - I find it helpful to collect all the tech- niques we’ll be discussing in a single place. - Once again, it’s within the experience layer that we’re pro- gressively enriching this web design. - Being good semanticians, we’ll markup the top navigation with a good ol’ unordered list.. - We’ll use RGBA to assign white at 70% opacity ( 0.7. - With the text-shadow in place, we’re now free to move on to the :hover treatment. - And here’s where we’ll lean more heavily on CSS3.. - We’re going to add a color change and background color to the :hover state of each link. - Once again, we’ll use RGBA to. - So, on :hover , we’re changing the text color to solid white, and adding a background color of white at 15% opacity. - And re- member, we’ve placed the non-prefixed border-radius prop- erty last in the list, ensuring the ultimate implementation will trump the vendor-prefixed ones. - The answer lies in the CSS transition we’re going to add next as a final bit of polish.. - Here, we’ll add the stack for transitions that currently work in Safari, Chrome, Firefox (4.0), and Opera, with the non-pre- fixed transition property last in the declaration for eventual implementation by additional browsers (or future versions).. - We’ve just walked through a rather simple example, adding various CSS3 properties to the experience layer. - We’re constantly looking for solutions that save time and offer additional flexibility. - Here we’re showing the images at 25% opacity, then bringing them up to 60% opacity when hovered or focused (fig 3.19).. - We’ll make it rather quick (just 0.2 seconds) and ease it in and then out again.. - We’ll then use those same techniques in practice on the moon example site later in the chapter.. - We’re going to rely once again on our trusty unordered list to mark these up:. - Notice how the images are quite a bit larger than we’d like them to be in the final design. - This is intentional, as we’ll be using CSS to scale them down.. - We’ve also floated the images themselves and sized them down to 200 pixels wide.. - Remember that the original images in the markup are larger than the 200 pixel width we’re specifying in the stylesheet. - This would be an appro- priate use of the CSS3 box-shadow property, as we’re making the enlarged photo appear as if it’s pulling up off the page.. - But in this case, we’re attempting to add dimension to the photo enlargement, so it should work out quite well.. - In terms of the syntax, here we’re applying a shadow on the hovered image that is 4px from the top, 4px from the left, has a 10px blur, and is black at 50% opacity (ensuring it’ll blend in to whatever background or element sits behind it).. - We’re putting most of the burden of the effect back on the browsers that support it, rather than injecting Flash or JavaScript to make it happen.. - 61 treatment was critical, then we’d need to rethink our use of. - We’re still scaling up the photo on hover, but we’re also tip- ping the photo 10 degrees to the left using rotate (fig 4.05).. - If we were to skew the photos in our gallery on hover, for example, we’d use the following CSS (skewing neg- ative five degrees on the x coordinate, and 30 degrees on the y coordinate) (fig 4.11):. - fig 4.17: The things we’ll be transforming.. - Next we’ll add the base CSS for each list item that contains the linked images. - We’ll now set the moon background image that appears behind each item, as well as giving each link a specific width and height (fig 4.18).. - We’ll be positioning each item slightly differently depend- ing on the object, as well as using varying transforms, but we can declare position: absolute. - We’ll also add a transition stack using the all value. - The big doughnut gets bigger on hover, so we’ll use the scale transform here to scale up the image. - For the lawnmower left on the moon, we’ll do two things:. - We’ll adjust the default position five pixels lower and 10 pixels to the right. - And we’ll also add a transform stack to scale the mower 20% larger than the default.. - 77 Here we’ll move the cat 15 pixels to the right by upping the. - We’ll use the vendor-prefixed rules for WebKit, Mozilla, and Opera-based browsers, as well as ending with the actual transform property for future implementations.. - For the final item, we’ll take a lounging gnome and make him partially disappear. - We’ll use the opacity property to simply and quickly create a hover style for the image, dimming it down considerably.. - Like the photo gallery example we discussed earlier in the chapter, the sprinkling of CSS3 we’re adding here is harmless for browsers that don’t yet support it.. - 1 Many of the properties we’ve discussed previously in the book have decent browser support today in Safari, Chrome, Firefox, Opera, and IE9 Beta. - We’re putting all of these images on the body element so that they’ll sit behind the page’s content, but we didn’t need to add dummy wrapper div s to layer them.. - So, really, they’re on par with many of the other CSS properties we’ve been using throughout the book.. - And that’s precisely why we’ve defined the background-color in a separate rule.. - In keeping with the theme of the other examples in the book, here we’re using multiple background images today. - We’re forging ahead with a CSS3 property that has healthy support in Safari, Chrome, Firefox, and Opera, as well as IE9 Beta.. - To compensate, we’ll define a flat or alternate single graphic in a background rule that comes before the multiple one.. - We’ve also assigned black at 60% transparency for the text, as well as a backup color of solid gray for browsers that don’t yet support RGBA. - And we’ve applied a subtle white highlight with text- shadow , to make the text appear as though it’s inset on the background.. - Figure 6.04 shows where we’re at currently, now with bottom margin on the last fieldset element removed by way of the :last-child pseudo-class.. - While we’re making good use of :last-child , it’s a good time to point out that there are many more wonderfully conve- nient new selectors in CSS3.. - This time we’ll use a CSS2.1 attribute selector to target the input type="text". - we’d be styling all inputs in the form (text and buttons), but if we modify that to:. - we’ll target the text inputs only.. - We’re applying a linear gradient here, but radial gradients are also possible with CSS.. - We’re essentially adding a small linear gradient that goes from light gray ( #999 ) to white ( #fff ) for just 12% of the vertical height of the input. - We’re apply- ing the vendor-prefixed background-image rules to make that happen in Safari and Firefox.. - 103 We’ll be using them a bit more in the next section regarding. - Combining many of the techniques we’ve already discussed throughout the book, we’ll turn an ordinary form submit button into something far more interesting—entirely with CSS (fig 6.09).. - If the browser doesn’t support the properties we’ll use to elevate this button visually, that’s OK. - First, we’ll add some padding, change the font to Helvetica to match the rest of the design, turn off borders, and set the background color to white.. - 105 After a bit of experimenting with the right value, we’ve settled on 23px to get the pill shape.. - We’ll again rely on Mr. - So far, no images have been used and we’ve only added a few lines in our stylesheet.. - We’ll use RGBA to tone down pure white to 85%, letting the gray gradient show through just a tiny bit. - We’re also. - We’ve chosen to use CSS3 here instead of images, as it’s perfectly OK and harmless for browsers that don’t yet support these advanced rules. - We’ll name it “pulse” and set three rules that differ slightly:. - 113 With that, we’re ensuring that the pulse animation runs only when the user focuses a text input on the form (in Safari and Chrome only).. - fig 6.17: The pulsing animation that we’ve added to the :focus state of the text inputs.. - Adding CSS Animations is the first time in the book where we’ve really targeted just one browser vendor with our expe- rience enriching: WebKit. - One of the primary reasons we’re seeing CSS3 being used more and more is because of it’s adop- tion by Firefox, Opera, and even IE9. - We’ve covered a lot of wonderful (if I may say so) ways to use CSS3 right now in your daily work. - Eventually, we’ll be able to rely on CSS3 not only for experi- ence enhancement, but for those critical visual concepts as well (layout being a primary example)
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt