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 Only Display Element After Click

Nov 9, 2023 css html

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.

Obsidian Always Show Markdown Header Level

Jul 25, 2023 css misc-web

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:

Use DPI Media Query for Crisp Text and Images with High Density

May 4, 2023 css

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.

CSS fallback for failed Javascript redirect

May 14, 2021 css javascript

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?

Old School Fancy Resume

Apr 26, 2021 css html

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.

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

Dec 23, 2020 business css html javascript

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.

Seeing Calculated Values of CSS Variables in Browsers

Dec 18, 2020 css misc-web

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.

Google Street View Animation

Sep 18, 2016 css google javascript

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.

CSS3 Only Read More Link

Apr 10, 2015 css

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

Equal distance menu items

Sep 3, 2013 css

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.

HTML5, CSS3, Javascript ONLY Photobooth with Image Download

Jun 11, 2013 css html javascript

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

Google Map Markers Distorted with Bootstrap

May 28, 2013 css

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:

Two Column Background Colors Demo

Dec 18, 2012 css html misc-web

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

Keep your Admin Interface CSS Separate

May 16, 2012 css performance security

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…

Combining Print and Screen CSS

Oct 5, 2010 css misc-web

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:

Javascript and CSS Compression and Cache

Feb 25, 2010 css javascript misc-web

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.

Protect Your Image from Download

Dec 16, 2009 css html misc-web

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.

Printing a small segment of the page using JQuery

Nov 23, 2009 css javascript

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.

Enabling Javascript Specific CSS

May 11, 2009 css javascript

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.

Flash of Unstyled Content - in FireFox 3

Apr 28, 2009 css html javascript

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.

Remove Internet Explorer Button Border

Apr 9, 2009 css

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.

Another example of CSRF - in CSS

Mar 5, 2009 css javascript security

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

Name CSS Classes More Descriptive

Oct 30, 2008 css misc-web

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.

CSS incompatibility finder

Sep 25, 2008 css php

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?

Internet Explorer CSS Hacks - Transparent PNG and Selectors

Feb 23, 2008 css

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

3D CSS Example

Jan 6, 2008 css misc-web

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.

How to make a Great MySpace Layout

Apr 4, 2007 css html misc-web php

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.