The following properties are directly tied to UX Design but on the frontend. Addressing the following properties from the beginning of any build can go a long way.
Let's check them out.
The
cursor CSS property defines the style of the pointer, and it looks like this:
cursor: pointer;
The cursor property is meant to work only in the hover state; this property is not meant to replace the styling of the pointer in its normal state.
All operating system have many types of cursors for all types of behaviors, so whenever we need a certain action a cursor for it may already exist.
We can also use custom cursors. Keep in mind the following notes:
- It's recommended that the image of the cursor is 32 x 32 pixels.
- It's required to declare a built-in cursor to act as a fallback in case the custom image(s) doesn't load.
- Legacy versions of IE require an absolute path to the image of the custom cursor.
- We can use
.curor.pngfiles for custom cursors. However, legacy IEs only support the.curextension.
The cursor CSS property can accept one or multiple values in the same declaration.
This property supports the following values: a URL, X and Y coordinates, and 32 keyword values.
The URL is used for custom cursors. It's the path to the image. Several URLs can be defined in the same declaration. Thus, several custom cursors can be used. If declaring more than one URL, the values are comma-separated.
It's mandatory that after the declaration of the URL, a native non-URL value should be declared. This is so if everything else fails, the user can still use the pointer. This value is optional.
The X and Y coordinates are used to align the custom cursor with the right hotspot. These coordinates are just two numbers without a unit and separated only by a space.
Negative numbers are not allowed and the values range from 0 to 32.
The keyword values use the operating system or browser native cursors. There's practically a cursor for any pointer action.
Here's a list of the 32 keyword values:
aliasall-scrollautocellcol-resizecontext-menucopycrosshairdefaulte-resizeew-resizehelpmoven-resizene-resizenesw-resizeno-dropnonenot-allowedns-resizenw-resizenwse-resizepointerprogressrow-resizes-resizese-resizesw-resizetextvertical-textw-resizewait
Some of the most commonly used values are
default, move, pointer, and
text:
default: This sets the default pointer. This is the arrow pointer we all know.move: This sets the move pointer. It looks like a large plus sign with arrows on all four ends.pointer: This sets the pointer to the "hand" icon.text: This sets the text pointer. It usually looks like a serif capital "I" but taller.
See all cursors in action here: http://tiny.cc/cursor
CSS:
/*Custom cursor with absolute path and coordinates*/
.element { cursor: url(/images/cursor.cur) 10 10, default; }
/*Multiple custom cursors with coordinates*/
.element { cursor: url(/images/cursor-1.png) 5 5, url(/images/cursor-2.png) 0 0, default; }
/*Assign a pointer on the <button> and <select> elements*/
button,
select { cursor: pointer; }The
pointer-events CSS property controls when an element in the document can become a target of mouse/touch events, and it looks like this:
pointer-events: none;
One particularity of pointer-events is as shown in the following example: say we have two containers where they considerably overlap. If we apply pointer-events: none; to the element on top, the clicking/tapping goes through that element and targets the content in the bottom one. Basically, we can select the content on the bottom element even if we're clicking/tapping on the element on top.
This property supports ten keyword values. However, only two are related to HTML; all the rest are part of the SVG specification, which is out of the scope of this guide.
Those HTML-related values are none and auto.
No mouse/touch events will act on the element. However, if the element has descendants with pointer-events set to a different value, those descendent elements will trigger mouse events.
This is the default value. This acts as if no pointer-events were declared.
More info on MDN can be found here: http://tiny.cc/mdn-pointer-events
CSS:
/*Clicking/tapping on the element won't work*/
.element { pointer-events: none; }
/*Restore the default clicking/tapping behavior to the element*/
.element { pointer-events: auto; }The
outline CSS property creates a border around an element to provide a visual cue that it's active or has gained focus.
This property is the shorthand for the outline-color, outline-width and outline-style properties. For convenience, it's recommended to always use this shorthand rather than separate properties when declaring outline.
The difference between outline and border is that outline doesn't take up space; it's created on top of the content, so the layout is never affected by it.
However, declaring the outline values is exactly the same as declaring the border values.
The outline CSS property supports three values represented in longhand properties: the color, the width, and the style. All three values are required and can appear in any order in the declaration.
color: This is mapped to theoutline-colorproperty. It's the color of the outline. It supports all color modes:HEX,RGB,RGBa,HSL,HSLs, and color name.width: This is mapped to theoutline-widthproperty. It's the thickness of the outline. It supports any length value, such aspx,em,in,mm,cm,vw, and so on. Percentage values are not valid.style: This is mapped to theoutline-styleproperty. It's the type of line to be used. It takes the same values as border:dashed,dotted,double,groove,hidden,inset,none,outset,ridge, andsolid.
CSS:
.element {
outline: dotted 2px rgba(0, 0, 0, .5);
}