CSS:
  • 1.  Floats & clears #1
  • 2. Floats & clears #2
  • 3. Positioning #1
  • 4. Fullscreen background
  • 5. CSS filters
  • 6. Making a menu
  • 7. CSS 3
  • 8. Responsive webdesign
  • CSS: CSS 3Using the new CSS3 stuff should get you excited!

    This is all in the assumption that you know a little bit of CSS already. So you know that it takes care of all the visuals and style for your website. However, there are some things that are new that you can use to make life, building websites, a lot easier.

    These new things are possible because of CSS version 3. It supports a lot of fun extra’s like shadows, animations, shapes, … Let’s explore a little bit where they can be huge timesavers. Note that CSS 3 is fully backward compatible so what ends up happening is this: we use previous version of CSS for the basics and the newer version for newer functions. You’re always using the entire possible CSS options, not one specific version.

    1. Border-radius (rounded corners)

    A fun thing to do with elements or photos is giving them rounded corners. We can easily do it with one line of code:

    div{
      border-radius: 20px;
    }

    We can take it one step further and instead of using a pixel value, we could use a certain percentage:

    div{
      border-radius: 50%;
    }

    Note that not all sides need the same value. You can specify 4 different values. The values given represent top-right-bottom-left:

    div{
      border-radius: 20px 50px 10px 20px;
    }

    Browser support

      chrome firefox explorer safari opera
    Supported 9+

    2. Box-shadow

    You can easily add a shadow to an element or an image. You can even decide how big, strong or what color it has to be:

    div{
      box-shadow: 0 0 10px #333;
    }

    The first two values are the location of the shadow. The first is the horizontal position (along the x-axis) and the second is the vertical position (along the y-axis). The third value defines the blur of the shadow. The higher this values, the bigger, but at the same time, the more subtle your shadow will become. The final value is the color of the shadow. If you want to keep it all realistic (as much as is even possible), you put this to a dark(er) color.

    Browser support

      chrome firefox explorer safari opera
    Supported 9+

    3. Text-shadow

    Similar to box-shadow, you can apply a shadow around some text:

    div{
      text-shadow: 0 0 10px #333;
    }

    Browser support

      chrome firefox explorer safari opera
    Supported

    4. 2D Transformations

    You can perform some transormation on objects in order to position or scale them to your liking. I'll show you two of these transformations: rotate and scale.

    div{
      width: 85px; 
      height: 85px; 
      background-color: #fbda59;
      transform: rotate(45deg) scale(0.5, 0.5);
    }

    Browser support

      chrome firefox explorer safari opera
    Supported

    5. Animations

    You can animate elements using just CSS3 transitions. You can animate every property known to CSS. To check out the animation I prepared here, roll over the yellow box:

    div{
      transition: width, 2s;
    }

    Browser support

      chrome firefox explorer safari opera
    Supported

    6. Colums

    If you want to create some colums out of one single paragraph, youre in luck. This next option lets you start with one block of text and cuts it into different colums for you:

    div{
      column-count: 3;
      column-gap: 40px;
      column-rule: 3px outset #fbda59;
    }
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam, libero ac tempus feugiat, lacus risus egestas justo, at lobortis dui neque in magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus auctor diam vitae nisl sagittis cursus. Vivamus quis est quis massa ultricies tristique. Praesent nec arcu mi, sed gravida nisi. Morbi eros libero, iaculis sed tristique a, imperdiet a diam. Sed hendrerit lorem vel erat volutpat placerat. Proin ullamcorper arcu in lectus laoreet vel tristique nisi molestie. Nullam mollis rutrum fermentum. Morbi adipiscing ornare libero, nec vehicula orci tristique nec. Suspendisse tempor quam eget erat lacinia vehicula at ullamcorper ipsum. Maecenas dolor nulla, euismod consequat malesuada non, aliquam ut nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer gravida lacinia metus, non dictum dui semper vitae.

    Browser support

      chrome firefox explorer safari opera
    Supported

    Close this warning and continue at own risk

    Stuff might look weird :s

    Your browser is so old, it knew Gandalf before he had a beard.

    Your browser is so old, it used to babysit Yoda.

    Your browser is so old, it went to an antique store and people started to bid on it.

    Your browser is so old, it's birth certificate is in Roman numerals.

    Your browser is so old, you're old and you should feel old.

    Be thoughtfull of your browser, and update today! It's free, fast and easy