End Your If

Category: CSS

  • CSS Attribute Selectors

    Have you ever wanted to set a custom style on all images that contain .png as their extension? How about some custom CSS for a URL that is under SSL (perhaps add a lock image beside it?). In CSS3, attribute selectors have been added to allow for partial matches to attribute values. The match can be at the start, end, or anywhere else in the string.

    (more…)

  • Rotating DOM Elements using CSS

    Modern browsers and CSS3 begins to allow us much more freedom using standard text without the need of images. Not only does this speed up page load times, it also lowers bandwidth costs as well. Using CSS3, many standard DOM (Document Object Model) objects can easily be rotated, such as: images, text, block elements, etc…

    Let’s explore how we can use the transform CSS property to accomplish this.

    (more…)

  • Transitioning AJAX Content into view with CSS3 Animations

    In a previous article, I demonstrated how you can use jQuery to Transition AJAX Content into view with $.animate(). In this article, we are going to remove the jQuery animation and use CSS3 instead.

    (more…)

  • CSS3: Custom Fonts using font-face

    font-face in css

    Let me start by saying that I am not a designer, so this feature didn’t mean much to me; however, when we told designers that they can start using custom fonts – they want ape @$!# for it.

    Over the years it has been mentioned countless times how little time you have to capture a person’s attention on your website. Often times this can be done with flashy or enticing designs. With this comes increased download times – slowing the page load down. Also, many web hosting providers supply a limited bandwidth or charge per GB. Flashy or enticing designs can be costly in both the bandwidth and page load times.

    With the ability to embed fonts with CSS3, us web developers, can start pleasing our designers by embedding their custom fonts in the website and stop using images to achieve the same affect.

    (more…)

  • Apply two different colors to a single character with CSS

    When you have one or more characters in a word/logo that you want to apply multiple colors to (not a gradient).

    To accomplish two unique colors inside one character, the content property of CSS will be used in conjunction with the :beforepseudo element.

    (more…)