Through experience as web designers we memorise all kinds of code syntax, hacks and snippets. With CSS in particular there is a number of rules and declarations that can really help transform your website designs and open up new possibilities when compared to older techniques. This post rounds up 10 declarations and tips that every web designer should have available in their CSS arsenal.
@media
@media screen and (max-width: 960px) {
}
The @media rule not only allows you to specify styling for your web page when printed. These days media queries are more associated with the creation of responsive or adaptive website designs. Create a media query using properties such as min-width to adjust your design according to the user’s viewport size.
background-size
body {
background: url(image.jpg) no-repeat;
background-size: 100%;
}
A cool and extremely useful CSS3 property that has now gained thorough browser support is background-size. At one point making a background scale to the size of its parent required some right messing around, but now just one line of code is all you need. Use this snippet to achieve the ever-popular full screen background image effect.
@font-face
@font-face {
font-family: Blackout;
src: url("assests/blackout.ttf") format("truetype");
}
One CSS3 property that has really helped transform the web over recent years is @font-face. We previously had all kinds of limitations regarding font licensing which held back this property, but now there’s bucket loads of fonts to choose from and a range of services that build upon the basic @font-face code. Use @font-face manually with freely available fonts, or via third party services such as Google Webfonts or Typekit.
margin: 0 auto;
#container {
margin: 0 auto;
}
The clever margin: 0 auto; declaration is one of the first snippets you learn when getting to grips with CSS. It’s surprising that no specific declaration for centering a block element was ever added to the CSS spec, but instead we’ve all come to rely on the auto margin workaround. Add margin: 0 auto; to centre any block element within its parent.
overflow: hidden
.container {
overflow: hidden;
}
There’s all kinds of float clearing solutions and hacks out there, but one pure and simple way to clear your floats is to simply use the overflow: hidden; declaration on the container of your floated elements. It doesn’t add a load of garbage to your stylesheet and it gets the job done in 90% of scenarios.
.clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
For those float clearing situations where overflow: hidden; doesn’t work, the best alternative is the clearfix technique. Remember you don’t have to use the clearfix class name, your could target this code to any of your HTML elements individually.
color: rgba();
.btn {
color: rgba(0,0,0,0.5);
}
PNG images used to be required for creating any kind of transparency effects in web design, but thanks to another advance in CSS transparency can now be created with the help of the RGBa color mode. Using RGBa in place of a hex value allows you to select a colour using its red, green and blue channels as well as setting an alpha level, such as 0.5 for 50% opacity.
input[type="text"]
input[type="text"] {
width: 200px;
}
The input[type="text"] selector and advanced selectors as a whole are great for taking your CSS skills from intermediate to expert. Attribute selectors in particular are extremely useful for styling elements without the need for additional classes. What about using attribute selectors to target the submit version of an input element or add an icon to external links?
transform: rotate(30deg);
.title {
transform: rotate(30deg);
}
If I’m honest I’ve yet to find a use for CSS transform properties in a real design project, but the ability to manipulate HTML elements without Javascript is so cool it makes these properties worth remembering! Combine transform properties with CSS transitions to create some fun animation effects.
a {outline: none;}
a {outline: none;}
Nothing can spoil a design more than seeing a huge dotted outline spanning across the whole page when you click a link element. The a {outline: none;} declaration will remove this, but for accessibility don’t forget to also add :focus states to your links. If you don’t mind seeing the dotted border but wish it didn’t span the whole screen, just add a {overflow: auto; } to your stylesheet instead.
