10 Random CSS Tricks You Might Want to Know About. CSS is the fundamental way of styling our web pages. Its deceptively easy syntax allows us to do many things to affect the visual layer of our work. And especially with CSS3, the language has gotten even more powerful. There are many useful CSS techniques and tricks out there for you to take advantage of. This is a collection of a few useful CSS snippets that you might want to keep in your toolkit. 1. If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. 2. When you focus (:focus) on an input element, perhaps you have noticed that Safari adds a blue border around it (and Chrome, a yellow one).
If you would like to remove this border outline, you can use the following style rule (this removes the outline from text fields): Please note that outline is used for accessibility purposes so that it is easier to see what input field is active. 3. 4. Need to target IE browsers? 5. 6. 7. 8. CSS3 @font-face Design Guide. Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn't, your custom fonts might break the layout or come out with undesired results.
In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr. Common Mistake One common mistake that most people make when implementing custom fonts is not specifying the fallback fonts or picking the wrong fallback fonts. Web Safe Fallback Fonts When using custom fonts, it is important to include the web safe fonts as fallback. Layout Issues Because every font face has its own width, height, weight, kerning (letter-spacing), etc., some fonts are not substitutable with the web safe fonts. This might causes layout issues as shown in the image below where the fallback font extends off the boundary. Modernizr Fallback Font Styles With Modernizr (demo) Including Modernizr.
Create a Letterpress Effect with CSS Text-Shadow. The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here! Letterpress – Isn’t that a type of industrial print method? That’s right! But the effect has also made its way into web design. Check out the previous feature showcasing examples of how designers are using this cool ‘de-bossed’ look on designs across the web. With the recent support of text-transform in Safari and Firefox (3.1+) the effect can easily be created without needing to use any image replacement techniques. This means your text is much easier to edit, and has the benefit of being rendered directly in the browser. View demo Start out by creating a simple background.
<! <h1>Line25</h1> <h2>Pure CSS Letterpress Effect</h2> Set up a plain HTML document, then add a few lines of text to test the effect on. Simple! Six Useful CSS3 Tools. CSS3 continues to gain popularity as we’re seeing it used in more and more websites. However, there are still those out there that are holding out on learning it and using it. This is probably due to the fact that it’s not fully supported yet in all browsers. Nevertheless, if you’re one of those that haven’t started using CSS3 or you’re a CSS3 pro just looking to speed up your work flow, here are six CSS3 tools that you should find useful. CSS3 Button Maker The CSS3 Button Maker gives you a number of sliders and color pickers to style your own CSS3 button.
Then you can grab the code to use in your own project. CSS3 Generator Select from a list of CSS3 properties, fill in a few parameters to fit your needs, and it spits out the generated code along with a live preview. CSS3 Please! CSS3 Please! CSS3 Gradient Generator The CSS3 Gradient Generator was created as a showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. 824 shares. Useful :nth-child Recipes. By Chris Coyier On June 16, 2011 I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference).
The better you understand them, the more css nerdgasms you get to have! In these simple "recipes" (really: expressions) I'll arbitrarily use a flat list of list items and randomly chosen numbers. But it should be fairly obvious how to alter them to get similar selections. #Select Only the Fifth Element To select the first element, you can use :first-child, or I bet you can guess how to alter the above to do it as well. #Select All But The First Five If there were more than 10 elements here, it would select all of them beyond 5. #Select Only The First Five #Select Every Fourth, Starting At The First #Select Only Odd or Even #Select The Last Element Selects the 10th because we have 10 elements here, but if there was 8 it would select the 8th, or if there were 1,290 it would select the 1,290th.
#Select the Second to Last Element #Wanna play? Try the tester. 5 Features of CSS3 You Can Use Today. A few days ago, the CSS 2.1 specification finally achieved W3C recommendation status. After many years of hard work, CSS 2.1 is now so well supported that upgrading the spec to recommendation status is mostly a formality. On the same day, the CSS 3 Color Module also become a recommendation. All of this is exciting news, because it means that the web is well on its way to a future filled with glorious CSS 3. While CSS 2.1 now enjoys extremely broad interoperability, the same is not currently true for CSS 3. While the W3C and browser vendors work furiously to build our tomorrow, here are five CSS 3 features that you can start using in your sites today. Border Radii The border-radius property allows you to ostensibly curve the corners of an element. The Code To apply a border radius to an element, simply select the element in your CSS code and apply the border-radius property.
Browser Compatibility New Color Models The hsla() color model also takes four values. Box Shadows Fonts Opacity. Inuit.css—cooler than a polar bear’s toenails… 15 surefire ways to speed up your site.