4549
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 
2 days ago
Clippings | Furniture & Lighting | From Inspiration to Installation
site aimed at interior designers - mostly furniture and lighting, + a few accessories
furniture  lighting  interior  design  architect  designer 
2 days ago
Iconfu - Get Icons in your Color and Style
a library of vector icons. Nice professional images but not all free. Free collection is called 'Material'
icons  vector  library  graphic  design  web  colour 
3 days ago
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 
4 days ago
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 
5 days ago
Bookswarm | A digital agency dedicated to the world of books
they say: We are a digital agency dedicated to the world of books
webdesign  web  design  examples  inspiration  books  digital  agency  graphic 
5 days ago
Home | Marina Warner
Marina Warner's site. Made by Bookswarm.co.uk
website  marina  warner  author  books  writing  writer  academic  mythology  feminism 
5 days ago
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 
6 days ago
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 
6 days ago
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 
6 days ago
What's the best Windows all-in-one or iMac for illustrators? | Technology | The Guardian
feb 2019, an 'Ask Jack' article titled:
What's the best Windows all-in-one or iMac for illustrators?
Interesting tips and advice and specs
guardian  ask  jack  mac  pc  imac  macbook  advice  tips  work  computer 
7 days ago
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 
7 days ago
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 
7 days ago
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 
10 days ago
How to: Back-to-top button without scroll events - Signal v. Noise
intro says: Web developers: here’s an alternative way to build UI features that rely on scroll position without actually observing scroll events. Using the Intersection Observer API ...
webdesign  web  design  backtotop  back  top  scroll  browser  window  layout  intersection  observer  api  viewport 
10 days ago
Designing Layouts for Screen Readers
title: Designing Layouts for Screen Readers. About the experience of using a site with a screen reader
webdesign  web  design  accessibility  accessible  screen  reader  layout  aria 
12 days ago
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 
12 days ago
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 
13 days ago
wiv.js
js library for animated wavy borders
webdesign  web  design  js  javascript  script  border  wavy  animated  animate 
13 days ago
Shapy | Gradient Generator
gradient shape editor that generates the css code
webdesign  web  design  css  gradient  tool  editor  generator  code  experiment  try  test 
13 days ago
S.P.E. Maquinaria para serigrafia SL
Screen Printing Engineering.
Fabricantes de maquinaria para serigrafía a nivel mundial.
Dreadful ancient website - potential for being a client?
serigrafía  screen  printing  machinery  print  technical 
14 days ago
Josep Tobella
website of a teacher and expert in screen printing
screen  printing  serigrafía  expert  teacher  spain  barcelona 
14 days ago
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 
16 days ago
ANESTORE | Stockist de papeles G.F. SMITH y Colorplan para España y Portugal
Ane Store. GFSmith paper importer for Spain.
Calle Moliné 5, Local, 08006 Barcelona - off Aribau, Gracia near Carmen's place
paper  spain  importer  gfsmith  colorplan  design 
17 days ago
The Actual Browser Problems with Unquoted Attributes | CSS-Tricks
about using quote marks to enclose attribute value in html. In html5 it's optional and only required if there's a space (and a few other characters as well). So if an item has two or more classes you must enclose in quotes.
If in doubt, use quote marks always (though you don't have to)
webdesign  web  design  webdev  development  code  coding  html  attribute  quote  quotemark  value  space 
18 days ago
An artist's paintings of East End London are finally gaining recognition - BBC News
bbc news item: An artist's paintings of East End London are finally gaining recognition
bbc  painting  doreen  fletcher  east  london  nunnery  gallery  art 
25 days ago
La inversión directa en bolsa rinde el doble que los planes de pension
El Periódico article showing terrible results and high commissions and lack of transparency in private pension plans in Spain. Better to have invested directly in the bolsa
spain  pensions  investment  plan  private  funds  stock  exchange  periódico  direct  stocks  shares  management 
25 days ago
TOAST UI :: Make Your Web Delicious!
service that renders charts and graphs on your site. Don't know how it works or how it draws in the data, but looks v interesting.
webdesign  web  design  chart  graph  graphic  bar  pie  line  js  javascript  script  column  data 
25 days ago
Old Versions of Mac Software - OldVersion.com
downloadable versions of older software - browsers, skype, adobe reader, flash and other categories
software  version  old  older  downgrade  application  mac  pc  linux 
27 days ago
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 
28 days ago
140 HTML Color Names - html-color-names.com
list + swatches of html named colours, with their hex and rgb refs
webdesign  web  design  webdev  development  html  colour  color  colors  name  names  code  hex  rgb  reference 
28 days ago
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 
29 days ago
Sweet on Cuba: riding the Hershey town train | Travel | The Guardian
Guardian article on the electric train built by Hershey for sugar transport, Cuba
train  cuba  hershey  sugar  travel 
29 days ago
Riding Canada’s Skeena train: from Jasper to the Pacific | Travel | The Guardian
Guardian article on Canadian train journey + five more scenic routes including from Nice
travel  train  journey  trains  canada  nice  france  russia  baikal  norway 
29 days ago
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 
4 weeks ago
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 
4 weeks ago
SortableJS
JavaScript library for reorderable drag-and-drop lists
webdesign  web  design  js  javascript  script  reorder  reorderable  list  shared 
5 weeks ago
How Secure Is My Password?
Gives a time for how long a computer would take to crack a password.
I wonder how reliable this is - does it allow for dictionary attacks?
password  check  security  tool  online 
5 weeks ago
Quad9 and DMARC free cybercrime protection | Action Fraud
Quad9 and DMARC have been set up by the Global Cyber Alliance (GCA). The GCA is a non-profit organisation aimed at tackling cyber crime set up by New York County District Attorney, City of London Police and Center for Internet Security.
Quad9 uses dns 9.9.9.9 - blocks connection to known malicious sites.
security  dmarc  quad9  dns  phishing  malicious  email  cyber  crime  fraud 
5 weeks ago
Tell Google about localized versions of your page - Search Console Help
Google Search Console Help page about sitemaps and alternate language links. Shows example content
webdev  web  development  seo  google  sitemap  xml  alt  alternate  language 
5 weeks ago
Corbyn urges vote of no confidence to oust 'zombie government' | Politics | The Guardian
handy calendar graphics explaining timetable of possible no-confidence vote results
brexit  calendar  news  guardian  vote  no-confidence  parliament  uk  eu  timetable 
5 weeks ago
Minimal Google Analytics Snippet | Minimal Analytics
author says: A snippet for tracking page views on your website without having to add external libraries. No need to add Google Tag Manager and Analytics libraries. Do not use if tracking AdWords.
webdev  seo  tracking  analytics  code  snippet  google 
5 weeks ago
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 
5 weeks ago
Pie Charts · ChartGen
brilliant chart generator - you input the data, gives code as svg. Pie charts, bar graphs, line graphs. Would be great for PIRC charts. Use image in Quark to draw on top, or import svg file into Affinity.
webdesign  web  design  graphic  chart  generator  bar  graph  line  pie  svg 
5 weeks ago
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 
5 weeks ago
Meta Tags — Preview, Edit and Generate
they say: With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!
Tool for generating meta tags
webdesign  web  design  webdev  development  meta  tag  generator  twitter  google  facebook  seo  tool 
5 weeks ago
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 
5 weeks ago
autoComplete.js - Vanilla Javascript library
they say: Simple autocomplete pure vanilla Javascript library.
Not v impressed by demo, but maybe it depends on database/dictionary that it draws from.
webdev  web  development  js  vanilla  autocomplete  form  search  field 
5 weeks ago
jquery - JavaScript EU cookie law banner not removing - Stack Overflow
an important mod for the cookie consent code found at
https://gist.github.com/bavington/6727776
This mod solves the problem on tria site where it prevented the onload script in body tag from adding the .loaded class.
cookie  law  eu  gdpr  consent  privacy  comply  compliance  code  modification  modify  stackoverflow  user  js  javascript  script 
6 weeks ago
Cookie-Script: free GDPR compliance for cookies
a cookie consent service. There's a free version but doesn't work with https. Cheapest paid is 3€ month (jan 2019)
consent  cookie  privacy  gdpr  compliance  eu  comply  law  service  webdesign  web  design  webdev  development 
6 weeks ago
Simple EU Cookie Law Banner JavaScript · GitHub
cookie consent code that I used on barcelonaprints and tria.
It clashes with some js "onload add class" code I wanted in the tria body tag.
This stackoverflow page solved the problem on tria: https://stackoverflow.com/questions/32573965/javascript-eu-cookie-law-banner-not-removing
webdesign  web  design  webdev  development  code  privacy  gdpr  consent  cookie  js  javascript  script 
6 weeks ago
Discover Unique - Save time and make smarter font choices!
as far as I can tell this tool generates variations (distortions of existing fonts, and they call them unique fonts
webdesign  web  design  graphic  font  typography  generator 
6 weeks ago
Cool Backgrounds
interesting backgrounds: trianglify etc plus the web code for installing on a site
webdesign  web  design  graphic  background  image  colour  gradient  animated  generator  code 
6 weeks ago
How to Password Protect a Directory on Your Website (thesitewizard.com)
How to Password Protect a Directory on Your Website - must have Apache server. Content not encrypted, protection is basic. I expect that the hosting service could certainly access the pages.
password  protect  site  website  apache  htaccess  htpasswd 
6 weeks ago
How to Password Protect a Site Using Htaccess
outlines how to use htaccess to password protect a site or portion of a site. This method is native to Apache I think though article doesn't mention that. From dynomapper blog.
htaccess  password  protect  private  website  site  htpasswd 
6 weeks ago
Somos tipos de letra | Babelia | EL PAÍS
article from Babelia 5.1.19: 'Somos tipos de letra'. Some nice image samples, too.
typography  graphic  design  type  elpaís  newspaper  spain  babelia  momento  tipográfico 
6 weeks ago
Mockuptime: Free realistic device mockups
some photos to use in mockup visuals, esp mobiles and computers
graphic  webdesign  web  design  mockup  visual  layout  image  resources 
6 weeks ago
« earlier      
@font-face about accessibility accessible android animate animated animation app apple application archive art background barcelona blog browser button carousel cart catalunya character client cms code coding colour compatibility competition conference congress content convert css css3 data design designer development device digital display drawing dropdown ecommerce edit editing editor effect effects element email embed example examples explorer facebook file flex flexbox font fonts form format foundry framework free gallery generator google graphic grid guardian guide height host hosting hover howto html html5 http icon icons ideas ie illustration image images information inspiration internet ios ipad iphone javascript jquery js language layout learn learning library link list load loading mac management marketing media menu mobile modal music navigation network online optimisation optimise osx page pattern performance photo photography photos photoshop php pixel plugin popup print privacy queries reference resource resources responsive screen script scroll search security seo server service shop shopping site size slide slider slideshow social software spain speed sticky stock studio style support svg syntax system technique template templates test testing text tips toggle tool tools touch transform transition travel tria triairemena tutorial tutorials type typeface typography ui vanilla vector video viewport virtual web webdesign webdev webfont webfonts webpage website width window windows

Copy this bookmark:



description:


tags: