Surf the Dream A discourse of links and articles from Justin Avery

Tag Archive: CSS

  1. Symbolic Change – Love Vs Hate

    Leave a Comment

    This was an CSS experiment after reading the Five Simple Steps book, Designing the invisible. The book was talking about the different meanings that symbols can take on in different cultures.

    Over the past 3000 years the Swastika has gone from a spiritual symbol meaning love, change and wisdom and has been turned into one of the most recognised symbols of all time…. and for all the wrong reasons.

    The images themselves are done completely with CSS and contains no images. The flag is just a large box with a red background, the white circle is using the border radius set to half the width of the container. The evil Swastika is done using the same methods, but adding a Transform to get the angles right. Stupidly I added the rotation transform to every one of the pieces instead of creating the symbol and applying the transition to the containing DIV. If I had of created the hindu swastika first then I would have realised this…. but I didn’t…. so I didn’t

    Update: I did add an image in the because I wanted an ampersand in between the two items. I’m not sure if you can reverse the colours in the text just yet, so there’s the image.

    Update 2: I took the ampersand image out and ended up doing it with CSS & HTML to keep in the theme. There’s one ampersand set to white in the red flag with the box set to overflow:hidden, and the red ampersand sits in the white flag. The overlapping occurs thanks to a bit of z-index magic.

    See the Pen Love Vs Hate by Justin Avery (@justincavery) on CodePen.

  2. Is CriticalCSS harming our site performance?

    1 Comment

    In a recent article on Medium, JP DeVries wrote about “Unfolding Critical CSS“.

    Are you building a single web page that users will visit once never to return to or are you building a multi–page website that most users click around on for a while?

    If you inline an average of ~20kB of critical CSS on each page and a user visits 10 pages that make use of those same styles you’ve served them 180kb of avoidable weight. That’s ~20kB of the same uncacheable non–blocking styles being downloaded 10 times (once for each page) vs ~20kB of blocking styles being downloaded once as part of a common stylesheet. The number of average page views per user should be taken into consideration when architecting your CSS delivery method.

    CriticalCSS is something that I’ve been HUGELY in favour of since it was first suggested through the Filament Group (citation needed). Since then I’ve showed clients many times how much faster we can make their website appear by loading the Critical CSS in the head…. although I leave off the how and just show them the results.

    The point about the 20kb of additional critical CSS of subsequent page requests is a really good argument, that can really add up over many visits. I will say though that the idea is to get the first part of the “fold” within the first 14kb of the entire HTML document, so we’re not really talking about 20kb of additional content (although the argument still holds fast just with less kb).

    The better approach is to send the critical CSS in the head through on the first visit, download the full CSS file, set a cookie, and then include the tag back in the head to replace the critical CSS.

    This does require some configuration on what the server is generating and might not be as straight forward for some sites, and it can have additional complications around CDN’s and caching URI’s as well…. but then the web is just getting more and more complicated these days.

  3. Chaining pseudo selectors

    Leave a Comment

    I’ve been working on a sales dashboard for work that highlights the number of sales, number of meeting, contribution to the overall targets and a few other things that make a member of the sales team proud they’re hitting their targets.

    The layout requirements I had for this part of the dashboard was

    • Zebra background to differentiate rows.
    • Gold Border around the top performer
    • Golden Crown sat upon the top performer

    Here’s what we’re after….

    The layout we are aiming for….

    Zebra background with pseudo selectors

    The zebra background is done through the use of the nth-child approach.

    .sales-team:nth-child(2n) { background: #eee;}

    What we’re doing here is saying we want to select the element with the style .sales-team and then for every second element, (2n), we should add a background: #eee;. That’s that problem sorted.

    The next part is getting the golden border and the crown to appear.

    Psu, psu, psuedo

    This is where we apply a border and the crown on the first element.

    The border can be added by selecting the :first-of-type pseudo element.

    .sales-team:first-of-type { border: solid 5px gold;}

    The next requirement is to add the crown as a background image. Now I wanted this to sit on the top corner of the first row so that it spills out of the container on the angle.

    To accomplish this I wanted to add a :before pseudo element and use that as the background image for positioning, but I needed it to run on the same :first-of-type element.

    Fortunately you can daisy chain pseudo elements together so I ended up with

    .sales-team:first-of-type:before {
        content: '';
        background-image: url(../images/crown.svg);
        background-repeat: no-repeat;
        background-size: 75%;
        position: absolute;
        width: 150px;
        height: 150px;
        top: -45px;
        left: -40px;
        -webkit-transform: rotate(-18deg);
        -moz-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        -o-transform: rotate(-18deg);
        transform: rotate(-18deg);

    The above code we are selecting the first element with :first-of-type, and then creating a :before pseudo element to contain the Crown.SVG file. This hook is then used to position the background image on the top left side of the element a rotate the crown.

    The result is something that works quite nicely and cheers up the sales team, or at least the one at the top of the table.

  4. Learn CSS Layout

    Leave a Comment

    This site teaches the CSS fundamentals that are used in any website’s layout.

    They assume you already know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you.

    Visit Link

  5. Stylus

    Leave a Comment

    If you want an expressive css language for nodejs with these features or the features listed below, head over toGitHub for more information.

    Visit Link

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as (now my resume) and (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of high quality pocket notebooks(including a Solar System Notebook, Space Notebook, and a Guitar Notebook), write about the Universe and run a responsive web design knowledge hub and a RWD Weekly Newsletter.