0

5  setting a background image

Tài liệu CSS Cookbook- P1 pptx

Tài liệu CSS Cookbook- P1 pptx

Kỹ thuật lập trình

... Browsers Setting a Background Image Creating a Line of Background Images Positioning a Background Image Using Multiple Background Images on One HTML Element Setting Images on a Border Creating a Stationary ... Stationary Background Image Stretching Images As the Browser Resizes Stretching an Image Across the Entire Browser Window Making Images Scalable Setting How a Browser Renders an Image Rotating Images ... CSS Setting Gradients with CSS Creating Transparent PNG Images for IE6 and Later Using Transparent PNG Images with JavaScript Overlaying HTML Text on an Image Replacing HTML Text with an Image...
  • 50
  • 484
  • 0
Tài liệu CSS Cookbook- P2 docx

Tài liệu CSS Cookbook- P2 docx

Kỹ thuật lập trình

... to various things with the data, depending on the type of microformat used A similar plug-in is available for Safari at http://zappatic.net/safarimicroformats/ See Also The hCard validator at ... tabular data and appears immediately after the opening table element Then, if your table has a header, add the thead tag to one or more rows as the table header Use the tbody tag to wrap the table ... Discussion First, add a table tag at the beginning and end of the tabular data The table tag defines the table as a whole The optional caption element is for the summary of the tabular...
  • 50
  • 592
  • 0
Tài liệu CSS Cookbook- P3 pptx

Tài liệu CSS Cookbook- P3 pptx

Kỹ thuật lập trình

... Shorthand properties Property Values Example background background-color background: url(book.gif) #999 no-repeat top; background- image background- repeat background- attachment background- position border ... are examples of sans serif web-safe font stacks: font-family: font-family: font-family: font-family: font-family: Verdana, Geneva, sans-serif; Arial, Helvetica, sans-serif; Tahoma, Geneva, sans-serif; ... options See Also A List Apart’s article “Invasion of the Body Switchers” by Andy Clarke and James Edwards, which shows how to create a JavaScript style switcher, at http://www.alista part.com/articles/bodyswitchers;...
  • 50
  • 414
  • 0
Tài liệu CSS Cookbook- P4 ppt

Tài liệu CSS Cookbook- P4 ppt

Kỹ thuật lập trình

... Stylizing a Heading with Text and an Image Problem You want to place a repeating image at the bottom of a heading, like the grass in Figure 3-24 Solution Use the background- image, background- repeat, and ... Removing Space Between Headings and Paragraphs Problem You want to reduce the space between a heading and a paragraph Solution Set the margin and padding for both the heading and paragraph to 0: ... of tall grass Set the background- repeat property to a value of repeat-x, which will cause the image to repeat horizontally: background- image: url(tall_grass.jpg); background- repeat: repeat-x;...
  • 50
  • 675
  • 0
Tài liệu CSS Cookbook- P5 doc

Tài liệu CSS Cookbook- P5 doc

Kỹ thuật lập trình

... You want a background image that does not repeat Solution Use the background- image and background- repeat properties to control the display of an image (see Figure 4-4): body { background- image: ... Also The CSS3 specification for border -image at http://www.w3.org/TR/css3 -background/ #the-border -image 4.10 Creating a Stationary Background Image Problem You want a background image to remain ... properties Setting gradients in Safari In Safari, cite -webkit-gradient(); after the background or background- image property: background- image: -webkit-gradient(); 208 | Chapter 4: Images Please purchase...
  • 50
  • 397
  • 0
Tài liệu CSS Cookbook- P6 ppt

Tài liệu CSS Cookbook- P6 ppt

Kỹ thuật lập trình

... background image This approach is somewhat hard to understand, since typically, alpha transparency is, well, transparent In addition to PNG images, you can also use SVG images as masks as well as gradients ... remove this watermark 4.35 Applying Masks to Images and Borders Problem You want to apply a mask to an image and its borders Solution First, create a PNG image with alpha transparency, as shown ... save the image as a PNG-24 image with transparency, as shown in Figure 4-47 Figure 4-47 Saving the image as a PNG with alpha transparency With the images set up, adjust the HTML to include a...
  • 50
  • 594
  • 0
Tài liệu CSS Cookbook- P7 pptx

Tài liệu CSS Cookbook- P7 pptx

Kỹ thuật lập trình

... Firefox katakana Starts counting with the Japanese traditional katakana system Firefox, Safari, Chrome hiragana-iroha Starts counting with the Japanese hiragana-iroha system Firefox, Safari, Chrome ... alpha and then beta, gamma, etc Safari, Firefox, IE8, Opera hebrew Starts counting with traditional Hebrew Safari, Firefox hiragana Starts counting with the Japanese hiragana system Firefox katakana ... upper-roman Starts with uppercase roman numerals All major browsers lower-alpha Starts with lowercase ASCII letters All major browsers upper-alpha Starts with uppercase ASCII letters All major browsers...
  • 50
  • 514
  • 0
Tài liệu CSS Cookbook- P8 pptx

Tài liệu CSS Cookbook- P8 pptx

Kỹ thuật lập trình

... Next, create an image containing every combination of star ratings, along with an active hover state, as shown in Figure 6-31 (You may want to make each star a square shape, as it makes coding ... left: 0; background- image: url(stars.gif); background- repeat: no-repeat; } Then write specific rules that move the background image so that the second set of color stars appears How far the background ... none; background- image: url(pipe.gif); background- repeat: repeat-y; margin: 0; padding: 0; } itinerary ul { margin-left: 12px; } Apply a branch graphic at each list item: itinerary li { margin:...
  • 50
  • 412
  • 0
Tài liệu CSS Cookbook- P9 ppt

Tài liệu CSS Cookbook- P9 ppt

Kỹ thuật lập trình

... include all the links in the navigation menu, group the descendant selectors by a comma and at least one space: #pagehom a# linkhom:link, #pageabt a# linkabt:link, #pagearh a# linkarh:link, #pagewri a# linkwri:link, ... readers won’t read elements set to display: none For more information, read the article “Facts and Opinion About Fahrner Image Replacement” at http://www.alistapart.com/ articles/fir/ Leahy-Langridge ... tab in the background of the list item: #header li { float:left; background- image: url(tab_right.gif); background- repeat: no-repeat; background- position: right top; margin:0; padding: 0; } Place...
  • 50
  • 543
  • 0
Tài liệu CSS Cookbook- P10 pdf

Tài liệu CSS Cookbook- P10 pdf

Kỹ thuật lập trình

... months, dates, and appointments as tabular data If you display your calendar as a generic HTML table, chances are the table looks rather plain, and if it contains numerous events it probably looks ... uppercase Also, add a background image with a text shadow to create a small amount of depth (see Figure 8-23) label { background- color: gray; color: #fff; font-weight: bold; padding: 4px; text-transform: ... this watermark 9.10 Sample Design: An Elegant Calendar Great for organization, calendars enable us to schedule lunches, remember birthdays, and plan honeymoons As designers, we can think of all...
  • 50
  • 553
  • 0
Tài liệu CSS Cookbook- P11 pdf

Tài liệu CSS Cookbook- P11 pdf

Kỹ thuật lập trình

... so many nested tables and images is now placed within meaningful heading and paragraph tags, allowing for improved search engine ranking Also, file sizes and maintenance headaches are noticeably ... The White House 1600 Pennsylvania Avenue NW Washington, ... watermark Because you want people to actually read the header, you want the text to be white to create enough contrast In this instance, the main header also acts as a homing device— it is a...
  • 50
  • 511
  • 0
Tài liệu CSS Cookbook- P12 ppt

Tài liệu CSS Cookbook- P12 ppt

Kỹ thuật lập trình

... this watermark This recipe used two images—one of a pool cue and cue ball, and the other of Earth The former image was placed as the background image for the body element The image of Earth was ... watermark Figure 13-2 An image of Earth placed over an image depicting a game of pool The HTML for this page is simple: Earth News Earth escapes potential ... excess HTML and images In short, you can what any professional web designer should: create maximum impact with minimal resources At a basic level, a developer can learn all there is to know about CSS...
  • 50
  • 407
  • 0
Tài liệu CSS Cookbook- P13 ppt

Tài liệu CSS Cookbook- P13 ppt

Kỹ thuật lập trình

... to take place on the web page By “action,” I not mean just moving things around the page, like a bad Flash animation JavaScript enables you to manipulate or change a page that’s already loaded ... termed parallax, which is based on the Greek word parallaxis, meaning “alteration.” For this effect to work, the background images require alpha-transparent PNG images The subtle opacity changes as ... #header { background- image: url(img/bkgd-header.gif); background- repeat: no-repeat; background- position: top center; margin-top: 30px; } #header h1 a { background- image: url(img/logo.png); background- repeat:...
  • 50
  • 450
  • 0
Tài liệu CSS Cookbook- P14 doc

Tài liệu CSS Cookbook- P14 doc

Kỹ thuật lập trình

... of containing block (Default: N /A) Percentages Visual Visual Visual Visual, paged Visual Visual Visual Visual Visual Visual Visual Media groups Initial value visible | scroll | hidden | auto 'overflow-y' ... Percentages (Default: N /A) Visual Visual Visual Visual Visual Visual Visual Visual Visual Visual Visual Visual Media groups CSS 2.1 Properties and Proprietary Extensions | 663 Please purchase PDF ... inherit 'background- color' 'background- position' 'background- repeat' 'background' 'border-collapse' 'border-color' 'border-spacing' scroll | fixed | inherit 'background- attachment' 'background- image' ...
  • 50
  • 538
  • 0
Tài liệu CSS Cookbook- P15 doc

Tài liệu CSS Cookbook- P15 doc

Kỹ thuật lập trình

... NA NA N N N N N N N WinFF3 NA S N NA NA Y Y N NA S NA NA NA N N Y S N S Y MacOP9 NA S N NA NA Y Y N NA S NA NA NA N N Y S N S Y WinOP9 NA S N NA NA N Y N NA S NA NA NA N N N N N N N MacSF3 NA ... NA S N NA NA N Y N NA S NA NA NA N N N N N N N Chrome Table E-4 A review of the CSS properties on radio buttons NA N N NA NA N Y N NA N NA NA NA N N N N N N N MacFF3 NA S N NA NA N Y N NA S NA ... N MacSF3 NA S N NA NA N Y N NA S NA NA NA N N N N N N N WinSF3 NA S N NA NA N Y N NA S NA NA NA N N N N N N N MacSF4b NA S N NA NA S Y N NA S NA NA NA N N N N N N N WinSF4b background- color Figure...
  • 50
  • 474
  • 0
css cookbook third edition

css cookbook third edition

Kỹ thuật lập trình

... Browsers Setting a Background Image Creating a Line of Background Images Positioning a Background Image Using Multiple Background Images on One HTML Element Setting Images on a Border Creating a Stationary ... Stationary Background Image Stretching Images As the Browser Resizes Stretching an Image Across the Entire Browser Window Making Images Scalable Setting How a Browser Renders an Image Rotating Images ... CSS Setting Gradients with CSS Creating Transparent PNG Images for IE6 and Later Using Transparent PNG Images with JavaScript Overlaying HTML Text on an Image Replacing HTML Text with an Image...
  • 896
  • 5,151
  • 0
 How to Write a Corporate Image Brochure People Will Truly Want to Read

How to Write a Corporate Image Brochure People Will Truly Want to Read

Tài liệu khác

... want to read about? Its basic activity was producing vaccines We are all naturally interested in health, and virtually everyone knows the importance of vaccination, for themselves but especially ... Starting from the assumption that no one would want to read anything about the company, I and my colleagues (it was a brainstorming) asked ourselves: What things does this company that people ... broad general interest To make a long story short, we defined seven areas of the company’s activities that would be naturally attractive to potential readers However, it didn’t stop there If all...
  • 2
  • 475
  • 0
Đề Khảo sát đầu năm Văn 7 (Đề A)

Đề Khảo sát đầu năm Văn 7 (Đề A)

Ngữ văn

... Câu : (5,0 đ) Hãy miêu tả ngày khai giang v a qua trờng em ...
  • 3
  • 774
  • 0
Unit 7: writing a notice

Unit 7: writing a notice

Tiếng anh

... Binh’ s Hardware Store, 12 Hang Da Street Please contact Pham Van Tai at the above address for more information The school English Speaking Club is going to hold a speaking The school celebrate the ... Speaking club Holding a speaking contest to celebrate teacher’s day Date : November 15 Time: 7.30 p.m to 10 p.m Place: Hall 204, Building G Please contact Tran Thi Thu Hang of Class 8H at the above ... SHARK ATTACK NO T I C E Yeah ! NO T I C E - (to) contact : liªn l¹c - abui contest : cuéc thi - effect (unc): ¶nh h­ëng - a hardware store (n) : c a hµng c¬ khÝ a) 1) a contest b) 2) to contact...
  • 15
  • 507
  • 0
E 7 Unit3 A 2,3

E 7 Unit3 A 2,3

Tiếng anh

  • 19
  • 379
  • 0

Xem thêm