Inspiration

These are working examples of widgets and applications that you can include in your site.  They are designed to spur your imagination!

Subtle (or not so) Background Animation

Subtle (or not so) Background Animation

Recently my computer updated and while the updates were running a message appeared on the screen with a blue background.  The background kind of pulsed from light to dark blue and looked really neat.  It got me thinking how to make something similar for a website.

As an experiment, I have two demos.  The first is for the body tag and affects the entire background and fades smoothly between six different colors.  Here is the CSS that sets the colors:

@-webkit-keyframes rainbow {
  0% { background: #FFABAB; }
  20% { background: #FFDAAB; }
  40% { background: #DDFFAB; }
  60% { background: #ABE4FF; }
  80% { background: #D9ABFF; }
  100% { background: #FFABAB; }
}
@keyframes rainbow {
  0% { background: #FFABAB; }
  20% { background: #FFDAAB; }
  40% { background: #DDFFAB; }
  60% { background: #ABE4FF; }
  80% { background: #D9ABFF; }
  100% { background: #FFABAB; }
}

The effect is achieved by using @keyframes. In short, keyframes are a way to specify CSS styles which the browser will scroll through, doing each change in order with blending from one change to the other. I used percentages here to specify when the change will happen – so each color lasts 20% of the total animation running time.

Now we have to tell the browser which element to apply this animation to. See the “rainbow” right after @-webkit-keyframes (and @keyframes)? That is the name for this animation. We will use it to assign it to the body tag:

body {
  -webkit-animation: rainbow 15s infinite ;
}

Here we tell the browser to use the “rainbow” animation, make the whole animation last 15 seconds and keep looping around.

The image animation is done similarly.

@-webkit-keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}
@keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}

Notice that I called this animation “images”. Here is where I assign it to div with a class of “imagechanger”.

div.imagechanger{
	background-image: url(Colored_Pen_Background.JPG);
	height: 400px;
	width: 500px;
	background-size: contain;
	background-repeat: no-repeat;
 	-webkit-animation: images 15s infinite;
  	margin: auto;
	color: white;
}

In my demo the pictures are not the same size, which is why the height keeps changing. In real use as a background you would want the images sized appropriately and probably use “cover” instead of “contain” to make sure it spreads to fill the element. I also set a starting background-image so that there is an image already there when the page loads.

There is one more fix that needs doing when using images; you need to preload the images or the first time they appear there is a pause, the animation jumps, and it looks awkward. So I just add the images in a hidden div:

<div id="preload">
   <img src="Colored_Pen_Background.JPG" width="1" height="1" alt="Image 01" />
   <img src="IMG0.JPG" width="1" height="1" alt="Image 02" />
   <img src="IMG5.jpg" width="1" height="1" alt="Image 03" />
   <img src="IMG8.JPG" width="1" height="1" alt="Image 03" />
   <img src="IMG9.JPG" width="1" height="1" alt="Image 03" />
   <img src="IMG1.jpg" width="1" height="1" alt="Image 03" />
</div>
div#preload { display: none; }

If you look at Demo 2, you can see the images as a whole page background. Again, the images are not sized correctly, but you get the idea. I used some different animations settings, which you can find at W3Schools. Here is the code:

@-webkit-keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}
@keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}

body{
	/*background-image: url(Colored_Pen_Background.JPG);*/
	background-size: cover;
	background-repeat: no-repeat;
 	-webkit-animation: images 30s infinite alternate;
	animation-timing-function: ease-in;
}

.imagechanger {
	width: 80%;
	margin: auto;
	min-height: 400px;
	background-color: #FCF7F7;
	border-radius: 25px;
	padding: 20px;
}
div#preload { display: none; }
Clip-Path Polygons Explained

Clip-Path Polygons Explained

After a long weekend off-grid, camping in the Cascades, I’m back in the office playing with CSS and clip-path polygons.  I started out following the article/tutorial by Drew Minns, along with the CodePen.  As I was wanting to just learn how clip-path polygons are constructed I made minor changes to the original, which you can see here.

Clip Path in Navigation

I also like the idea of using clip-paths applies to images as thumbnails or even navigation:

Clip-Path Navigation 2

(I used CSS blending mode markup for the hover effect on the first image).  The beauty of using clip-path is that the images can be easily changed out without needing manual editing.  They could even be dynamic.

What is Clip-Path?

The clip-path property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area. ~ CSS-Tricks 

In the example above the clip-path polygon makes the triangular indents about the navigation item when hovered over.  In the next image the clip-path polygon is applied to trim parts of an image to create a comic-style text bubble.

Clip-Path used as bubble.

How Do I Create a Clip-Path Polygon?

The clip path is a series of coordinate pairs, each pair separated by commas.  It took me awhile to get my head around it, and this is how I envision it.

Coordinates are grouped as X Y pairs where X is horizontal axis and Y the vertical axis.

ex1

Starting at the upper right corner, the coordinates would be X0 Y0 or 0 0.  The distance away from the start point increased up to 100%.  The bottom right corner’s coordinate is X100% Y100% or 100% 100%.

ex2

If I were going to create a square box my clip-path would look like this: clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%).  Or, in visual terms:

Clip Path Example

Note that the end of a line is also the beginning of the new line – this is automatic so you don’t have to repeat it.  The object you are drawing always wants to be closed, so the last coordinate you give it will create a line to the very first coordinate of the path.

Clip-Path Returns to Start

Where it gets fun is when you are creating shapes.  For example, here is the clip-path for the x shape hover in the first picture of this article:

clip-path: polygon(50% 20%, 70% 0, 100% 0,100% 20%,80% 50%,100% 80%, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0 100%, 0 80%,20% 50%,0 20%, 0 0, 30% 0);

If you take some time you can see that it comes out like this in words:

  • Start at the point defined by X50% Y20% and go to X70% Y0
  • From there go to X100% Y0
  • From there go to X100% Y20%
  • and so on…

What Other Clip-Paths are there?

Besides polygon you can define a circle, ellipse and inset rectangle using clip-path.  See clip-path on WPD for more information.

What Browsers Support Clip-Path?

For webkit browsers you’ll need to use a prefix.  This is the CSS markup I generally use:

-webkit-clip-path: polygon(…);
clip-path: polygon(…);

Browser support also depends on the shape.  Polygons are supported by all current browsers except IE (of course).  The circle clip-path is only supported in Chrome, Opera and Safari.  See here for more information.  Fortunately it deprecates well for IE – the image will just be shown as a regular box.

Blending Modes for Easy to Edit Images

Combining images and text used to be the domain of the graphic designer.  Say you wanted an graphic where the image interacted with the text like this:

Using Difference Mode

You would need to send it to the designer to be created.  If you wanted to change the text, back to the designer.

Now in Chrome 41+, FireFox 36+, Safari 8+, and Chrome for Android you can use mix-blend-mode to create these images on the fly.  You can see a live demo here of all of the images on this page that were combined solely with CSS.  Here is the HTML for the above image:


&lt;div id="water1"&gt;&lt;p&gt;Splashing&lt;/p&gt;&lt;/div&gt;

and here is the CSS:


#water1{
background:url(berry.png) no-repeat center bottom;
width: 417px;
height: 279px;
margin:auto;
}
#water1 p{
mix-blend-mode: difference;
font-size: 72px;
color: #fff;
padding: 50px 0 0 40px;
}

How could this be used?  You could make a WordPress template where the post title floats over, and becomes part of the featured image.

soft light mode

Or how about adding some javascript that changed the text, but not the image?

exclusion mode

You can see the demo here.  If you are interested in something like this for your site, Diane@beyond-paper.com.

Photo Quote Box

Photo Quote Box

Browsing through Bootsnipp I found this code by msurguy for making cards for team members or employees for a website.

2015-04-07_11-09-48

This layout would be perfect for a quote box where you have an image of a person:

2015-04-07_11-07-17

Imagine using something like this as a callout of points in a larger article, floating the quote box to the left or right, or even in the middle with the text flowing around it.  You can see the demo here.

2015-04-07_11-17-55

Interested in using this on your site?  Contact me for more information.

Weather Widget

Click on image to view demo

Click on image to view demo

Displaying the weather on your site is almost required if you are in the hospitality or recreation business.  Get your customers outside (or inside) with your current weather conditions straight from NOAA!  This widget is different from others because you can choose the data to show and format it however you like!  You can even use custom images for the different weather conditions!

Need Checkboxes? Use Toggles!

Click image to view demo

Click image to view demo

When using checkboxes for Yes/No, On/Off or other two-option items use a toggle instead.  It adds a nice look to the page and it somewhat easier to use that small checkboxes.  I like them because they are easier to scan and read – the positives stick out.

Sidebar Slider

sidebar

Click image to view demo

This is a simple slider that comes onto the page from the left or right, sliding out like a box.  Very effective for newsletter or contact forms.

Responsive ECommerce Grid

ecommgrid

Click on image to view demo


This awesome method of displaying ecommerce items comes from CoDrops, but I changed it up a bit.  The front and back of the item can be displayed as well as more information.  Try changing the size and color. The favorite button also works.  This would be an awesome way to display your goods! Additionally, resize your browser and see what happens!

News Tickers – Not Just for News

Click to view demo

Click to view demo

A news ticker can be used for any kind of attention-grabbing headlines.  Just in a few moments these are uses I came up with (remember, headlines in the ticker are clickable!):

  • Ecommerce site – Displaying new or sale item.
  • Blog – Display newest posts
  • Events – Display upcoming events
  • Fundraising – Display current status and ways to donate
  • Restaurant – Display today’s specials
  • Recreation – Display current weather conditions

Tickers can also display data from other sites – if there is an RSS feed, it can be included in a ticker easily.