recentpopularlog in

piperh : code   862

« earlier  
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 
13 hours 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 
2 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 
3 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 
6 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 
6 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 
6 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 
8 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 
10 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 
11 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 
17 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 
18 days 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 
25 days 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 
26 days 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 
4 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 
6 weeks ago by piperh
Lynn Fisher - lynnandtonic.com
impressive site design for web designer and illustrator
webdesign  web  design  illustration  inspiration  portfolio  css  code 
6 weeks ago by piperh
The Typed Object Model
about using typed object model to access both css value and unit separately instead of as a string like '10px'. When I know js maybe this will be handy!?
webdesign  web  design  webdev  js  javascript  script  css  development  code  coding  typed  object  model  om  api 
10 weeks ago by piperh
CSS { In Real Life } | A Layout Trick for Building a Contact List
demonstrates how to create list items whose width is set by the longest item in the list. Uses three different CSS properties: grid's max-content, inline-block, or inline-flex.
webdesign  web  design  code  coding  howto  tip  list  longest  line  css  grid  max-content 
10 weeks ago by piperh
Animista
online tool to create css animation effects. Lots of them
webdesign  web  design  animate  animation  effect  css  online  tool  generate  code  transition 
11 weeks ago by piperh
How to Overlap Images in CSS | Bri Camp Gomez
technique for overlapping images without using absolute position
webdesign  web  design  css  grid  image  overlap  howto  code  coding  overlapping 
11 weeks ago by piperh
Complete list of HTML entities - FreeFormatter.com
Easy to view list of html entities, name and number formats.
In the menu list they seem to have a bunch of ther formatters and validators.
webdesign  web  design  webdev  code  coding  html  character  entity  name  number  reference  entities 
november 2019 by piperh
A Guide to SVG Animations (SMIL) | CSS-Tricks
A guide to smil attributes and values in svg for animation. Animated paths must have same number of data points. Shows shared css and smil attributes.
I couldn't really understand how to start and stop - only got indefinite animation to work
webdesign  web  design  svg  smil  animate  animation  attributes  code  coding  effect 
november 2019 by piperh
Styling & Animating SVGs with CSS
svg and css name spaces - shows svg-only and shared css/svg
webdesign  web  design  svg  css  name  space  namespace  names  code  coding  webdev 
november 2019 by piperh
HTMHell - Markup from hell
some bad code examples from real sites with notes about what's wrong and how to code it right
webdesign  web  design  code  coding  html  bad  practice 
october 2019 by piperh
CSS Circles - Cloud Four
different ways of coding circles
webdesign  web  design  css  circles  code  coding  clip  border  shape  svg 
october 2019 by piperh
A Modern CSS Reset - Andy Bell
a moderate, well thought out css reset, with explanations.
webdesign  web  design  css  reset  code  coding 
october 2019 by piperh
How CSS Grid changes the way we think about structuring our content
promoting css grid over flexbox, with code examples and explanations
webdesign  web  design  css  grid  flex  flexbox  code  coding  layout 
october 2019 by piperh
Swapping Out Text, Five Different Ways | CSS-Tricks
5 ways to toggle text content of a button on click, using js only or jQuery or css only (hacky)
webdesign  web  design  toggle  swap  css  js  javascript  script  content  coding  code  button 
october 2019 by piperh
Adaptive Photo Layout with Flexbox | CSS-Tricks
nice lightweight css-only way to achieve a sort of masonry-type layout of photos.
Uses flexbox and object-fit
webdesign  web  design  code  coding  css  masonry  layout  flex  flexbox  gallery  images  horizontal 
october 2019 by piperh
Efficiently load third-party JavaScript  |  web.dev
advice about 3rd party js script loading, to optimise performance
webdesign  web  design  webdev  code  coding  js  javascript  script  defer  async  load  loading  performance  speed  optimise 
october 2019 by piperh
Optional HTML: Everything You Need to Know · Jens Oliver Meiert
about all optional tags and optional end tags and quotes in html (but not optional elements or attributes)
webdesign  web  design  webdev  code  coding  html  tag  option  optional 
october 2019 by piperh
Gradient Generator - Colordesigner
online tool that generates stepped colours between two colours. But still could be handy for making stepped changes and harmonious colours. A slider controls the number of steps generated. You can choose code colour format
webdesign  web  design  colour  color  code  gradient  step  stepped  range  harmonious  swatches 
october 2019 by piperh
Building Enticing Animations Like CodeSandbox Does - Prototypr
breakdown and coding of some nice animations of cubes using css 3d and rotations
webdesign  web  design  animation  animate  cube  css  howto  code 
september 2019 by piperh
Minify Your SVGs - victorzhou.com
short piece about minifying svg's - only interesting for showing the minimum necessary code needed to render an svg. No viewbox etc
webdesign  web  design  svg  optimise  optimisation  code  performance  webdev 
september 2019 by piperh
caption-side controls the position of a table caption
short description of css caption-side property for positioning caption in table
webdesign  web  design  code  coding  css  caption  caption-side  position  table 
september 2019 by piperh
Everything You Need To Know About CSS Margins — Smashing Magazine
Rachel Andrew on margins. "In particular, we will be looking at how margins interact with each other, and how margin collapsing actually works."
webdesign  web  design  css  margin  property  element  code  coding  collapse 
august 2019 by piperh
When to use img, img@srcset, and picture and source · Jens Oliver Meiert
although a srcset sceptic, author talks about using different img placing methods, the workload and possible payoffs.
webdesign  web  design  img  srcset  source  picture  css  code  coding  element  image  attribute  html 
august 2019 by piperh
Optional HTML: Everything You Need to Know · Jens Oliver Meiert
about optional html and when to leave out characters. The savings in html are minimal so I reckon if a site has a lot of images, why bother with this when savings in other areas can be much bigger
webdesign  web  design  optional  html  reference  performance  speed  code  coding 
august 2019 by piperh
Fun places to learn CSS Layout –  Part 2: Grid Layout, by Stéphanie Walter
resources to learn css grid - including learning games, generators, cheatsheets
webdesign  web  design  css  grid  learn  resources  generator  code  coding  layout 
august 2019 by piperh
Getting Started with CSS Grid: Three Coding Approaches | Viget
A step-by-step tutorial on understanding and building two-dimensional layouts using Grid’s flexible syntax.
webdesign  web  design  css  grid  layout  howto  guide  tutorial  code  coding 
august 2019 by piperh
CSSWAND
a few button transformations with quick code copy. Nothing unusual here but could be handy for speed. Some hover transitions and a few loading spinners
webdesign  web  design  button  hover  loading  snippets  css  gallery  animation  code  copy 
august 2019 by piperh
Building a Conference Schedule with CSS Grid | CSS-Tricks
details the building of a conference programme layout using css grid
webdesign  web  design  css  grid  layout  conference  congress  table  howto  code 
july 2019 by piperh
How I responsified my website’s typographic scale
a blog account by designer Rakesh on responsive type sizing
webdesign  web  design  type  typography  size  responsive  vw  rem  em  units  code  coding  viewport 
june 2019 by piperh
PHP Insights
they say: The perfect starting point to analyze the code quality of your PHP projects
webdesign  web  design  code  coding  php  analysis  test 
june 2019 by piperh
Find the best tech and design conferences worldwide | Colloq
online event software made by Anselm Hanneman. There's a free version though it seems limited to giving info only, not useful for registering participants
anselm  hanneman  conference  congress  event  software  online  tech  design  code 
june 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
GitHub - Raathigesh/fabulous: 🎨 CSS properties sidebar for VS Code
If I used VSC more, this could be v useful addon - generates css properties sidebar (or maybe it's a palette) for the working window
webdesign  web  design  code  coding  text  editor  vsc  visual  studio  app  application 
june 2019 by piperh
CSS Grid Generator
css grid code generator, built by Sarah Drasner. Fairly basic perhaps but good starting point. I wonder what happens to box depths when you start adding content
webdesign  web  design  tool  online  generator  css  grid  code  webdev 
june 2019 by piperh
CSS rules that will make your life easier
about css syntax and maintainability. Some stuff about naming but other considerations too. A lot of it is more relevant to large projects with many different coders, so not so applicable to me, one-man studio
webdesign  web  design  code  coding  css  naming  bem  atomic  syntax  properties 
june 2019 by piperh
The CSS Handbook: a handy guide to CSS for developers
a handbook for different skill and experience levels, but I think probably too basic for me. Has code and syntax examples
webdesign  web  design  code  coding  css  handbook  reference 
may 2019 by piperh
<base> element
make all links in a page open as target="_blank" by using <base> tag in the head
webdesign  web  design  base  html  head  code  target  blank  tab  window 
may 2019 by piperh
Diagonal Containers in CSS | CodyHouse
how to create full-width, diagonal sections in CSS using the clip-path property
webdesign  web  design  css  clip-path  diagonal  container  code  coding  angled 
may 2019 by piperh
Creating an aspect ratio CSS utility - Andy Bell
A component css solution to maintain aspect-ratio. Uses the vertical padding trick.
I didn't realise that object-fit can be used on img, not only on background
webdesign  web  design  img  object-fit  css  code  coding  aspect  ratio  proportion 
may 2019 by piperh
Hamburger 3D CSS Switch animation
codepen example of an animated hamburger icon with a 3D turn effect
webdesign  web  design  css  code  hamburger  menu  icon  animation  animated 
may 2019 by piperh
Awesome accordion menu using only HTML & CSS
nice expanding/collapsing menu with no js. Has an extra 'accordion' effect which is daft, ignore it, the main expanding feature seems good (but test it thoroughly)
webdesign  web  design  menu  expand  collapse  css  vanilla  code 
april 2019 by piperh
Make it hard to screw up driven development | CSS-Tricks
collection of tools for validating, checking and testing code
webdesign  web  design  tool  online  lint  automated  test  testing  valid  validate  code  html 
april 2019 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 
march 2019 by piperh
How @supports Works | CSS-Tricks
about the usefulness or not of @supports
webdesign  web  design  code  coding  @support  css  query  queries 
march 2019 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 
march 2019 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 
february 2019 by piperh
How To Architect A Complex Web Table — Smashing Magazine
author says: Tables frequently appear on the web but aren’t easy to design and code. This illustrated guide explains the table anatomy and how to build a table, keeping in mind its future elaboration.
webdesign  web  design  table  complex  code  coding  construct  build 
february 2019 by piperh
Palettte App
a curious tool for generating colour code - with sliders for each of hue, saturation and lightness - cool for instantly seeing the effect of changing values
color  colour  value  code  hsl  hsv  rgb  hex  palette  tool  webdesign  web  design  graphic 
february 2019 by piperh
Approaches for a CSS Masonry Layout | CSS-Tricks
Approaches to a masonry style layout without js - various css and html methods
webdesign  web  design  layout  css  masonry  alternatives  methods  code  coding 
february 2019 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read