Component Library 1
By Mark Foyster
Plain CSS Components
A collection of simple components that utilise only CSS. Many (probably all) of these will utilise CSS3 or beyond. Therefore please consider browser support. Find the code on my GitHub repository HERE
To add one of these components to your project, scroll through justcss.css in the justcss folder of the repository. Each section is divided by comments. Locate the section you require and copy/paste that section into your project css file.
If you wish to use several components, you could install the files on your server and add the stylesheet to your webpage by adding the following html to your <head> like so:
<link rel="stylesheet" href="justcss/justcss.css">
More specific implementation for each component is explained below:
Contents
[BADGE] [TOOL TIP] [IMAGE SPINNER]
Simple Badge
These badges are handy for focusing attention to something on the page.
BADGE NEW SPECIAL OFFER To Implement:Add the CSS to your project as exlained earlier
Now simply add the badge class to the element you wish to use like this:
<div class="badge">MY TEXT</div>
Tooltips on mouse hover
Hover over this BADGEHere's the tooltip to see the tooltip. Or hover over this Here's another tooltip BADGE to see a different tooltip. See how the same code works for multiple instances.
You will notice ther position of the tooltip depends on implementation.
To Implement:Add the CSS to your project as exlained earlier
You have two options, let's add this component to a badge component to implement a tooltip. The easiest way is to add the `toolTipContainer` class to the badge element and then put our tooltip inside it like so:
<p>Testing a <span class="badge toolTipContainer">BADGE<span class="toolTipText">My tooltip</span></span> with hover.</p>
As you can see, the tooltip text is simply put within the `<span>` of class `toolTipText`. The tooltip will be displayed where we put it offset by the margin properties in our CSS. If a separate contatiner is used to encapsulate the badge and *toolTipText* containers like so:
<span class="toolTipContainer">
<span class="toolTipText">Here's another tooltip</span>
<span class="badge">BADGE</span>
</span>
The tooltip text will be display in the exact position of the *badge* element offset by the margins. Therefore, this method is more predictable. To change the location of the tooltip, regardless of implementation method, simply alter the margins within the `.toolTipContainer .toolTipText ` selector of the CSS. You can play with the colours, borders etc here too!
Simple Image Spinner
A simple way using just CSS to cycle between different images like so:
To Implement:
Add the CSS to your project as exlained earlier then change the images to those of your choice here:
@keyframes imageSpin
{
0%, 100% {background-image: url("../images/html.png");}
33% {background-image: url("../images/css.png");}
66% {background-image: url("../images/JavaScript.png");}
}
You can see we are set up for 3 images at present but you can add or deduct from that by changing the percentage ratio to divide the timeline equally. For stable results, the images need to be the same size.
Next the size of the images and total duration of the cycle needs to be set in the `immageSpinnerContainer` selector CSS like so:
#imageSpinnerContainer
{
width: 64px; /*Set to your image width*/
height: 64px; /*Set to your image Height*/
animation-name: imageSpin;
animation-duration: 9s; /*Set duration of ENTIRE cycle */
animation-timing-function: ease;
animation-iteration-count: infinite;
display: inline-block;
}
The comments will guide you where to make the changes. Remember the duration is the entire cycle so each image will be displayed by that number divided by the total number of images, eg, 3 seconds each here... Allow a bit of extra time for the transition for best clarity.