IntroCSS3 - Intro to CSS3 Whats New So Far Advanced...

This preview shows page 1 - 16 out of 51 pages.

Intro to CSS3
Image of page 1

Subscribe to view the full document.

What’s New So Far ????? Advanced selectors Rounded corners Text and box shadows Imported fonts Gradients Multiple background images Multi-column layout Transform, transition and animation
Image of page 2
Source: CSS3 Browser Compatibility
Image of page 3

Subscribe to view the full document.

CSS3 Borders CSS3 takes borders to a new level with: multiple border colors border images rounded corners gradients box shadows Let’s look at each of these in a bit more detail, using examples where possible
Image of page 4
CSS3 border-colors property CSS2 allowed you to specify a border- color for the top, bottom, left and right CSS3 border-color s allows you to provide a color for each pixel of the border If you have border with 6 pixel width, then you can define 6 different colors for each part of the border
Image of page 5

Subscribe to view the full document.

border-colors Example Source:
Image of page 6
CSS3 border-image property Create a basic border that can act as a default for browsers that do not support border-image -webkit- border-image : url(image.png) A B type; A = slice height B= slice width type= whether the border is: repeat/round/stretch Source:
Image of page 7

Subscribe to view the full document.

CSS3 border-image (round) Ex1 Source:
Image of page 8
CSS3 border-image (stretch) Ex2 Source:
Image of page 9

Subscribe to view the full document.

CSS3 border-radius The CSS3 border-radius property allows you to add rounded, elliptical corners to your design elements Does not need images or multiple divs Can set each corner separately or do all at once Provide the radius in length or percentage Supported by most browsers after 2005, use –moz for pre 2005 Firefox
Image of page 10
border-radius (rounded at once) Source:
Image of page 11

Subscribe to view the full document.

Examples: border-*-*-radius If either value is 0, corner is squared Source:
Image of page 12
border-radius (one at a time) Source:
Image of page 13

Subscribe to view the full document.

border-radius values The first set of values define the horizontal radii for all four corners. An optional second set of values, preceded by a ‘/’, define the vertical radii for all four corners. If only one set of values are supplied, these are used to determine both the vertical and horizontal equally.
Image of page 14
#Example_A { height: 65px; width:160px; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; } #Example_B { height: 65px; width:160px; -moz-border-radius-bottomright: 50px 25px; border-bottom-right-radius: 50px 25px; } #Example_C { height: 65px; width:160px; -moz-border-radius-bottomright: 25px 50px; border-bottom-right-radius: 25px 50px; } #Example_D { height: 5em;
Image of page 15

Subscribe to view the full document.

Image of page 16
  • Winter '12
  • praveen
  • css, Primary color, Secondary color

{[ snackBarMessage ]}

Get FREE access by uploading your study materials

Upload your study materials now and get free access to over 25 million documents.

Upload now for FREE access Or pay now for instant access
Christopher Reinemann
"Before using Course Hero my grade was at 78%. By the end of the semester my grade was at 90%. I could not have done it without all the class material I found."
— Christopher R., University of Rhode Island '15, Course Hero Intern

Ask a question for free

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern