John Cox

Blogs · @wyome

Tagged css3 · everything

Codrops

A Fresh Bottom Slide Out Menu with jQuery | Codrops

This tutorial demonstrates how to build a slide-out menu that emerges from the bottom of a container, with menu items displaying titles, descriptions, and icons that animate on hover. The implementation uses semantic HTML markup with nested spans and icon elements, CSS3 for styling with shadows and rounded corners, and jQuery to animate the link and icon positions when users interact with menu items. The key technique involves positioning elements with negative values and then animating those positions on hover to create the sliding effect.

Permalink designtutorialjquerycss3

CSS-Tricks

Grid Accordion with jQuery | CSS-Tricks

A "grid accordion" is a table layout where each column contains accordion-style content panels that expand when clicked, with the column width automatically enlarging to accommodate readable text while others shrink. The article walks through the HTML structure using semantic definition lists, CSS techniques for accessibility (positioning hidden content off-screen rather than using display:none so screen readers and jQuery animations work properly), CSS3 styling with :nth-of-type selectors, and jQuery delegation to handle click events efficiently and allow images to toggle column expansion.

Permalink designtutorialjquerycss3

www.askthecssguy.com

Showing Hyperlink Cues with CSS (Ask the CSS Guy)

This tutorial demonstrates how to use CSS attribute selectors to automatically display contextual icons next to hyperlinks based on their destination—such as PDF files, external sites, or mailto links—without requiring additional HTML classes or markup. The technique uses selectors like `a[href$='.pdf']` (ends with), `a[href^='mailto:']` (starts with), and `a[class~='popup']` (contains word) to target links and add background images with padding, and was supported in IE7, Firefox, and Safari at the time of writing.

Permalink designaccessibilitytutorialcss3

CSS-Tricks

Make an Editable/Printable HTML Invoice | CSS-Tricks

The author describes creating a lightweight, browser-based editable HTML invoice template that mimics FreshBooks' interface using simple `<textarea>` elements. The approach requires no special software beyond a web browser, can be hosted on a website for access from any computer, and preserves user edits if the page is accidentally refreshed. The solution is deliberately minimal but practical for those with basic invoicing needs who want to print or save invoices as PDFs.

Permalink businesstoolstutorialcss3

Web Designer Depot

CSS Transitions 101 | Webdesigner Depot

CSS transitions, newly introduced in CSS Level 3 as a Webkit extension, enable smooth animated changes between element states (such as hover effects) without requiring JavaScript libraries like jQuery, using just a few lines of code. The property takes four parameters—which CSS property to animate, duration, timing function, and optional delay—and can transition nearly any property with color, length, or position values, making it ideal for enhancing user experience with polished interactions like button rollovers and dropdown menus. However, since transitions only work in Webkit browsers (Safari and Chrome) at the time of writing, they should be used as progressive enhancements for design rather than relied upon for core functionality.

Permalink designtutorialcss3

Queness

12 Useful Tutorials to Style Web Forms

I cannot provide the summary you've requested because the text provided does not contain an article with a clear argument or report. Instead, it shows a comments section from a web development blog with a brief author bio and several user comments about form plugins and web development topics. Without access to the actual article content that these comments reference, I cannot summarize what the piece argues or reports.

Permalink designtutorialcss3

www.balkhis.com

55+ Extremely Useful Online Generators for Designers

This post curates a comprehensive directory of over 50 free online generator tools organized by category—including background, favicon, color, CSS, form, and text generators—designed to help web designers automate repetitive tasks and save time during the design process. The author hand-picked each tool and grouped them for easy browsing, emphasizing that these generators produce quality results while dramatically reducing design workload. The post invites readers to contribute additional generator tools they've found useful to expand the collective resource.

Permalink productivitydesigntoolscss3

Web Designer Wall

Best of CSS Design 2007

The author compiled fifty websites selected from Best Web Gallery, a CSS and Flash design gallery he founded in 2006, representing what he considered the best web designs of 2007. Each entry includes a brief annotation highlighting distinctive design elements—typography, color use, layout innovation, or artistic effects—that made the site noteworthy. The list serves as a snapshot of web design trends from that period, ranging from minimalist portfolios to richly illustrated commercial sites, demonstrating the variety of successful approaches to web design at the time.

Permalink designcss3

CSS-Tricks

Tips For Creating Great Web Forms - CSS-Tricks

This piece outlines best practices for building accessible and functional web forms, covering semantic HTML (using proper label tags), CSS styling techniques (like floating labels for table-like layouts), and JavaScript enhancements (such as clearing placeholder text on focus). It also recommends considering existing form-building tools like Wufoo or Web Form Factory rather than building forms from scratch, while warning against common pitfalls like CSS resets that can break default button styling across browsers.

Permalink accessibilitytutorialcss3

MONC

Disabling Deprecated HTML Using CSS | David’s kitchen

Den här guiden förklarar de ofta förbisedda nyanserna i HTML-attribut bortom de vanligaste som class och id — bland annat hur booleska attribut som `disabled` bara aktiveras genom sin närvaro (inte sitt värde), varför `disabled="false"` faktiskt fortfarande inaktiverar ett fält, och hur ARIA-attribut kompletterar HTML för tillgänglighet. Texten täcker också moderna prestandaattribut som `loading="lazy"`, `async`/`defer` för scripttaggar och det relativt nya `fetchpriority="high"` för att påverka Core Web Vitals, samt hur `data-*`-attribut låter dig lagra data direkt på element för JavaScript-läsning utan att skriva inline-logik. Guiden avslutar med varningar om deprecated attribut som `align` och `bgcolor` som hör hemma i CSS istället.

Permalink accessibilitytutorialcss3

Smashing Magazine

11 Almost Perfect Business Layouts | Smashing Magazine

Susy is a Sass-based grid framework that lets designers create custom, responsive layouts purely through CSS and Sass mixins without adding classes to HTML markup. The article demonstrates how to use Susy's core features—the `span` mixin for sizing columns, the `gutter` function for consistent spacing, the `gallery` mixin for multi-column layouts, and the `layout` mixin for switching between grid configurations at different breakpoints. Unlike heavier frameworks like Bootstrap, Susy performs the mathematical calculations for column widths and gutters while leaving all styling decisions to the designer, making it lightweight and flexible for responsive web design.

Permalink tutorialcss3

www.stripegenerator.com

Stripe Generator - diagonal stripes background tiles

I can't write a summary of this piece because it isn't an article or piece of reportage — it's a web application interface for a stripe pattern generator tool. There's no argument being made or information being reported, just instructions on how to use the tool to create and download striped textures for CSS or Photoshop. If you meant to save an actual article or essay, please share that instead.

Permalink designtoolscss3

Moz

SEOmoz | 15 CSS Properties You Probably Never Use (but perhaps should)

This post catalogs 15 underused CSS Level 2 properties with examples and explanations of their purposes, ranging from visual effects like `clip` and `text-shadow` to print-specific controls like `page-break-before` and typography refinements like `font-stretch`. The author notes that browser support varies across these properties and recommends testing before implementation, while flagging certain uses (like generating content with CSS) as conceptually problematic despite being technically possible.

Permalink designtutorialcss3

Smashing Magazine

53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine

A curated list of 53 essential CSS techniques and articles covering modern web design practices, ranging from foundational concepts like CSS selectors and layouts to advanced topics such as CSS3 animations, flexbox, grid systems, and responsive design. The collection emphasizes how CSS enables separation of design from content, making websites easier to maintain and update while advocating for accessible, usable, and well-structured code over outdated table-based layouts.

Permalink designtipstutorialcss3

Smashing Magazine

50 Beautiful CSS-Based Web-Designs in 2006 | Smashing Magazine

Smashing Book #5 is a 584-page hardcover guide offering practical front-end techniques and design patterns from experienced web professionals tackling real responsive design projects. The 13 chapters cover essential topics including responsive workflows, SVG mastery, Flexbox layouts, web fonts, responsive images, email design, testing and debugging, performance optimization, and strategies for maintaining creativity within systematic design processes. Rather than chasing trends, the book focuses on battle-tested methods that solve actual problems in responsive web design, from complex components like tables and navigation to offline functionality and client collaboration workflows.

Permalink designtutorialcss3

lesliefranke.com

CSS Cheat Sheet

This is a CSS reference guide covering the syntax and properties for styling web pages across eight categories: general display properties, fonts, text formatting, the box model, borders, positioning, backgrounds, and lists. It includes the correct order for shorthand notation and explains key values for common properties like display, position, float, and text-align. The guide distinguishes between external style sheets, internal styles, and inline styles as methods for applying CSS to HTML elements.

Permalink tutorialcss3

Smashing Magazine

Smashing Magazine | Blog Archive » CSS-Based Forms: Modern Solutions

Smashing Book #5 is a 584-page hardcover guide featuring practical front-end techniques and design patterns for responsive web design, drawing from real-world projects rather than short-lived trends. The book covers 13 chapters addressing responsive workflow, SVG, Flexbox, web fonts, responsive images, email design, testing, performance optimization, and offline functionality, written by respected designers and developers like Sara Soueidan, Zoe Gillenwater, and Yoav Weiss. It emphasizes scalable design systems, pragmatic solutions to complex responsive challenges, and balancing creative design with predictable processes to build memorable, maintainable websites.

Permalink designtutorialcss3

www.webdevout.net

CSS Hacks

This article documents CSS hacks and filters—exploits of browser bugs and inconsistencies—that target specific browser versions, primarily Internet Explorer 6 and 7, with varying levels of reliability and validity. It categorizes recommended techniques like selector-based hacks (`* html {}`, `*:first-child+html {}`), attribute selector quirks, and the `!important` identifier abuse, alongside unrecommended methods using invalid CSS prefixes (`_property`, `*property`) and malformed pseudo-classes. The article emphasizes that while hacks should be avoided when possible, understanding these options allows developers to weigh consequences and choose the least harmful workarounds for cross-browser layout challenges.

Permalink tipstutorialcss3

www.cssplay.co.uk

Stu Nicholls | CSSplay | CSS only menus

This page catalogs dozens of CSS-based navigation menu implementations spanning from 2014 to 2026, ranging from simple dropdowns to complex tree menus using various CSS techniques like :focus-within, :has(), details/summary elements, and the newer popover API. The author notes that older implementations from 2005 have been removed as outdated, and while the menus work in current browsers, compatibility varies across older versions and different platforms, with some Mac-specific issues reported.

Permalink designdevelopmenttutorialcss3