Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I intend to recolor a website with a new palette of colors. I plan to first extract the colors from the webpage and determine its color palette and then perform a one-to-one mapping with the palette. I) Would you recommend a better approach? Regarding this approach, I have the following questions:
II) How do I extract the colors from the web page?. My guess is scraping the stylesheets of the page. However, there might be unused styles or colors corresponding to hidden elements. III) Would it be a better idea to find the visible DOM elements and see their computed colors?
IV) How do I determine what the primary colors are in the color palette of the webpage? Counting the frequency of colors or the size of the colored elements might be an option and I was wondering what would be a robust solution.
In the case, the stylesheets do not exhaustively specify the colors of the web page, the browser might use defaults. V) How do I consider the default colors as well?
Finally, VI) What is a good way to override the webpage's colors? Can this be achieved through User Style Sheets?
I) Would you recommend a better approach? II) How do I extract the colors from the web page? You can use Site Palette for this. It's an amazing Chrome / Safari / FireFox extension that analyzes a site's colors and presents them in a very organized way in just a matter of seconds.
III) Would it be a better idea to find the visible DOM elements and see their computed colors? I'm pretty sure the tool only determines the visible elements' colors.
IV) How do I determine what the primary colors are in the color palette of the webpage? This is very subjective. Some people mix all colors of a rainbow in a single webpage. It's hard to tell what the primary color is, assuming it exists.
VI) What is a good way to override the webpage's colors? Can this be achieved through User Style Sheets? The best way to override the colors largely depends on the framework you're using the level of control you have. I don't see why it can't be achieved through User Style Sheets if you're able to identify the elements you're trying to override.
I would download the images and create a palette from those using a good graphics program (like PhotoShop, Fireworks, or Gimp). Another option (also using one of those programs) would be to use the "eye dropper tool" to sample any color on the webpage that you were curious about (and give you the related rgb# so you can duplicate it).
Related
This question already has answers here:
Get default selection color?
(2 answers)
Closed 3 years ago.
I'm working on an HTML page for a client, this page contains a table with multiple line like this:
<div id="content">
<div class="line">toto</div>
<div class="line">titi</div>
...
</div>
and my client wants on a click in a line to select this line, well quite simple but he wants a specific color depending on system.
On Windows, it is simple because you only have one color for selecting text (that i'm aware of) but on Mac, you can modify this color in your settings, you can make it green, red or yellow instead of the usual blue.
So with CSS or Javascript (i use JQuery), can i get this color ?
Bonus Question :
if the user change this color in his settings, can something tell me this so that i can update my CSS ?
Unfortunately you can't get the specific color value of the highlight selection when it's the OS's default in CSS, but you are totally free to change it as you wants.
A workaround could be highlighting programmatically the text on the desired div, which would be, by default, the color defined by the system.
If you think this would be a satisfactory solution, take a look here to see some code sample.
I imagine that is imposible because the Operational System allow the user change the color pallet under your preferences.
The browser may not access this kind of information.
I hope i am wrong, but for now, i understand that is imposible.
OR
You could configure an specific CSS file for each operational system and it will be prefixed, so you can get the Operational System iformation and select the css file.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
There is an idea to create an online music theory quiz. I have created a drawing in Inkscape and saved it in svg format. The file is used as an external source and has been added to HTML code.
The challenges I have are as follows:
1) How to make lines below treble staff activate (selected)?
2) How to put the names of the notes (A, B, C, D, E, F, G) into the underlined spaces?
3) How to name the repeated notes with the same letter (e.g. "F" is repeated 2 times in my sample)?
<!DOCTYPE html>
<html>
<body>
<img src="image_library/grandstaff_drawing.svg" />
</body>
</html>
4) I have converted svg into png to show a quiz draft.
That actually involves quite complex javascripting :-) In your way, you'd have to do roughly the following:
Download the SVG as "text" (or rather XML), via XHR (e.g. $.get(image_library/grandstaff_drawing.svg))
Parse the downloaded data and create an <svg> element in the document (as opposed to <img>
Find all the notes and determine their position (on the y axis) and determine their name from that
Create all the programming necessary for the underlined spaces
Probably an easier approach would be to create the stave in the browser and have the graphics of the key and notes merely as components. Then if you'll want to create e.g. an "CDE" note sequence, you'll be positioning the note components manually. You'll have to determine the y axis offsets of each note (e.g. 60px from top for C, 55px for D, 50px for E - assuming a line height of 10px), but it will be easier than determining the same from an Inkscape SVG. You'll have to learn a bit more about how SVG works, but you'd need that sooner or later anyway :-) So the steps would be the following
Create an array in your browser, indicating the sequence to display (['C', 'D', 'E'])
Create an <svg> element for the stave and insert all the notes into it by iterating over the note array (you might want to use some SVG framework, like Raphael or D3)
Create the programming necessary for the underlined spaces area, again by iterating over the array
The advantage of this approach is that you'll have the sequence in a JavaScript variable and from that you'll build both the stave and the underlined spaces, making it easier to determine if the user matched the notes correctly. Reconstructing the same variable from the SVG, as in the first approach, is going to be quite messy and prone to errors (as even a small difference between two Inkscape SVG will mess up your programming and you'll have to cater for it).
I'd say this is a very broad question, it's basically how do I program this application. JavaScript doesn't have a function determineSequenceFromSvgStove or createBlankAreasWithFollowingCorrectAnswers Try one of the approaches above and if you run into a trouble with how to implement some of the steps, ask about them.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I wanted to create an icon in css, with an svg in between, just the way I saw in duolingo, I have given the screenshot (because you’ll have to login to see). When I saw the source, I saw that there is an svg file with all the icons as a pack, but individually they were set as icons in circles. I suppose that they have used the viewBox property in svg. I just wanted to know I guessed right, and if it is a sensible way, or should I use PNG files?
I don't know, but I guess they were using the CSS Image Sprites technique in conjunction with SVG images instead of using PNGs. This is great for when you have vector graphics and would like to support high-dpi devices ("Retina" and "4k" screens).
Putting them into the same file just reduces the network load and improves loading time. Using SVG also improves network bandwidth usages for these kind of graphics and yields the best fidelity.
So unless you need to target older browsers, using SVGs is a great idea, IMHO.
Just visited Duolingo. They use different techniques, as far as I recognize it. Indeed they cut out icons from some kind of sprite to display these. However, they also use RaphaëlJS to import SVGs which is nice, because it is very easy to manipulate the SVG afterwards.
You can use them to adapt the size of your graphics depending on the resolution of the viewer. However, be aware that older browsers don't support SVG very well (Raphaël has a great backwards compatibility here, but the browser limits still apply).
SVG are surely consume smaller amounts of storage and bandwidth. So it is up to you, if you want to use these or not. If you need to manipulate the graphics it's the way to go IMHO. However, if you need to support old browsers go with png.
This depends on if you are going to support IE8 or not. It's about 3% global usage. Unfortunately for the sector I work for, its more like 10% so I need to support it.
Inlining SVG, as you've described, is a great way to use SVG sprites. SVG elements are available to be styled by CSS so if you name your SVG elements appropriately, you could do something like:
.food-level-2 #icon-food.level-marker-2,
.food-level-2 #icon-food.level-marker-1 {
fill: orange;
}
.food-level-3 #icon-food.level-marker-3,
.food-level-3 #icon-food.level-marker-2,
.food-level-3 #icon-food.level-marker-1 {
fill: orange;
}
Which is awesome! User levels up, you change the class from .food-level-2 to .food-level-3, put a nice transition in there, and all is happy. But this is totally not supported by IE8, and hard to do a fall back for.
Background images, as with traditional css sprites, are very easy to make a fallback for.
.food-level-2{
background-image: (../img/food-level-2.png);
background-image: (../img/food-level-2.svg);
}
If the browser doesn't understand svg, it falls back to the png. Generating extra PNGs is easy if you're using something like font-squirrel or grunt/gulp. Make it a SASS mixin to write the .pngs first, .svgs second.
All is, less happy, but ok. You spend more time in Illustrator making all the possible variations. This looks like the route Duolingo choose with 1-1 png fallbacks. You still get crispy vector graphics where supported, and generally reduced load times.
I want to be able to give my users the possibility to change the color scheme of my website (skins), however I already have 3 different CSS files that deal with the responsive design. I wanted to be able to add the possibility of changing the color scheme without having to create 3 different CSS files for each color scheme, thus optimizing the amount of CSS files I have to maintain and remember to alter every time I make a change to the main CSS color scheme files.
So my question is, is there a way to say: whenever the color is #BC37ED change it to #3748ed, for instance? Maybe using JavaScript or even in the CSS file itself?
Any help is highly appreciated. Thanks!
You could create a class or classes for each scheme and then substitute based on user selection using jquery.
My script should select some items and apply Effect->3D->Extrude&bevel to them.
Which objects and methods should be used?
I use JavaScript in AI CS6.
Thanks.
--
Update: I need to set the values for effect parameters (angles, depth etc.) in script.
--
Update 2: Probably it's possible to patch an AI file with needed values for the GraphicStyle, and then open it and apply the style where needed. But I'd like to know if there is less dirty solution.
Using documents[0].selection[0].reflect.properties in ExtendScript toolkit to find out what properties basic paths have, I don’t see any way to set this effect directly.
When I search the JavaScript Reference for Illustrator, the only mention I see of appearance is when it talks about graphic styles.
So what I tried was drawing two rectangles, applying the 3D effect to one of them, and saving it as a new graphic style:
Then in the script, you can select the other rectangle and then apply the graphic style with
documents[0].graphicStyles[6].applyTo(documents[0].selection[0])
Unfortunately, the documentation does say
Scripts cannot create new graphic styles.
One thing that might be work would be to distribute a document with the script that has all the graphic styles you might want to apply, and then apply them to objects in the target document…