recentpopularlog in

piperh : shape   18

Get Waves – Create SVG waves for your next design
online tool, creates waves and generates svg code. When would you want this?
generator  tools  svg  webdesign  web  design  graphic  waves  illustration  image  shape 
18 days ago by piperh
Art Direction For The Web Using CSS Shapes — Smashing Magazine
about using css shapes in web page layout. He mentions using the alpha channel of images - check that out
webdesign  web  design  css  shape  layout  shapes  graphic  alpha  channel 
april 2019 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
Fancy Border Radius Generator
generates code for corner radius (border-radius) using 8-figure syntax. You can experiment and get interesting effects, 'specially setting one or more corner to 0. Has draggable corner points. Handy.
webdesign  web  design  code  generator  border-radius  border  corner  radius  shape 
october 2018 by piperh
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 
september 2018 by piperh
3 Ways to Create Angled Edges With SVG
they say: In this tutorial you’ll learn three ways to create easy angled edges using SVG.
webdesign  web  design  svg  angle  angled  edge  box  shape  background 
august 2018 by piperh
New CSS Features That Are Changing Web Design — Smashing Magazine
Not especially great explanations of new css features. Long part about grid, then shapes and clip-path. But some handy refs to grid resources, esp. Rachel Andrew
webdesign  web  design  css  grid  shapes  wrap-around  runaround  wrap  around  run  flow  shape  clip  path 
may 2018 by piperh
How to Hand Code SVG
tutorial on hand-coding svg shapes: "... you can hand-code simple shapes quite easily, without needing to open a graphics application."
webdesign  web  design  graphic  vector  svg  hand  code  coding  inline  shape  element 
april 2018 by piperh
Obliterate Boxiness with CSS Shapes - YouTube
18.4.18 I didn't know about this possibility for text runaround in css. At the moment only works in Chrome and Safari (and their mobile versions), but fallback is OK - shape reverts to a box.
webdesign  web  design  css  shapes  video  runaround  shape 
april 2018 by piperh
Clippy — CSS clip-path maker
handy code generator for css clip-path. Live demo of result + copyable code. (Use this to generate polygons for css shape-outside?)
webdesign  web  design  code  coding  clip-path  image  css  generator  shape  points 
february 2018 by piperh
Creating Non-Rectangular Headers | CSS-Tricks
css-tricks article on 4 methods for angled headers in css and svg and background image. The summary says best is svg.
There's a curious fill: usage that I didn't know about - not clear if it's usable
webdesign  web  design  css  non-rectanular  shape  angle  header  techniques  methods  code  coding  svg  background  border 
february 2017 by piperh
Tips for Creating and Exporting Better SVGs for the Web
article by Sara Soueidan about creating vector illustrations for later animating on the web. Highlights difference between shape and path and resultant vector svg code.
webdesign  web  design  graphic  illustration  ai  svg  vector  path  outline  shape  illustrator  export  format 
december 2016 by piperh

Copy this bookmark:





to read