While @font-face may not work in all browsers, it’s still one of the best solutions available today. Of course not all type foundries will let us embed their fonts on our webpages. There are solutions like Typekit which look very promising but today we’ll simply go over the @font-face CSS property and show examples of over 20 fonts that are free to use with @font-face…
Articles in the ‘Tutorials’ Category
-
21 Awesome @font-face Embeddable Typefaces
Posted: 10 months ago in Tutorials
Read More: 21 Awesome @font-face Embeddable Typefaces
-
How To Use Pure CSS To Style Web Form Dynamically
Posted: 10 months ago in Tutorials
Pure CSS styling of web form can be achieved by changing the border colour or background colour but how about styling a textfield and textarea with a nice round corner background image?
Let’s use a contact us form as an example to demonstrate this tutorial. This simple tutorial will show you how you can style your textfield and textarea in you web form with background image dynamically…
Read More: How To Use Pure CSS To Style Web Form Dynamically
-
Pseudo Drop Caps with CSS
Posted: 10 months ago in Tutorials
They’ve been around for a while now, appearing in magazines, print and now the web. Designers and developers alike have experimented with multiple workarounds from using inline styles to using image replacement but with both of these solutions there are problems. For example, what happens when you recreate your site and decide that you no longer want to upload the drop cap images, you’re now going to left with a broken image at the start of every single post that you had previously created, this is obviously assuming you haven’t used text-indent. How do we go about creating this with Cascading Style Sheets…
Read More: Pseudo Drop Caps with CSS
-
The Z-Index CSS Property: A Comprehensive Look
Posted: 10 months ago in Tutorials
Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances. The z-index property belongs to the latter group. z-index has undoubtedly caused as much confusion and frustration as any other CSS property. Ironically, however, when z-index is fully understood, it is a very easy property to use, and offers an effective method for overcoming many layout challenges…
-
How to simplify your markup using ID for anchors
Posted: 10 months ago in Tutorials
CSS Signatures are all the rage these days. If you’re not familiar with a CSS Signature, it’s basically nothing more than an ID on your body tag. The fundamental purpose of the CSS Signature is to allow a user to specify style adjustments to your site in their own user style sheets. Whether or not users are actually capitalizing on this is a discussion for another day, but doing this has other benefits like having an extra id to use when dealing with CSS specificity. Additionally, we can use this to capitalize on a little known fact about HTML and anchors: you can use anchors to jump to any element on your page with an ID attribute…
-
CSS: Design Out Of The Box
Posted: 11 months ago in Tutorials
Are you tired of your typical columned and boxed layout? It is time to learn how to break out of the box and do something creative. In this post, I’ve collected some of the best examples that are designed out of the box. I’ve also provided some quick CSS tips with demo files on how to break out of the box by creatively using background images and the CSS position property…
Read More: CSS: Design Out Of The Box
-
11 Classic CSS Techniques Made Simple with CSS3
Posted: 11 months ago in Tutorials
We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In this tutorial, you’ll see eleven different time-consuming effects that can be achieved quite easily with CSS3…
-
Style a List with One Pixel
Posted: 11 months ago in Tutorials
A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list…
Read More: Style a List with One Pixel
-
3 Easy and Fast CSS Techniques for Faux Image Cropping
Posted: 11 months ago in Tutorials
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…
Read More: 3 Easy and Fast CSS Techniques for Faux Image Cropping
-
Simple CSS Tricks to Greatly Improve Site Typography
Posted: 11 months ago in Tutorials
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…
Read More: Simple CSS Tricks to Greatly Improve Site Typography