My UX Snippet Library Experience Learning Too
First published by Pat Godfrey: September 2018 (PROTOTYPE - in testing)
…

<a>
- This is the basic anchor link.
- HTML
-
<a href=“url” target=“_blank” tabindex=“0”>Link copy text</a>
- CSS
-
/*CSS - You can combine these pseudo classes using a comma e.g. a:hover, a:focus {styles}*/ a:link {styles} a:visited {styles} a:hover {styles} a:focus {styles} a:active {styles}
- Java Script
-
No script required.

<button id=“id” class=“class”>Button copy text</button>
- This is the basic anchor link that opens a linked page a new window or browser tab.
- HTML
-
<--How I style my PRE tag content (.counter)--> <dl> <dt>Item</dt> <dd>Description or definitionm</dd> </dl>
- CSS
- Java Script
-
/*jQeury*/ $(".button").click(function)({ $(".button").css("background","blue"); });

<img>
- The basic image tag is used to display images. Images are addressed by their URL within the SRC attribute. Images can be made responsive using CSS. Use the
picture
element to swap in different resoutions or image versions in responsive applications. - HTML
-
<img class=“classname” alt=“alternative description for sight-impaired users” src=“url” height=“100” width=“100”> <!-- use longdesc=“url” and a long-description file when the alt attribute may become too long. Consider a title tag to explain the longdesc is available -->
- CSS
-
/*CSS*/ /*Style your button by class*/ .img { display:block; padding:0.5em; border:1px solid:grey; }
- Java Script
-
/*jQeury*/ $(".image").click(function)({ $(".image").css("borderColor","blue"); });
Sponsored Ads
Ads collated by Google Ad Sense. Click away..!