Articles in the ‘Tutorials’ Category

  • Understanding CSS Attribute Selectors

    Posted: 5 hours ago in Tutorials

    CSS has the ability to target HTML elements based on any one of their attributes. You probably already know about classes and IDs. But did you know you can select an element based on the rel attribute as well? That is known as an attribute selector. There is a lot more to attribute selectors so let’s look closer at all the different options and try to cover some “real world” scenarios on when they might be useful…

    VN:F [1.8.1_1037]
    Rating: 0 (from 0 votes)
  • CSS In Depth: Margins, Padding & The Box Model

    Posted: 2 days ago in Tutorials

    In the first of the CSS In depth series, we’ll be talking about margins, padding and the box model. Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility.

    In this post, we’ll explain the difference between padding and margins, how the box model effects browsers and some tips and tricks dealing with cross-browser issues…

    VN:F [1.8.1_1037]
    Rating: 0 (from 0 votes)
  • CSS3-Only Tabbed Area

    Posted: 2 days ago in Tutorials

    When you think of “tabs”, your mind might go right to JavaScript. Watch for a click on a tab, hide all the panels, show the one corresponding to tab just clicked on. All major JavaScript libraries tackle tabs in some way. But there is a way to accomplish this same idea with “pure CSS”. Just as we did with the CSS Image Switcher, let’s tackle this traditionally JavaScript project with only CSS…

    VN:F [1.8.1_1037]
    Rating: 0 (from 0 votes)
  • 5 Advanced CSS Pseudo Classes

    Posted: 3 days ago in Tutorials

    CSS3 provides powerful pseudo-classes that allow the designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it becomes a lot easier over time to set up your layout. In today’s article I’m going to take a look at 5 pseudo-classes that will simplify our design process and reduces a lot of time to create a certain visual effects. You will also find demonstration below each point to demonstrate how we can use these selectors in different design scenario you face everyday in your designing process…

    VN:F [1.8.1_1037]
    Rating: 0 (from 0 votes)
  • CSS text-indent: An Excellent Trick To Style Your HTML Form

    Posted: 5 days ago in Tutorials

    You probably know what the text-indent property does in CSS. It’s a common CSS property allowing webmasters to indent paragraphs and hide text for image-based links. Text-indent does this great; however, it doesn’t just hide and indent text. It does more.

    People mostly use text-indent to hide text like our example above. They often use the negative value for text-indent but forget to make use of its original intent: inset indentation. Here I’ll show you how to make a beautiful text field using text-indent…

    VN:F [1.8.1_1037]
    Rating: 0 (from 0 votes)
  • Pure CSS Speech Bubbles

    Posted: 6 days ago in Tutorials

    Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML…

    VN:F [1.8.1_1037]
    Rating: 0 (from 0 votes)
  • The Basics of CSS3

    Posted: 1 week ago in Tutorials

    Last week I posted a CSS3 dropdown menu and someone complained that I didn’t explain the CSS code in detail. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know…

    VN:F [1.8.1_1037]
    Rating: 0 (from 0 votes)
  • Speed Up with CSS3 Gradients

    Posted: 1 week ago in Tutorials

    WebKit browsers paved the way with CSS based gradients. Now Firefox 3.6 is out and is supporting them as well, which makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead.

    But wait… if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load…

    VN:F [1.8.1_1037]
    Rating: 0 (from 0 votes)
  • Design a Prettier Web Form with CSS 3

    Posted: 2 weeks ago in Tutorials

    Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. I’ll show you how in today’s tutorial…

    VN:F [1.8.1_1037]
    Rating: +1 (from 1 vote)
  • CSS3 Dropdown Menu

    Posted: 2 weeks ago in Tutorials

    A Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered…

    VN:F [1.8.1_1037]
    Rating: +1 (from 1 vote)
Page 1 of 3012345»102030...Last »