recentpopularlog in

piperh : design   3341

« earlier  
CSS Tutorial: Create Diagonal Layouts Like It's 2020
about using skew to make a diagonal layout and how to calculate awkward stuff resulting
webdesign  web  design  css  style  styling  diagonal  skew  layout 
yesterday by piperh
Google Font Features
about creating a font file with embedded subset of lining figures - could be applied maybe to using tabular numbers. Also mentions using some online place to see whether the full font set contains the numbers you want
webdesign  web  design  type  typography  font  character  set  figures  numbers  tabular  lining  non-lining  google  feature  open-type 
yesterday by piperh
SVG Attribute reference - SVG: Scalable Vector Graphics | MDN
a list of svg attributes with links to further explanation. Each attribute page shows which elements can use that attribute
webdesign  web  design  svg  attribute  reference  list  webdev 
3 days ago by piperh
SVG element reference - SVG: Scalable Vector Graphics | MDN
a list, with links to further explanation, of svg elements
webdesign  web  design  svg  element  reference  list  mdn  webdev 
3 days ago by piperh
USWDS: The United States Web Design System
A design system for the federal government.
We make it easier to build accessible, mobile-friendly government websites for the American public.
usa  america  american  government  federal  web  design  graphic  uswds 
4 days ago by piperh
Animating Clipped Elements In SVG — Smashing Magazine
author says: This article explains the difference between an SVG clipPath and a CSS clip-path, including examples to guide and inform you through this journey. Finally, I’ll share a few demos both personal and in the wild to help you better understand clipPath animation and inspire your visions.
webdesign  web  design  css  svg  clip  clip-path  clipPath  clipping  animation  animate 
5 days ago by piperh
SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features | CSS-Tricks
Seems that SMIL is not a good way to go with svg animation. At end there's a chart of equivalent css and gsap attributes and values
webdesign  web  design  webdev  code  coding  svg  smil  css  gsap 
6 days ago by piperh
Snap.svg - Home
they say: SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
svg  animation  animate  animated  js  javascript  script  vector  webdesign  web  design  webdev 
6 days ago by piperh
Shape Morph Button
an inline svg shape in a button morphs when clicked, using js for the toggle.
Handy, has the html, css and js code, linked from this article:
https://css-tricks.com/svg-shape-morphing-works/
webdesign  web  design  code  svg  morph  shape  morphing 
8 days ago by piperh
Humaaans: Mix-&-Match illustration library
they say: humaaans
Mix-&-match illustrations of people with a design library
illustration  image  library  design  graphic  vector  editable  people  drawings 
8 days ago by piperh
Simple Image Placeholders with SVG - Cloud Four
author says: a tiny, dependency-free library called Simple SVG Placeholder. It generates data URIs for placeholder img elements. (uses js)
You get a grey rectangle with image size written in middle.
webdesign  web  design  image  placeholder  generator  svg  js  javascript  script 
9 days ago by piperh
PlaceIMG | Easy FPO and Dummy Images for Any Project
generates placeholder images from 7 different categories. I couldn't make remote placement work but you can generate the image and download it
webdesign  web  design  image  placeholder  generator  dummy 
9 days ago by piperh
Understanding CSS Grid: Grid Lines — Smashing Magazine
Rachel Andrew article about layout using css grid lines
webdesign  web  design  code  coding  layout  css  grid  line  lines 
9 days ago by piperh
Staggered Animations with CSS Custom Properties - Cloud Four
I could ignore the variables part (don't understand it). Handy nth-child method for staggering animations on a list
webdesign  web  design  css  animation  stagger  staggered  delay  slide-in  code  coding 
12 days ago by piperh
Why You Should Choose HTML5 <article> Over <section> — Smashing Magazine
1st para: Browsers’ visual display of headings nested inside <section> elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies.
webdesign  web  design  code  coding  article  section  css  accessible  accessibility 
12 days ago by piperh
How To Self-Host Your Web Fonts - Kev Quirk
This post will show you how to self-host web fonts so you’re not beholden to Google.
webdesign  web  design  webdev  fonts  self-host  self  host  @font-face 
12 days ago by piperh
Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords
CSS has default keywords for various values. In this article I’m going to talk about three of them: initial, inherit, and the relatively new one, unset.
webdesign  web  design  code  coding  css  inherit  unset  initial 
12 days ago by piperh
Magic Flip Cards: Solving A Common Sizing Problem — Smashing Magazine
about coding non-absolute flip cards, with code examples. Some advanced css in here but could be v useful for learning/copying. The effect might come in handy sometime.
webdesign  web  design  code  coding  effect  flip  card  revolve  turn  hover  css  html  grid 
14 days ago by piperh
Grids - Learn web development | MDN
good explanation of grid using a page that you can develop and experiment in. V handy
webdesign  web  design  learn  css  grid  mozilla  learning  code  coding  webdev 
16 days ago by piperh
Typo-coaster
nifty animation of type on a path, by Michelle Barker
webdesign  web  design  animate  animation  path  loop  offset 
17 days ago by piperh
Design System Checklist
A checklist overview for approaching a brand/organisation's communication and image. 5 major headings. I'll probably never need this but it might focus my thinking on a project one day?
webdesign  web  design  graphic  system  philosophy  checklist  brand  tone  method  consistent  communication 
17 days ago by piperh
CSS { In Real Life } | Optimising SVGs for the Web
by Michelle Barker showing methods to optimise svg's, tips, relationship of artwork bounds to viewbox, inline use, and some other relevant resources
webdesign  web  design  svg  vector  optimise  optimisation  performance  css  inline  code  coding  illustrator  icon  symbol 
17 days ago by piperh
Icon Font & SVG Icon Sets ❍ IcoMoon
tons of icons available as fonts or svg. Michelle Barker says that icomoon will make sprites.
webdesign  web  design  graphic  icon  icons  app  online  font  svg  vector  free  glyph  sprite 
17 days ago by piperh
Line Awesome — Free Beautiful Icon Font
their strapline: Swap Font Awesome for modern line icons in one line of code. Tons of useful icons in simple line style
webdesign  web  design  graphic  icons  symbols  illustrations  images  line  drawings  vector  font  awesome 
18 days ago by piperh
Accessible Dropdown Menu Component In Vanilla JavaScript - a11y-dropdown-component | CSS Script
heading: Accessible Dropdown Menu Component In Vanilla JavaScript – a11y-dropdown-component, with code
webdesign  web  design  menu  dropdown  accessible  accessibility  a11y  js  javascript  script 
23 days ago by piperh
All – Tiny Helpers
handy list of online tools for specific web design tasks. All kinds of mini code generators
webdesign  web  design  online  apps  tools  helpers  webdev  code  generator 
23 days ago by piperh
Toggle Visibility When Hiding Elements | CSS-Tricks
article about accessible methods for hiding content. Useful table of accessibility of differents states
webdesign  web  design  css  hide  hidden  visibility  hiding  elements  accessible  accessibility  aria  screen  reader 
24 days ago by piperh
CSS-Only Carousel | CSS-Tricks
Jan 2020, a look at current state for making a css-only carousel
webdesign  web  design  carousel  slideshow  css-only  css  only  code  coding 
24 days ago by piperh
Library Detector - Chrome Web Store
Chrome extension: detects and shows js libraries functioning in a site
webdesign  web  design  webdev  js  javascript  script  library  tool  extension  chrome 
4 weeks ago by piperh
Material design style click effects with pointer events and CSS Custom Properties – Ben Frain
a howto build a 'material design' type of click effect (works also on touch). Useful to see the js and explanation of the construction and how you can pass classes from js to css
webdesign  web  design  code  coding  js  javascript  script  css  animation  click 
4 weeks ago by piperh
A11y Toggle
edenspiekermann page that explains how to use their accessible js toggle
webdesign  web  design  ally  toggle  accessible  accessibility  js  javascript  script  vanilla 
4 weeks ago by piperh
Miniature.io - Automated Website Screenshots
free and paid screenshot service. Could be handy if I needed consistent size screenshots - easier than carefully resizing my browser window each time ...
webdesign  web  design  screenshot  automatic  automated  screen  shot  capture  service 
4 weeks ago by piperh
brumm.af
online tool to set a smooth box-shadow: get extra smoothness by using shadow layers and controlling their transparency, distance, spread and blur. Generates the code
webdesign  web  design  shadow  smooth  online  tool  box-shadow  generator  code 
4 weeks ago by piperh
Finally, a CSS only solution to :hover on touchscreens
media queries solution to the problem of hover on touchscreen
webdesign  web  design  ui  ux  hover  pointer  touch  touchscreen  media  query  @media  interaction 
4 weeks ago by piperh
Min and Max Width/Height in CSS
handy run-through of min-width and max-width, with use cases
webdesign  web  design  width  css  min-width  max-width  use 
4 weeks ago by piperh
Smooth Scrolling Sticky ScrollSpy Navigation – Bram.us
article showing how to code for 'scroll spy' - effect that highlights your scroll position on a permanent sticky menu. Sort of a tail wagging the dog thing.
webdesign  web  design  scroll  spy  navigation  position  effect  css  js  javascript  script 
5 weeks ago by piperh
WebAIM: "Skip Navigation" Links
WebAIM article about options for 'Skip navigation' link
webdesign  web  design  nav  navigation  accessible  acessibility  skip  main  content  links 
5 weeks ago by piperh
Build a keyboard-accessible navigation bar with drop-down menus | Atomic Smash
Describes how to use :focus-within pseudo class to make a flyout submenu accessible and visible to keyboard tabbing. A drawback is that it obliges user to tab through whole menu and not to be able to select submenu with spacebar or arrows - I don't know yet how to do that. Add a skip nav feature?
webdesign  web  design  dropdown  flyout  menu  accessible  keyboard  tab  nav  navigation  focus  focus-within 
5 weeks ago by piperh
Fixing the iPhone CSS hover problem on iOS - dev.webonomic.nl
a hack/fix to make iOS :hover touchscreen tap behave like a desktop hover. Works perfectly and haven't found a downside. I used tabindex=0 on SCT site and will try it on Artworkers language menu instead of the js mouseover solution
webdesign  web  design  ios  hover  tabindex  tap  touch  touchscreen  dropdown  flyout 
5 weeks ago by piperh
Fly-out Menus • Menus • WAI Web Accessibility Tutorials
WCAG code for an accessible flyout. It wouldn't work for me on SCT adaptation, but prob I didn't persist enough
webdesign  web  design  accessible  flyout  dropdown  menu  nav  navigation 
5 weeks ago by piperh
Mega Menus Work Well for Site Navigation
Nice outline of advantages of mega menus
webdesign  web  design  mega  menu  nav  layout  navigation  ui  ux 
5 weeks ago by piperh
CSS Layout ∙ Mega menu
example source code for a mega menu (other components available too)
webdesign  web  design  nav  mega  menu  mega-menu  css  code 
5 weeks ago by piperh
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets | MDN
Good explanation of how width works in flex using flex-grow, flex-shrink, flex-basis
if you DON'T use explicit widths or 'justify-content'.
webdesign  web  design  css  flex  flexbox  flex-grow  flex-shrink  flex-basis 
5 weeks ago by piperh
What Is The Best Screen Size to Design Websites in 2020
hobo seo services blog page about most common screen sizes in 2019.
webdesign  web  design  screen  size  statistics  monitor  width  pixels  max  full  resolution 
6 weeks ago by piperh
Flexible Captioned Slanted Images ◆ 24 ways
Eric Meyer droning on about how he styled some images for a site - there may be useful tips about the use of clip-path and object-fit
webdesign  web  design  css  clip-path  object-fit 
6 weeks ago by piperh
RGB.wiki - Digital Art and Design Wiki
in their 'About' page: RGB.wiki is an educational wiki that evolved from the desire to have a visual reference for artistic ideas and design principles.
webdesign  web  design  graphic  rgb  art  digital  gui  blog  trends  effects 
6 weeks ago by piperh
CSSFX - Beautifully simple click-to-copy CSS effects
they say: Beautifully simple click-to-copy CSS effects.
a few hover, loading and input effects
webdesign  web  design  effect  css  hover  collection 
7 weeks ago by piperh
Boilerform
they say: Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.
webdesign  web  design  code  coding  form  html  css  boilerplate  component 
7 weeks ago by piperh
Paaatterns! for Free
they say: Free collection of beautiful patterns for all vector formats
pattern  webdesign  web  design  graphic  inspiration  vector  image  collection  library 
7 weeks ago by piperh
ken-burns-slideshow Demo
copy and paste library for a ken burns carousel
webdesign  web  design  kenburns  ken  burns  slideshow  carousel  css  transform  js  javascript  script 
7 weeks ago by piperh
CSS Card Hover Effects
this expanding hover effect on a panel could possibly inspire other adaptations of the idea
webdesign  web  design  card  hover  effect  css 
7 weeks ago by piperh
CSS { In Real Life } | 7 Uses for CSS Custom Properties
Some uses for css variables - methods I didn't know one could do. Some complex use cases, especially with calc
webdesign  web  design  css  variables  custom  properties 
7 weeks ago by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read