HTML & CSS

CSS3 transitions, tooltips and HTML elements explained with standalone examples you can paste into a file and open.

• CSS3 tooltip: show and hide hint text with a transition

  An accessible tooltip built with HTML and CSS3 transitions: positioning with absolute and transform, an arrow drawn with a pseudo-element, showing on hover and keyboard focus, aria-describedby, the Escape key, and using it next to ASP.NET form fields.

• Fade in and fade out with a CSS3 transition

  Build fade-in and fade-out effects with the CSS transition property: opacity with visibility so hidden elements stop catching clicks, hover and class-toggle versions, timing functions, fading on page load with keyframes, and respecting prefers-reduced-motion.

• Fixing an embedded Facebook box that overlaps or overflows your layout

  The old Facebook Like Box was replaced by the Page Plugin. How to embed the Page Plugin responsively, why embedded social widgets overlap menus or overflow narrow columns, and the CSS (width, overflow, z-index, stacking contexts) that fixes it.

• Highlight a GridView row on mouse hover with CSS3 (or jQuery)

  Highlight the row under the mouse in an ASP.NET GridView: the one-line CSS :hover rule with a transition, keyboard-friendly focus-within highlighting, zebra striping, the older jQuery hover approach, and why onmouseover attributes from RowDataBound are no longer needed.

• The HTML frameset tag, with an example, and what to use instead

  How the HTML frameset and frame elements divided a browser window, a complete working example with rows, cols, name and target, why frameset is obsolete in HTML5, and the modern replacements: iframe, CSS grid layouts and server-side includes or master pages.