recentpopularlog in

piperh : style   71

UI Case study: state styles of card component with accessibility in mind
about styling the various possible states of a card component in a layout, to give visual feedback to the user
webdesign  web  design  ui  component  card  state  style  hover  focus  active  css  visual  feedback 
10 weeks ago by piperh
2019 Checkbox Styled — Accessible, Simple, CSS-only
A pen by Jen Simmons:
2019 Checkbox Styled — Accessible, Simple, CSS-only
webdesign  web  design  css  checkbox  accessible  css-only  custom  style  styled  form 
october 2019 by piperh
Under-Engineered Text Boxen | Adrian Roselli
article about styling forms and extending/improving browsers default styles
webdesign  web  design  css  form  input  style  usability  accessibility  ui  default  state  focus 
september 2019 by piperh
The Challenges with Single Toggle Buttons
short piece about intuitive usability of toggle switches. Things to consider - helpful notes about state and options
webdesign  web  design  toggle  switch  style  ui  ux  usability  intuitive 
july 2019 by piperh
Create custom keyboard accessible checkboxes | a11y with Lindsey
a method of styling accessible custom checkboxes. they can still be tabbed from keyboard and show focus.
webdesign  web  design  checkbox  accessible  accessibility  css  style  howto 
july 2019 by piperh
Pretty checkbox | Custom checkbox and radio buttons in pure css | Beautiful and nice looking
a css library to style buttons and checkboxes. V nice designs though maybe it would bloat your code if you only needed one or two.
webdesign  web  design  radio  button  checkbox  css  style 
july 2019 by piperh
SVG Properties and CSS | CSS-Tricks
There are many Scalable Vector Graphics (SVG), but only certain attributes can be applied as CSS to SVG. Presentation attributes are used to style SVG elements and can be used as CSS properties. Some of these attributes are SVG-only while others are already shared in CSS, such as font-size or opacity.
webdesign  web  design  css  svg  code  coding  inline  style  styling  apply  applying 
june 2019 by piperh
Styling Based on Scroll Position | CSS-Tricks
js for modifying css depending on scroll position, by Chris Coyier. Starts with Rik Schennink js (that I've pinboarded separately) then recommends IntersectionObserver and presents another js solution.
webdesign  web  design  scroll  css  js  javascript  script  position  add  modify  class  change  style  data-scroll  styling 
may 2019 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 
april 2019 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 
february 2019 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 
february 2019 by piperh
What’s New in HTML 5.2?
interesting summary of new and deprecated features in html 5.2 (from early 2018)
webdesign  web  design  html  html5.2  5.2  features  dialog  main  hidden  style  css  inline  p  children  valid  invalid  strict 
january 2019 by piperh
Did you know that style and script tags can be set to display: block? | CSS-Tricks
Amazing fact: you can set the style tag to display :block; and, if it's in the html, then it will display. You could do same with 'script' tags.
Also shows use of contenteditable, which I didn't know about. Makes content editable on the browser page! Not sure why/when you'd need it, but it should be in my knowledge bank bit of the brain!
webdesign  web  design  css  style  tag  display  block  contenteditable  webdev 
january 2019 by piperh
A11Y Style Guide
they say: This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist.
webdesign  web  design  a11y  accessibility  accessible  style  guide  html  css  code  coding 
november 2018 by piperh
Unbuttoning Buttons |
explains how to make a block of text behave like a button, by using css, aria and js to restyle the button element. Complicated and possibly not worth worrying about
webdesign  web  design  button  css  inline  selector  accessible  reset  style  styling 
october 2018 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 
october 2018 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, not quite cheap enough to be a no-brainer
webdesign  web  design  tool  inspect  computed  css  copy  style 
september 2018 by piperh
Styling buttons, the right way
resetting and styling button and link elements
webdesign  web  design  link  button  css  component  style 
may 2018 by piperh
Decorating lines of text with box-decoration-break | CSS-Tricks
About css box-decoration-break. Examples are hideous but useful to know how it works
webdesign  web  design  css  box-decoration-break  inline  style 
may 2018 by piperh
Fontanello – because you have a weak spot for fonts
extension for Firefox and Chrome that will show you font and applied styles
webdesign  web  design  font  type  typography  face  typeface  display  style  name  browser  extension  tool 
march 2018 by piperh
Phone number links and accessibility · Matt Smith
article about accessible styling for phone numbers - targetting mobile devices, though wouldn't target VOIP (eg Skype) on desktop. Relies on smaller screen MQ.
webdesign  web  design  style  tel  telephone  number  link  screen  reader  accessible  accessibility 
february 2018 by piperh
Text input highlight, TripAdvisor style – freeCodeCamp
they say: create a text input style like the search input on TripAdvisor.
webdesign  web  design  effect  underline  type  text  input  style 
november 2017 by piperh
Advanced CSS-Only Form Styling - Jonathan Harrell | CSS Blogger & Teacher, UI/UX Designer, Front-End Developer
Jonathan Harrell says: Learn about selectors both new and old that you can use to style form inputs based on requirement, validity and more
webdesign  web  design  css  form  style  styling  selector  input  element 
november 2017 by piperh
CSS-only numbered lists with "drop" shapes
codepen showing use of css counter. Counter is very well supported in browsers
webdesign  web  design  css  code  coding  list  counter  counter-increment  number  style 
august 2017 by piperh
CSSPeeper - Smart CSS viewer tailored for Designers
chrome extension that allows you to inspect elements to see applied css styles
webdesign  web  design  css  chrome  extension  peeper  inspect  style 
april 2017 by piperh
CSS Tip: Use :not to Save Time and Lines of Code :: The Bold Report
great quick tip on using :not(:last-of-type) to exclude last item from a style rule. Saves writing a separate last-of-type style
webdesign  web  design  css  not  last-of-type  style  styling 
march 2017 by piperh
Google HTML/CSS Style Guide
a Google guide to css and html code styling, within your style sheets and html docs, inc some 'meta' advice. Mostly seems sensible and mostly I already do it. A couple that I don't understand, and they don't explain the reason. Overall worth re-reading now and again
webdesign  web  design  code  coding  style  css  html  writing  format  formatting  rules  shorthand 
september 2016 by piperh
GitHub - danklammer/bytesize-icons: Tiny style-controlled SVG iconset
neat set of icons using svg stroke. Can be styled in the html or css. Includes for inserting all icons into html using <svg> tag
webdesign  web  design  icon  font  svg  symbol  dingbat  inline  html  css  style  file  library 
september 2016 by piperh
CSS Inliner Tool | Email Design Reference
mailchimp's tool for inlining css - if you have css in the head of page, the tool will inline it everywhere. All the styles are left in <head> so if you media queries they will be left alone.
html  email  mailchimp  inline  tool  css  content  head  style  markup  convert  converter 
june 2016 by piperh
Considerations for styling the < pre > tag - The Media Temple Blog
article all about the pre tag, the defaults, and how to style it better
webdesign  web  design  css  pre  code  pre-formatted  white-space  wrap  coding  style  tag  format  default  howto  html  space  collapse 
june 2016 by piperh
Let's Write Beautiful CSS Comments | Sparkbox | Web Design and Development
useful roundup of the issues around commenting and a reminder to do it often and use a consistent, sensible style. Explain what a style is for, don't just repeat what it does (you can already see that in the code)
webdesign  web  design  css  comments  style  convention  methodology  method 
may 2016 by piperh
Enhancing modular design with BEM — Medium
article explaining and defining BEM - block element module
webdesign  web  design  code  coding  bem  block  element  module  method  methodology  modular  convention  naming  style 
may 2016 by piperh
Introducing A11y Toggle
great code snippet for vanilla js toggle script
webdesign  web  design  js  javascript  vanilla  toggle  aria  script  details  summary  style  css 
march 2016 by piperh
The Current State of Telephone Links | CSS-Tricks
useful article about treatment by browsers of tel links in html
webdesign  web  design  telephone  tel  a  link  style  format  app  call  response  program  html  css  code  coding  styling  anchor  tap  mobile  phone  device 
march 2016 by piperh
Using media queries - CSS | MDN
Mozilla page outlining use and syntax for MQs
webdesign  web  design  media  query  style  sheet  mdn  mozilla  developer  webdev  css  code  coding  syntax  reference 
january 2016 by piperh
Contact Us - Mahler Consulting
reference sent by Christina for google map in techcarrera site
techcarrera  reference  google  map  code  format  style  styling  control 
january 2016 by piperh
Native Form Elements
displays native html5 form elements so you can see how browser renders them
webdesign  web  design  form  element  browser  native  html  ui  style 
december 2015 by piperh
FreshInbox - Dynamic and Interactive Email (Kinetic) CSS Support
table showing support for html email of various email clients and services
webdesign  web  design  email  client  programme  html  css  support  style 
november 2015 by piperh
U.S. Web Design Standards | U.S. Web Design Standards
american government standards and design guidelines for federal websites. code snippets and libraries for reusing.
webdesign  web  design  reference  standards  usa  federal  resource  accessibility  libraries  guide  css  components  style  tools 
october 2015 by piperh
edmundojr/localhost · GitHub
improves the visual styling of the localhost index page. I don't if you can get inside to personalise the styling further
localhost  index  style  list  styling 
september 2015 by piperh
Website Style Guide Resources
compilation of various style guides from the web, for web sites
webdesign  web  design  style  guide  css  html  graphic  website  site  reference  resources 
september 2015 by piperh
HTML Forms and Input
name="input" action="html_form_action.asp" method="get"
webdesign  web  design  webdev  html  form  forms  tag  style  input  radio  checkbox  field  reference  code  coding 
february 2014 by piperh

Copy this bookmark:

to read