I am wondering if CSS can be used to style something that in being rendered by a canvas?
For example, flot uses canvas to draw the charts however highcharts uses SVG. Since SVG seems basically like a XML document, I can see that it would be very easy to style things highcharts creates with CSS. Since creating a canvas does not create any extra markup, I would think it is not possible to customize the style through CSS (though I am asking this question since I am not very familiar with canvas).
I'm not an expert, but I think that using CSS in canvas directly is not possible. But you can try to read style from other HTML element (that uses CSS) and map it to canvas using its JS API. Here is an example how it could be done:
http://tjholowaychuk.com/post/6339741902/styling-canvas-drawings-with-css
But as I mentioned I'm not an expert and maybe someone found easiest solution.
Related
So, I don't have any specific code for this project, but is it possible to use CSS and/or CSS Animations to animate an image to a random position? I know it is possible using a JavaScript canvas, but is there a way using just plain CSS? And if so, how? Thanks!
No, you cannot do it by CSS only, but you can do it with SCSS https://sass-lang.com/documentation/modules/math#random.
When the SCSS will be converted in CSS the value will be "static" again.
If you want a dynamic value every time you visit the page you need javascript.
I know there are tools to generate a sprite image and CSS from a collection of images.
But, is there a way to generate the CSS against an existing sprite image.
I was given a sprite image as-is with no CSS and am looking for a way to auto-generate the CSS instead of having to hand code it.
Like:
http://www.spritecow.com/ ?
http://www.spritebox.net/ ?
A simple Google search shows a lot of sites that will help you with this.
I'm using css3 transforms in the ayout of a website to get some 'jaunty' angles and it's really impacting the legibility of the text. Here's an example of what I'm talking about...
http://rotatetest.s3-external-3.amazonaws.com/index.html
the text in the above example makes use of css transforms and a jquery plugin for comparison, both produce the same jaggy results.
Is there any techniques for getting smoother results, perhaps something using canvas???
You could try font-smooth but I doubt that this will solve your problem:
https://developer.mozilla.org/en/CSS/font-smooth
(BTW: The jQuery and CSS examples both use the same css transform so they are equivalent - no need to post both)
Check out this demo by FaTaL. It is explained in his blog that he has used CSS3 :target and transitions to achieve this "visual sorting" of images. The target positions have been hard coded in pres.css
The problem is that my array of images is generated at real time. Here is a demo. I want to "visually sort" these images (on button click) alphabetically by file name. How can I achieve such functionality with CSS3 without hard coding the positions ? A JSON object of filename and other parameters will be available at runtime for the sorting.
I could not think of any CSS solution. So, here is my pure Javascript solution. Live at http://jsfiddle.net/uhAEA/1/.
It sorts based on the value set on each a tag's sortelm attribute.
This is exactly the kind of stuff I was looking for http://isotope.metafizzy.co/
Hope it also helps some of you out there.
I have a web app that I've recently applied a jQuery ThemeRoller theme to. Now I want to have a simple <h2> element have the same rounded-rectangular look as the dialog titlebar or datepicker title. How can I best apply these to my elements that aren't part of larger jQuery UI constructs?
I started down the path of just setting css class values manually based on what I could see inside Chrome's inspector tool, and I got part of the way there before I got nervous that this wasn't going to necessarily be the best way since I'm bypassing any css class assignment logic that might occur inside jQuery UI.
So, is there an easier way of applying those styles, or should I just go down the road of explicitly setting css styles on my headers?
There isn't any magic to the jQuery ThemeRoller CSS styles, if you look through the CSS files that it generates, you will find that they are generally clear and concise and easy enough to read.
The rounded corners in the ThemeRoller CSS will not work in IE, so you might not want to depend on them too much, but if you do, just apply the CSS using style='blah'.
stevedbrown's answer is quite correct.
You can apply rounded corners to any containing element by using the ui-corner- prefix. For example, to apply rounded corners to all four corners of a div element, you'd use ui-corner-all.
To only style the top corners of that same element, you'd apply ui-corner-tr ui-corner-tl for the TopLeft and TopRight corners.
Another possibility to the above is, if you know the CSS attributes you want to copy, you can do it programmatically like:
var defaultColor = $(".ui-state-default").css("color");
var defaultMargin = $(".ui-state-default").css("margin");
and apply these to your elements
$(".your-css-class").css("color",color);
$(".another-css-class").css("margin",margin);
etc
Kind of clunky, but it does allow your CSS developers to update the themerolled themes and you don't have to worry about updating any of your code anymore.