Inspiration

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

Responsive Newspaper-Style Columns are Easy with CSS

Newspaper or magazine-style columns are a good way to break up large blocks of text, especially if images are included.  With CSS, responsive columns are really easy to achieve.

The following demo shows two blocks of columns, one with a title that spans all of the columns, and one with an image.  Here is the CSS I used (this was done pretty on the fly and some of the code could be condensed a little better in a production environment).

article{ 
	width: 100%;
	height: auto;
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 5%; /* Chrome, Safari, Opera */
    -moz-column-gap: 5%; /* Firefox */
    column-gap: 5%px;

    -webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px outset #ccc; /* Firefox */
    column-rule: 1px outset #ccc;	
	margin: 0 auto;
	text-align:justify;
}
figure{
    column-span: none;
    -webkit-column-span: none;
    -moz-column-span: none;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	text-align:center;
}
img.aa{
	height: 150px;
	width: auto;
}

article h1{
	column-span: all;
    -webkit-column-span: all;
    -moz-column-spam: all;
	margin: 0;
}


.newspaper
{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
	text-align:justify;
}

.newspaper h1, .newspaper img.aa {
    column-span: all;
    -webkit-column-span: all;
    -moz-column-span: all;
}
.newspaper p {
    -webkit-margin-before: 0;
}
@media only screen and (max-width: 840px) {
	.newspaper {
		-moz-column-count:2; /* Firefox */
		-webkit-column-count:2; /* Safari and Chrome */
		column-count:2;
	}
	article{ 
		width: 100%;
		height: auto;
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
	
		-webkit-column-gap: 5%; /* Chrome, Safari, Opera */
		-moz-column-gap: 5%; /* Firefox */
		column-gap: 5%;
	
		-webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */
		-moz-column-rule: 1px outset #ccc; /* Firefox */
		column-rule: 1px outset #ccc;	
		margin: 0 auto;
		text-align:justify;
	}
	
}
@media only screen and (max-width: 700px) {
	.newspaper {
		-moz-column-count:1; /* Firefox */
		-webkit-column-count:1; /* Safari and Chrome */
		column-count:1;
	}
	article{ 
		width: 100%;
		height: auto;
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
	
		-webkit-column-gap: 5%; /* Chrome, Safari, Opera */
		-moz-column-gap: 5%; /* Firefox */
		column-gap: 5%;
	
		-webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */
		-moz-column-rule: 1px outset #ccc; /* Firefox */
		column-rule: 1px outset #ccc;	
		margin: 0 auto;
		text-align:justify;
	}
	
}

If you want to play with the original and see how it reacts to browser widths just click here.

Use Tooltips to Add Context

Tooltips are boxes that pop up when a user hovers (or clicks) on a link.  They can be used to add context to an external link – for example to advise that the link leads off-site or will play a video or sound.

They are also useful as a substitute for footnotes in longer articles.  Use them to cite a source in a less obtrusive way, or add a comment to a word or phrase.  The following demo shows a lightweight tooltip plugin that is easy to use and reader-friendly.  I especially like them in article where a lot of acronyms or foreign words are found – it is easy to hover over the link to display the expanded meaning of the word.

Updating Inspiration Posts Plus New Additions

Updating Inspiration Posts Plus New Additions

Recently I’ve been going over beyond-paper.com, making sure links are working and tutorials are current.  After several server moves, a switch to https and time, I found quite a few of my Inspiration posts were out of date.

Inspiration posts are neat little ideas for websites, each with a working demo, so it is important to get them up to date.  A few were impossible because some information providers (Facebook and Twitter, I’m looking at you) have removed or substantially changed how data is shared.  I noted on the post if the demo is not working.  For the posts where the demos are working, I embedded the demos in iframes so that you can interact with the demo right on the page.

In going through the demos, I have about 50 that I have never even posted about!  I’m going to go through them one-by-one and get  them all posted over the next 3 months.

Have an inspiration you want me to take a look at?  Contact me at diane@beyond-paper.com.

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?

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.  

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

Weather Widget

weather widget

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!

Updated: Demo is currently not working. I have it on my list of things to fix!

Need Checkboxes? Use Toggles!

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.