Tuesday, March 6, 2012

7 CSS3 properties one must know

  1. border-radius with that one you can create rounded corners
    -webkit-border-radius: 4px;   
    -moz-border-radius: 4px;   
    border-radius: 4px;  
    and even circles:
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
     border-radius: 50px;
  2. box-shadow allows you to immediately apply depth to your elements
    -webkit-box-shadow: 1px 1px 3px #292929;
    -moz-box-shadow: 1px 1px 3px #292929;
    box-shadow: 1px 1px 3px #292929;
    -webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
    -moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
    box-shadow: 1px 1px 3px green, -1px -1px blue;
    box-shadow accepts four parameters: x-offset y-offset blur color of shadow
  3. text-shadow same as box-shadow but applied to text
    .box {
    background: url(image/path.jpg) 0 0 no-repeat,
     url(image2/path.jpg) 100% 0 no-repeat;
    In the case above, first background is placed in the top left position (0 0) and second - the top right position (100% 0)
  5. background-size
    background: url(path/to/image.jpg) no-repeat;
     -moz-background-size: 100% 100%;
     -o-background-size: 100% 100%;
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
  6. text-overflow text-overflow property can accept two values:
    • clip
    • ellipsis
    This property can be used to cut off text that exceeds its container, while still providing a bit of feedback for the user, like an ellipsis.
    .box {
       -o-text-overflow: ellipsis;
       border: 1px solid black;
       width: 400px;
       padding: 20px;
       cursor: pointer;
  7. Resize allows us to specify how a textarea is resized. Possible values: both: Resize vertically and horizontally horizontal: Limit resizing to horizontally vertical: Limit resizing to vertically none: Disable resizing
    textarea {   
       -moz-resize: vertical;   
       -webkit-resize: vertical;   
       resize: vertical;   

No comments:

Post a Comment