Entries with the tag "css"

These entries are tagged with the “CSS” tag. They could range from basic concepts to advanced CSS3 and beyond.

CSS fallback for failed Javascript redirect

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?... (more…)

Old School Fancy Resume

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. (more…)

Coming Up With Your First Portfolio Project (with coding walkthrough)

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. (more…)

Seeing Calculated Values of CSS Variables in Browsers

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. (more…)

Google Street View Animation

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... (more…)

Equal distance menu items

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. (more…)

css

Google Map Markers Distorted with Bootstrap

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: (more…)

css

Combining Print and Screen CSS

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: (more…)

Javascript and CSS Compression and Cache

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... (more…)

Protect Your Image from Download

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. (more…)

Remove Internet Explorer Button Border

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. (more…)

css

Name CSS Classes More Descriptive

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. (more…)

CSS incompatibility finder

This is more of a proof of concept than anything else - as most of my scripts are ;) But, lets 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? (more…)

3D CSS Example

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. (more…)

Go to All Posts

Get the RSS for css