recentpopularlog in

piperh : web   2868

« earlier  
Awesome accordion menu using only HTML & CSS
nice expanding/collapsing menu with no js. Has an extra 'accordion' effect which is daft, ignore it, the main expanding feature seems good (but test it thoroughly)
webdesign  web  design  menu  expand  collapse  css  vanilla  code 
5 hours ago by piperh
The Hidden Power of CSS Text Align
some use cases for text-align. Handy sometimes for page layout
webdesign  web  design  css  text-align  layout 
5 hours ago by piperh
Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective – A List Apart
by a person who suffered severe vertigo and the effect on their navigation ability - and consequent advice on web design
webdesign  web  design  accessibility  accessible  vestibular  disorder 
5 hours ago by piperh
How to create clipped, blurred background images in CSS | CodyHouse
How to apply blur effects to images using CSS filters, and how to confine these effects to specific image areas.
webdesign  web  design  css  filter  clip  blur  effect  image  img  background  bg 
6 hours ago by piperh
Make it hard to screw up driven development | CSS-Tricks
collection of tools for validating, checking and testing code
webdesign  web  design  tool  online  lint  automated  test  testing  valid  validate  code  html 
3 days ago by piperh
Animate.css
collection of ready-made css animations
webdesign  web  design  css  animate  animation 
3 days ago by piperh
AddyOsmani.com - Native image lazy-loading for the web!
look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web.
Is it css or an image attribute?
webdesign  web  design  image  img  lazy  load  lazy-load  lazyload  css  loading  attribute 
4 days ago by piperh
Keybase
Secure groups, files, and chat for everyone. Encryption for group data
webdesign  web  design  webdev  development  security  encryption  encrypt  group  chat  data 
7 days ago by piperh
Cool uses of the ::before and ::after pseudoelements
some curious uses of ::before and ::after, including use of attribute attr(aria-valuenow) that updates a value in realtime
webdesign  web  design  css  before  after  pseudoelements  pseudo  elements 
16 days ago by piperh
[no title]
scroll effects - OK on touchscreen but rather dull on desktop with mouse
webdesign  web  design  scroll  effects  js  javascript  script  animation  library 
17 days ago by piperh
Flexulator
neat tool to play with flex-basis, grow and shrink and see the effect immediately
webdesign  web  design  css  flex  flexbox  online  tool  shrink  grow  basis 
21 days ago by piperh
Security Checklist
a checklist of security practices to follow to protect your own data and privacy. Some useful tips
web  internet  privacy  security  data  tracking  advice  tips  checklist 
21 days ago by piperh
Breaking CSS Custom Properties out of :root Might Be a Good Idea | CSS-Tricks
why you might need to use a variable with a more local scope than :root
webdesign  web  design  css  variable  custom  property  :root  scope  class  html 
21 days ago by piperh
Make your Google Fonts render faster · PerfPerfPerf
a script for immediate display - in fallback font - when you use google fonts, instead of foit
webdesign  web  design  font  google  webfont  foit  display  fallback  performance 
21 days ago by piperh
You probably don’t need input type=“number”
why using type="number" isn't always a good idea on form input fields
webdesign  web  design  input  form  number  type  field  usability  ux  touch  screen  numeric 
21 days ago by piperh
SVG Sprite Generator
online svg sprite creator - drop SVG files to create the sprite
webdesign  web  design  sprite  svg  online  tool  creator 
21 days ago by piperh
GitHub - leeoniya/dropcss: A simple, thorough and fast unused-CSS cleaner
takes your HTML and CSS as input and returns only the used CSS as output.
Not sure if this requires npm installer or if one can just download
webdesign  web  design  css  clean  used  unused  cleaner  optimise 
23 days ago by piperh
5 Tools For Automated Accessibility Audits
helpful tools and resources for checking accessibility of a site
webdesign  web  design  accessibile  accessibility  tools  automated  automate  check  checking  audit 
23 days ago by piperh
Hacking Custom Checkboxes And Radios – Hacker Noon
about styling custom checkboxes and radio buttons, while maintaining accessibility
webdesign  web  design  checkbox  toggle  switch  radio  button  css  default  customise  style  accessible 
23 days ago by piperh
See No Evil: Hidden Content and Accessibility - Cloud Four
article about hiding content in different contexts, with accessibility and screen readers in mind
webdesign  web  design  hidden  content  aria  accessibility  accessible  attribute  hiding 
28 days ago by piperh
GitHub - github/details-menu-element: A menu opened with a <details> button.
using <details> and <summary> html tags to open a menu of radio buttons. The selected text then appears in the <detail> text when the menu is collapsed.
Could be handy sometime
webdesign  web  design  js  javascript  script  html  detail  summary  button  radio  tag 
28 days ago by piperh
Tools and modern workflow for front-end developers – LogRocket
About build tools and what they do, though doesn't explain enough for my level of understanding. I still don't get why you'd use one
webdesign  web  design  webdev  npm  grunt  yarn  gulp  webpack  packages  build  tools  workflow  frontend  front-end  development 
28 days ago by piperh
10 HTML Elements You Didn't Know You Needed - DEV Community 👩‍💻👨‍💻
some unusual html tags. Some of the code in the article is slipshod, and the code is in images not copyable, but there are useful examples
webdesign  web  design  html  tags  examples  video  audio  time  template  meter  progress  picture  output  blockquote 
28 days ago by piperh
Comprar Aceite de Oliva Virgen Extra Online - OlivaOliva
olive oil online sales - award-winning site for ecommerce in Spain
ecommerce  webdesign  web  design  example 
4 weeks ago by piperh
All you need to know about hyphenation in CSS | Clagnut by Richard Rutter
current state of hyphenation possibilities in browsers (March 2019). Thorough, proper typographers explanation
webdesign  web  design  css  hyphenation  typography  hyphen  hyphenate 
4 weeks ago by piperh
When Is A Button Not A Button? — Smashing Magazine
nice reminder of how to use html's own semantics - good for accessibility and keyboard tabbing. Brush up on <button type="button"> ("submit" is default value for a button, he says). He suggests using "disabled" attribute for button or fieldset but I don't see how one would trigger it. 'disabled' attribute also removes element from tab order
webdesign  web  design  button  html  semantic  attribute  vale  accessibility  accessible  element 
5 weeks ago by piperh
Web Page Footers 101: Design Patterns and When to Use Each
about footer content, user behaviour and expectations. Don't underate footers, users go there deliberately
webdesign  web  design  footer  content  user  ux 
5 weeks ago by piperh
Cache-Control for Civilians – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts
by Harry Roberts. about http caches, caching, Cache-Control header and all the directives that affect caching
webdesign  web  design  cache  caching  cache-control  http 
5 weeks ago by piperh
Semantics to Screen Readers · An A List Apart Article
in-depth account of browser/screen reader interaction with sites, from accessibility point of view
webdesign  web  design  accessible  accessibility  screen  reader  browser 
5 weeks ago by piperh
Making Google Fonts Faster⚡ – Clio + Calliope – Medium
explains some steps worth considering for loading google fonts faster and/or with more control
webdesign  web  design  font  webfont  google  speed  load  loading  time  self-host  cdn  performance  webdev 
5 weeks ago by piperh
Quick! What's the Difference Between Flexbox and Grid? | CSS-Tricks
a comparison between css grid and flexbox, pointing out main differences, when is ideal to use one or the other
webdesign  web  design  css  grid  flex  flexbox  comparison  difference 
6 weeks ago by piperh
How A Screen Reader User Accesses The Web: A Smashing Video — Smashing Magazine
a Smashing Mag webinar video with Léonie Watson - a blind screen reader user. About usable and technical accessibility
webdesign  web  design  accessibility  accessible  blind  user  css  code  coding  video 
6 weeks ago by piperh
Free HTML Website Templates and HTML UI Kits - HTMLTEMPLATES.CO
a collection of free websites and kits. Lots of them seem to be based on Bootstrap.
webdesign  web  design  template  free  bootstrap  html  ecommerce  ui  kit  resources 
6 weeks ago by piperh
txti - Fast web pages for everybody
web service for making text only web pages with a custom url, eg, txti.es/piper. You need a unique code they give you in order to edit. The markup is like a markdown-type editor. Uses Twitter cards
website  text  custom  personal  share  cms  web  edit  content 
6 weeks ago by piperh
GitHub - rampatra/wedding-website: Our Wedding Website 👫
a guy's wedding website which he now offers as open source free use. Has an RSVP feature
webdesign  web  design  wedding  website  template 
6 weeks ago by piperh
How @supports Works | CSS-Tricks
about the usefulness or not of @supports
webdesign  web  design  code  coding  @support  css  query  queries 
7 weeks ago by piperh
Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need · An A List Apart Article
Leave interface features at browser default. Obvious when you think about it but good to be reminded - don't be tempted by designer vanity, think always of the user
webdesign  web  design  interface  accessibility  accessible  user  ui  ux 
7 weeks ago by piperh
BEM: 4 Hang-Ups & How It Will Help Your CSS Organization
their intro: "addresses four common misconceptions about BEM and explains how and why the CSS naming convention of Block Element Modifier helps solve organizational thinking around class names."
webdesign  web  design  code  coding  css  bem  block  element  modifier 
7 weeks ago by piperh
instant.page
js that triggers preload of the html of a linked page when you hover the link. Seems dubious to me, but what do I know?
webdesign  web  design  webdev  development  js  javascript  script  speed  performance  instant  page  preload  preloading  html  hover  click 
7 weeks ago by piperh
National Park Typeface
a webfont that imitates effect of using router on wood - ie, rounded ends. Free to download
webdesign  web  design  font  rounded  router  national  park  webfont  type  typography  graphic 
8 weeks ago by piperh
GitHub - transloadit/uppy: The next open source file uploader for web browsers
they say: "Uppy is a modular JavaScript file uploader that integrates seamlessly with any application ... fast, easy to use"
webdesign  web  design  js  javascript  script  file  upload  uploader  interface 
8 weeks ago by piperh
Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom | Read the Tea Leaves
css/html only carousel. Be careful, doesn't work in any browser on my iPad (feb 2019). Hacky. No continuous scroll - you have to go back when you reach final image. Authors blog design is horrible.
webdesign  web  design  scroll  carousel  vanilla  css-only  snap  pinch  zoom 
8 weeks ago by piperh
Animate a Blob of Text with SVG and Text Clipping | CSS-Tricks
an animated mask/reveal effect on svg text using clip-path and mask
webdesign  web  design  svg  animation  clipPath  clip-path  animate  mask 
8 weeks ago by piperh
Gradians and Turns: the quiet heroes of CSS angles
more units for rotation and angles: gradians, turns, radians, degrees. Turns v useful and more logical for css animation
webdesign  web  design  css  animation  animate  turn  rotate  degree  radian  gradian  units  angle  circle 
8 weeks ago by piperh
Pure CSS Loader - Optimized Spinners for Web · Loading.io
they say: Pure CSS Loaders. Open sourced css loading animations dedicated for speed, simplicity and dev-friendly. 1KB per icon before minimized.
webdesign  web  design  css  spinner  loader  spinning  loading  css-only 
8 weeks ago by piperh
CSS { In Real Life } | To Grid or to Flex?
a Michelle Barker piece about grid and flex - what each is best at
webdesign  web  design  css  grid  flex  flexbox  page  layout 
8 weeks ago by piperh
Pure CSS Still Life - Water and Lemons
glass of water + lemons illustration done entirely in css!
webdesign  web  design  css 
8 weeks ago by piperh
The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks
Ways to colour svg, inline or as img. Interesting info and ref about svg and css filters, and a weird way to specify rgba colours using matrix
webdesign  web  design  code  coding  colour  color  filter  css  svg 
9 weeks ago by piperh
Iconfu - Get Icons in your Color and Style
a library of vector icons. Nice professional images but not all free. Free collection is called 'Material'
icons  vector  library  graphic  design  web  colour 
9 weeks ago by piperh
Applying Styles Based on the User Scroll Position with Smart CSS • PQINA
title: Applying Styles Based on the User Scroll Position with Smart CSS
webdesign  web  design  scroll  position  style  css  page  offset  html  js  javascript  script 
9 weeks ago by piperh
How To Architect A Complex Web Table — Smashing Magazine
author says: Tables frequently appear on the web but aren’t easy to design and code. This illustrated guide explains the table anatomy and how to build a table, keeping in mind its future elaboration.
webdesign  web  design  table  complex  code  coding  construct  build 
9 weeks ago by piperh
Bookswarm | A digital agency dedicated to the world of books
they say: We are a digital agency dedicated to the world of books
webdesign  web  design  examples  inspiration  books  digital  agency  graphic 
9 weeks ago by piperh
Palettte App
a curious tool for generating colour code - with sliders for each of hue, saturation and lightness - cool for instantly seeing the effect of changing values
color  colour  value  code  hsl  hsv  rgb  hex  palette  tool  webdesign  web  design  graphic 
9 weeks ago by piperh
Slide an Image to Reveal Text with CSS Animations | CSS-Tricks
code howto: Slide an Image to Reveal Text with CSS Animations
webdesign  web  design  css  animation  animate  slide  reveal 
9 weeks ago by piperh
How do you figure? | scottohara.me
feb 2019: about the accessible use of html figure and figcaption
webdesign  web  design  css  figure  figcaption  caption  aria  accessibility  accessible  html 
10 weeks ago by piperh
A look at CSS hyphenation in 2019 | justmarkup
about the current state of word hyphenation in browsers (feb 2019)
webdesign  web  design  word  break  hyphen  hyphenate  hyphenation  css  line  ending 
10 weeks ago by piperh
Destyle.css - a clean slate for writing CSS without user agent styles
Destyle.css
Opinionated reset stylesheet that provides a clean slate for styling your html.
webdesign  web  design  css  reset  user  agent  styles  html 
10 weeks ago by piperh
How to: Back-to-top button without scroll events - Signal v. Noise
intro says: Web developers: here’s an alternative way to build UI features that rely on scroll position without actually observing scroll events. Using the Intersection Observer API ...
webdesign  web  design  backtotop  back  top  scroll  browser  window  layout  intersection  observer  api  viewport 
10 weeks ago by piperh
Designing Layouts for Screen Readers
title: Designing Layouts for Screen Readers. About the experience of using a site with a screen reader
webdesign  web  design  accessibility  accessible  screen  reader  layout  aria 
10 weeks ago by piperh
The developer’s guide to native web animation - Heart Internet Blog - Focusing on all aspects of the web
9.2.19 Outline of methods for achieving native animation in a site - css, web animations api (waapi), javascript
webdesign  web  design  animation  animate  methods  techniques  native  tools  css  api  waapi  js  javascript  script 
10 weeks ago by piperh
Use the :lang pseudo-class over the lang attribute selector for language-specific styles
about using lang pseudo class and why it's handier than lang attribute (for styling), although it seems to me that the lang attribute must still be present in the html
webdesign  web  design  language  lang  css  pseudo  class  attribute  html  style 
10 weeks ago by piperh
wiv.js
js library for animated wavy borders
webdesign  web  design  js  javascript  script  border  wavy  animated  animate 
10 weeks ago by piperh
Shapy | Gradient Generator
gradient shape editor that generates the css code
webdesign  web  design  css  gradient  tool  editor  generator  code  experiment  try  test 
10 weeks ago by piperh
CSS Grid for Designers – Times Open
haven't read it yet but looks like an a useful walkthrough tutorial about css grid. Some more resource links at end for other tutorials and guides.
webdesign  web  design  css  grid  tutorial  howto  layout  guide 
11 weeks ago by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read