I am a UI developer. My question is suppose I have provided an image from client, now with this image is it possible to detect its CSS properties that is what is the font size used in a particular area, what is the color, width, margin, padding etc through some software or tools like adobe Photoshop etc.
If yes can I get some link or tutorials of how to do that .
Any help is appreciable .
Thanks !!!
If you are looking to detect css properties in chrome right click on the element you wish to see the css properties of, then go to inspect, you will see all the css styles associated with that element on the right side of the developer tools window that opens. Personal tip, click the computer tab on the right of styles to get an easy overview of what is actually rendered.
for a tutorial check out https://developer.chrome.com/devtools
You can use Photoshop's ruler and guides (Gimp can also do that) to measure things like width and margin.
As for font size I would just create a text layer in Photoshop, position it above the text in the image and eyeball it for size.
EDIT: As requested here are a few useful links:
Official Photoshop Documentation
Photoshop Measure Tool
Related
webflow editor
resulting page
I have been trying to reset the backgrounds on my web page to white and I have removed all the section background colors in the webflow editor but for some reason the resulting webpages still have the background colors I have removed.
Inspect the element using your browser's Developer Tools by right-clicking on the element and choosing "Inspect".
Look in the computed CSS panel to see which which class the offending style is being inherited from.
Style that class so that the element is inheriting the desired style.
Shawn's suggestions are really good. Highly recommend starting with them.
In addition:
Check for divs/layers which has absolute positioning. They could be used as background fillers
Check for animations/interactions. There could be custom animations created which on load or on scroll change specific elements' background colours.
But to tell clearly, you could provide a read-only link from Webflow. It would be easier to diagnose
I'm looking at this site: http://www.calgaryclimbing.com/rates/ . On their footer they have very clean looking icons that link to their social media pages. I want to do the same using the same icons they are using. But when I inspect the elements It shows that they use an i tag and that the class links to some css code that uses the content property. I want to use the image icon so my questions are how can I get the image? And why was it programmed this way? Why not just use an image that you could click on?
I didn't check the link you provided but it's most likely a custom font just like Font-Awesome which you can use to put many kind of icons in your Web Site/App.
Font-Awesome use the <i> tag as well just like you explained.
Why using Font-Awesome?
As they say:
Font Awesome gives you scalable vector icons that can instantly be
customized — size, color, drop shadow, and anything that can be done
with the power of CSS
I really like what this website has done with their CSS layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.
Site: http://www.fssjax.org
Thanks
Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).
After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.
Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.
Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.
Inspect an element, look at the css then Google to find out what the css does if you aren't sure.
Well ok, it's kind of a crap navigation though...
Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.
And like the others said, use Firebug to figure out what everything is doing.
I do all my css work with firebug, using the up and down arrow keys to adjust top and left values.
Anyone come across a firefox addon that lets me drag stuff around and then copy and paste the top and left values?
edit: I have changed the question slightly from 'easier' to faster. Sorry for any confusion, I am not a beginner looking for tools to help me write css, simply to speed up my positioning slightly!
I use the MeasureIt addon for Firefox, which gives you a ruler. Drag from where you want the element to the top left of the screen and it'll give you the absolute position. You might need to adjust for scrolling but it shouldn't be too hard.
I do the measurement part in Fireworks, Photoshop or any drawing program (Photofiltre, Paint.NET, etc or The Gimp), based on a template I was given. Not in the browser. And I certainly don't use absolute positioning for layout!
That said, here are some tools I found useful:
MeasureIt
Pixel Perfect overlays a PNG over the page
many plugins for Firebug exist, they can be found here: http://getfirebug.com/wiki/index.php/Firebug_Extensions . XRefresh and a dual screen for example. Firediff could match your needs
https://chrome.google.com/webstore/detail/hjpdnlklajjpbihamlcpllppegpekicg
I made this because I agree with this question. It allows you to inspect and drag an element. Your new coordinates, calculated by Firebug will be updated when dragging ends.
Use dreamviewer, when you set css to absolute, in the preview mode you can drag and drop your element where ever you please two and CSS is generated automatically with the positions top, left where you placed your element
This is FF plugin
http://www.pixelperfectplugin.com/
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
Read more: http://pixelperfectplugin.com/how-to-use/walkthrough/#ixzz0eOfezx1N
How to get mockup image behind all div like this plugin does.? this tool only shows design behind layout only on firefox and i want to see on all browser.
I found the way here
http://aloestudios.com/2008/08/pixel-precision-with-diagnostic-css/
Well if you want it behind then simply setting it to the background image of body or html would work. If they need to be styled with bgimages or colors as part of the design then i suppose you could throw another div in the dom with position absolute and set the z-index to 0 or -1 depending. IF you want it to overlay the dom then you could do same thing only using an insanely high z-index and then setting the opacity. That would interfere with direct point and click inspection on the layout i think but you could still get to the elements form the html pane.
Obvoiously no method short of developing in pure js somehow is going to give you the features of a browser plugin.