Despite currently being a Photography minor, where I am assured that I should only like pure photography without any filters, I do love my Instagram filters. I’ve secretly wished there was a way to bring those filters with me to the desktop or the web. Well, it’s here. Now.
CSSGram brings Instagram-like filters to the web, applying those filters to photos using only CSS! It’s a testament, really, to the power of CSS.
If you’ve ever wanted to use the default font of the user’s operating system on your page, it could be a confusing mess for your font stack, or worse, having to use JavaScript to detect the user’s OS and select the right font to display. But I found this little snippet on css-tricks that makes it easier!
In my last post, we took a look at transparency applied to the main element over a large background photo. But I realized that I hadn’t touched on how to make that background photo work!
Continue reading
CSS3 has enabled us to use a lot of effects to design on the web. One that I want to look at today is transparency. Look at the image on the right. In this example, the main content section is white, with a 60% transparency effect added. This is particularly useful when using a full page cover image for your background.
Continue reading
I’d actually like to use CSS shorthand in my code more, but the biggest problem I have is remembering the shorthand syntax!
Continue reading
Those of us in graphic design are in the know about type features such as ligatures. In typography, a ligature occurs where two or more letters are joined as a single glyph in fonts that support them. A good example of a ligature is the lowercase f and the lowercase i characters. They can be displayed separately, but some fonts contain a ligature glyph of the f and i joined as fi.
I remember the old days before CSS was widely used. They were dark days, indeed. When you wanted to place a drop shadow behind a photo on your website, you didn’t have a lot of choices except to place the drop shadow on the photo in Photoshop, and hope that the background matched. We’ve come a long way since then.
A few posts ago, I introduced you to Bootstrap, an HTML+CSS framework that makes formatting websites and pages easier. There are lots of advantages to using Bootstrap, but one of its biggest advantages is the grid system.
CSS3 has added so many great features and effects. One effect that I like to use is the link color transition effect (just hover over this link to see it in action).
Continue reading
With the rise of web standards, the introduction of HTML5, and the advances in CSS in the past decade, CSS frameworks have become an easy way to build websites. No longer do you have to re-invent the wheel each time, instead you can use one of many pre-built frameworks that are feature-packed to quickly produce the results you want, including responsive web pages.
Continue reading