Can "Slopy" CSS3 Make Your Site Look Good?

Angled Shapes and Diagonal Lines

To create this effect, "even" elements were rotated -5 degrees and "odd" elements were rotated 5 degrees, and a negative top margin was added to get the odd elements in the right position:

.se-slope{
	margin: 0 -50px;
	transform-origin: left center;
}
.se-slope:nth-child(odd){
	background: #000;
	transform: rotate(5deg);
	margin-top: -200px;
	box-shadow: 0px -1px 3px rgba(0,0,0,0.4);
}
.se-slope:nth-child(even){
	background: #e90089;
	transform: rotate(-5deg);
	box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;
}

Stacked Menu with Size and Background Mouseover Changes

For this Stacked Menu feature, Mary Lou defined the style for the:

• list item
• link element
• single elements
• content elements wrapper

Mary Lou created the linear transition for the content elements and then set the font size and color change for the list elements on hover:

.ca-menu li:hover{
    border-color: #fff004;
    background: #000;
}
.ca-menu li:hover .ca-icon{
    color: #fff004;
    text-shadow: 0px 0px 1px #fff004;
    font-size: 50px;
}
.ca-menu li:hover .ca-main{
    color: #fff004;
    font-size: 14px;
}
.ca-menu li:hover .ca-sub{
    color: #fff;
    font-size: 30px;
}

CSS3 Lightbox

 
For this CSS3 Lightbox design, Mary Lou used an unordered list with each item containing a thumbnail and an overlay dvision for the larger image.  She made the title for each thumbnail invisible and added an opactiy transition on hover, using a radial gradient as the background:

.lb-album li > a span{
	position: absolute;
	width: 150px;
	height: 150px;
	top: 10px;
	left: 10px;
	text-align: center;
	line-height: 150px;
	color: rgba(27,54,81,0.8);
	text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
	font-size: 24px;
	opacity: 0;
	background:
		radial-gradient(
			center,
			ellipse cover,
			rgba(255,255,255,0.56) 0%,
			rgba(241,210,194,1) 100%
		);
	transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
	opacity: 1;
}

Be sure to visit Codrops as Mary Lou has a plethora of great ideas for CSS3 design as well as more detail on each of these projects.