Tag Archives: Chrome

CSS Shapes Editor is now on the Chrome App Store

You know how magazine layouts often wrap text around non-square pictures? It is now possible in CSS3 and Chrome has a plugin that will create the CSS code for you.

 

Interactive editor for CSS Shapes.

Create and adjust CSS Shapes values with an interactive editor overlapping the selected element.

Requires Chrome 37+

Shapes sidebar:

The extension adds a new sidebar to the DevTools Elements panel called “Shapes”. It offers controls to create and edit CSS Shapes values like polygon(), circle() and ellipse() on the selected element.

Polygons:

Click the edges of the shape to add new points. Drag points to change the shape. Double-click an existing point to remove it. Select the transform tool to move, scale and rotate the polygon shape.

Circles & ellipses:

Drag the shape to move it around. Pull on the edges and corners to scale and resize.

Read more from the source: google.com

CSS Triggers… A game of layout, paint, and composite

Try out this tool for looking up the layout, paint and composite operations that each CSS property triggers

 

Paul Lewis introduces his tool with a blog post at http://aerotwist.com/blog/css-triggers/

I wanted to create a tool that would allow developers to more readily understand the ramifications of changing their styles. I’m pleased with the first release of CSS Triggers, and I hope many folks get good use out of it. I have plans to expand the site a bit more so that the reference has context, not just a load of data, but I’m not sure exactly when that will be.

Putting together the site was fun, and involved a heck of a lot of tool and data wrangling, but in the end I like to think it was worth it. But then I would say that…

Read more from the source: csstriggers.com

Responsive Web Made Easier with Chrome DevTools Device Mode

Use the Chrome Dev tools for simulating mobile devices and visual representations of media queries used for the page

 

Ne features include the following

– Choose the device by name and resolution

– Emulate mobile network speeds of G3 and EDGE

– Emulate touch, geolocation and accelerometer

– Remote debugging on Android devices that are plugged in via USB

– Visualize DOM layers to find painting jankiness including a Paint Profiler tool

Read more from the source: GirlieMac Blog