John Cox

Blogs · @wyome · Now · Shelf

Tagged css3 · everything

Interesting

daker.me

5 CSS3 features explained — Adnane Belmadiaf's Blog

This post surveys five CSS3 features that replace JavaScript-dependent workarounds: Flexbox for complex layouts like vertical centering and multi-column designs, :nth-child selectors for styling alternating table rows without extra markup, the hyphens property for intelligent text wrapping, filter effects for GPU-accelerated visual manipulations like grayscale and blur, and media queries for responsive design based on screen size and device orientation. Each feature includes browser compatibility information and practical code examples demonstrating its use.

Permalink designdevelopmenttutorialcss3

lab.hakim.se

Ladda

This UI pattern embeds loading indicators directly into the button or form element that triggered the action, replacing the need for separate loading spinners by having the element itself animate and expand to show processing is underway. The approach provides immediate visual feedback to users during form submission, eliminating confusion about whether their action registered, with practical implementations visible on slides.com and customizable through various animation directions (expand, contract, slide, zoom) and optional progress bars.

Permalink designanimationcss3

Codrops

Direction-Aware Hover with CSS3 and jQuery | Codrops

This tutorial demonstrates how to build an interactive hover effect where a semi-transparent overlay slides onto thumbnail images from the direction the user's mouse is entering, then slides out in the same direction when the mouse leaves. The technique combines jQuery event handlers to detect mouse direction by dividing the element into four triangular zones, CSS3 transitions to animate the overlay movement, and fallback jQuery animations for older browsers that don't support CSS transitions.

Permalink animationtutorialjquerycss3

tympanus.net

vincentlamanna.com

tjvantoll.com

List of Pseudo-Elements to Style Form Controls - TJ VanToll - Tutorials, Thoughts, and Ramblings on Front End Development

This comprehensive reference documents vendor-specific pseudo-elements available across browser rendering engines (Trident, Gecko, WebKit) that allow developers to customize the appearance of form controls like inputs, buttons, progress bars, and textareas—elements historically locked behind browser defaults. Each pseudo-element is catalogued with code examples and screenshots showing how to apply CSS styling to components like file upload buttons, range sliders, date pickers, and meter elements, with notes on engine-specific quirks like requiring `-webkit-appearance: none` in WebKit before styling certain pseudo-elements.

Permalink developmenttutorialcss3

Tooltipster - The jQuery Tooltip Plugin

Tooltipster - The jQuery Tooltip Plugin

Tooltipster is a jQuery plugin that creates customizable tooltips using CSS animations and semantic HTML. It offers extensive configuration options for positioning, styling, animation speed, and trigger behavior (hover, click, or custom), plus an API for dynamic content updates and AJAX integration. The plugin supports HTML content within tooltips, multiple themes, callback functions, and touch device compatibility.

Permalink tutorialpluginsjquerycss3

csswizardry.com

zmoazeni.github.io

csscss by zmoazeni

csscss is a Ruby command-line tool that analyzes CSS files to identify duplicate style declarations across different rulesets, helping developers reduce redundancy and maintain cleaner stylesheets. It can parse standard CSS, Sass, and LESS files, and offers options like verbose output, minimum match thresholds, and remote file analysis via URL. The tool is intentionally designed to report duplicates rather than automatically remove them, giving developers control over which redundancies to address.

Permalink developmentopensourcecss3

webdesigntutsplus.s3.amazonaws.com

My Bootstrap Site

This is a documentation page for a Bootstrap-based marketing site template, updated to Bootstrap version 2.02, that provides setup instructions and guides for implementing navigation bars in three configurations (fixed-top, static full-width, and static inside container). It appears to be an overview page directing users to more detailed resources for organizing markup, CSS, and JavaScript, with additional content on tabs and pills coming soon.

Permalink tutorialcss3framework

Bootstrap Blog

Bootstrap 2.3.1 released · Bootstrap Blog

Bootstrap released patch version 2.3.1 to fix several JavaScript bugs in the dropdown, popover, tooltip, and carousel components before shifting full development focus to Bootstrap 3. The team announced that future bug fixes would be addressed in version 3.0 rather than backported to the 2.x line, making this the final maintenance update for Bootstrap 2.

Permalink developmentcss3framework

NEUTRAL

philipwalton.com

What No One Told You About Z-Index — Philip Walton

Most developers misunderstand z-index because they don't realize that z-index values only matter within a **stacking context**, which is a group of elements that move together in the stacking order. Stacking contexts are created when an element is the root element, has position and z-index set, or has an opacity less than 1—and this third method is rarely known outside specification documents. The article demonstrates this through a puzzle where adding opacity to a parent element causes its child's high z-index to become irrelevant, since the child is now confined to a lower stacking context created by that opacity rule.

Permalink designtutorialcss3

www.webinterfacelab.com

moebio.com

Bootstrap Blog

Bootstrap 2.2.2 released · Twitter Bootstrap Blog

Bootstrap 2.2.2 introduces multiple bug fixes and improvements across documentation, CSS, and JavaScript components, including retina-ready assets, better dropdown and popover behavior, improved table nesting, and enhanced typeahead functionality. The release also incorporates print styles from HTML5 Boilerplate and fixes various mobile compatibility issues. The Bootstrap team signals that future development focus will shift toward version 3.0.0.

Permalink developmentcss3framework

www.w3.org

CSS Grid Layout

CSS Grid Layout is a proposed W3C specification that provides a two-dimensional layout system for web applications, allowing developers to divide space into rows and columns and position elements by referencing grid lines or named areas. Unlike tables or floats, Grid has no inherent content structure, enabling responsive designs that adapt to different screen sizes through media queries without altering the semantic HTML. The specification details comprehensive sizing algorithms, automatic item placement, and alignment properties to support everything from basic application layouts to complex overlapping components like custom controls.

Permalink designtutorialcss3

Hongkiat

6 Cool Image Captions with CSS3

This tutorial demonstrates how to create six different image caption effects using only CSS3 transforms and transitions—including slide-up, fade, slide-in, rotate, and scale animations—without requiring JavaScript or images. It provides complete HTML structure and CSS code for each caption style, with detailed explanations of how properties like `translateY`, `translateX`, `rotate`, and `scale` work on hover to produce smooth animated effects. The piece assumes browser support for CSS3 features (IE10+, Firefox 6+, Chrome 13+, and similar versions in other browsers) and emphasizes that these techniques represent the future of web design over older image-based or JavaScript-dependent approaches.

Permalink designanimationtutorialcss3

grrrid.frebsite.nl