All posts tagged CSS

  • Helpful Tools for Web Developers: CSS Arrow, Please

    Recently, I’ve discovered that making css arrows (see image above) is a huge pain in the ass. Luckily, there’s a tool to make it easy for you: CSS Arrow, Please (I added the comma because it was driving me nuts). I highly recommend you check it out if you need an arrow for UI elements such as speech bubbles, tooltips, or popovers.

  • CodePen: Dropdown Menu

    I made a simple, static dropdown menu widget that’s meant to act as a template for dropdowns you need to create.

    See the Pen Lkgzv by Levi Hackwith (@opnsrce) on CodePen.

    Currently, it’s not animated but feel free to fork it.

  • A Quick Visual Guide to Relative Positioning in CSS

    Getting your head around positioning elements in CSS can be very confusing. When I first started doing front-end web development, I would often end up spending hours trying to figure out why one element or another was refusing render where I thought it should. Nine times out of ten, the problem usually had something to do with the surrounding elements and what the value of their position attribute happened to be.

    In order to help new developers understand how relative positioning works in CSS, I put together a quick visual demonstration:

    See the Pen bgHAJ by Levi Hackwith (@opnsrce) on CodePen.

    The box labeled “5” is absolutely positioned zero pixels from the right side of its parent container (by default, container 4).

    When you click on one of the checkboxes, the corresponding container div’s position property gets set to static (the default value). If you click on the checkbox labeled “Disable Level 4”, you’ll notice that the “5” box jumps from the right of box 4 to the right of box 3. This is because, by setting 4’s position to static instead of relative, you are telling box 5 that 4 is no longer the parent container. Confused? I was too. When we look at the nested nature of HTML, we would assume that the “parent container” of an element is the nearest element that contains another element. In our case, the parent of 5 would be 4. However, the browser sees things a little different. It defines a parent element as the nearest element that contains another element that also has its position element set to relative. By changing the position attribute of a parent element, you’re forcing the browser to look for the next nearest element with a relative position. Notice how, if you recheck the checkbox, the 5 box jumps back into place.

    Hopefully the clarifies things regarding relative positioning in CSS. If you have any questions or feedback, please leave a comment.

    photo credit: atzu via photopin cc

  • Reordering List Items using Only CSS

    Recently, I’ve been doing a lot of research into CSS-only dropdown menus; I’ve found them to be pretty straight-forward (for the most part). One topic I have not been able to find much coverage on is how to rearrange items within the dropdown to give the illusion that the user has selected an item. Where you might use this is in a dropdown menu where the user is able to pick an option that changes how the data is sorted by on the page. Let’s go ahead and set up an example:

    Read more

  • Roll Your Own Dropdown Menu Using Pure CSS

    There’s a lot of tutorials out there for creating dropdown menus using Only CSS. However, I haven’t really found one that breaks down the development process in order to teach it instead of just providing an explanation of code you’re meant to copy and paste. Here I hope to explain just how CSS dropdown menus work and go over the process I used to develop the one I use on my projects.

    Read more

  • IE9 Stylesheet Not Loading Due to Case Sensitivity

    I recently discovered something very dastardly about IE9 (and possibly other versions – I haven’t tested them all): class names are case sensitive in IE9. In other words, if your HTML looks something like this:

    ...
    <div class = "MyDiv"></div>
    ...
    

    And your CSS looks something like this:

    .myDiv {
    /* Styles Here */
    }
    

    Read more

  • CSS3 :Hover > Child Selectors Explained

    Recently, I spent some time reading over pure CSS implementations of a dropdown menu and I was having a hard time grasping the implementation (sad, I know). The HTML made sense (it’s usually a series of nested lists), but the CSS was never very well explained. The confusing part usually looked something like this:

    ol > li:hover > ol {
        position: absolute;
        /* Other styles here */
    }
    

    What this translate to is When I hover over a list item that is part of an ordered list, find an ordered list that is a direct child of that list item and apply the following styles to it. I know for a lot of you the CSS above is pretty straight forward. For me, it took a while for the concept to click. Maybe this post will help it click for someone else.

  • Code Snippet: CSS Wildcard Selectors

    Just a quick CSS code snippet I found helpful the other day. CSS wildCard selectors

    Attribute “Contains” Selector

    a[id*=-myElement] {
        color: red;
    }
    

    The above CSS will find any anchor tag whose id attribute contains the text “-myElement”.

    Attribute “Ends With” Selector

    a[id$=-myElement] {
        color: red;
    }
    

    The above CSS will find any anchor tag whose id attribute ends with the text “-myElement”.

    Attribute “Begins With” Selector

    a[id^=-myElement] {
        color: red;
    }
    

    The above CSS will find any anchor tag whose id attribute ends with the text “-myElement”.

    This is by no means a complete list of attribute selectors. For a full reference, check out this reference on the Mozilla Developer Network

  • CSS Transitions Cause jQuery FadeIn() to Not Work

    While working on a small side project, I discovered an interesting quirk related to jQuery’s fadeIn method: If the element you’re trying to fade in has it’s transition property set (it doesn’t matter what vendor prefix you use), the element will just appear without fading in. Here’s a quick example:

    Read more

  • How to Include HTML Entities in CSS Content Property

    Recently, I ran into a situation where I was asked to modify a couple of pagination buttons so that the left and right arrows were replaced with the « and » symbols. Now, I won’t go into a ton of background details, but let’s just say that modifying the source code of the page wasn’t the best approach in terms of maintainability. Instead I decided to use the content property in CSS to add the symbols on the fly.

    If you’re not familiar with the content property, it allows you to insert content either before or after an element:

    img:before {
        content: 'This will be before the image ';
    }
    
    img:after {
        'This will be after the image';
    }
    

    If you drop that into a webpage, it will put the phrase “This will before the image” and “This will be after the image” before and after every image, respectively. Now, this is all pretty straight forward stuff if you want to put simple text before or after an element, but what about special characters? Well, you’d think you’d be able to do something like this:

    img:before {
        content: '&laquo;'
    }
    
    img:after {
        '&raquo';
    }
    

    Unfortunately, instead of displaying the appropriate symbols on the page, the string literals of “&laquo;” and “&raquo;” get displayed. To get around this, you need to use the hex values of the html entities. How do you get the hex values of the entity you’re trying to include? Well, you could always roll your own entity conversion script or you could just paste the character into the Entity Conversion Calculator. Once you figure out the appropriate hex values, all you have to do is plugin them into your CSS:

    img:before {
        content: '\00AB'
    }
    
    img:after {
        '\00BB';
    }