I am messing around and created a neat web layout in Photoshop. I then sliced it up and exported all of the Images and HTML to Dreamweaver. However, it turns my layout into tables. This is a problem because I can't get it to fit all screen resolutions. Does anyone have a quick fix or some advice on how to get my slicing converted to CSS?
You aren't going to get an automated thing like that to work the way you want it to. It's why I started coding. When slicing your psd think about it in the layers it is in, then you will have to figure out how to css it all together. It's alot to learn, but once you get your awesome psd working as an active web page you will realize how worth it it was.
Related
I see a lot of designers that make shapes on the website. For example, a curvy purple line like shown in here: https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs3/146762996/original/c5c40fc15550b852236414d3984f178e6b976e51/create-a-unique-and-creative-website-for-your-brand.png
My question is, assuming that I am a front-end developer and my boss gives me the files from the designer and asks me to implement this design into the website, how do I do that?
Is it just a one picture that I will get in many different width's and will have to use as a background and fit the text in with breakpoints?
Sorry if that sounds like a stupid question, but I always wondered about websites with weird shapes
For "weird" shapes you can always play around with the clip-path property. Mozilla's dev tools give you awesome ways to play around with it and create a customized shape
Is there a way to create a background like so in css? I didn't know how to describe it so google coudn't help me. Thanks!
You might be able to do it with an SVG image, but be aware that the support could be spotty. It would probably be easier to just create it in Photoshop or GIMP and make it really big (say 1620x1080)
A quick search on CSS and SVG backgrounds came up with this page; but it's from 2009.
I'm a real noob with css and have seen many times, many little icons in a larger file. I'd like to know if I can use something like this for a rating system that I'm making. 5 stars being the best and one being the worst. I'd like to be able to use a single file that contains all of the stars and then based on the rating, show the proper rating. I'm used to doing it the old way by slicing up the images and then showing the rating that way.
What is this and where can I find more info on it?
This is a technique known as CSS sprites. The main advantage is that you save some (or sometimes, a lot) of HTTP requests.
You can read about them here, for example, and one good article to read is also this one on diagonal CSS sprites.
When you come to building your own, there's a lot of tools around that will assemble smaller pictures for you and also generate matching CSS with the proper background-position values.
Try searching for CSS sprites - here's a decent intro
http://css-tricks.com/css-sprites/
and SpriteMe is is a funky little bookmarklet that does the heavy lifting of creating the sprite image for you
http://spriteme.org/
Both links point in turn to other reading for you
It's called css sprites.
its called "css sprites" look on this article, with example how to do it to rating image:
http://www.last-child.com/image-sprites-flexible-and-accessible-packages/
i'm using css to make a webpage and i have been stuck on this problem for a while. i have seen other website resize according to the resolution of someones monitor. i don't know much about css or any other things like it. can anyone tell me how i might accomplish this? my website is
http://ryanlaurence.com/
It's typically done with CSS, and called a liquid layout or fluid layout.
There are a lot of sites out there that describe various ways to do it.
I'm trying to accomplish something like this (http://picturegroup.com) , where you have images displayed in several columns, but as you resize your browser, columns will (dis)appear so to fit what you can see on the screen.
Any ideas on how can I do this (links, etc)?
Thanks!
PS: Bear in mind that I'm quite a ASP.Net noob
The site uses a css property called float.
Here is a link to a tutorial
http://css.maxdesign.com.au/floatutorial/