Category: CSS
-
SVG Spriting
SVG sprites offer the same efficiencies as PNG sprites, but they can be trickier to implement because of their innate scalability.
-
Creating Social Icons from Glyphs
Even though using font glyphs for social icons allows only one color, complex color can be added with background gradients in a CSS-styled structure around the glyph.
-
Styling :before
On the desktop version of a shopping cart I was styling I had “column headers” (flexed divs in a non-table layout) that had no relevance when the page was viewed in mobile, since the columns stacked vertically. I needed to remove the desktop headers and apply the labels to each individual element instead. I…
-
Making a Custom Icon Font for Your Website
Reducing server calls for image resources will speed up your page load and enhance performance. A great way to do this is to replace sprited icons with mobile-friendly custom fonts.
-
Responsive Interactive Map
Image maps won’t work in a responsive layout and Flash won’t work on mobile. If you want a responsive graphic with shaped hotspots and rollover effects you need SVG.
-
Accessible Custom Checkbox
In an earlier post I explored custom styling of form selects. In this article I discuss how to make accessible custom checkboxes to match your interface styling. The same technique can be used for radios.
-
Lose My Number
iOS has a handy built in feature: automatically sensing phone numbers and making them active links. When you touch them you get a dialog to make a call to that number. Unfortunately this can cause problem with your layout and your pages.