Pens from Angela Giese https://codepen.io/angelagiese/ en nospam@codepen.io Copyright 2024 2021-11-02T00:18:39-07:00 CSS Art Deco Border https://codepen.io/angelagiese/pen/mdMBYaM https://codepen.io/angelagiese/pen/mdMBYaM Angela Giese

See the Code - See it Full Page - See Details

An Art Deco style border without using any images. This example is very simple and focuses on the border design.

]]>
CSS Art Deco Border 2021-11-02T00:18:39-07:00
Different underlined link styles https://codepen.io/angelagiese/pen/qBXdBRL https://codepen.io/angelagiese/pen/qBXdBRL Angela Giese

See the Code - See it Full Page - See Details

Playing with the different underline styles that modern browsers now support. This is simply playing with text-decoration options.

]]>
Different underlined link styles 2021-10-13T19:00:42-07:00
Link style with overlapping underline in CSS https://codepen.io/angelagiese/pen/VwaEKMZ https://codepen.io/angelagiese/pen/VwaEKMZ Angela Giese

See the Code - See it Full Page - See Details

A simple Pen to show off one type of link styling where there's a bottom border, similar to an underline, with a nice transition on hover/focus/active states. It's a fun modern style which is easy to accomplish and provides your pages with a little extra fun detail to help you stand out.

]]>
Link style with overlapping underline in CSS 2021-02-26T17:55:29-07:00
Responsive & Accessible Comparison Table https://codepen.io/angelagiese/pen/yLBmBJR https://codepen.io/angelagiese/pen/yLBmBJR Angela Giese

See the Code - See it Full Page - See Details

]]>
Responsive & Accessible Comparison Table 2020-02-05T18:41:33-07:00
MWF Paragraphs & Headings - Angela G's Research https://codepen.io/angelagiese/pen/wLXXWZ https://codepen.io/angelagiese/pen/wLXXWZ Angela Giese

See the Code - See it Full Page - See Details

This demo of the Microsoft Web Framework "Paragraphs" and "Headings" was put together from my personal research with my own notes. This is not an official account nor documentation by any means. I'm making it available for anyone else with a casual interest in the MWF Framework.

]]>
MWF Paragraphs & Headings - Angela G's Research 2019-07-10T17:16:43-07:00
MWF Badges - Angela G's Research https://codepen.io/angelagiese/pen/YovewL https://codepen.io/angelagiese/pen/YovewL Angela Giese

See the Code - See it Full Page - See Details

This demo of the Microsoft Web Framework "Badges" component was put together from my personal research with my own notes. This is not an official account nor documentation by any means. I'm making it available for anyone else with a casual interest in the MWF Framework.

]]>
MWF Badges - Angela G's Research 2019-07-10T17:16:48-07:00
Accessible non-modal dialog example WIP https://codepen.io/angelagiese/pen/GarKPz https://codepen.io/angelagiese/pen/GarKPz Angela Giese

See the Code - See it Full Page - See Details

This example is a non-modal dialog. It has a title (heading), a paragraph with additional descriptive text, and one button (though dialogs can have multiple buttons). There is additional info and sources explaining why specific attributes were used.

]]>
Accessible non-modal dialog example WIP 2019-05-14T19:55:02-07:00
CSS Tooltip Demo https://codepen.io/angelagiese/pen/XQQPNM https://codepen.io/angelagiese/pen/XQQPNM Angela Giese

See the Code - See it Full Page - See Details

Using only CSS and HTML I'm creating tooltips for elements that appear on focus. This means it's good for accessibility as well since tooltips are enabled when tabbing to elements.

]]>
CSS Tooltip Demo 2019-04-30T16:57:33-07:00
jQuery: Add title attribute to links https://codepen.io/angelagiese/pen/xjjXQz https://codepen.io/angelagiese/pen/xjjXQz Angela Giese

See the Code - See it Full Page - See Details

Using jQuery/JavaScript to check all links on a page and if any don't have the title attribute then one gets generated based on text in the link.

]]>
jQuery: Add title attribute to links 2018-05-11T18:29:15-07:00
jQuery: Open external links in new tab/window https://codepen.io/angelagiese/pen/mLMbqX https://codepen.io/angelagiese/pen/mLMbqX Angela Giese

See the Code - See it Full Page - See Details

Using jQuery/JavaScript to check all links on a page and if any are external links, set the target attribute to open in a new tab/window. CodePen links don't work well with this demo since Pens are at the domain s.codepen.io and are thus "external".

]]>
jQuery: Open external links in new tab/window 2018-05-04T23:13:30-07:00