recentpopularlog in

piperh : css   1208

« earlier  
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 
9 days ago by piperh
HTML 5.2: 4.3. Sections
w3.org's reference pages about html semantic elements like <section> <article> <aside> etc
w3  css  elements  article  section  aside  html  construction  content  semantic  tags 
13 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 
14 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 
14 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 
17 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 
17 days 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 
26 days 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 
5 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 
5 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 
6 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 
6 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 
7 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 
7 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 
7 weeks ago by piperh
Pure CSS Still Life - Water and Lemons
glass of water + lemons illustration done entirely in css!
webdesign  web  design  css 
7 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 
8 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 
8 weeks ago by piperh
CSSCamp — Conference for Web Designers and Developers
a css conference in Barcelona July 2019. One day, 190€
conference  css  camp  csscamp  barcelona  teach  learn  meet  meeting  july  2019 
8 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 
8 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 
9 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 
9 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 
9 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 
9 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 
9 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 
9 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 
10 weeks ago 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 
12 weeks ago by piperh
cubic-bezier(.17,0,0,1.03) ✿ cubic-bezier.com
shows numbers for cubic bezier curve. You move handles 'til you get the animation you want, then copy the curve numbers for a css transform
webdesign  web  design  ease  cubic-bezier  cubic  bezier  css  curve  generator  transform 
12 weeks ago by piperh
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
Rachel Andrew Smashing Mag article about responsive design currently (Feb 2018) - flexbox and grid reduce the need for MQs.
webdesign  web  design  grid  flex  flexbox  media  queries  mq  responsive  css 
january 2019 by piperh
CSS Grid Explained in 7 Minutes (with diagrams and code) - YouTube
a 7-minute video lecture explaining the basic concepts of css grid. Quick handy way to understand what it's about before getting into more detail
webdesign  web  design  css  grid  display  layout  tutorial  video  class  introduction  explanation 
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
CSS Accordion Slider: A tool for generating accordion sliders
Handy code generator for accordion style panels. You can only have one open at a time - open one, the previous closes. css only, no js. Some options can be configured first via sliders. Horizontal and vertical options.
webdesign  web  design  css  html  code  generator  configure 
january 2019 by piperh
CodyHouse | Web Design Nuggets
they say: CodyHouse's design system is a CSS framework and a library of HTML, CSS, JS components that work seamlessly with the framework.
Possibly some handy code within the components section and maybe some useful js. Some of the stuff uses scss
webdesign  web  design  css  html  components  framework  js 
january 2019 by piperh
New CSS Logical Properties! – Elad Shechter – Medium
about css logical properties: a new way of naming things like padding-left padding-right etc according to reading direction of site
webdesign  web  design  css  logical  properties  rtl  ltr  multi  language  box  model 
january 2019 by piperh
Should I Use JavaScript to Load My Web Fonts? | Filament Group, Inc., Boston, MA
dec 2018 article comparing current font loading with css-only and with js. Seems like css only is good but js can enhance it a bit.
webdesign  web  design  font  loading  js  javascript  script  css  foit  fout  webfont 
december 2018 by piperh
Observe a story
nice logo for a west Texas observatory with animation
webdesign  web  design  inspiration  animation  logo  graphic  css  animate 
december 2018 by piperh
An Introduction to CSS Shapes | Codrops
check MS support for css shapes before using (end 2018: not in Edge or IE)
webdesign  web  design  css  shapes  text  flow  layout  runaround  shape 
december 2018 by piperh
Child and Sibling Selectors | CSS-Tricks
simple explanation of the different descendent, child and sibling selectors
webdesign  web  design  css  selector  child  sibling  descendent  combinator 
december 2018 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
Why I use the BEM naming convention for my CSS - YouTube
a geezer explains about his bem and why you should use it or at least some kind of naming convention.
He says OK css nesting on small sites. On big sites will lead to problems.
You end putting classes (sometimes several) on every element in the html.
bem ties in well with sass - both use the double underscore.
webdesign  web  design  css  bem  naming  convention  block  element  modifier  sass  class 
november 2018 by piperh
CSS and Network Performance – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts
techy article about structuring css to allow async drawing of page. Looks like a lot of bother for low-priority return in my case
webdesign  web  design  webdev  development  css  speed  performance  dom  cssom  render  critical 
november 2018 by piperh
Editorial Layouts, Floats, and CSS Grid | Rob Weychert
shows how css grid doesn't accommodate text wrap around images - you end up using a float like always, which seems to undermine the usefullness of grid. (I can't believe this use case wasn't an important consideration in the implementation of grid).
See addendum linked to Rachel Andrew and css exclusions (currently only in Edge)
webdesign  web  design  css  grid  code  coding  width  columns  float  wrap  around  text  editorial  layout  gutter  margin 
november 2018 by piperh
Fun Tip: Use calc() to Change the Height of a Hero Component | CSS-Tricks
complicated demo of using css calc to resize type or images for different window widths, instead of using media queries
webdesign  web  design  scale  responsive  fluid  proportion  aspect  ratio  css  calc 
november 2018 by piperh
How to Use SVG Patterns as Backgrounds
1st para: SVG patterns offer a more flexible approach to repeating a background image on a web page than CSS tiling. Let’s look at why that is, and how you can use them
webdesign  web  design  background  svg  css  pattern  image 
november 2018 by piperh
Responsive images with constant aspect ratio
a codepen using the top padding trick to maintain aspect ratio in responsive code
webdesign  web  design  css  code  coding  aspect  ratio  proportion  responsive 
november 2018 by piperh
Grid Tile Layouts with auto-fit and minmax | Geddski
author says: 'auto-fit' was made for this
We use the new auto-fit keyword to create tile layouts. It instructs the Grid to create as many columns of the given size as can fit in the space of the grid container.
webdesign  web  design  css  grid  layout  tile 
november 2018 by piperh
Splicing HTML’s DNA With CSS Attribute Selectors — Smashing Magazine
useful look at attribute selectors, lots of code examples and howtos
webdesign  web  design  css  selector  attribute  html 
november 2018 by piperh
30 Seconds of CSS
author says: A curated collection of useful CSS snippets ...
Divided and listed into categories: layout, visual, animation, interactivity, other. With explanations. Handy. I didn't know about ::selection or user-select:none or focus-within. Technique for overflow gradient. Checkbox hack toggle.
webdesign  web  design  css  snippets  code  coding  html  reference  copy 
november 2018 by piperh
Constant width to height ratio
nice bit of css that maintains aspect ration and allows content in the div, BUT, if content is larger than the div you have to deal with overflow, or the div will grow, thereby spoiling the aspect ratio. Image is best as background img.
webdesign  web  design  code  coding  css  width  height  ratio  aspect  constant  maintain 
november 2018 by piperh
Concise Media Queries with CSS Grid
within 1st para author says: with CSS grid we can write our grid rules once, and achieve the desired layout at any screen size with a single rule, and without any framework
webdesign  web  design  css  grid  layout  mq  media  queries  flex  flexbox 
november 2018 by piperh
GRID: A simple visual cheatsheet for CSS Grid Layout
a simple, clear reference cheatsheet for css grid properties and syntax
webdesign  web  design  cheatsheet  css  grid  layout  reference  syntax  display 
november 2018 by piperh
Creating Layouts with CSS Grid — SitePoint
an intro to css grid: The Grid Formatting Context
Adding display: grid to an element triggers a grid formatting context for that element and its children. ...
webdesign  web  design  css  grid  intro  introduction  layout  display 
november 2018 by piperh
The Shapes of CSS | CSS-Tricks
interesting list of shapes achievable only with css - with live editable code!
webdesign  web  design  css  shapes  before  after  border  radius  shadow  html  reference 
november 2018 by piperh
SVG Marching Ants | CSS-Tricks
marching ants effect on outlines using svg
webdesign  web  design  graphic  svg  css  code  coding  marching  ants  animation  animated 
october 2018 by piperh
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 
october 2018 by piperh
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 and possibly not worth worrying about
webdesign  web  design  button  css  inline  selector  accessible  reset  style  styling 
october 2018 by piperh
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 
october 2018 by piperh
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 
october 2018 by piperh
Selectors Level 3
w3.org page showing specs for types of classes - v useful ref
webdesign  web  design  css  selectors  pseudo  classes  elements  reference 
october 2018 by piperh
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 
october 2018 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 
october 2018 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 
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
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 
october 2018 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 
october 2018 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 
october 2018 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read