firefox   159409

« earlier    

Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor - Mozilla Hacks - the Web developer blog
The shape of your elements can be controlled with just two CSS properties: shape-outside and clip-path.

The shape-outside property changes the way content flows outside of a floated DOM element. It affects layout, not drawing. The clip-path property changes the clipping boundary of how the DOM element is drawn. It affects drawing, not layout.
clipping the image of a kitten into a circular shape

The clip-path and shape-outside properties.

Because these two properties are separate, you can use one, or both, or none — to get just exactly the effect you are looking for. The good news is that both of these use the same basic-shape syntax.

Want to clip your image to be in a circle? Just use clip-path: circle(50%). Want to make text wrap around your image as if it were a circle, just use shape-outside: circle(50%). The shape syntax supports rectangles, circles, ellipses, and full polygons. Of course, manually positioning polygons with numbers is slow and painful. Fortunately there is a better way.
The Shape Path Editor

With the Shape Path Editor in Firefox 62, you can visually edit the shape directly from the CSS inspector. Open your page in Firefox, and use Firefox Developer Tools to select the element whose shape you want to modify. Once you select the element there will be a little icon next to the shape-outside and clip-path properties if you have used one of them. If not, add shape-outside and clip-path to that element first. Click on that little icon to start the visual editor. Then you can directly manipulate the shape with your mouse.
css  firefox  design  text  typography  Web  nmd305  ++++- 
31 minutes ago by jonippolito
Private by Design: How we built Firefox Sync - Mozilla Hacks - the Web developer blog
Authentication Token を1回挟むってことか。パスワードから Token を生成できると、パスワード送られた人はトークンを作れてしまう...?
mozilla  firefox  security  privacy 
13 hours ago by summerwind
VisBug
Browser based open source web design tools. For tinkering.
chrome  firefox  browser  design  tool  plugin 
3 days ago by garrettc
Private by Design: How we built Firefox Sync - Mozilla Hacks - the Web developer blog
Firefox Sync by default protects all your synced data so Mozilla can’t read it. We built Sync this way because we put user privacy first. How it works is...
firefox  mozilla 
4 days ago by tonys
Private by Design: How we built Firefox Sync - Mozilla Hacks - the Web developer blog
Firefox sync keeps data secure from Mozilla by using the passphrase to generate 2 keys - one authenticates to Mozilla's servers and the other is used to encrypt/decrypt *in the client*. Article discusses why they thought this approach was better for users than several alternatives used by other browsers.
privacy  security  encryption  firefox  via:HackerNews  design  architecture  chrome  browsers 
4 days ago by mcherm

« earlier    

related tags

++++-  1password  2017  63  65  a11y  aardvark  accessibility  adblock  adblocking  adblockplus  added  adding  addon  addons  advertisement  alternativeto  analysis  and  android  apache  architecture  backup  best.practices  bitbucket  boomark  breaches  browse  browser-extensions  browser  browsers  browsing  bug  cake  carlo  chrome/chromium  chrome  clipboard  code  color  commits  competing  configuration  container  containers  contentdisposition  contrast  cookies  css  dark  darkmode  data  debugging  design  desktop  developer  development  devtools  disable  dns  documentation  dropbox  electron  elementhiding  email  encryption  enhanced  essential  extension  extensions  facebook  favicon  ff  fonts  for-toni  formatting  fuckery  fuckgfw  fun  gecko  gentoo  github  gitlab  gmail  google-chrome  google.analytics  google  gpedit  graphics  how-to  howto  icons  image  in  infosec  javascript  kaios  keyvalue  lang-en  leaky  linux  lukas  management  markdown  mimetype  mode  more  movein  mozilla  network  networking  new  nmd305  node  nodejs  nov18  now  offer  on  opensource  opera  os  password  photography  platform  plugin/addon/extension  plugin  plugins  privacy  programming  protection  protonvpn  quantum  recommended  reference  released  rendering  rozszerzenie  s  safari  safety  screenshot  screenshots  search  security  selenium  setting  shows  sites  software  solution  sourcegraph  sports  stylerific  success  successmentors  support  surveillance.capitalism  sync  tab  targeting  technique  test  text  thunderbird  tips  to  tool  toolkit  tools  tor  tracing  tracking  troubleshooting  tutorial  tutorials  typography  userchrome  usercss  userjs  users  userstyles  via-irc  via-robacarp  video  vim  vpn  vuejs  warelogging  warnings  web-development  web  webdev  webext  webextension  webmaster  webp  webrtc  whatever  windows  with  workarounds  xpi  yt  zoom  扩展  浏览器 

Copy this bookmark:



description:


tags: