recentpopularlog in

piperh : webdesign   2517

« earlier  
CSS Layout cookbook - CSS: Cascading Style Sheets | MDN
a few css recipes for commonly used items or patterns, using flex or grid
webdesign  web  design  layout  components  css  flex  grid  recipes  examples  flexbox 
7 hours ago by piperh
Use Cases For Flexbox — Smashing Magazine
Use Cases For Flexbox: last article of a series by Rachel Andrew on the uses for flex and grid
webdesign  web  design  flex  flexbox  layout  grid  css 
yesterday by piperh
CheckboxRadio
Styled checkbox and radio buttons from Filament but dependent on jQuery or Showstring (another js lib). Very nicely done but look like a fair amount of faff ( too much faff in fact for Amantaní ). The css file is long
webdesign  web  design  accessible  checkbox  radio  button  custom  filament  styled  css  js  javascript  script 
6 days ago by piperh
Pure CSS: Accessible Checkboxes and Radios Buttons – Clarity Design System – Medium
step-by-step how to style an accessible custom checkbox. Uses opacity:0 to hide the default checkbox
webdesign  web  design  checkbox  accessible  style  css  code  coding  howto  custom  customise  input 
7 days ago by piperh
What CSS prefixes should I use?
shows necessary prefixes. Date shown when I booked this (7.10.18) was 31.10.17, so it's nearly 1 year old - so don't know how often this is updated.
webdesign  web  design  css  prefix  prefixes  code  coding 
8 days ago by piperh
T-Writer Demo
demo of type writing effect script, with link to its github
webdesign  web  design  effect  writing  typewriter  typewriting  keying  library  js  javascript  script 
10 days ago by piperh
The Complete Guide to Lazy Loading Images | CSS-Tricks
Various methods for implementing lazy - js, intersection observer API. Some resource links at end
webdesign  web  design  images  lazy  load  loading  speed  performance  js  javascript  script  api 
10 days ago by piperh
Trix: A rich text editor for everyday writing
a rich text content editor. Embeddable in web pages, web apps?
webdesign  web  design  webdev  development  rich  text  editor  html 
12 days ago by piperh
Creating Horizontal Scrolling Containers the Right Way [CSS Grid]
step by step code howto for making a horizontally scrolling part of a page, Netflix style
webdesign  web  design  css  horizontal  scroll  scrolling  grid 
13 days ago by piperh
✅ UX Animation Principles: Duration | @keyframers 1.22.1
possibly useful code for stepped fade-ins of divs, a la typical app behaviour, via css keyframes
webdesign  web  design  keyframe  animation  animate  fadein  fade  load  enter  css  duration  time 
13 days ago by piperh
GitHub - pehaa/beerslider: A vanilla JS keyboard accessible plugin for any before-after comparison
vanilla js script for making an over-image slider to compare two different overlaid images, "before and after" type
webdesign  web  design  image  comparison  slider  before  after  compare  js  javascript  script 
14 days ago by piperh
Having fun with link hover effects | CSS-Tricks
a couple of OK hover effects, and some terrible ones
webdesign  web  design  hover  effect  link  css  animated 
14 days ago by piperh
The Low Hanging Fruit of Web Performance - The Media Temple Blog
tips for performance improvements. Worth reading right through. Resources at end of article.
webdesign  web  design  performance  speed  optimisation  cacheing  caching  optimising 
14 days ago by piperh
The dialog element | Viget
about the native html dialog element. Sept 18, 2018
webdesign  web  design  dialog  popup  modal  element  window  html  native  polyfill 
17 days ago by piperh
Measure Performance with the RAIL Model  |  Web Fundamentals  |  Google Developers
they say: RAIL is a user-centric performance model that breaks down the user's experience into key actions.
It's a Google thing
webdesign  web  design  performance  speed  rail  ux  user  experience 
17 days ago by piperh
Designing A Textbox, Unabridged — Smashing Magazine
article about needing to use html textarea instead of input for fields that might receive a lot of text, and the issue of character limit and how to deal with it. Suggests js methods but without detailing any code.
webdesign  web  design  text  input  textarea  form  field  typing  characters  placeholder  css 
21 days ago by piperh
Creating sliding effects using sticky positioning | CSS-Tricks
Using position: sticky to show and hide elements within a container. A sort-of poor man's parallax. No support in IE but otherwise good.
webdesign  web  design  css  sticky  position  fixed  show  hide  slide 
21 days ago by piperh
The Font Loading Checklist—zachleat.com
distilled view of loading strategies for web fonts, primarily for speed.
A 4-point checklist
webdesign  web  design  font  load  loading  speed  checklist  performance  webfont  foit  fout  @font-face 
21 days ago by piperh
Progressively Enhanced CSS Layouts: Floats to Flexbox & Grid — SitePoint
how to progressively enhance the model from a float-based layout to flexbox, and then CSS Grid, respectively.
Might be useful if you ever have to convert a float-based layout rather than starting from scratch
webdesign  web  design  flex  flexbox  css  grid  float  layout  column  row 
21 days ago by piperh
GitHub - stutrek/scrollmonitor-parallax: A simple parallax API
not sure if this is useful for me, but pinning it anyway in case
webdesign  web  design  parallax  scroll  effect  js  javascript  script  api 
21 days ago by piperh
Web Design Museum
their subhead: The museum exhibits over 900 carefully selected and sorted web sites that show web design trends between the years 1995 and 2005.
webdesign  web  design  graphic  history  internet  museum  gallery 
23 days ago by piperh
How do you mark up an accordion? — Sara Soueidan – Freelance-Front-End UI/UX Developer
about the possible markup options for an accordion, with and without semantic elements, for best accessibility. Doesn't give script for the accordion itself, just says it would be js. Some useful resources at end
webdesign  web  design  accordion  markup  html  semantic  element  faq  resources  aria  accessibility  accessible 
23 days ago by piperh
Siema - Lightweight and simple carousel with no dependencies
nice simple vanilla js slideshow - 3k gzipped he says. Don't know about unequal photos - needs checking if you use this
webdesign  web  design  js  javascript  script  carousel  slideshow  vanilla  swipe 
23 days ago by piperh
The ultimate guide to proper use of animation in UX
some principles to keep in mind when animating elements in web design. Useful advice and ideas about animation speed.
webdesign  web  design  animation  timing  speed  principles  movement  advice  tips  ui  ux 
24 days ago by piperh
Guide | ScrollOut
scroll animation library. Allows you to assign css as an element comes into/out of view. Works in both directions of vertical scroll.
Nice on the first view but could get to be annoying
webdesign  web  design  js  javascript  script  scroll  animation  effect 
24 days ago by piperh
Complete Guide to CSS Scroll Snap
intro says: The introduction of CSS scroll snap has made creation of carousels like this a lot easier. Scroll snap can also be used to easily create landing pages which snap to each section when scrolling.
Demo doesn't seem to snap - css unsupported in my browsers.
webdesign  web  design  scroll  snap  ui  css 
24 days ago by piperh
Create your design system, part 6: Buttons – CodyHouse – Medium
article on styling buttons and conveying meaning. Fairly detailed code examples. Uses BEM. Maybe will part of a design system and a framework
webdesign  web  design  css  buttons  btn  components  ui 
24 days ago by piperh
The Complete CSS Demo for OpenType Features - OpenType Features in CSS
This project is a comprehensive CSS font-feature-settings demo for OpenType features, a refined version of Syntax for OpenType features in CSS by Adobe.
Examples show why font features are horrible in the wrong hands
webdesign  web  design  opentype  font  feature  ligature  special  character  css  typography 
24 days ago by piperh
Beer Slider Responsive & Accessible Before-After Slider – Demo – PEPSized
js (vanilla or jQuery) code to make a sliding image reveal, for comparing two overlaid images.
webdesign  web  design  slider  comparator  compare  slide  image  photo  split  comparison  reveal  overlay  js  javascript  script 
24 days ago by piperh
CSS Duotone Generator
playground for css image blend effects. Photoshop-like blending modes. Give duotone-like effects. Generate the html and css
webdesign  web  design  css  blend  duotone  generator  effect  colour  html 
25 days ago by piperh
CSS Playground - Interactive Playground for CSS
playground for testing the effects of different css values using sliders. Also gives you the values of your adjustments.
webdesign  web  design  css  playground  slider  test  play 
25 days ago by piperh
CSS Grid
ready-made css 12-column grid layout, using css grid.
webdesign  web  design  grid  12-column  12  column  layout  responsive  css 
25 days ago by piperh
CSS Scan - Check or copy computed CSS on hover
developer says: Inspect Element on steroids: study how things are made on the web in real-time and copy computed styles with no hassle (neither longhand styles).
You hover over an element and a tooltip shows the computed css. Looks handy
webdesign  web  design  tool  inspect  computed  css  copy  style 
25 days ago by piperh
Principle - Animated Design
they say: Principle makes it easy to design animated and interactive user interfaces.
$129 app for Mac, for creating animated interactions and flows
webdesign  web  design  animate  animated  interaction  flow  ui  effect  app  mac  tool  animation 
25 days ago by piperh
Using CSS Clip Path to Create Interactive Effects, Part II | CSS-Tricks
transition effects using svg clip path. Support better than css clip path, says author.
webdesign  web  design  clip-path  clip  path  svg  css  effect  transition  clipping 
25 days ago by piperh
Best Practices For Mobile Form Design — Smashing Magazine
about form design for mobile. Some concept stuff about psychology of form filling and abandonment, and also practical tips and advice on construction and functioning
webdesign  web  design  ui  form  field  mobile 
25 days ago by piperh
Introducing F2 – Sima – Medium
they say: An elegant, interactive and flexible charting library for mobile.
I've no idea how this works ("based on html5 Canvas") but might be worth finding out if I need charts and graphs. Some nice interactive effects.
webdesign  web  design  mobile  chart  library  interactive  animated  graph 
25 days ago by piperh
Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor - Mozilla Hacks - the Web developer blog
about using firefox tool - shape path editor. Can't see why you'd use a firefox tool instead of just writing the css, but maybe when you learn more ...
webdesign  web  design  css  path  firefox  tool  shape  wrap  clip-path 
4 weeks ago by piperh
Customise radio buttons without compromising accessibility
techniques for fancying up radio buttons and maintaining accessibility
webdesign  web  design  css  radio  button  accessible  accessibility 
4 weeks ago by piperh
Icon Transition Generator
online tool to generate code for a transition between two svg icons. Uses js
webdesign  web  design  icon  transition  svg  vector  animation  animate  morph  tool  online 
4 weeks ago by piperh
The Benefits of Using CSS Grid for Web Form Layout — SitePoint
Craig Buckler article about using grid and flex for form construction and layout
webdesign  web  design  css  grid  layout  form  flex 
4 weeks ago by piperh
Using Feature Detection to Write CSS with Cross-Browser Support | CSS-Tricks
in-depth article about dealing with browser feature support. Interesting but quite techy. Saves time and hassle if you avoid dodgy features? But still, worth reading
webdesign  web  design  css  html  support  browser  feature  detection  code  coding 
5 weeks ago by piperh
Easy and Responsive Modern CSS Grid Layout — SitePoint
1st para: how to create a responsive modern CSS Grid layout, demonstrating how to use fallback code for old browsers, how to add CSS Grid progressively, and how to restructure the layout in small devices and center elements using the alignment properties. Useful, with code
webdesign  web  design  css  grid  progressive  fallback  @supports  layout 
5 weeks ago by piperh
Accessible Breadcrumb Navigation
Examples of a breadcrumb navigation using aria-label to provide an accessible name, and aria-current to indicate the currently active link.
webdesign  web  design  accessibility  accessible  breadcrumb  trail  focus  active  css  aria 
5 weeks ago by piperh
Changes on CSS Grid Layout in percentages and indefinite height - Rego's Everyday Life
serious browser developer's look at % in layout and how browsers calculate it. Possibly brain hurty stuff
webdesign  web  design  css  width  height  percent  percentage  grid  layout 
6 weeks ago by piperh
Web Typography Resources for Web Designers and Web Developers | Better Web Type
they say: 'A growing list of web typography related apps, tools, plugins and other resources for web designers and web developers.'
webdesign  web  design  type  typography  font  resources  tools  apps  plugins 
7 weeks ago by piperh
The Complete Illustrated Flexbox Tutorial – freeCodeCamp
title: The Complete Illustrated Flexbox Tutorial
All taken from the author's book 'CSS Visual Dictionary'
webdesign  web  design  css  flex  flexbox  reference  layout 
7 weeks ago by piperh
The Ultimate Guide to Learning CSS
their headline: The ultimate guide to learning css. Over 100 curated resources.
There's an linked list to different areas of css
webdesign  web  design  css  reference  resources  learn  learning  tutorials 
7 weeks ago by piperh
3 Ways to Create Angled Edges With SVG
they say: In this tutorial you’ll learn three ways to create easy angled edges using SVG.
webdesign  web  design  svg  angle  angled  edge  box  shape  background 
7 weeks ago by piperh
BeTheme
collection of pre-built sites
webdesign  web  design  themes  templates  pre-built 
8 weeks ago by piperh
GRID: A simple visual cheatsheet for CSS Grid Layout
css grid layout/code chart + diagrams show position effect. Divided into 'container' and 'children', like flexbox. Each main declaration has brief intro text. Very clear, simple reference.
webdesign  web  design  layout  css  grid  cheatsheet  reference  code  position  chart 
9 weeks ago by piperh
Your skip links are broken - Axess Lab
their intro: Many websites have an accessibility feature called skip links that help some users navigate the site. However, there’s a problem with basically all skip links on mobile devices, which hurts your site’s accessibility instead of improving it.
webdesign  web  design  accessibility  accessible  navigation  skip  links  a11y 
9 weeks ago by piperh
A Case for CSS Variables – Jody LeCompte – Medium
title and subtitle:
A Case for CSS Variables
Comparing CSS Variables and Preprocessor Variables
webdesign  web  design  css  code  coding  variables  custom  properties  preprocessors 
9 weeks ago by piperh
Simply beautiful websites for you | oncebot.com | Malda
Nice, simple Indian web design studio site, with sample pricing.
webdesign  web  design  india  competition  company  indian 
9 weeks ago by piperh
Pushbar.js demo
Pushbar.js is a tiny javascript plugin for creating sliding drawers in web apps
It is fully customizable and dependency free.You can use it as sidebar menus or option drawers. With option to blur background content. Vanilla js
webdesign  web  design  menu  sliding  panel  door  overlay  js  javascript  script  vanilla  modal 
9 weeks ago by piperh
Create your Icon Font in seconds - 9000 Vector Icons Available - Free Icon Font Generator
free and paid icon sets. Hosted fonts. I'm not sure if you can download and host your own
webdesign  web  design  icon  font  icons  generator 
9 weeks ago by piperh
ImageKit.io - Real-time Image Optimization and Global Image CDN
their headlines: Automate image optimization on all platforms
Intelligent real time image optimization, resizing, cropping and super fast delivery.
Generates correct size image on the fly on demand for your website. Lives on a CDN
webdesign  web  design  webdev  images  generate  generator  size  optimise  optimisation  service  online 
10 weeks ago by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read