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.
Related
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 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.
I've observed that often the websites use only one background image which contains multiple images on it. For example, instead of using separately icons, all of the icons are put on one image and then the different parts of image are used in different section.
Is there any advantage to this?
How can this be used?
For example, for the following Stack Overflow sprite, how would I display just one of the images?
The technique is called CSS Sprites. Basically you use CSS's background-position property and fixed height or width for your element.
If your elemnts are fixed width and fixed height at the same time you can freely create a more compact image. See this site for more complex examples.
You are talking about CSS sprites, in which the background position changes on hover. Learn more here:
http://css-tricks.com/css-sprites/
Change the css property background-position.
yes , using sprites is good for website performs because every single component on website send different http request .So, when we use sprites images the http request become less & website performance increase.That rule is also apply on css also less css files less http request. you can yourself with the help of safari web inspector.
for more better performance download "yslow"
And with CSS sprites is also possible to make e.g. menu button hover effect without waiting until second image loads. see
It has the advantage that only one image needs to be loaded so that things like hover (roll-over) effects are faster. The technique is usually called "CSS sprites". Google for it.
It has been common for a while to put two images on one sprite sheet, but the tendency has been moving towards combining ALL of your background images on the same sprite sheet to load just one file for all of them. There's a rather good tutorial here.
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.
I have one question..
I am using Asp.Net C# With SQL 2005
I have one grid in that and in grid i put one image box and i want to call image from my css.
when i use ImageUrl="~/Images/delete_link_thumb.gif" at image level then image is good but when i call from css through background-image:url(images/edit_link_thumb.gif); then image display is not good
Any suggestion??
Thanks
Path is the CSS is relative to where the CSS is stored in the web site.
as Fabian mentioned, try using background-image:url(/images/edit_link_thumb.gif);
firstly, ur referencing two different images in your question, besides that it depends on where your storing your stylesheet as it is relative to where it is in your project, try adding ../ in front of your images folder reference, like so:
url(../Images/blahblah.gif);
The case is ...
If you use Image url directly it effects the image-box and its the default property of that box and as the css you are applying is not the default so it can also possible that it doesnt take the exactly size or it gives some additional padding or so in your css
so if you are using background property of css then you should supply the position argument also such as center center or whatever fits