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 9 years ago.
Improve this question
I am new to web design, and am struggling to get my head around the design aspect.
Let me be more specific in my question...do most people make their websites look attractive, with 3d boxes, shadow effects, textured backgrounds etc with CSS entirely? Obviously photo editing would be done elsewhere but being new to CSS it is hard to see how it could be as powerful as using a piece of software.
For example - the website below...would the main nav bar at the top (with a different texture to the background), , the actual background and the box with Online 3d kit builder etc all be designed using CSS or do designers tend to create those types of objects elsewhere and just reference them as images in CSS code?
And referring to the images just below the main picture, would they have the link bar put on them with CSS or in another programme?
I realise all people do things differently, but I would really appreciate people's views/exeriences.
Link - http://www.mkksports.co.uk/
Thanks in advance
In this case, the backgrounds and logo are made elsewhere and referenced by the CSS. The buttons in the header (including their orange button look on hover) are pure css. The teaser images' ("UNI SHOP", "BESPOKE SERVICES, etc.) overlay text and formatting are pure css.
The idea: if you can do it in CSS, do. It makes it much easier to change the whole site at once, and keep it consistent. For example, you wouldn't need the same designer's original photoshop file to make a completely new teaser image. Just wrap the new image in the right class, copying the markup, and you've got a new identically-styled teaser with the exact same formatting effect.
You should always use CSS for styling whenever possible. CSS loads much faster and uses less bandwidth than loading a bunch of images. Any time you can use CSS to get the same effect as you could with a graphic design program, you should.
With CSS3 and HTML5 it's quite easy to accomplish a lot of the looks that used to require images.
That being said, the site you referenced is using background images for the navigation/page background, but they are using CSS for the hover effect on the links in the menu.
Related
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 8 years ago.
Improve this question
When I want to move anything (text, images, etc.) in CSS, I find myself using margin-top with ridiculous values like 1000 or even higher. Sometimes I set the position to fixed and I can move the object vertically, but not horizontally.
I guess what I'm trying to say is what is the best way to move things around in CSS? Set the position to fixed? Use "top" instead of "margin-top?" When to use padding. When to use display. etc.
I'm asking this because 1. I'm new to website design and 2. the practice site that I'm making keeps getting messed up (ex. things go behind other things, the site only works in full scree (half screen totally breaks it))
You're question is way too broad. There are so many factors that come into play, it would be impossible to answer. It's kind of like coming onto a car forum and asking "How do I rebuild this car? Every time I unbolt a part of the car, it breaks." There is a lot you have to learn before you can dive in and start creating a site, just like there is a lot you have to learn about cars before you can start rebuilding them. You have to understand how CSS and HTML layout works.
I recommend you start with a basic course, a great one that's recommended often is CodeAcademy, you can try it here: http://www.codecademy.com/tracks/web
By the way, you do not want to use position and/or margin to layout your page. That would be a nightmare to maintain. You have to use a combination of many different elements and properties to properly layout a page. In the beginning it will be very confusing, but if you stick with it, you will learn it.
ok........
1st you need to learn html flow. You can position a lot of elements naturally using div and spans. Css should be used to modify width/ height etc for the majority of elements in this way. You should stick to natural flow as much as possible. Fixed position elements will remain fixed even when scrolling (unless inside div & some css...) so thats not really a solution for every element on your page.
Make a little effort to learn yourself and you will have it, unless you have a specific example of something you cant do, you should focus on tutorials of which there are plenty of.
Concentrate on html 1st and then start css tutorials such as width, dimensions of single elements, then classes of elements (elements with the same style).
Btw just to repeat myself..........position: relative; to keep in the flow, this trys to fit elements in a top to bottom and a little bit horizontal when you ask for it (span/ float: left/right;) enjoy!
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 9 years ago.
Improve this question
I am not a web programmer, but we all find ourselves needing to mess around with html, css, and javascript at some point. And every time I do, I find myself hating CSS's guts. This is almost entirely related to positioning. Many things that I think should be easy and straightforward turn out to be very difficult or even (seemingly) impossible.
Take centering something in the user's browser/interface. I recently wanted to do a "Coming Soon…" temporary splash page (cliche, I know), and I wanted a tiny piece of text or image to land right in the middle of the user's browser. Conceptually this couldn't be simpler, and yet to actually achieve this in CSS you have to do all kinds of tricks. I'm not asking how you achieve this. There are several tutorials/examples, including these two excellent ones:
http://css-tricks.com/centering-in-the-unknown/
http://www.dynamicsitesolutions.com/css/center-page-content-horizontally-and-vertically/
What I want to understand is why it is so complex to achieve something so basic? Why can't I just make a div (or whatever) that spans the height and width of the browser, and align something in the middle of that? Why do you have to come up with entire frameworks like Bootstrap (which, in my opinion, are still incomplete and hacky) to do things that should be a part of the philosophy of the implementation?
The people that come up with the CSS standard are much smarter than I am, and there must be a reason for this. What is their logic or philosophy behind how it is implemented? What am I missing? I want to understand, so at least next time I try to implement something I won't fool myself into thinking "This will be easy" when, I assume, there is a reason it can't be.
Because HTML/CSS is limited by its roots: ltr horizontal flow
When we first started making websites, HTML was designed as a simple way to make content flow, like in a magazine or a book. Maybe it would have images or embedded audio, but there was no way to foresee at the time that we would have websites in the millions of lines of code. HTML was designed with horizontal flow, not vertical flow in mind.
There are other examples of this:
It is comparatively difficult to vertically align text to the center or bottom of a page, this requires a lot of unintuitive understanding whereas central alignment on the horizontal plane is a simple text-align='center';
Tables are defined with <tr> table row tags, not <tc> table column tags.
Ever tried making a <DIV>, especially one wrapped inside other divs, the full height of the page (not screen)? It's not as easy as you'd think.
An element with height:100% is not automatically the same height as your browser, only the height of your content. See this example.
Because of the need to maintain backwards compatibility, browsers continue to use rendering engines based on left-to-right, top to bottom rendering. It seems unlikely that an alternative to HTML will take the web by storm any time soon, so we're probably stuck with this paradigm for the foreseeable future.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
My initial searching indicates that for security reasons I might not be able to do this, but I'll ask anyway. How can I get the color of any specified pixel on a web page?
To be more specific, this is my own web page which contains background-color, images, css-modified-elements. I need to know the color of a specific pixel on the fully rendered web page. The info can't be from a screen-grab, because I want to modify my fully rendered page.
Ouch !!!
Did someone really “minus 1” me for asking genuine question?
Tough crowd!
To be more specific:
I want to add a user-moveable canvas element to the web page that visually alters the part of the web page that the canvas is hovering over. Think of the canvas element as a magnifying glass that the user can move across the web page. But the actual effect I want the canvas element to produce is a color-filter (hence the need for the underlying colors).
Can't be done w/ script+tricks. Maybe via a plugin
If you can set up a server-side browser to render pages for you - that might work.
https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
Ok a few more details here....
With Chrome plug in you can load up your page, and use the little dropper tool to select a segment of the page that you are interested in finding out the color. It's straight forward, but to your "Edit" its sort of screen scraping. Not sure if you can or can't use chrome.
If you can't use a plug-in, do you have the ability to select the html element via right click?
You could use the html2canvas library to rerender your webpage to a canvas whenever your DOM updates, then grab the pixel information from the canvas.
However, it sounds like what you're trying to achieve might be possible to do with css filters. Here's a demo of what css filters can do.
You would need to render two layers with the same HTML, where the top layer has the filter applied to it and is cropped to cover only the desired area.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
Can anyone give me any advice or direct me to a good tutorial on converting an Adobe Illustrator template to a WordPress template?
I've read a lot about doing this by using slices, but I've also heard sites built with slices are a nightmare to maintain. This site will be updated frequently so I can't have that problem. Also, the site's background has a gradient, so I'm not sure how slices would work with that.
If I have to use slices to make this template though I could go with a solid color, but the gradient is preferred.
Thanks
Use slices just to cut up your site in a way that allows you to use current CSS techniques. For example, a small slice for a background image that's a seamless pattern, or a thin, tall slice for a vertical gradient (you'd use CSS to repeat-x it across). You'll probably need to hide various layers as you slice to get the right bits and pieces. You've probably read folks who have had issues with the old concept of slicing a design - where the whole site was built on pieced together images, and making edits was a pain as a result.
If you just use slicing to basically grab the individual elements you need (read up on image spites as well for efficiency!) and background images - just the parts you need whereever you can, because you can repeat vertically and horizontally - you'll be just fine.
You are going to want to break down all of the elements of your illustrator template. And then build that from the ground up on creating your Wordpress theme. Since you have a gradient background, slicing it all up would not be the best option. Take all of the elements of this Illustrator template and save them separately.
Then I would familiarize with the steps on turning these elements into a fully function Wordpress theme
http://wp.tutsplus.com/articles/news/building-wordpress-themes-from-scratch-a-new-book-from-one-of-our-wptuts-authors/
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 9 years ago.
Improve this question
My client asked me to create a site for our company and sent 5 different logos in 5 different colors. He wants to add different color logo on each page. Say user will open about page then he'll get green color logo, contact page then blue color logo, home will have orange color logo and so on.
Personally I don't want to use multiple logos in this website, but to convince him I need reasons why this is not a good practice.
So, I wanted to know about the usability guidelines for website logo. I googled a lot but didn't able to find such blog post or articles.
Please help, thanks!
Well, if the logo doesn't rely on color much and is strong enough to take this kind of beating, then it might actually work.
Anyway, here's a few arguments against changing colors:
The logo needs to integrate well with the rest of the site to be aesthetically pleasing, so the colors of the stylesheet need to be in synch with the logo. If the logo's colors change, then the rest of the style must follow - this will increase the cost for development and maintenance.
Maintaining the logos themselves also takes more time - we can't simply make a single template with the logo and a menu; instead, we need 5 dedicated templates, or we need to make the logo part dynamic. Again, increased cost for development and maintenance. Also, if the logo ever needs to change, the graphic designer in charge will have to do the same thing 5 times instead of once.
Color is one of the most basic things humans recognize, and it has a strong connection with the subconscious. Using one logo and one color set consistently throughout the entire presence leads to a stronger sense of familiarity.
Changing colors might produce a short moment of confusion to the user, a feeling of accidentally having left the site, a second of "oh, I must have done something wrong" - not good feelings anyway. You don't want to confuse the user, you want a slick, coherent, comfortable, no-surprises experience.
It is more like a marketing question than a usability.
Web site branding needs a permanent visual sign. This is the logo. Permanence means to color also. Changing color page by page strongly confuse visitors.