Random CSS properties


Here are a few CSS features that you won't use as much, but are fun to know about.

:hover

:hover is a psuedo-class that lets you define a different set of properties for when your mouse hovers over an element. It works like this?

What did one lawyer say to the other lawyer? <span class="answer">We are both lawyers</span>.
.answer{
  color: black;
  background-color: black;
}

.answer:hover{
  color: white;
}

What did one lawyer say to the other lawyer? We are both lawyers


cursor

cursor lets you change what your mouse looks like when you hover over an element. It works like this:

<ul>
  <li style="cursor: crosshair">crosshair</li>
  <li style="cursor: grab">grab</li>
  <li style="cursor: help">help</li>
  <li style="cursor: not-allowed">not-allowed</li>
  <li style="cursor: s-resize">s-resize</li>
</ul>
  • crosshair
  • wait
  • help
  • not-allowed
  • s-resize

float

float pulls elements over to the right or left:

<span style="float: right">5 points</span>
<b>Challenge #5</b>

5 pointsChallenge #5

float is commonly used to make complex CSS layouts, but it's usually easier to do this with flexbox.


animation

animation lets you change CSS properties over time:

@keyframes example {
    from {background-color: white; width: 200px; height: 100px;}
    to {background-color: red; width: 400px; height: 200px;}
}

#animate-me {
    background-color: white;
    width: 200px;
    height: 100px;
    border: 1px solid black;
}

#animate-me:hover{
    animation-name: example;
    animation-duration: 4s;
}
<div id="animate-me">Heat me up with your mouse</div>
Heat me up with your mouse

CSS animations can get pretty crazy. Here's a CSS3 Animation Guide.


background-image

Just like background-color, but with an image.

I'll use an image from subtle patterns: https://res.cloudinary.com/genco/image/upload/v1469719540/cheap_diagonal_fabric_l8wlyr.png

#title{
  background-image: url(https://res.cloudinary.com/genco/image/upload/v1469719540/cheap_diagonal_fabric_l8wlyr.png);
  padding: 50px;
  font-weight: 100;
  font-size: 50pt;
}
<h1 id="title">Poems</h1>

Poems


  • filter, background-image, background gradient;

Resources


Challenge

Make a surprising page that uses at least two CSS features from this page.


Solutions

Try this challenge on your own first, then come back here to see other people's solutions.

Try this challenge on your own first, then come back here to see other people's solutions.