COBOLdinosaur

The key to making it work is the event listener that get added using the DOM method that binds it to the mousemove event and declares the event handler. Most event can be bound to a handler this way.

0 928 posted 9 years ago by COBOLdinosaur

CSS Transition Effect for Gradients on Hover

A simple transition from a linear gradient to a radial gradient can be made very dramatic by including a color change transition. One of 10 effects presented.

css
html

0 988 posted 9 years ago by COBOLdinosaur

CSS Rotating HTML Elements With CSS

The base rotation can be in three different planes; though as we will see later combinations can make it look like we rotate through many perceived planes. In the examples below instead of rotate we specify the plane by using rotateZ (The default we...

css
html

0 1109 posted 9 years ago by COBOLdinosaur

CSS Corrugated Background using Gradient

A simple effect using simple CSS. This is part of a collection of gradient effects

0 991 posted 10 years ago by COBOLdinosaur

CSS Select Using Styled Optgroup Tags

Having a handle for groups of options allows script driven dynamic effects to manage changes of presentation with in the select without having to refresh or use other inefficient methods of updating the display.

html5

0 948 posted 10 years ago by COBOLdinosaur

PHP HEREDOC to Simplify Code Generation

Doing the echo with multiple concatenated bits of strings was very error prone and I was always getting parsing errors. The toggle format where you flip PHP on and off throughout the HTML is less error prone but is a real pain in the ass if you have...

page
php

0 808 posted 11 years ago by COBOLdinosaur

CSS Drop down menu with fade in no scripting

The first thing you might notice is that I am not using nested lists to layout the menu. That is an old XHTML layout technique. I am using the more semantically correct HTML5 <nav> tag. Menus are not lists, they are navigation so using the more moder...

css
html5

0 1124 posted 11 years ago by COBOLdinosaur

CSS 6 even spaced elements across the page using calc() for sizing

The CSS calc() function can be used anywhere a length, frequency, angle, time, number, or integer is required. It can be used to apply values for width/height; font-size; margins; padding; borders; shadows; border radius; text-indent;top/right/bottom...

css
design

0 871 posted 11 years ago by COBOLdinosaur

CSS Curtain Effect Using Multiple Background Images

Each image is positioned, dimensioned, and repeated according to the comma separated values in the other background properties. The images in the list are layered front to back in the same order they are listed in the rule declaration. If a backgroun...

0 1024 posted 11 years ago by COBOLdinosaur

HTML Alternating column colors in HTML tables

The colgroup and col structure is like a directive that specifies table formatting outside of the normal flow. Notice that the col tags do not get closed in HTML5, and the cascade is irregular. Normally the cascade applies to children, but the rows a...

css
html

0 853 posted 11 years ago by COBOLdinosaur

HTML Captions For Lists and Images

One of the limits of using lists (ordered and unordered) is that they have no provision for a heading. You can do something like: <ul>This is a Title<li> etc... but it is invalid because the list containers can only contain List Items. One way common...

0 854 posted 11 years ago by COBOLdinosaur

JavaScript Animating Shapes

Changes shape back and forth from a round element to a square element.

css
html

0 713 posted 11 years ago by COBOLdinosaur

JavaScript Dynamic Table Generator

The use of dynamic data acquisition on modern web sites and in a lot of intranet applications, sometimes means we have to build structures dynamically as data comes in from a feed or AJAX operations. The problem is not with the data, but rather that...

0 770 posted 11 years ago by COBOLdinosaur

HTML Captions for images

The nice part about it is that the caption is locked to the image. The figure can be positioned and styled and the caption can be rendered with any affect that can be applied to any other text element.

images
list

0 806 posted 11 years ago by COBOLdinosaur

JavaScript Round Slide Show With an Iris

Simle markup, simple CSS combined with ver straight forward javascript to produce some really cool effects.

image

0 774 posted 11 years ago by COBOLdinosaur

CSS Styling select options

In modern browsers select options can now be style using most css properties. Of course, IE is still behind but it does support some styling as well. There are a lot more options on the site.