Entries with the tag “css”

Laravel is always giving us little helpers. One of which is Blade’s @foreach that gives you a $loop variable. Inside the loop you get things like $loop->index and $loop->iteration, plus the two I want to talk about today: $loop->first and $loop->last.

first and last are boolean values that tell you if this is the first iteration or the last iteration of the loop. Pretty self-explanatory.

But far too many times I see people abusing these for style - when they should be for flow control.

For a project I’m working on, I had to become very familiar with the print CSS styles for headers and footers. The goal is two fold: 1) to have a nice printable version and 2) to use a chrome-pdf tool to download as PDF.

Regardless of the two consuming sources, I just wanted to solve this all as one html/css file. So, it was necessary to explore all of the different options we have now, in 2025, on Chrome.

In this blog entry, see print (pdf) versions of the different header/footer functionality in CSS including built-in page margin and header/footer tools as well as fixed/forced hacks.

Whenever I can use plain CSS instead of Javascript to solve a user interface or experience problem, a thousand angels rejoice. Well that, and usually the result is a lot less bytes sent for a faster page load. With this in mind, I had a problem a while ago that I solved using CSS only: showing a form only when a link was clicked to display it. Let’s see how.

I love Obsidian for note taking. But one thing bothers me with its live preview mode: I want to see my heading level, without seeing any other markdown directly. If you’re not using a theme that does this, you can do it with CSS snippets. Let me show you how:

What do you do when your website looks great to you - but others say the text is hard to read and the image is grainy? Well, because of this specific reason, I use two monitors always - one with a higher resolution and one with less. So, as it turns out, there’s a way to make both resolutions - and people - happy. Let’s see how.

For some analytic tools, an interstitial page may be required to load javascript and then redirect the user again. Normally these page switches happen pretty fast and the user doesn’t really notice or care. Some have a link to ‘continue’ the redirect just in case the Javascript fails. But, what if we only wanted to show that link after a certain amount of time has elapsed, regardless of if the Javascript has failed or not?

Remember when the biggest way to show off your quality as an applicant was to have a fancy resume? You’d have a heavy paper weight, fancy fonts and in some cases embossing. I decided it might be fun to duplicate that as an HTML/CSS resume.

When talking to junior developers, I hear the same question over and over: “how can I demonstrate what I know, or show experience, if I haven’t had any gigs yet?” Old-timers tell you to build a portfolio, but how do you do that? Where do you get ideas? How do you choose a project that’s not overwhelming? Let me explain my rationale as well as demonstrate how I might make my first portfolio project.

CSS contains custom properties or variables which make style reuse a breeze. But, when you use the inspector on your favorite browser, you only see a definition of the variable, not the value itself. If you want to see the value of the variable, it just takes an extra step or two in your favorite browser. Let me show you how.

Today, while trying to think of a clever way to create a “hire Aaron” page (yup, resume is right here), I came up with an idea to animate a Google Street View page. My initial goal was to animate a rotation and some travel down a road, but I’ve been unable to find a more seamless way of doing the horizontal travel. It looks like there is just going to be jumps in their photography - which of course makes sense. I wasn’t expecting a perfect seamless set of photography, but the current version of it jumps too much and is just too unsettling to see animated.

Want a CSS3 ONLY read more link? I think I’ve created one that should do the trick.

I’ve been having this challenge - I really want to have menu items in the CMS to be equally distributed - but I don’t want them to go over the edge of the page. It’s like, I want them to wrap. I’ve been doing some work with display: table-cell.

So I decided that I wanted to challenge the concepts I know about online photo booths. What are those?

On a recent project, the dev team installed Twitter Bootstrap as the base for our CSS. For some reason, I was the only one seeing a problem with Google Maps. Their Windows and Mac browsers of both Chrome and Firefox were displaying the marker fine. (Part of me doesn’t believe that entirely but…). At any rate, my Chrome browser on ubuntu was not showing the marker properly. This is what it looked like:

I often run across this problem and I have to solve it each time. I finally decided to blog about it.

There are a number of performance arguments about combining assets to reduce HTTP requests and speed up your site. I agree! However, I do have to say that there is such a thing as overkill - to the detriment of speed and security…

When running YSlow the other day, I was reminded that I was loading 2 stylesheets when only one would suffice. So, let this be a reminder to you - and a quick excerpt at my own solution:

I’ve been researching caching and compression techniques for my external resources for some time. My first design of JEMDiary was very greedy with HTTP connections. Couple that with having a less-than-perfect host (Dreamhost bleh…), users could feel the burn. I didn’t like it because it would even take ME forever to use my own website. I went on to discover many different key points I use when creating sites now - the Steps to Optimize Assets.

I came across a great idea dealing with protecting image downloads from the site. Now, this is not fool-proof. There are lots of other ways to download the image, but this may stop the casual downloader. Nope, its not disabling the right click or using java. It requires one single transparent gif. Let’s see how.

Using Yahoo’s Grid Tools, I created a pretty decent page layout. After all this was complete, I needed to generate a printable version of only a portion of the site. This was a particular set of instructions. I decided to tackle this with JQuery.

While reading the blog post about Enabling Javascript specific CSS and the comments, I started thinking about my own ways to implement this. And how to do it validly.

So I’ve heard of the Flash of Unstyled Content before - but never really had this problem. I always use a link tag for my stylesheets.

Internet Explorer provides an additional border to any button element in the page if you don’t explicitly assign a 0px border to it. I have a bunch of buttons on a design that I’d like to have a 1px #fff border on. Unfortunately, with the additional border that IE adds, it looks horrible.

Just saw this really cool example get submitted on one of my websites testing for CSRF:

One thing I remember being pounded into my head is to not create CSS classes after their physical attributes. So, for example, if your error text is red, do not call the class red. Instead, be more descriptive of the content.

This is more of a proof of concept than anything else - as most of my scripts are ;) But, let’s say you have some files that have css in them, either external stylesheets, internal one with style tags or even style attributes - and you need to update the browser support. Wouldn’t it be great to have a tool that could look through these files and point out that there are incompatibilities?

As a reference for myself, I wanted to jot these things down.

This example is a proof-of-concept I worked on years ago when people first started talking about making 3D games with no images - CSS only.

In this posting, I’m going to share the steps to making a slimmed down, cleaner, nicer layout for MySpace to help showcase your personal interests, your band, or your business.