lmorchard - Pebbling Club 🐧🪨

CSS3 transitions using visibility and delay

www.greywyvern.com
2014-07-31T17:11:00.000Z
animation css css3 imported:pinboard

Notes

An element with opacity of zero is still "opaque" to clicks and mouse-overs. This causes serious problems, especially for drop down menus:

Feed

Unfurl

{ "author": "Brian Huisman", "description": "The personal website of Brian Huisman, a professional web developer specializing in JavaScript, HTML5, PHP and MySQL.", "image": "https://greywyvern.com/img/avatar/Gloat.jpg", "logo": "https://greywyvern.com/favicon.ico", "publisher": "GreyWyvern.com", "title": "CSS3 transitions using visibility and delay", "url": "http://www.greywyvern.com/337", "feed": "http://www.greywyvern.com/?action=RSS", "lang": "en", "failed": true, "failedAt": 1728193731774, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193740313 }
How to Create a CSS3 Ajax Loading Icon Without Images - SitePoint

www.sitepoint.com
2012-09-16T16:22:39.000Z
webdev css ajax css3 html5 loading imported:pinboard

Notes

Fortunately, CSS3 allows us to create loading icons without images. They’re easy to create, scale, re-color, use on any background and don’t incur image downloads

Feed

Unfurl

{ "author": "Craig Buckler", "date": "2024-02-14T05:18:10.000Z", "description": "Read How to Create a CSS3 Ajax Loading Icon Without Images and learn with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.", "image": "https://secure.gravatar.com/avatar/439aeaff7de2bae365adc3eb4947b44d?s=96&d=mm&r=g", "logo": "https://www.sitepoint.com/favicons/512x512.png", "title": "How to Create a CSS3 Ajax Loading Icon Without Images — SitePoint", "url": "https://www.sitepoint.com/css3-ajax-loading-icon/", "feed": "http://www.sitepoint.com/sitepoint.rss", "failed": true, "failedAt": 1728194837062, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "expires": 1728364690780, "status": 200, "bodyLength": 212545, "duration": 3898 }
bartaz/impress.js

github.com
2012-04-02T21:54:22.000Z
presentations css webdev css3 imported:pinboard

Notes

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Unfurl

{ "author": "impress", "description": "It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. - impress/impress.js", "image": "https://opengraph.githubassets.com/010518848c840cf9083b99bf9389b3aa9807093c3dda6a797187d46977b182f3/impress/impress.js", "logo": "https://github.com/fluidicon.png", "publisher": "GitHub", "title": "GitHub - impress/impress.js: It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.", "url": "https://github.com/impress/impress.js", "lang": "en", "failed": true, "failedAt": 1728194909220, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
Arctext.js - Curving Text with CSS3 and jQuery | Codrops

tympanus.net
2012-01-30T16:17:03.000Z
webdev design css js jquery css3 imported:pinboard

Notes

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

Feed

Embed

Unfurl

{ "author": "Manoela Ilic", "date": "2012-01-24T12:00:00.000Z", "description": "While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js i", "image": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2012/01/Arctext.jpg?x50504", "logo": "https://codrops-1f606.kxcdn.com/codrops/wp-content/themes/codropstheme03/favicons/apple-touch-icon.png?x50504&v=2", "publisher": "Codrops", "title": "Arctext.js – Curving Text with CSS3 and jQuery | Codrops", "url": "https://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/", "feed": "https://tympanus.net/codrops/feed/", "iframe": "<blockquote class=\"wp-embedded-content\" data-secret=\"TraOfVCH93\"><a href=\"https://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/\">Arctext.js – Curving Text with CSS3 and jQuery</a></blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/embed/#?secret=TraOfVCH93\" width=\"600\" height=\"338\" title=\"“Arctext.js – Curving Text with CSS3 and jQuery” — Codrops\" data-secret=\"TraOfVCH93\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"></iframe><script type=\"text/javascript\">\n/* <![CDATA[ */\n/*! This file is auto-generated */\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n/* ]]> */\n</script>\n", "lang": "en", "failed": true, "failedAt": 1728194975497, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "expires": 1728364898956, "status": 200, "bodyLength": 98979, "duration": 2928 }
DZSlides

paulrouget.com
2011-05-13T02:45:31.000Z
css3 html5 slides imported:pinboard

Notes

DZSlides is a one-page-template to build your presentation in HTML5 and CSS3.

Unfurl

{ "logo": "https://paulrouget.com/favicon.ico", "title": "DZSlides", "url": "http://paulrouget.com/dzslides/", "expires": 1728365350105, "status": 200, "bodyLength": 1686, "duration": 1290 }
CSS background image hacks – Nicolas Gallagher

nicolasgallagher.com
2011-01-24T06:50:23.000Z
webdev css design hacks css3 imported:pinboard

Notes

Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Feed

Unfurl

{ "date": "2011-01-17T12:00:00.000Z", "image": "http://www.gravatar.com/avatar/9eecfabc23fd999927fa7989a7eaff5f.png?v=2&s=300", "logo": "https://nicolasgallagher.com/favicon.ico", "title": "CSS background image hacks – Nicolas Gallagher", "url": "http://nicolasgallagher.com/css-background-image-hacks/", "feed": "http://nicolasgallagher.com/feed.xml", "lang": "en", "failed": true, "failedAt": 1728195352534, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "expires": 1728365502031, "status": 200, "bodyLength": 29391, "duration": 2690 }
lojjic's PIE at master - GitHub

github.com
2010-07-21T13:43:10.000Z
msie webdef css css3 imported:pinboard

Notes

"A behavior for Internet Explorer allowing it to recognize and render various CSS3 box decoration properties"

Unfurl

{ "failed": true, "failedAt": 1728195450464, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
The New Lens Flare · David DeSandro

desandro.com
2010-06-23T16:12:48.000Z
css css3 textshadow webdev imported:pinboard

Notes

"By abusing the text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo."

Unfurl

{ "failed": true, "failedAt": 1728195453640, "failedError": "AxiosError: Request failed with status code 404" }
ZOMG! CSS Lens Flare!

mozilla.seanmartell.com
2010-06-23T16:12:04.000Z
css webdev lensflare css3 imported:pinboard

Unfurl

{ "logo": "http://mozilla.seanmartell.com/favicon.ico", "title": "ZOMG! CSS Lens Flare!", "url": "http://mozilla.seanmartell.com/Flare/", "expires": 1728365703027, "status": 200, "bodyLength": 526, "duration": 601 }
Eric's Archived Thoughts: JavaScript Will Save Us All

meyerweb.com
2008-10-22T19:07:43.000Z
webdev js javascript css css3 diy vendors standards markup html html5 html4 imported:pinboard

Notes

"we’re all vendors now, baby!"

Feed

Unfurl

{ "failed": true, "failedAt": 1728195547410, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "expires": 1728365944427, "status": 200, "bodyLength": 61359, "date": "2008-10-22T12:00:00.000Z", "description": "Most of the browser development work these days seems to be going into JavaScript performance. That’s a good thing for CSS3 and HTML5.", "image": "https://meyerweb.com/ui/i/hamonshu/fb-og-image.png", "logo": "https://meyerweb.com/favicon.ico", "title": "JavaScript Will Save Us All", "url": "https://meyerweb.com/eric/thoughts/2008/10/22/javascript-will-save-us-all/", "feed": "http://meyerweb.com/eric/thoughts/rss2/full", "lang": "en", "duration": 5036 }
Text + Image + CSS3 = Crazy Delicious

metaatem.net
2008-02-06T16:15:20.000Z
css images html hacks css3 imported:pinboard

Notes

"Hide an image in html"

Unfurl

{ "failed": true, "failedAt": 1728195597436, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }

0 - 50 of 11 items

10 25 50 100 250