Tag Archives: HTML

Google +1 Button Script

If this is the first you’ve heard of this new Google +1 (Plus One) Button, checkout the official page. First, add this in between your <head> tags: <script src="https://apis.google.com/js/platform.js" async defer></script> Second, add this just below the <body> tag: <div style="position:fixed;bottom:0;left:50px;z-index:1"><g:plusone size="tall"></g:plusone></div> This will fix the Google +1 Button bottom-left on your pages. It will […]

Super Basic HTML Guide

I tend to forget the beginners with my writing. So I’m going to take it way back momentarily to the basics. How to Create a Text Link Code <a href="http://website.com/">Check This Site Out</a> Demo Check This Site Out How to Display an Image Code <img src="http://website.com/images/kittens.jpg" alt="Kittens" /> Demo How to Create an Image Link […]

How to Create Circles with CSS

Last Updated: April 6th, 2018 Making circles with CSS is very simple. Just make the radius half of the width and height of the element to make a perfect circle, or simply use: border-radius:50% Responsive Circle With or Without Text Inside Narrow your browser window horizontally to test the circle’s responsiveness. Hello CSS .circle{width:50%;height:0;font-size:20px;color:#fff;text-align:center;line-height:0;padding:25% 0;border-radius:50%;background:#09f} […]

Pure CSS Minimalist Image Hover Rollover

Demo: (only use one of the CSS methods below) CSS Sprites (New Method) .hov{display:block;width:245px;height:195px;background:url(images/hover.png)} .hov:hover{background-position:0 -195px} For this to work, simply stack the normal state image on top of your hover image making one image. They should be exactly the same size and stacked perfectly on top of each other. So, in this example the […]