recentpopularlog in
« earlier  
Valid CSS Content | CSS-Tricks
about stuff you can inject via the css 'content' property
webdesign  web  design  css  content  pseudo  class  valid  invalid  attribute  property  before  after 
2 days ago
Favicon Checker—See how your favicon hold up across popular browsers, including native dark and light modes.
online tool: Compare your favicons on all major web browsers, including native dark and light modes.
webdesign  web  design  tool  online  favicon  check  checker  fav  icon 
4 days ago
Unbuttoning Buttons | scottohara.me
explains how to make a block of text behave like a button, by using css, aria and js to restyle the button element. Complicated
webdesign  web  design  button  css  inline  selector  accessible 
4 days ago
Understanding the difference between grid-template and grid-auto
article title: Understanding the difference between grid-template and grid-auto.
Explains about explicit and implicit grids, and grid-template and grid-auto properties
webdesign  web  design  css  grid  layout  template  auto  explicit  implicit 
4 days ago
CSS { In Real Life }
gen article about PWAs - when it's worth considering and when not worth the time investment
webdesign  web  design  pwa  progressive  app 
4 days ago
CSS { In Real Life }
title: Negative Grid Lines
1st para: Did you know you can use negative line numbers to position grid items with CSS Grid?
webdesign  web  design  css  grid  negative  lines  layout 
4 days ago
Selectors Level 3
w3.org page showing specs for types of classes - v useful ref
webdesign  web  design  css  selectors  pseudo  classes  elements  reference 
5 days ago
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 
6 days ago
eSignature API
they say: The Industry’s Fastest  eSignature API Integration
Seems to be for accepting written signatures in a web page or app
webdev  signature  api  sign  written  write  drawn  draw  legal  digital  esign 
6 days ago
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 
7 days ago
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 
12 days ago
ARCU - Fabricantes de cerraduras desde 1958
manufacturer of Ferlandina door lock. This would be a good new client for me, website is interesting but v outdated
cerradura  ferlandina  lock  manufacturer  fabricante  keys  security  door  bolibar 
12 days ago
Our Dream School
Private school, designery shopfronts on Enrique Granados. Hyped up text on the website.
barcelona  learning  school  ourdream  our  dream  enrique  granados 
12 days ago
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 
13 days ago
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 
14 days ago
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 
16 days ago
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 
16 days ago
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 
18 days ago
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 
19 days ago
✅ 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 
19 days ago
GitHub - Paul-Browne/lazyestload.js: load images only when they are in (and remain in) the viewport
load images only when they are in the viewport or 100px beneath. There's also a version that waits until user has stopped scrolling
lazyload  lazy  images  js  javascript  load  speed  performance  scroll  viewport 
20 days ago
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 
20 days ago
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 
20 days ago
SESS - Simple Email Sending Service
neat looking email sending service. You have to upload your mailing list as a csv. Simple html design, somewhat modifiable
webmail  mailing  email  service  list  template 
20 days ago
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 
21 days ago
The dialog element | Viget
about the native html dialog element. Sept 18, 2018
webdesign  web  design  dialog  popup  modal  element  window  html  native  polyfill 
23 days ago
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 
23 days ago
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 
27 days ago
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 
27 days ago
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 
27 days ago
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 
27 days ago
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 
27 days ago
Free Online Form Builder, create HTML forms and surveys - Cognito Forms
online drag-and-drop form builder. Free and paid services. I think that the form is embedded on your site but the data goes to Cognito Forms.
web  form  builder  embed  online  service 
27 days ago
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 
29 days ago
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 
29 days ago
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 
29 days ago
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 
4 weeks ago
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 
4 weeks ago
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 
4 weeks ago
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 
4 weeks ago
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 
4 weeks ago
Free Photos (CC0) - AltPhotos
website main headline: 3304 FREE IMAGES. Totally Free Photos - CC0 License.
the best new photos every day
Searchable. Limited selection. OK pics, unusual
graphic  design  image  photo  library  free 
4 weeks ago
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 
4 weeks ago
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 
4 weeks ago
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 
4 weeks ago
CSS Grid
ready-made css 12-column grid layout, using css grid.
webdesign  web  design  grid  12-column  12  column  layout  responsive  css 
4 weeks ago
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 
4 weeks ago
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 
4 weeks ago
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 
4 weeks ago
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 
4 weeks ago
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 
4 weeks ago
Contacto | Gestoria Sabadell | Ferrer Gestió Professional, SLP
Gestoría that dealt with name change for grey Honda of Sept 2018.
gestoría  gestor  ferrer  honda  coche  arnau  hrv  sabadell 
4 weeks ago
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 
5 weeks ago
Custom Online Business Printing & Design | MOO UK
Online print ordering. Address in Farringdon Rd, but used by anthony so must deliver to Spain
online  print  printing  cards  leaflets  postcards  stickers  flyers 
5 weeks ago
Home - ICOMS
Sergi's email: El logo del congreso y algun folleto promocional debería estar listo en mayo de 2019 que es cuando se celebra la edición anterior (Rio de Janeiro). El congreso es cada 2 años. El congreso que yo llevo es en septiembre de 2021 en Glasgow.
congress  sergi  barceló  2021  icoms  glasgow  oral  maxillofacial  surgery 
5 weeks ago
Customise radio buttons without compromising accessibility
techniques for fancying up radio buttons and maintaining accessibility
webdesign  web  design  css  radio  button  accessible  accessibility 
5 weeks ago
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 
5 weeks ago
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 
5 weeks ago
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
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
Search: abacus | Flickr
don't forget Flickr when you're searching for images. Many can be used commercially for free - check permissions
photos  free  images  library  stock  flickr 
6 weeks ago
« earlier      
per page:    204080120160

Copy this bookmark:





to read