This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can’t do that yet) we are merely hiding the “extra” and displaying only a part of the image we want. That’s why it’s called Faux Image Cropping.
These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus…
Direct link: 3 Easy and Fast CSS Techniques for Faux Image Cropping
When creating a minimalist or simple website design, typography plays a key role in adding contrast and interest that would normally be done with images. Because of that, it’s essential that the typography looks professional and is well-tuned with the rest of the design. Here are a few CSS tips to make sure you get it right…
Direct link: Simple CSS Tricks to Greatly Improve Site Typography
Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties!)…
Direct link: Backgrounds In CSS: Everything You Need To Know
There comes a time in every web designer’s life, when you’re trying to center an HTML element and it’s failing miserably. You’re ready to pull the plug on CSS, revert back to tables, and use deprecated tags and attributes like: center, align, and valign. In this tutorial we’re going to shed some light on the subject, and hopefully help demystify the process of centering HTML elements using CSS…
Direct link: Horizontal and Vertical Centering Using CSS: A Beginner’s Guide
Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling…
Direct link: How To Create a Pure CSS Polaroid Photo Gallery
I am sure you have been on a website where the navigation has an “active” state, basically showing you which page you are currently on. It’s a great way to let visitors know exactly where they are on a site. This tutorial shows you how to use a CSS sprite to create a navigation menu with normal, hover and active states…
Direct link: Active State in Navigation – CSS Navigation Tutorial
I needed today to format the content differently according to the screen resolution of the user. So I thought that just by detecting the screen width using the screen.width property, I could change the stylesheet using jQuery. And so it was. Check the example and continue reading…
Direct link: How to detect screen size and apply a CSS style
Images are great for blog posts and chunks of text in general. Even if they’re just remotely relevant, they’ll add some space and make the content more accessible. You want to spice your texts up with images.You can position images however you like, of course, but a nice feature is to have the floating to the left or right, with the text flowing around them.
Direct link: Aligning Images The Right Way Using CSS
Fonts are a huge part of design (as we all know). Text on the web needs to be much more dynamic than in any other media. We have solutions like Cufón, sIFR, etc. but perhaps one of the better options is using @font-face in CSS.
We’ll take a quick look at using @font-face in CSS and 15 great free fonts you can start using today…
Direct link: @font-face and 15 Free Fonts You Can Use Today
Cascading Style Sheets is a presentational style sheet language. In that sense, it does not have a lot of the functionality that many developers want to satisfy their programmer instincts. Today, we’re going to learn how to supercharge your CSS by putting some PHP under the hood…
Direct link: Supercharge Your CSS with PHP Under the Hood