Essential CSS tricks
This list is meant as a reminder for veteran developers, and a basic how to for the uninitiated. These are a few handy tricks to have stored in your arsenal for spicing up any website with CSS.
Transitions
For hover effects, it can be useful to have the hover effect take time to come into effect. This allows for a smoother and softer feel for websites.
.entry h2:hover{
color:#f00;
transition: all 0.3s ease;
}Link States
Using link states to change the properties of links on a website is a feature that often gets overlooked. Use link states to get the finishing touches of branding and colors on websites.
a:link { color: blue; }
a:visited { color: purple; }Link States
Using link states to change the properties of links on a website is a feature that often gets overlooked. Use link states to get the finishing touches of branding and colors on websites.
a:link { color: blue; }
a:visited { color: purple; }Scaling Images
If a WordPress theme doesn’t come with a scaling feature for images (or you’re working in html), then this CSS can cover image scaling.
img {
max-width:100%;
height:auto;
}Nth Child
When you want to apply code to a specific element that is a child of another element, this trick is for you. Count how many children down it is, then plug that number in.
li:nth-child(2) {
font-weight:800;
color: blue;
text-style:underline;
}Drop caps
If you’ve ever thought to yourself that you wanted a website to look like one of those fancy books with the large first letter, then do I have news for you. Using the first-letter, you can set custom color, font, font-size and whatever else you want to the first letter in the <p>
p:first-letter{
display:block;
float:left;
margin:3px;
color:#f00;
font-size:300%;
}Text caps/lowercase/capitalize
On the subject of letter capitalization, there are easy ways to have all caps, all lowercase, and capitalizing the first letter of each word.
h2{
text-transform:uppercase;
}
h2{
text-transform:lowercase;
}
h2{
text-transform:capitalize;
}