This post is really just an off spring from effects I have seen while I was looking at WordPress themes for my site. Lets say curiosity got the better of me and more than likely other posts like this will appear. Quotes for today’s post come from Albert Einstein.

Drop cap

Using 2 CSS3 selectors first-child and first-letter we can create a nice looking effect to kick off a sentence or if needed a header.

Example:

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

Code:

p:first-child:first-letter
{
color:#f1001c;font-size:100px;
line-height:80px;margin-right:5px;
}
You could take it a step further and add in a complementing background colour.

Button rollovers

With a nice little gradient and a transition we can spice up buttons quite easily..

Example:

Code:

.button
{
background:linear-gradient(#2876b2,#549ad0);
background-size:100% 200%;
transition:background-position .5s linear;
}
.button:hover,.button:focus
{
background-position:0 -102%;
}

Fancy centered heading

Fancy making your H1 headers stand out from the crowd? Why not throw a little creativity?

Example:

Fancy centered heading

Code:

#fch h3
{
background:linear-gradient(#f1001c 0%, #f1001c 45%,#fff 46%,#fff 54%,#f1001c 54%,#f1001c 100%);
text-align:center;color:white;
}
#fch h3 span
{
background:#f1001c;
padding: 0 20px;
}

Stacked Page Effects

Example:

Weakness of attitude becomes weakness of character….

Code:


.bg{background:#e7ebea}
.papers{border:#ccc solid 1px;background-color:#fff;
box-shadow:4px 4px #fff,5px 5px 0 #ccc,9px 9px 0 #fff, 10px 10px 0 #ccc,14px 14px 0 #fff;
}

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Simon Philp

Subscribe now to keep reading and get access to the full archive.

Continue reading