UIs, Functional Programming, Architecture, Category Theory.
Working on UIs at @unisonweb
Currently writing a book on collaboration in software: Programming is Collaboration
Generate CSS tooltip arrows
Home Page: http://cssarrowplease.com
License: MIT License
UIs, Functional Programming, Architecture, Category Theory.
Working on UIs at @unisonweb
Currently writing a book on collaboration in software: Programming is Collaboration
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
becomes filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
The glorious arrow now casts a shadow!
Support is webkit only at this point, but I think that a little progressive enhancement couldn't hurt, either way I think it's a technique that is relevant to the interests of those using this tool.
I think "::" is more appropriate for before after elements.
Just add a fallback that uses background-color: transparent instead of rgba.
/* Fallback for IE8- which doesn't understand rgba */
border: 20px solid transparent;
/* Feed rgba to other browsers (FF PC needs it to avoid a bug) */
border: 20px solid rgba(255,255,255,0);
make sure everything works in IE10
Will be awesome if you can add a new field to change the class name: .arrow_box
in all the generated css code.
Just wondering if your URL cssarrowplease.com got hijacked or something as is leads to www.avatsea.com
Go to cssarrowplease.com on an iPhone. Zoom in on the arrow. You see a very thin line at the base of the arrow.
What's the deal with pointer-events: none
on the pseudo elements? Wouldn't that only cause suppporting browsers to ignore all pointer events coming in on top of the arrow? In practise, wouldn't that prevent the user from being able to scroll or pinch using the fingers when that gesture starts on top of the arrow?
Or is there a good reason to have this rule?
...In which case, -ms-pointer-events
should be added.
Hi, I am learning react.js recently.
cssarrowplease is awesome!
So I rewrite it with react.js, same UI, minor improvement added.
e.g.
realtime change
copy code generated
responsive layout (mobile first)
Hi. Thanks for the code, looks good. I just wondered though, why would you use CSS3 for this? If you added a HTML DIV for before and after, then you dont need to use CSS3, therefore this would work in IE8 and below.. at the moment it doesn't. So with some simple changes you can make it work.
The built files in /static are named after the md5 hash of their contents. This means you can change your cache strategy for those files to add a far future expires and let the browser cache heavily.
When the corner is anywhere except on top you can see there is no shadow on it.
Maybe you can replace the box-shadow with a filter.
Example here http://dabblet.com/gist/3820382
Hi
How can you add a drop shadow to the border including the tip?
Thanks
Seems redundant, no?
:after
and :before
are relics left over from their CSS2 implementation. In the CSS3 module, these are defined as ::after
and ::before
. The only reason browsers still support the single-colon syntax is to prevent the CSS2 syntax from not functioning as intended.
Is it possible to add this to the demo? I'd like to have either divs with a background image and the arrow out at the botto, if possible. OR, it could be helpful to see a box with a triangle cut out of it at the top. Just a couple of things I've wanted in the past, thanks for making the cool app.
Arrow becomes bigger then container and protrudes out the sides after certain size.
(i.e. when pointing to the left, the other two corner of arrow starts showing after 150px.)
Just a request :) I'm not that adept in backbone but i can try doing this if no one does it by next week.
In stead of pixels, I prefer setting sizes of elements in ems whereever possible. It makes sense for font-zooming, which would also cause the arrow to become bigger, which may be very sensible depending on the use-case.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.