Very cool brushed aluminum effect in pure CSS. simurai: Tried to make a Brushed Metal style in CSS3. The texture is done by using 3 repeating-gradients with different length. That makes it look somewhat random. For the linear version, browser support is pretty ok, but for the radial one it’s not quite there yet. I think only in Safari 5.1 and Chrome Windows. In addition I tried to add a conical gradient for the circle with just faking it with ellipse gradients. It’s ok for low contrasts and if you cover the middle part with an icon or so.. hehe.. ;-P A much more real looking technique is used in this experiment, but I believe it currently only works in Safari and Chrome Windows. Let’s hope that CSS4 will add support for real conical gradients. See live Demo.
View Separately

Very cool brushed aluminum effect in pure CSS.

simurai:

Tried to make a Brushed Metal style in CSS3. The texture is done by using 3 repeating-gradients with different length. That makes it look somewhat random. For the linear version, browser support is pretty ok, but for the radial one it’s not quite there yet. I think only in Safari 5.1 and Chrome Windows.

In addition I tried to add a conical gradient for the circle with just faking it with ellipse gradients. It’s ok for low contrasts and if you cover the middle part with an icon or so.. hehe.. ;-P A much more real looking technique is used in this experiment, but I believe it currently only works in Safari and Chrome Windows. Let’s hope that CSS4 will add support for real conical gradients.

See live Demo.

Source: lab.simurai.com

315 Notes/ Hide

  1. une-assurance-sante reblogged this from simurai
  2. liviadobre reblogged this from simurai
  3. rubonreliefreview reblogged this from simurai
  4. topagentwebsites reblogged this from simurai
  5. debtconsol-dat-onloan-me-14 reblogged this from simurai
  6. wire-rod reblogged this from simurai
  7. imaboyandjuszakidd reblogged this from simurai
  8. stickers-muraux reblogged this from simurai
  9. animal--sex reblogged this from simurai and added:
    my buddies are all here
  10. la-mutuelle-sante reblogged this from simurai
  11. une-assurance-auto reblogged this from simurai
  12. net-mutuelle-sante reblogged this from simurai
  13. pneu-moins-cher reblogged this from simurai
  14. maillot-de-football-pas-cher reblogged this from simurai
  15. ac-voyage reblogged this from simurai
  16. achat-de-pneu-pas-cher reblogged this from simurai
  17. halong-dragon-cruise reblogged this from halong-paloma-cruise
  18. halong-paloma-cruise reblogged this from simurai
  19. japanese-av reblogged this from simurai
  20. poele-a-bois-et-granules reblogged this from torty123
  21. ben-sturtevant-lightyear reblogged this from simurai
  22. happywormy reblogged this from simurai
  23. le-pneu-pas-cher reblogged this from simurai
  24. euvreau reblogged this from drzhubuakrok
  25. referencement-caen reblogged this from simurai
  26. blacktiecollective reblogged this from tochigi-japan
  27. okadapan reblogged this from simurai
  28. assurance-en-ligne reblogged this from jesseddy
  29. tochigi-japan reblogged this from ninedaysoff
  30. florida-windows-and-doors reblogged this from simurai
  31. gun-purse reblogged this from simurai
  32. simurai posted this